Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Declare & Use CSS Custom Properties #3146

Merged
merged 20 commits into from
Nov 4, 2021
Merged

Declare & Use CSS Custom Properties #3146

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
0d07779
Declare custom CSS properties when using `Button--color` mixin.
SychO9 Oct 19, 2021
a9e3ed9
Remove dead CSS code
SychO9 Oct 19, 2021
642ca74
Switch from using `Less` variables to CSS vars where possible
SychO9 Oct 19, 2021
3bfb4c7
Merge branch 'master' into sm/css-custom-properties
SychO9 Oct 29, 2021
ff2782a
Declare and use custom properties for color variations
SychO9 Oct 30, 2021
6e6cc5a
chore: refactor Button color mixins and add docblocks
SychO9 Oct 30, 2021
0fe833a
chore: extract button color mixins to a separate file
SychO9 Oct 30, 2021
40db595
chore: refactor `light-contents` mixin to use css variables
SychO9 Oct 30, 2021
8f700c3
a few more color variables
SychO9 Oct 31, 2021
ea13750
more variable conversion
SychO9 Oct 31, 2021
5597caa
fix: header colors aren't the same as light header colors
SychO9 Nov 1, 2021
0888891
chore: reorganize root declarations
SychO9 Nov 1, 2021
c24d0fe
chore: indentation
SychO9 Nov 1, 2021
983f7f4
chore: Last bits of custom css properties
SychO9 Nov 2, 2021
2003259
chore: Declare then use inverted button colors
SychO9 Nov 2, 2021
164cf3a
Merge branch 'master' into sm/css-custom-properties
SychO9 Nov 2, 2021
40ed428
chore: tweak calculations
SychO9 Nov 4, 2021
06ff16a
chore: tweak naming
SychO9 Nov 4, 2021
b327085
chore: tweak naming
SychO9 Nov 4, 2021
93e017d
Update less/common/App.less
SychO9 Nov 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Declare and use custom properties for color variations
  • Loading branch information
@SychO9
SychO9 committed Oct 30, 2021
commit ff2782a1d599d2a24799042ec762666824bfddee
2 changes: 1 addition & 1 deletion less/admin/PermissionsPage.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,6 @@
}

&:hover {
background: lighten(@control-bg, 3%);
background: var(--control-bg-light);
SychO9 marked this conversation as resolved.
Show resolved Hide resolved
}
}
4 changes: 2 additions & 2 deletions less/admin/UsersListPage.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@
}

&--shaded {
background: darken(@body-bg, 3%);
background: var(--body-bg-dark);
SychO9 marked this conversation as resolved.
Show resolved Hide resolved

& when (@config-dark-mode = true) {
background: lighten(@body-bg, 5%);
background: var(--body-bg-light);
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions less/common/Checkbox.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,12 +111,12 @@
color: var(--muted-more-color) !important;

&.on .Checkbox-display {
background: fade(#58a400, 0.5);
background: transparent;
}
&.off .Checkbox-display {
background: fade(@control-bg, 0.5);
background: transparent;
SychO9 marked this conversation as resolved.
Show resolved Hide resolved
}
.LoadingIndicator {
color: darken(@muted-color, 50%);
color: var(--muted-color-extra-dark);
}
}
2 changes: 1 addition & 1 deletion less/common/Table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@

&.highlighted .Checkbox, .Checkbox:hover {
&:not(.disabled) {
background: darken(@control-bg, 4%);
background: var(--control-bg-dark);
}
}
}
Expand Down
15 changes: 11 additions & 4 deletions less/common/root.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,24 @@
--primary-color: @primary-color;
--secondary-color: @secondary-color;

--body-bg: @body-bg; // <--
--body-bg: @body-bg;
--body-bg-dark: darken(@body-bg, 3%);
--body-bg-light: lighten(@body-bg, 5%);
--body-bg-faded: fade(@body-bg, 93%);
--text-color: @text-color;
--link-color: @link-color;
--heading-color: @heading-color;

--muted-color: @muted-color; // <--
--muted-more-color: @muted-more-color; // <--
--muted-color: @muted-color;
--muted-color-light: lighten(@muted-color, 10%);
--muted-color-extra-dark: darken(@muted-color, 50%);
--muted-more-color: @muted-more-color;

--shadow-color: @shadow-color;

--control-bg: @control-bg; // <--
--control-bg: @control-bg;
--control-bg-light: lighten(@control-bg, 3%);
--control-bg-dark: darken(@control-bg, 4%);
--control-color: @control-color; // <--
--control-danger-bg: @control-danger-bg;
--control-danger-color: @control-danger-color;
Expand Down
4 changes: 2 additions & 2 deletions less/forum/Composer.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
left: 0;
right: 0;
bottom: 0;
background: fade(@body-bg, 90%);
background: var(--body-bg-faded);
display: none;
border-radius: @border-radius @border-radius 0 0;

Expand Down Expand Up @@ -225,7 +225,7 @@
}
.Composer {
border-radius: @border-radius @border-radius 0 0;
background: fade(@body-bg, 95%);
background: var(--body-bg-faded);
position: relative;
height: 300px;
transition: background 0.2s, box-shadow 0.2s;
Expand Down
4 changes: 2 additions & 2 deletions less/forum/Scrubber.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
}
.Scrubber-unread {
position: absolute;
border-left: 1px solid lighten(@muted-color, 10%);
border-left: 1px solid var(--muted-color-light);
width: 100%;
background-image: linear-gradient(to right, var(--control-bg), fade(@control-bg, 0) 10px, fade(@control-bg, 0));
background-image: linear-gradient(to right, var(--control-bg), transparent 10px, transparent);
display: flex;
align-items: center;
color: var(--muted-color);
Expand Down