finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Replace blue button and label classes with primary (#19763)

Browse source 
* make blue really blue

* replace blue button and label classes with primary

* add --color-blue-dark

* add light color variants, tweak a few colors

* fix colors

* add comment

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind 2022-05-20 00:08:08 +02:00 • committed by GitHub
parent ce52514762
commit 9da3d78e74
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
61 changed files with 132 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web_src/js/features/comp/ReactionSelector.js
View file

@ -16,7 +16,7 @@ export function initCompReactionSelector(parent) {
if ($(this).hasClass('disabled')) return;
const actionURL = $(this).hasClass('item') ? $(this).closest('.select-reaction').data('action-url') : $(this).data('action-url');
const url = `${actionURL}/${$(this).hasClass('blue') ? 'unreact' : 'react'}`;
const url = `${actionURL}/${$(this).hasClass('primary') ? 'unreact' : 'react'}`;
$.ajax({
type: 'POST',
url,

2
web_src/js/features/repo-home.js
View file

@ -84,8 +84,6 @@ export function initRepoTopicBar() {
transition: 'horizontal flip',
duration: 200,
variation: false,
blue: true,
basic: true,
},
className: {
label: 'ui small label'

59
web_src/less/_base.less
View file

@ -71,8 +71,23 @@
--color-pink: #e03997;
--color-brown: #a5673f;
--color-grey: #888888;
--color-black: #1b1c1d;
--color-gold: #a1882b;
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */
--color-red-light: #e45e5e;
--color-orange-light: #f59555;
--color-yellow-light: #fcce46;
--color-olive-light: #d3e942;
--color-green-light: #46de6a;
--color-teal-light: #08fff4;
--color-blue-light: #51a5e3;
--color-violet-light: #8b67d7;
--color-purple-light: #bb64d8;
--color-pink-light: #e86bb1;
--color-brown-light: #c58b66;
--color-grey-light: #a6a6a6;
--color-gold-light: #cfb34a;
/* other colors */
--color-black: #1b1c1d;
--color-white: #ffffff;
--color-diff-removed-word-bg: #fdb8c0;
--color-diff-added-word-bg: #acf2bd;
@ -887,19 +902,19 @@ a.ui.card:hover,
color: inherit !important;
&:hover {
color: #e67777 !important;
color: var(--color-red-light) !important;
}
}
}
&.blue {
color: var(--color-primary) !important;
color: var(--color-blue) !important;
a {
color: inherit !important;
&:hover {
color: var(--color-primary-dark-1) !important;
color: var(--color-blue-light) !important;
}
}
}
@ -1078,11 +1093,11 @@ a.ui.card:hover,
}
&.blue {
background-color: var(--color-primary) !important;
background-color: var(--color-blue) !important;
}
&.black {
background-color: #444444;
background-color: var(--color-black) !important;
}
&.grey {
@ -1133,11 +1148,11 @@ a.ui.card:hover,
}
&.blue {
border-color: var(--color-primary) !important;
border-color: var(--color-blue) !important;
}
&.black {
border-color: #444444;
border-color: var(--color-black) !important;
}
&.grey {
@ -1748,59 +1763,55 @@ a.ui.label:hover {
background: var(--color-hover);
}
.ui.blue.button,
.ui.blue.buttons .button,
.ui.primary.button,
.ui.primary.buttons .button {
background-color: var(--color-primary) !important;
}
.ui.blue.button:hover,
.ui.blue.buttons .button:hover,
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
background-color: var(--color-primary-dark-2) !important;
}
.ui.blue.button:focus,
.ui.blue.buttons .button:focus,
.ui.primary.button:focus,
.ui.primary.buttons .button:focus {
background-color: var(--color-primary-dark-3) !important;
}
.ui.basic.blue.button,
.ui.basic.blue.buttons .button,
.ui.basic.primary.button,
.ui.basic.primary.buttons .button {
box-shadow: inset 0 0 0 1px var(--color-primary) !important;
color: #fff !important;
}
.ui.basic.blue.button:hover,
.ui.basic.blue.buttons .button:hover,
.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover {
box-shadow: inset 0 0 0 1px var(--color-primary-dark-2) !important;
}
.ui.basic.blue.button:focus,
.ui.basic.blue.buttons .button:focus,
.ui.basic.primary.button:focus,
.ui.basic.primary.buttons .button:focus {
box-shadow: inset 0 0 0 1px var(--color-primary-dark-3) !important;
}
.ui.blue.label,
.ui.blue.labels .label,
.ui.basic.secondary.buttons .button,
.ui.basic.secondary.button {
color: var(--color-secondary-dark-6) !important;
}
.ui.basic.secondary.buttons .button:hover,
.ui.basic.secondary.button:hover,
.ui.basic.secondary.buttons .button:active,
.ui.basic.secondary.button:active {
color: var(--color-secondary-dark-8) !important;
}
.ui.primary.label,
.ui.primary.labels .label {
background-color: var(--color-primary) !important;
border-color: var(--color-primary-dark-2) !important;
}
.ui.basic.labels .blue.label,
.ui.ui.ui.basic.blue.label,
.ui.basic.labels .primary.label,
.ui.ui.ui.basic.primary.label {
background: transparent !important;

6
web_src/less/_repository.less
View file

@ -301,7 +301,7 @@
font-weight: normal;
}
.ui.tiny.blue.buttons {
.ui.tiny.primary.buttons {
@media @mediaSm {
width: 100%;
}
@ -1168,7 +1168,7 @@
border-color: var(--color-secondary-dark-1) !important;
}
.ui.label.basic.blue {
.ui.label.basic.primary {
background-color: var(--color-reaction-active-bg) !important;
border-color: var(--color-primary-alpha-80) !important;
}
@ -2411,7 +2411,7 @@
color: var(--color-primary) !important;
}
.ui.label.basic.blue {
.ui.label.basic.primary {
background-color: var(--color-reaction-active-bg) !important;
border-color: var(--color-secondary) !important;
}