Skip to content

Commit

Permalink
Make sidebar CSS use semantic vars (#1674)
Browse files Browse the repository at this point in the history
  • Loading branch information
Cees de Groot committed Mar 4, 2023
1 parent e24cc25 commit 1e73873
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 46 deletions.
21 changes: 19 additions & 2 deletions assets/css/custom-props/theme-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,23 @@ body.dark {

--success: var(--green-lightened-10);

--sidebarButton: var(--gray50);
--sidebarButtonBackground: linear-gradient(180deg, var(--gray900) 20%, var(--gray900-opacity-50) 70%, var(--gray900-opacity-0) 100%);
--sidebarButtonBackground: linear-gradient(180deg,
var(--gray900) 20%,
var(--gray900-opacity-50) 70%,
var(--gray900-opacity-0) 100%);
--sidebarAccentMain: var(--gray50);
--sidebarBackground: var(--gray800);
--sidebarGradient: linear-gradient(var(--sidebarBackground),
var(gray800-opacity-0));
--sidebarHeader: var(--gray700);
--sidebarMuted: var(--gray300);
--sidebarHover: var(--white);
--sidebarScrollbarThumb: var(--coldGray);
--sidebarScrollbarTrack: var(--sidebarBackground);
--sidebarSearch: var(--gray700);
--sidebarSubheadings: var(--gray400);
--sidebarItem: var(--gray200);
--sidebarInactiveItemMarker: var(--gray600);
--sidebarLanguageAccentBar: var(--main);
--sidebarActiveItem: var(--main-lightened-10);
}
21 changes: 19 additions & 2 deletions assets/css/custom-props/theme-light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,23 @@

--success: var(--green);

--sidebarButton: var(--gray50);
--sidebarButtonBackground: linear-gradient(180deg, var(--white) 20%, var(--white-opacity-50) 70%, var(--white-opacity-0) 100%);
--sidebarButtonBackground: linear-gradient(180deg,
var(--gray900) 20%,
var(--gray900-opacity-50) 70%,
var(--gray900-opacity-0) 100%);
--sidebarAccentMain: var(--gray50);
--sidebarBackground: var(--gray800);
--sidebarGradient: linear-gradient(var(--sidebarBackground),
var(gray800-opacity-0));
--sidebarHeader: var(--gray700);
--sidebarMuted: var(--gray300);
--sidebarHover: var(--white);
--sidebarScrollbarThumb: var(--coldGray);
--sidebarScrollbarTrack: var(--sidebarBackground);
--sidebarSearch: var(--gray700);
--sidebarSubheadings: var(--gray400);
--sidebarItem: var(--gray200);
--sidebarInactiveItemMarker: var(--gray600);
--sidebarLanguageAccentBar: var(--main);
--sidebarActiveItem: var(--main-lightened-10);
}
84 changes: 42 additions & 42 deletions assets/css/sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
font-family: var(--sansFontFamily);
font-size: 16px;
line-height: 18px;
background-color: var(--gray800);
color: var(--gray50);
background-color: var(--sidebarBackground);
color: var(--sidebarAccentMain);
overflow: hidden;
scrollbar-color: var(--coldGray) var(--gray800);
scrollbar-color: var(--sidebarScrollbarThumb) var(--sidebarScrollbarTrack);
}

.sidebar .gradient {
background: linear-gradient(var(--gray800), var(--gray800-opacity-0));
background: var(--sidebarGradient);
height: 20px;
margin-top: -20px;
pointer-events: none;
Expand All @@ -28,19 +28,19 @@
}

.sidebar a {
color: var(--gray50);
color: var(--sidebarAccentMain);
text-decoration: none;
transition: color .3s ease-in-out;
}

.sidebar a:hover {
color: var(--white);
color: var(--sidebarHover);
}

.sidebar .sidebar-header {
margin: 12px;
border-radius: 4px;
background-color: var(--gray700);
background-color: var(--sidebarHeader);
width: 276px;
}

Expand All @@ -63,7 +63,7 @@
font-weight: 700;
font-size: 20px;
line-height: 30px;
color: var(--gray50);
color: var(--sidebarAccentMain);
margin: 0;
padding: 0;
max-width: 230px;
Expand All @@ -78,7 +78,7 @@
font-weight: 300;
font-size: 16px;
line-height: 20px;
color: var(--gray300);
color: var(--sidebarMuted);
}

.sidebar .sidebar-projectVersionsDropdown {
Expand All @@ -90,7 +90,7 @@
-webkit-appearance: none;
appearance: none;
background-color: transparent;
color: var(--white);
color: var(--sidebarHover);
z-index: 2;
}

Expand All @@ -109,7 +109,7 @@
content: "\25bc";
z-index: 1;
font-size: 8px;
color: var(--white);
color: var(--sidebarHover);
}

.sidebar .sidebar-projectVersionsDropdown::-ms-expand {
Expand All @@ -126,7 +126,7 @@
text-transform: uppercase;
font-weight: 300;
font-size: 14px;
color: var(--gray300);
color: var(--sidebarMuted);
}

.sidebar .sidebar-listNav li {
Expand All @@ -142,11 +142,11 @@
}

.sidebar .sidebar-listNav li:is(:hover, .selected) a {
border-color: var(--main);
border-color: var(--sidebarLanguageAccentBar);
}

