Updated dark mode colors

This commit is contained in:
Peter Zimon 2022-05-17 11:38:34 +02:00
parent 3dec09d7f7
commit 60568547e3

View File

@ -76,21 +76,21 @@
:root {
/* Primary colours */
--black: #fafafb;
--white: #111213;
--white: #151719;
--lime: #B5FF18;
--darkgrey: #e8ebed;
--middarkgrey: #aeb5bc;
--midgrey: #80868e;
--midlightgrey:#60666c;
--lightgrey: #2b2d31;
--whitegrey: #1c1e21;
--darkgrey: #E3E6E8;
--middarkgrey: #A9B0B7;
--midgrey: #7B8189;
--midlightgrey:#5B6167;
--lightgrey: #26282B;
--whitegrey: #17191C;
--blue: color-mod(#3eb0ef l(+5%) s(+5%));
--main-bg-color: #151719;
--dark-main-bg-color: #151719;
--hairline-color-1: #272a30;
--hairline-color-2: #626D79;
--main-bg-color: #101114;
--dark-main-bg-color: #101114;
--hairline-color-1: #22252A;
--hairline-color-2: #5E6874;
--main-color-content-greybg: var(--whitegrey);
--list-color-divider: var(--whitegrey-l1);
@ -166,6 +166,10 @@ input:focus,
background: var(--dark-main-bg-color);
}
.settings-menu-container {
border-color: var(--hairline-color-1);
}
.settings-menu-container .settings-menu-pane {
background: var(--dark-main-bg-color);
}
@ -484,13 +488,13 @@ input:focus,
color: var(--black);
}
.fullscreen-modal-background {
.fullscreen-modal-background, .epm-backdrop {
background: #000;
}
.epm-modal .modal-content,
.modal-content {
background: var(--whitegrey);
background: color-mod(var(--white) l(-1%));
}
.seo-preview-title {
@ -662,7 +666,7 @@ input:focus,
}
.gh-nav-list a {
color: color-mod(var(--midgrey));
color: color-mod(var(--middarkgrey-d1));
}
.gh-nav-list a:not(.active):not(.gh-secondary-action):hover,
@ -743,6 +747,10 @@ input:focus,
background-color: transparent;
}
.gh-setting-header {
border-color: var(--hairline-color-1);
}
.gh-settings-main-grid .gh-setting-group span {
background: color-mod(var(--dark-main-bg-color) l(+2%));
}
@ -780,13 +788,13 @@ input:focus,
.kg-settings-panel {
background-color: var(--lightgrey-d1);
box-shadow:
0px -1px 10px rgba(0, 0, 0, 0.2),
0px 2.8px 2.2px rgba(0, 0, 0, 0.1),
0px 6.7px 5.3px rgba(0, 0, 0, 0.1),
0px 12.5px 10px rgba(0, 0, 0, 0.12),
0px 22.3px 17.9px rgba(0, 0, 0, 0.12),
0px 41.8px 33.4px rgba(0, 0, 0, 0.16),
0px 100px 80px rgba(0, 0, 0, 0.2)
0px -1px 10px rgba(0, 0, 0, 0.1),
0px 2.8px 2.2px rgba(0, 0, 0, 0.05),
0px 6.7px 5.3px rgba(0, 0, 0, 0.05),
0px 12.5px 10px rgba(0, 0, 0, 0.08),
0px 22.3px 17.9px rgba(0, 0, 0, 0.08),
0px 41.8px 33.4px rgba(0, 0, 0, 0.08),
0px 100px 80px rgba(0, 0, 0, 0.1)
;
}
@ -912,6 +920,11 @@ input:focus,
}
/* Members */
.gh-members-help-card,
.gh-offers-help-card {
background: var(--dark-main-bg-color);
}
.gh-members-chart-header {
background: var(--white);
}
@ -987,10 +1000,18 @@ input:focus,
}
/* Offers */
.gh-btn-green svg {
fill: #fff !important;
}
.gh-offers-list-cta .discount-bubble {
color: var(--midgrey-d2);
}
.gh-offers-help-card .gh-btn {
background: var(--whitegrey) !important;
}
/* Portal */
.gh-portal-settings-maintabs {
border: 1px solid color-mod(var(--darkgrey) l(-27%) blackness(+15%));
@ -1070,11 +1091,11 @@ input:focus,
}
.gh-list-scrolling thead th:first-child {
background: linear-gradient(90deg, rgba(21,23,25,1) 90%, rgba(21,23,25,0) 100%);
background: linear-gradient(90deg, rgba(16,17,20,1) 90%, rgba(16,17,20,0) 100%);
}
.gh-list-scrolling tbody .gh-list-data:first-child {
background: linear-gradient(90deg, rgba(21,23,25,1) 90%, rgba(21,23,25,0) 100%);
background: linear-gradient(90deg, rgba(16,17,20,1) 90%, rgba(16,17,20,0) 100%);
}
.gh-filter-builder .gh-filters {
@ -1122,13 +1143,8 @@ kbd {
border-color: #394047;
}
.gh-dashboard .gh-dashboard-box.is-secondary {
border: 1px solid #2b2d31;
}
.gh-dashboard .gh-dashboard-box.is-secondary,
.gh-dashboard .gh-dashboard-box.is-faded {
background: transparent;
.gh-dashboard .gh-dashboard-box.is-secondary .gh-dashboard-resource-box {
background: var(--main-bg-color);
}
.gh-dashboard .gh-dashboard-column {
@ -1159,11 +1175,11 @@ kbd {
}
.gh-dashboard-recents .gh-dashboard-list-item:hover {
background: rgba(28, 30, 33, 0.7);
background: linear-gradient(90deg, rgba(21,23,25,0) 0%, rgba(21,23,25,1) 100%);
}
.gh-dashboard-resource .gh-dashboard-list-item:hover {
background: rgba(28, 30, 33, 0.3);
background: transparent;
}
.gh-dashboard-community .gh-dashboard-resource-footer {