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

Improve basic button and label styles (#14119)

Browse source 
* Improve disabled styles for repo buttons

- Simplify disabled styling of label by matching for the disabled
  attribute.
- Raise fomantic disabled opacity from .45 to .55 to for more contrast.
- Use CSS vars for basic button styles.

* restore clickability on label

* color tweaks and remove arc-green style

* slightly reduce button size

* consolidate vars

* also cover active class

* slightly more distinct active class

* remove useless rule
This commit is contained in:
silverwind 2020-12-27 11:53:53 +01:00 • committed by GitHub
parent dd08853b10
commit fe403725f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 70 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

56
web_src/less/_base.less
View file

@ -6,6 +6,7 @@
/* other variables */
--fonts-regular: var(--fonts-proportional), var(--fonts-emoji);
--border-radius: .28571429rem;
--opacity-disabled: .55;
--color-primary: #4183c4;
--color-primary-dark-1: #3876b3;
--color-primary-dark-2: #31699f;
@ -96,13 +97,10 @@
--color-input-border: #dedede;
--color-input-border-hover: #cecece;
--color-navbar: #f8f8f8;
--color-label: #00000010;
--color-label-hover: #00000015;
--color-label-basic: #00000008;
--color-label-basic-hover: #00000015;
--color-label-border: #00000018;
--color-hover: #0000000a;
--color-active: #00000010;
--color-light: #00000004;
--color-light-border: #0000001d;
--color-hover: #0000000d;
--color-active: #00000012;
--color-menu: #ffffff;
--color-card: #ffffff;
--color-markdown-table-row: #00000008;
@ -1382,13 +1380,13 @@ i.icon.centerlock {
.ui.label {
padding: .3em .5em;
background: var(--color-label);
background: var(--color-light);
color: var(--color-text-light);
}
.ui.labels a.label:hover,
a.ui.label:hover {
background: var(--color-label-hover);
background: var(--color-hover);
color: var(--color-text);
}
@ -1556,7 +1554,7 @@ a.ui.label:hover {
.ui.button {
background: var(--color-button);
border: 1px solid var(--color-secondary);
border: 1px solid var(--color-light-border);
box-shadow: none !important;
color: var(--color-text);
}
@ -1578,6 +1576,34 @@ a.ui.label:hover {
border-left: none;
}
.ui.basic.buttons .button,
.ui.basic.button {
color: var(--color-text-light);
background: var(--color-light);
}
.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
color: var(--color-text);
background: var(--color-hover);
}
.ui.basic.buttons .button:focus,
.ui.basic.button:focus,
.ui.basic.buttons .button:active,
.ui.basic.button:active,
.ui.basic.buttons .active.button,
.ui.basic.active.button,
.ui.basic.buttons .active.button:hover,
.ui.basic.active.button:hover {
color: var(--color-text);
background: var(--color-active);
}
.ui.labeled.button > .label {
border-color: var(--color-light-border);
}
.ui.blue.button,
.ui.blue.buttons .button,
.ui.primary.button,
@ -1640,16 +1666,16 @@ a.ui.label:hover {
.ui.basic.labels .label,
.ui.basic.label {
background: var(--color-label-basic);
border-color: var(--color-label-border);
color: var(--color-text);
background: var(--color-light);
border-color: var(--color-light-border);
color: var(--color-text-light);
}
.ui.basic.labels a.label:hover,
a.ui.basic.label:hover {
color: var(--color-text);
border-color: var(--color-label-border);
background: var(--color-label-basic-hover);
border-color: var(--color-light-border);
background: var(--color-hover);
}
.ui.label > img {