.sidebar .sidebar-listNav li:is(:hover, .selected) a {
color: var(--gray50);
color: var(--sidebarAccentMain);
}

.sidebar .sidebar-search {
Expand All @@ -155,7 +155,7 @@

.sidebar .sidebar-search.selected .search-button,
.sidebar .sidebar-search .search-button:hover {
color: var(--main);
color: var(--sidebarLanguageAccentBar);
opacity: 1;
}

Expand All @@ -166,7 +166,7 @@

.sidebar .sidebar-search .search-button {
font-size: 14px;
color: var(--gray50);
color: var(--sidebarAccentMain);
background-color: transparent;
border: none;
cursor: pointer;
Expand All @@ -181,7 +181,7 @@

.sidebar .sidebar-search .search-close-button {
font-size: 16px;
color: var(--gray50);
color: var(--sidebarAccentMain);
background-color: transparent;
border: none;
cursor: pointer;
Expand All @@ -205,10 +205,10 @@
}

.sidebar .sidebar-search .search-input {
background-color: var(--gray700);
background-color: var(--sidebarSearch);
border: none;
border-radius: 4px;
color: var(--gray50);
color: var(--sidebarAccentMain);
margin-left: 12px;
padding: 8px 6px 8px 38px;
width: 276px;
Expand Down Expand Up @@ -285,7 +285,7 @@
font-weight: bold;
font-size: .9em;
line-height: 1.8em;
color: var(--gray400);
color: var(--sidebarSubheadings);
padding-left: 15px;
}

Expand All @@ -295,13 +295,13 @@
font-size: .8em;
margin: 2em 0 0;
line-height: 1.8em;
color: var(--gray400);
color: var(--sidebarSubheadings);
padding-left: 15px;
}

.sidebar #full-list li a {
padding: 3px 0 3px 15px;
color: var(--gray200);
color: var(--sidebarItem);
overflow: hidden;
}

Expand All @@ -318,23 +318,23 @@
}

.sidebar #full-list li .current-section > a {
color: var(--main-lightened-10);
color: var(--sidebarActiveItem);
}

.sidebar #full-list > li > a:hover {
border-left: 3px solid var(--main);
border-left: 3px solid var(--sidebarLanguageAccentBar);
padding-left: 12px;
}

.sidebar #full-list > li.current-page > a {
color: var(--main-lightened-10);
border-left: 3px solid var(--main);
color: var(--sidebarActiveItem);
border-left: 3px solid var(--sidebarLanguageAccentBar);
padding-left: 12px;
}

.sidebar #full-list > li.current-page > a:after,
.sidebar #full-list > li.current-page {
color: var(--main-lightened-10);
color: var(--sidebarActiveItem);
}

.sidebar #full-list > li:last-child {
Expand All @@ -357,23 +357,23 @@
line-height: 16px;
padding: 0 8px;
margin-right: 0;
color: var(--gray50);
color: var(--sidebarAccentMain);
}

.sidebar #full-list ul li.current-hash {
color: var(--main-lightened-10);
color: var(--sidebarActiveItem);
}

.sidebar #full-list ul li.current-hash > a {
color: var(--main-lightened-10);
color: var(--sidebarActiveItem);
}

.sidebar #full-list ul li.current-hash > a:before,
.sidebar #full-list > li > ul > li > a:hover:before {
content: "\2022";
position: absolute;
margin-left: -15px;
color: var(--main-lightened-10);
color: var(--sidebarActiveItem);
}

.sidebar #full-list ul li a {
Expand All @@ -392,11 +392,11 @@
.sidebar #full-list ul li ul li {
margin-right: 0;
height: 20px;
color: var(--gray50);
color: var(--sidebarAccentMain);
}

.sidebar #full-list ul li ul li a {
border-left: 1px solid var(--gray600);
border-left: 1px solid var(--sidebarInactiveItemMarker);
padding: 0 10px;
height: 20px;
}
Expand All @@ -406,16 +406,16 @@
}

.sidebar #full-list ul li ul li > a:hover {
border-color: var(--main);
border-color: var(--sidebarLanguageAccentBar);
}

.sidebar #full-list ul li ul li.current-hash > a {
color: var(--main-lightened-10);
border-color: var(--main);
color: var(--sidebarActiveItem);
border-color: var(--sidebarLanguageAccentBar);
}

.sidebar #full-list ul li ul li.current-hash > a {
color: var(--main-lightened-10);
color: var(--sidebarActiveItem);
margin-left: 0;
}

Expand All @@ -424,13 +424,13 @@
}

::-webkit-scrollbar-track {
background-color: var(--gray800);
background-color: var(--sidebarBackground);
}

.sidebar ::-webkit-scrollbar-thumb {
background-color: var(--coldGray);
background-color: var(--sidebarScrollbarThumb);
border-radius: 10px;
border: 3px solid var(--gray800);
border: 3px solid var(--sidebarBackground);
}

.sidebar-button {
Expand All @@ -442,15 +442,15 @@
}

.sidebar-button:hover {
color: var(--white);
color: var(--sidebarHover);
}

.sidebar-button:is(:active, :hover, :focus) {
outline: none;
}

.sidebar-button {
color: var(--sidebarButton);
color: var(--sidebarAccentMain);
}
.sidebar-closed .sidebar-button {
color: var(--contrast);
Expand Down

0 comments on commit 1e73873

Please sign in to comment.