Gnome-Shell: change bg colors of buttons and cards

This commit is contained in:
Daniel Ruiz de Alegría
2022-03-09 12:02:30 +01:00
parent f884956ec3
commit 682ce6ec3d
5 changed files with 392 additions and 186 deletions
@@ -54,70 +54,90 @@ stage {
border-width: 1px;
font-weight: bold;
padding: 3px 24px;
border: 1px solid transparent;
color: #eeeeec;
background-color: #2d2f38; }
background-color: #2e313d;
border-color: #1a1c23; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus {
border: 1px solid transparent;
color: #eeeeec;
background-color: #2c364c;
background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover {
background-color: #333d54;
background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active {
background-color: #39435b;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover {
border: 1px solid transparent;
color: #eeeeec;
background-color: #343640; }
background-color: #333742;
border-color: #1a1c23; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5);
background-color: rgba(238, 238, 236, 0.05); }
background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active {
border: 1px solid transparent;
color: #eeeeec;
background-color: #3b3d49; }
background-color: #393c47;
border-color: #0b0b0e; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked {
border: 1px solid transparent;
color: #eeeeec;
background-color: #414451; }
background-color: #3f424d; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover {
background-color: #484b5a; }
background-color: #484d60; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active {
background-color: #4f5362; }
background-color: #4e5468; }
.modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button {
padding: 12px;
font-weight: bold !important;
border: 1px solid transparent;
color: #eeeeec;
background-color: #3b3f4b; }
background-color: #3d4251;
border-color: #292c37; }
.modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr {
margin-right: 1px; }
.modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl {
margin-left: 1px; }
.modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5);
background-color: rgba(238, 238, 236, 0.05); }
background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11; }
.modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus {
border: 1px solid transparent;
color: #eeeeec;
background-color: #39455d;
background-color: #3b4763;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover {
background-color: #3f4b65;
background-color: #414d6a;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active {
background-color: #45526c;
background-color: #465472;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover {
border: 1px solid transparent;
color: #eeeeec;
background-color: #424654; }
background-color: #424756;
border-color: #292c37; }
.modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active {
border: 1px solid transparent;
color: #eeeeec;
background-color: #484d5c; }
background-color: #474c5a;
border-color: #1a1c23; }
.modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked {
border: 1px solid transparent;
color: #eeeeec;
background-color: #4f5565; }
background-color: #4d515f; }
.modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover {
background-color: #565c6d; }
background-color: #575e74; }
.modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active {
background-color: #5d6376; }
background-color: #5e657d; }
.modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr {
border-radius: 0 0 0 10px; }
.modal-dialog .modal-dialog-linked-button:last-child:ltr, .hotplug-notification-item:last-child:ltr, .notification-banner .notification-button:last-child:ltr {
@@ -134,42 +154,56 @@ stage {
margin-right: 0 !important; }
.screenshot-ui-show-pointer-button, .screenshot-ui-type-button {
border: 1px solid transparent;
background-color: transparent;
background-color: none; }
background-color: none;
border-color: transparent; }
.screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5);
background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11;
background-color: transparent; }
.screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
border: 1px solid transparent;
background-color: transparent;
background-color: none; }
background-color: none;
border-color: transparent; }
.screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5);
background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11;
background-color: transparent; }
.screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus {
border: 1px solid transparent;
color: #eeeeec;
background-color: #37435a;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover {
background-color: #3d4962;
background-color: #3f4b68;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active {
background-color: #43506a;
background-color: #455170;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover {
border: 1px solid transparent;
color: #eeeeec;
background-color: #404451; }
background-color: #404453;
border-color: #272a34; }
.screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active {
border: 1px solid transparent;
color: #eeeeec;
background-color: #474b59; }
background-color: #454a58;
border-color: #181a20; }
.screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked {
border: 1px solid transparent;
color: #eeeeec;
background-color: #4d5362; }
background-color: #4b4f5c; }
.screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover {
background-color: #545a6a; }
background-color: #555b71; }
.screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active {
background-color: #5b6173; }
background-color: #5b627a; }
/* General Typography */
.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext {
@@ -484,60 +518,82 @@ StScrollBar {
border-radius: 8px;
margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
background-color: transparent;
background-color: none;
border-color: transparent;
box-shadow: none !important;
padding: 9px; }
.datemenu-today-button:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5);
background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11;
background-color: transparent; }
.datemenu-today-button:insensitive {
border-color: transparent; }
.datemenu-today-button:focus {
border: 1px solid transparent;
color: #eeeeec;
background-color: #2c364c;
background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.datemenu-today-button:focus:hover {
background-color: #333d54;
background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:focus:active {
background-color: #39435b;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:hover {
border: 1px solid transparent;
color: #eeeeec;
background-color: #343640; }
background-color: #333742;
border-color: #1a1c23; }
.datemenu-today-button:active {
border: 1px solid transparent;
color: #eeeeec;
background-color: #3b3d49; }
background-color: #393c47;
border-color: #0b0b0e; }
/* Calendar */
.calendar {
border-radius: 8px;
margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
background-color: transparent;
background-color: none;
border-color: transparent;
box-shadow: none !important;
margin-top: 0; }
.calendar:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5);
background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11;
background-color: transparent; }
.calendar:insensitive {
border-color: transparent; }
.calendar:focus {
border: 1px solid transparent;
color: #eeeeec;
background-color: #2c364c;
background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.calendar:focus:hover {
background-color: #333d54;
background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.calendar:focus:active {
background-color: #39435b;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.calendar:hover {
border: 1px solid transparent;
color: #eeeeec;
background-color: #343640; }
background-color: #333742;
border-color: #1a1c23; }
.calendar:active {
border: 1px solid transparent;
color: #eeeeec;
background-color: #3b3d49; }
background-color: #393c47;
border-color: #0b0b0e; }
.calendar .calendar-month-header .calendar-change-month-back StIcon,
.calendar .calendar-month-header .calendar-change-month-forward StIcon {
icon-size: 1.09em; }
@@ -614,25 +670,32 @@ StScrollBar {
border-radius: 8px;
margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #eeeeec;
background-color: #2d2f38;
background-color: #2e313d;
border-color: #1a1c23;
padding: 12px; }
.events-button:focus {
border: 1px solid transparent;
color: #eeeeec;
background-color: #2c364c;
background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.events-button:focus:hover {
background-color: #333d54;
background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.events-button:focus:active {
background-color: #39435b;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.events-button:hover {
border: 1px solid transparent;
color: #eeeeec;
background-color: #343640; }
background-color: #333742;
border-color: #1a1c23; }
.events-button:active {
border: 1px solid transparent;
color: #eeeeec;
background-color: #3b3d49; }
background-color: #393c47;
border-color: #0b0b0e; }
.events-button .events-box {
spacing: 6px; }
.events-button .events-list {
@@ -648,25 +711,32 @@ StScrollBar {
border-radius: 8px;
margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #eeeeec;
background-color: #2d2f38;
background-color: #2e313d;
border-color: #1a1c23;
padding: 12px; }
.world-clocks-button:focus {
border: 1px solid transparent;
color: #eeeeec;
background-color: #2c364c;
background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.world-clocks-button:focus:hover {
background-color: #333d54;
background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.world-clocks-button:focus:active {
background-color: #39435b;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.world-clocks-button:hover {
border: 1px solid transparent;
color: #eeeeec;
background-color: #343640; }
background-color: #333742;
border-color: #1a1c23; }
.world-clocks-button:active {
border: 1px solid transparent;
color: #eeeeec;
background-color: #3b3d49; }
background-color: #393c47;
border-color: #0b0b0e; }
.world-clocks-button .world-clocks-grid {
spacing-rows: 6px;
spacing-columns: 12px; }
@@ -688,25 +758,32 @@ StScrollBar {
border-radius: 8px;
margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #eeeeec;
background-color: #2d2f38;
background-color: #2e313d;
border-color: #1a1c23;
padding: 12px; }
.weather-button:focus {
border: 1px solid transparent;
color: #eeeeec;
background-color: #2c364c;
background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.weather-button:focus:hover {
background-color: #333d54;
background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.weather-button:focus:active {
background-color: #39435b;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.weather-button:hover {
border: 1px solid transparent;
color: #eeeeec;
background-color: #343640; }
background-color: #333742;
border-color: #1a1c23; }
.weather-button:active {
border: 1px solid transparent;
color: #eeeeec;
background-color: #3b3d49; }
background-color: #393c47;
border-color: #0b0b0e; }
.weather-button .weather-box {
spacing: 10px; }
.weather-button .weather-header-box {
@@ -774,24 +851,31 @@ StScrollBar {
border-radius: 8px;
margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #eeeeec;
background-color: #2d2f38; }
background-color: #2e313d;
border-color: #1a1c23; }
.message:focus {
border: 1px solid transparent;
color: #eeeeec;
background-color: #2c364c;
background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.message:focus:hover {
background-color: #333d54;
background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.message:focus:active {
background-color: #39435b;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.message:hover {
border: 1px solid transparent;
color: #eeeeec;
background-color: #343640; }
background-color: #333742;
border-color: #1a1c23; }
.message:active {
border: 1px solid transparent;
color: #eeeeec;
background-color: #3b3d49; }
background-color: #393c47;
border-color: #0b0b0e; }
.message .message-icon-bin {
padding: 18px; }
.message .message-icon-bin:ltr {
@@ -2236,24 +2320,31 @@ StScrollBar {
border-radius: 8px;
margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #eeeeec;
background-color: #2d2f38; }
background-color: #2e313d;
border-color: #1a1c23; }
.lg-extension:focus {
border: 1px solid transparent;
color: #eeeeec;
background-color: #2c364c;
background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.lg-extension:focus:hover {
background-color: #333d54;
background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.lg-extension:focus:active {
background-color: #39435b;
background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.lg-extension:hover {
border: 1px solid transparent;
color: #eeeeec;
background-color: #343640; }
background-color: #333742;
border-color: #1a1c23; }
.lg-extension:active {
border: 1px solid transparent;
color: #eeeeec;
background-color: #3b3d49; }
background-color: #393c47;
border-color: #0b0b0e; }
.lg-extension-meta {
spacing: 6px; }
@@ -2308,13 +2399,16 @@ StScrollBar {
border-color: #1c1e25; }
.login-dialog .modal-dialog-button:insensitive,
.unlock-dialog .modal-dialog-button:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5);
background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11;
border-color: #1c1e25;
background-color: #1c1e25;
color: rgba(255, 255, 255, 0.7); }
.login-dialog .modal-dialog-button:default,
.unlock-dialog .modal-dialog-button:default {
border: 1px solid transparent;
background-color: #2777ff;
color: #ffffff; }
.login-dialog .modal-dialog-button:default:focus,
@@ -2323,7 +2417,7 @@ StScrollBar {
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus,
.unlock-dialog .modal-dialog-button:default:hover,
.unlock-dialog .modal-dialog-button:default:focus {
background-color: #4187ff;
background-color: #317dfe;
color: white; }
.login-dialog .modal-dialog-button:default:active,
.unlock-dialog .modal-dialog-button:default:active {
@@ -2331,8 +2425,10 @@ StScrollBar {
color: #ededed; }
.login-dialog .modal-dialog-button:default:insensitive,
.unlock-dialog .modal-dialog-button:default:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5);
background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11;
background-color: rgba(39, 119, 255, 0.5);
color: rgba(255, 255, 255, 0.5); }
.login-dialog .cancel-button,
@@ -2699,34 +2795,14 @@ $_osd_color: if($variant=='light', black, $fg_color);
background-image: url("assets/view-grid-symbolic-dark.svg"); }
/* Date/Time Menu */
.datemenu-today-button {
border-radius: 8px;
margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
color: #eeeeec;
background-color: #2d2f38; }
.datemenu-today-button:focus {
color: #eeeeec;
background-color: #2c364c;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.datemenu-today-button:focus:hover {
background-color: #333d54;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:focus:active {
background-color: #39435b;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:hover {
color: #eeeeec;
background-color: #343640; }
.datemenu-today-button:active {
color: #eeeeec;
background-color: #3b3d49; }
.datemenu-today-button:insensitive {
color: inherit; }
.datemenu-today-button .day-label {
font-weight: normal; }
.datemenu-today-button .date-label {
font-weight: lighter; }
.datemenu-today-button:insensitive {
color: inherit; }
.datemenu-today-button .day-label {
font-weight: normal; }
.datemenu-today-button .date-label {
font-weight: lighter; }
/* Search */
.search-entry {