Increase text contrast

This commit is contained in:
EliverLara
2018-11-26 00:12:59 -06:00
parent 09105e92bc
commit 60afdf9e6a
5 changed files with 481 additions and 481 deletions

View File

@@ -2,9 +2,9 @@ $base_color:#1E2326;
$bg_color:#1A1E21; //252b2f
$main_dark: darken($bg_color, 5%);
$gray: lighten($bg_color, 7%);
$fg_color: #5D5E60;
$fg_color: #76777A;
$dracula: #1e2326;
$topbar_color: lighten($fg_color, 40%);
$topbar_color: lighten($fg_color, 20%);
$lime: #CAE7B9;
$red: #F67E7D;

View File

@@ -5,12 +5,12 @@
stage {
font-family: Roboto, Ubuntu, Cantarell, Sans-Serif;
font-size: 10pt;
color: #5D5E60; }
color: #76777A; }
/* WIDGETS */
/* Buttons */
.button {
color: #5D5E60;
color: #76777A;
background-color: #0f1113;
box-shadow: none;
border: 1px solid #161819;
@@ -27,8 +27,8 @@ stage {
box-shadow: none;
border: 1px solid #161819; }
.button:insensitive {
color: #3c3e41;
background-color: rgba(33, 37, 40, 0.66);
color: #484b4e;
background-color: rgba(36, 40, 43, 0.66);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
border: none;
text-shadow: none;
@@ -49,14 +49,14 @@ stage {
.modal-dialog-linked-button {
padding: 10px;
border: 1px solid #161819;
color: #5D5E60;
color: #76777A;
background: #0f1113;
text-shadow: none;
icon-shadow: none;
box-shadow: none; }
.modal-dialog-linked-button:insensitive {
color: #3c3e41;
background-color: rgba(33, 37, 40, 0.66);
color: #484b4e;
background-color: rgba(36, 40, 43, 0.66);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
border: none;
text-shadow: none;
@@ -100,13 +100,13 @@ StEntry {
border-radius: 2px;
padding: 4px;
border-width: 0;
color: #5D5E60;
color: #76777A;
selection-background-color: #F67E7D;
selected-color: #f7f7f7; }
StEntry:focus {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
StEntry:insensitive {
color: #3c3e41;
color: #484b4e;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
StEntry StIcon.capslock-warning {
icon-size: 16px;
@@ -130,10 +130,10 @@ StScrollBar {
background-color: transparent; }
StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
border-radius: 8px;
background-color: #272b2e;
background-color: #2c3033;
margin: 3px; }
StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
background-color: #505153; }
background-color: #646568; }
StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: #F67E7D; }
@@ -213,7 +213,7 @@ StScrollBar {
.modal-dialog {
border: none;
border-radius: 2px;
color: #5D5E60;
color: #76777A;
background-color: rgba(15, 17, 19, 0.95);
box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); }
.modal-dialog .modal-dialog-content-box {
@@ -230,7 +230,7 @@ StScrollBar {
.modal-dialog .run-dialog-label {
font-size: 11pt;
font-weight: bold;
color: #444546;
color: #5d5e60;
padding-bottom: .4em; }
.mount-dialog-subject,
@@ -254,7 +254,7 @@ StScrollBar {
font-weight: bold; }
.message-dialog-subtitle {
color: black;
color: #121212;
font-weight: bold; }
/* End Session Dialog */
@@ -326,7 +326,7 @@ StScrollBar {
font-weight: bold; }
.end-session-dialog-app-list-item-description {
color: #505153;
color: #696a6d;
font-size: 10pt; }
/* ShellMountOperation Dialogs */
@@ -361,9 +361,9 @@ StScrollBar {
padding-left: 32px; }
.mount-dialog-app-list-item {
color: #444546; }
color: #5d5e60; }
.mount-dialog-app-list-item:hover {
color: #5D5E60; }
color: #76777A; }
.mount-dialog-app-list-item:ltr {
padding-right: 1em; }
.mount-dialog-app-list-item:rtl {
@@ -389,7 +389,7 @@ StScrollBar {
.prompt-dialog .message-dialog-content {
spacing: 16px; }
.prompt-dialog .message-dialog-title {
color: #1e1f1f; }
color: #373839; }
.prompt-dialog-description:rtl {
text-align: right; }
@@ -447,7 +447,7 @@ StScrollBar {
spacing: 20px; }
.audio-selection-device {
border: 1px solid #5D5E60;
border: 1px solid #76777A;
border-radius: 12px; }
.audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
background-color: #F67E7D; }
@@ -473,7 +473,7 @@ StScrollBar {
padding: 10px; }
.extension-dialog .message-dialog-title {
color: #1e1f1f; }
color: #373839; }
/* Inhibit-Shortcuts Dialog */
.inhibit-shortcuts-dialog {
@@ -514,17 +514,17 @@ StScrollBar {
background-color: rgba(246, 126, 125, 0.9);
color: #f7f7f7; }
.popup-menu .popup-menu-item.selected {
background-color: rgba(93, 94, 96, 0.1);
color: #5D5E60; }
background-color: rgba(118, 119, 122, 0.1);
color: #76777A; }
.popup-menu .popup-menu-item:active {
background-color: #F67E7D;
color: #f7f7f7; }
.popup-menu .popup-menu-item:insensitive {
color: rgba(93, 94, 96, 0.5); }
color: rgba(118, 119, 122, 0.5); }
.popup-menu .popup-inactive-menu-item {
color: #5D5E60; }
color: #76777A; }
.popup-menu .popup-inactive-menu-item:insensitive {
color: rgba(93, 94, 96, 0.5); }
color: rgba(118, 119, 122, 0.5); }
.popup-menu.panel-menu {
-boxpointer-gap: 4px;
margin-bottom: 1.75em; }
@@ -572,7 +572,7 @@ StScrollBar {
.osd-window .level {
height: 0.4em;
border-radius: 0.3em;
color: #5D5E60;
color: #76777A;
border: 1px solid #161819;
-barlevel-height: 0.4em;
-barlevel-background-color: rgba(0, 0, 0, 0.5);
@@ -628,9 +628,9 @@ StScrollBar {
.switcher-arrow {
border-color: rgba(0, 0, 0, 0);
color: rgba(93, 94, 96, 0.8); }
color: rgba(118, 119, 122, 0.8); }
.switcher-arrow:highlighted {
color: #5D5E60; }
color: #76777A; }
.input-source-switcher-symbol {
font-size: 34pt;
@@ -667,14 +667,14 @@ StScrollBar {
.ws-switcher-box {
height: 50px;
border: 1px solid rgba(93, 94, 96, 0.1);
border: 1px solid rgba(118, 119, 122, 0.1);
background: rgba(4, 4, 4, 0.95);
border-radius: 8px; }
.osd-window,
.resize-popup,
.switcher-list, .workspace-switcher-container {
color: #5D5E60;
color: #76777A;
background-color: rgba(26, 30, 33, 0.95);
border: none;
border-radius: 2px;
@@ -722,7 +722,7 @@ StScrollBar {
-natural-hpadding: 12px;
-minimum-hpadding: 6px;
font-weight: bold;
color: #c4c4c5;
color: #aaaaac;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
transition-duration: 100ms; }
#panel .panel-button .app-menu-icon {
@@ -735,7 +735,7 @@ StScrollBar {
icon-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9); }
#panel .panel-button:hover {
background: rgba(53, 61, 67, 0.65);
color: #dddedf;
color: #c4c4c5;
transition-duration: 200ms; }
#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
box-shadow: none;
@@ -763,7 +763,7 @@ StScrollBar {
.unlock-screen #panel .panel-button,
.login-screen #panel .panel-button,
.lock-screen #panel .panel-button {
color: #76777a; }
color: #909193; }
.unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
.login-screen #panel .panel-button:focus,
.login-screen #panel .panel-button:hover,
@@ -771,7 +771,7 @@ StScrollBar {
.lock-screen #panel .panel-button:focus,
.lock-screen #panel .panel-button:hover,
.lock-screen #panel .panel-button:active {
color: #76777a; }
color: #909193; }
#panel .panel-status-indicators-box,
#panel .panel-status-menu-box {
spacing: 2px; }
@@ -859,7 +859,7 @@ StScrollBar {
.weather-header,
.events-section-title,
.message-list-section-title {
color: #444546;
color: #5d5e60;
font-weight: bold; }
.world-clocks-grid {
@@ -869,7 +869,7 @@ StScrollBar {
spacing: 0.4em; }
.calendar-month-label {
color: #505153;
color: #696a6d;
font-weight: bold;
padding: 8px 0; }
@@ -879,7 +879,7 @@ StScrollBar {
width: 32px;
border-radius: 4px; }
.pager-button:hover, .pager-button:focus {
background-color: rgba(93, 94, 96, 0.05); }
background-color: rgba(118, 119, 122, 0.05); }
.pager-button:active {
background-color: rgba(26, 30, 33, 0.05); }
@@ -908,7 +908,7 @@ StScrollBar {
background-color: #F67E7D;
border-color: transparent; }
.calendar-day-base.calendar-day-heading {
color: #444546;
color: #5d5e60;
margin-top: 1em;
font-size: 70%; }
@@ -922,19 +922,19 @@ StScrollBar {
border-left-width: 1px; }
.calendar-nonwork-day {
color: #3c3e41; }
color: #484b4e; }
.calendar-today {
font-weight: bold;
border: 1px solid rgba(22, 24, 25, 0.5); }
.calendar-day-with-events {
color: #76777a;
color: #909193;
font-weight: bold;
background-image: url("assets/calendar-today.svg"); }
.calendar-other-month-day {
color: #3c3e41;
color: #484b4e;
opacity: 0.5; }
.calendar-week-number {
@@ -945,17 +945,17 @@ StScrollBar {
border-radius: 2px;
padding: 0.5em 0 0;
margin: 6px;
background-color: rgba(93, 94, 96, 0.3);
background-color: rgba(118, 119, 122, 0.3);
color: #1A1E21; }
/* Message list */
.message-list {
width: 31.5em; }
.message-list .message-title {
color: #505153; }
color: #696a6d; }
.message-list-clear-button.button {
color: #5D5E60;
color: #76777A;
background-color: #0f1113;
box-shadow: none;
border: 1px solid #161819;
@@ -981,7 +981,7 @@ StScrollBar {
icon-size: 16px;
border-radius: 16px;
padding: 8px;
color: #5D5E60;
color: #76777A;
background-color: transparent; }
.message-list-section-close:hover > StIcon,
@@ -1009,7 +1009,7 @@ StScrollBar {
padding: 0 12px; }
.message-secondary-bin > .event-time {
color: #373839;
color: #505153;
font-size: 0.7em;
/* HACK: the label should be baseline-aligned with a 1em label,
fake this with some bottom padding */
@@ -1026,15 +1026,15 @@ StScrollBar {
.message-media-control {
padding: 12px;
color: #2b2b2c; }
color: #444446; }
.message-media-control:last-child:ltr {
padding-right: 18px; }
.message-media-control:last-child:rtl {
padding-left: 18px; }
.message-media-control:hover {
color: #5D5E60; }
color: #76777A; }
.message-media-control:insensitive {
color: black; }
color: #121212; }
.media-message-cover-icon {
icon-size: 48px !important; }
@@ -1066,7 +1066,7 @@ StScrollBar {
padding: 0 4px; }
.system-menu-action {
color: #5D5E60;
color: #76777A;
border-radius: 32px;
/* wish we could do 50% */
border: 1px solid #161819;
@@ -1131,7 +1131,7 @@ StScrollBar {
text-align: center; }
.nm-dialog-airplane-text {
color: #5D5E60; }
color: #76777A; }
.nm-dialog-header-icon {
icon-size: 32px; }
@@ -1185,7 +1185,7 @@ StScrollBar {
.window-caption {
spacing: 20px;
color: #c4c4c5;
color: #aaaaac;
background-color: rgba(26, 30, 33, 0.65);
border-radius: 2px;
padding: 4px 8px; }
@@ -1195,22 +1195,22 @@ StScrollBar {
padding: 9px;
border-radius: 100px;
border: none;
color: #5D5E60;
color: #76777A;
background-color: rgba(26, 30, 33, 0.6);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.22); }
.search-entry:focus {
border-width: 0;
color: #5D5E60;
color: #76777A;
background-color: rgba(26, 30, 33, 0.8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3); }
.search-entry .search-entry-icon {
icon-size: 1em;
padding: 0 4px;
color: rgba(93, 94, 96, 0.7); }
color: rgba(118, 119, 122, 0.7); }
.search-entry:hover, .search-entry:focus {
background-color: rgba(26, 30, 33, 0.8); }
.search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
color: #5D5E60; }
color: #76777A; }
#searchResultsBin {
max-width: 1000px; }
@@ -1237,15 +1237,15 @@ StScrollBar {
spacing: 30px; }
.list-search-result-title {
color: #d1d1d2;
color: #b7b7b9;
spacing: 12px; }
.list-search-result-description {
color: rgba(234, 235, 235, 0.5); }
color: rgba(208, 209, 210, 0.5); }
.list-search-provider-details {
width: 150px;
color: #d1d1d2;
color: #b7b7b9;
margin-top: 0.24em; }
.list-search-provider-content {
@@ -1257,7 +1257,7 @@ StScrollBar {
/* DASHBOARD */
#dash {
font-size: 9pt;
color: #c4c4c5;
color: #aaaaac;
background-color: rgba(30, 35, 38, 0.65);
padding: 6px 0;
border: 1px solid #161819;
@@ -1279,7 +1279,7 @@ StScrollBar {
.dash-label {
border-radius: 7px;
padding: 4px 12px;
color: #c4c4c5;
color: #aaaaac;
background-color: rgba(30, 35, 38, 0.65);
text-align: center;
-x-offset: 8px; }
@@ -1342,7 +1342,7 @@ StScrollBar {
.grid-search-result:checked .overview-icon {
background-color: rgba(10, 12, 13, 0.85);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3);
color: #5D5E60; }
color: #76777A; }
.app-well-app:hover .overview-icon,
.app-well-app:focus .overview-icon,
.app-well-app:selected .overview-icon,
@@ -1385,11 +1385,11 @@ StScrollBar {
background-color: rgba(26, 30, 33, 0.35); }
.show-apps .show-apps-icon {
color: #c4c4c5; }
color: #aaaaac; }
.show-apps:checked .show-apps-icon,
.show-apps:focus .show-apps-icon {
color: #5D5E60;
color: #76777A;
transition-duration: 100ms; }
.app-folder-popup {
@@ -1450,14 +1450,14 @@ StScrollBar {
padding: 0px 88px 10px 88px; }
.workspace-thumbnails {
color: #5D5E60;
color: #76777A;
background-color: transparent;
border: none; }
.search-statustext, .no-frequent-applications-label {
font-size: 2em;
font-weight: bold;
color: #5D5E60; }
color: #76777A; }
/* NOTIFICATIONS & MESSAGE TRAY */
.url-highlighter {
@@ -1468,7 +1468,7 @@ StScrollBar {
width: 34em;
margin: 5px;
border-radius: 3px;
color: #c4c4c5;
color: #aaaaac;
background-color: #1A1E21;
border: 1px solid #161819;
box-shadow: 0 1px 4px black; }
@@ -1507,7 +1507,7 @@ StScrollBar {
-shell-counter-overlap-y: 3px;
background-color: #F67E7D;
color: #f7f7f7;
border: 2px solid #5D5E60;
border: 2px solid #76777A;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
border-radius: 0.9em; }
@@ -1521,7 +1521,7 @@ StScrollBar {
margin: 5px; }
.chat-log-message {
color: #444546; }
color: #5d5e60; }
.chat-new-group {
padding-top: 1em; }
@@ -1534,7 +1534,7 @@ StScrollBar {
.chat-sent {
padding-left: 18pt;
color: #373839; }
color: #505153; }
.chat-sent:rtl {
padding-left: 0;
padding-right: 18pt; }
@@ -1543,7 +1543,7 @@ StScrollBar {
padding-left: 4px;
font-size: 9pt;
font-weight: bold;
color: #2b2b2c; }
color: #444446; }
.chat-meta-message:rtl {
padding-left: 0;
padding-right: 4px; }
@@ -1604,7 +1604,7 @@ StScrollBar {
spacing: 15px; }
.keyboard-key {
color: #5D5E60;
color: #76777A;
background-color: #0f1113;
box-shadow: none;
border: 1px solid #161819;
@@ -1637,7 +1637,7 @@ StScrollBar {
icon-shadow: none; }
.keyboard-key:grayed {
background-color: rgba(26, 30, 33, 0.95);
color: #5D5E60;
color: #76777A;
border-color: rgba(0, 0, 0, 0.7); }
.keyboard-subkeys {
@@ -1646,7 +1646,7 @@ StScrollBar {
-arrow-border-radius: 10px;
-arrow-background-color: rgba(26, 30, 33, 0.65);
-arrow-border-width: 2px;
-arrow-border-color: #5D5E60;
-arrow-border-color: #76777A;
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: 5px; }
@@ -1657,7 +1657,7 @@ StScrollBar {
.candidate-index {
padding: 0 0.5em 0 0;
color: #444546; }
color: #5d5e60; }
.candidate-box {
padding: 0.3em 0.5em 0.3em 0.5em;
@@ -1689,12 +1689,12 @@ StScrollBar {
/* Auth Dialogs & Screen Shield */
.framed-user-icon {
background-size: contain;
border: 2px solid #5D5E60;
color: #5D5E60;
border: 2px solid #76777A;
color: #76777A;
border-radius: 3px; }
.framed-user-icon:hover {
border-color: #aaabac;
color: #aaabac; }
border-color: #c4c4c5;
color: #c4c4c5; }
.login-dialog-banner-view {
padding-top: 24px;
@@ -1708,7 +1708,7 @@ StScrollBar {
.login-dialog .modal-dialog-button {
padding: 3px 18px; }
.login-dialog .modal-dialog-button:default {
color: #5D5E60;
color: #76777A;
background-color: #0f1113;
box-shadow: none;
border: 1px solid #161819;
@@ -1728,8 +1728,8 @@ StScrollBar {
text-shadow: none;
icon-shadow: none; }
.login-dialog .modal-dialog-button:default:insensitive {
color: #3c3e41;
background-color: rgba(33, 37, 40, 0.66);
color: #484b4e;
background-color: rgba(36, 40, 43, 0.66);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.22);
border: none;
text-shadow: none;
@@ -1739,7 +1739,7 @@ StScrollBar {
padding: 24px 0px; }
.login-dialog-banner {
color: #444546; }
color: #5d5e60; }
.login-dialog-button-box {
spacing: 5px; }
@@ -1758,12 +1758,12 @@ StScrollBar {
padding-left: 2px; }
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
.login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
color: #5D5E60; }
color: #76777A; }
.login-dialog-not-listed-label {
font-size: 90%;
font-weight: bold;
color: #121212;
color: #2b2b2c;
padding-top: 1em; }
.login-dialog-user-list-view {
@@ -1782,7 +1782,7 @@ StScrollBar {
.login-dialog-user-list-item {
border-radius: 5px;
padding: .2em;
color: #121212; }
color: #2b2b2c; }
.login-dialog-user-list-item:ltr {
padding-right: 1em; }
.login-dialog-user-list-item:rtl {
@@ -1790,13 +1790,13 @@ StScrollBar {
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
height: 2px;
margin: 2px 0 0 0;
background-color: #5D5E60; }
background-color: #76777A; }
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
background-color: #f7f7f7; }
.login-dialog-username,
.user-widget-label {
color: #5D5E60;
color: #76777A;
font-size: 120%;
font-weight: bold;
text-align: left;
@@ -1815,7 +1815,7 @@ StScrollBar {
width: 23em; }
.login-dialog-prompt-label {
color: #2b2b2c;
color: #444446;
font-size: 110%;
padding-top: 1em; }
@@ -1823,9 +1823,9 @@ StScrollBar {
icon-size: 1.25em; }
.login-dialog-session-list-button {
color: #121212; }
color: #2b2b2c; }
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
color: #5D5E60; }
color: #76777A; }
.login-dialog-session-list-button:active {
color: black; }
@@ -1864,9 +1864,9 @@ StScrollBar {
.screen-shield-notifications-container .notification,
.screen-shield-notifications-container .screen-shield-notification-source {
padding: 12px 6px;
border: 1px solid #5D5E60;
border: 1px solid #76777A;
background-color: rgba(26, 30, 33, 0.45);
color: #5D5E60;
color: #76777A;
border-radius: 4px; }
.screen-shield-notifications-container .notification {
margin-right: 15px; }

View File

@@ -3,9 +3,9 @@
// Main definitions
$base_color: if($variant == 'light', #ebf0f5, lighten(#1A1E21, 1%));
$text_color: if($variant == 'light', #31363D, #5D5E60);
$text_color: if($variant == 'light', rgb(223, 226, 231), #76777A);
$bg_color: if($variant == 'light', darken( #EEEEEE, 3%), #1A1E21);
$fg_color: if($variant == 'light', #31363d, #5D5E60);
$fg_color: if($variant == 'light', #e69317, #76777A);
$switch_bg: if($variant == 'light', #ffffff, transparentize(black,1));
$shadow_color: rgba(162, 162, 165, 0.21);
$main_dark_color:darken($bg_color, 2%);

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff