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
No known key found for this signature in database
GPG Key ID: 59667A77E8BFCB6C
5 changed files with 392 additions and 186 deletions

View File

@ -54,70 +54,90 @@ stage {
border-width: 1px; border-width: 1px;
font-weight: bold; font-weight: bold;
padding: 3px 24px; padding: 3px 24px;
border: 1px solid transparent;
color: #eeeeec; 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 { #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2c364c; background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } 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 { #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); } 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 { #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); } 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 { #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover {
border: 1px solid transparent;
color: #eeeeec; 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 { #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); 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 { #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active {
border: 1px solid transparent;
color: #eeeeec; 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 { #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked {
border: 1px solid transparent;
color: #eeeeec; 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 { #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 { #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 { .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button {
padding: 12px; padding: 12px;
font-weight: bold !important; font-weight: bold !important;
border: 1px solid transparent;
color: #eeeeec; 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 { .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr {
margin-right: 1px; } margin-right: 1px; }
.modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl { .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl {
margin-left: 1px; } margin-left: 1px; }
.modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { .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); 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 { .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #39455d; background-color: #3b4763;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } 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 { .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); } 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 { .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); } 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 { .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover {
border: 1px solid transparent;
color: #eeeeec; 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 { .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active {
border: 1px solid transparent;
color: #eeeeec; 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 { .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked {
border: 1px solid transparent;
color: #eeeeec; 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 { .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 { .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 { .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; } 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 { .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; } margin-right: 0 !important; }
.screenshot-ui-show-pointer-button, .screenshot-ui-type-button { .screenshot-ui-show-pointer-button, .screenshot-ui-type-button {
border: 1px solid transparent;
background-color: transparent; background-color: transparent;
background-color: none; } background-color: none;
border-color: transparent; }
.screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5); 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;
background-color: transparent; } background-color: transparent; }
.screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
border: 1px solid transparent;
background-color: 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 { .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5); 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;
background-color: transparent; } background-color: transparent; }
.screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #37435a; background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } 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 { .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); } 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 { .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); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #404451; } background-color: #404453;
border-color: #272a34; }
.screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active {
border: 1px solid transparent;
color: #eeeeec; 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 { .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; 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 { .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 { .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 */ /* General Typography */
.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { .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; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
background-color: transparent; background-color: transparent;
background-color: none; background-color: none;
border-color: transparent;
box-shadow: none !important; box-shadow: none !important;
padding: 9px; } padding: 9px; }
.datemenu-today-button:insensitive { .datemenu-today-button:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5); 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;
background-color: transparent; } background-color: transparent; }
.datemenu-today-button:insensitive {
border-color: transparent; }
.datemenu-today-button:focus { .datemenu-today-button:focus {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2c364c; background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.datemenu-today-button:focus:hover { .datemenu-today-button:focus:hover {
background-color: #333d54; background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:focus:active { .datemenu-today-button:focus:active {
background-color: #39435b; background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:hover { .datemenu-today-button:hover {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #343640; } background-color: #333742;
border-color: #1a1c23; }
.datemenu-today-button:active { .datemenu-today-button:active {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #3b3d49; } background-color: #393c47;
border-color: #0b0b0e; }
/* Calendar */ /* Calendar */
.calendar { .calendar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
background-color: transparent; background-color: transparent;
background-color: none; background-color: none;
border-color: transparent;
box-shadow: none !important; box-shadow: none !important;
margin-top: 0; } margin-top: 0; }
.calendar:insensitive { .calendar:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5); 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;
background-color: transparent; } background-color: transparent; }
.calendar:insensitive {
border-color: transparent; }
.calendar:focus { .calendar:focus {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2c364c; background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.calendar:focus:hover { .calendar:focus:hover {
background-color: #333d54; background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.calendar:focus:active { .calendar:focus:active {
background-color: #39435b; background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.calendar:hover { .calendar:hover {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #343640; } background-color: #333742;
border-color: #1a1c23; }
.calendar:active { .calendar:active {
border: 1px solid transparent;
color: #eeeeec; 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-back StIcon,
.calendar .calendar-month-header .calendar-change-month-forward StIcon { .calendar .calendar-month-header .calendar-change-month-forward StIcon {
icon-size: 1.09em; } icon-size: 1.09em; }
@ -614,25 +670,32 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2d2f38; background-color: #2e313d;
border-color: #1a1c23;
padding: 12px; } padding: 12px; }
.events-button:focus { .events-button:focus {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2c364c; background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.events-button:focus:hover { .events-button:focus:hover {
background-color: #333d54; background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.events-button:focus:active { .events-button:focus:active {
background-color: #39435b; background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.events-button:hover { .events-button:hover {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #343640; } background-color: #333742;
border-color: #1a1c23; }
.events-button:active { .events-button:active {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #3b3d49; } background-color: #393c47;
border-color: #0b0b0e; }
.events-button .events-box { .events-button .events-box {
spacing: 6px; } spacing: 6px; }
.events-button .events-list { .events-button .events-list {
@ -648,25 +711,32 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2d2f38; background-color: #2e313d;
border-color: #1a1c23;
padding: 12px; } padding: 12px; }
.world-clocks-button:focus { .world-clocks-button:focus {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2c364c; background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.world-clocks-button:focus:hover { .world-clocks-button:focus:hover {
background-color: #333d54; background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.world-clocks-button:focus:active { .world-clocks-button:focus:active {
background-color: #39435b; background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.world-clocks-button:hover { .world-clocks-button:hover {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #343640; } background-color: #333742;
border-color: #1a1c23; }
.world-clocks-button:active { .world-clocks-button:active {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #3b3d49; } background-color: #393c47;
border-color: #0b0b0e; }
.world-clocks-button .world-clocks-grid { .world-clocks-button .world-clocks-grid {
spacing-rows: 6px; spacing-rows: 6px;
spacing-columns: 12px; } spacing-columns: 12px; }
@ -688,25 +758,32 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2d2f38; background-color: #2e313d;
border-color: #1a1c23;
padding: 12px; } padding: 12px; }
.weather-button:focus { .weather-button:focus {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2c364c; background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.weather-button:focus:hover { .weather-button:focus:hover {
background-color: #333d54; background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.weather-button:focus:active { .weather-button:focus:active {
background-color: #39435b; background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.weather-button:hover { .weather-button:hover {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #343640; } background-color: #333742;
border-color: #1a1c23; }
.weather-button:active { .weather-button:active {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #3b3d49; } background-color: #393c47;
border-color: #0b0b0e; }
.weather-button .weather-box { .weather-button .weather-box {
spacing: 10px; } spacing: 10px; }
.weather-button .weather-header-box { .weather-button .weather-header-box {
@ -774,24 +851,31 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2d2f38; } background-color: #2e313d;
border-color: #1a1c23; }
.message:focus { .message:focus {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2c364c; background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.message:focus:hover { .message:focus:hover {
background-color: #333d54; background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.message:focus:active { .message:focus:active {
background-color: #39435b; background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.message:hover { .message:hover {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #343640; } background-color: #333742;
border-color: #1a1c23; }
.message:active { .message:active {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #3b3d49; } background-color: #393c47;
border-color: #0b0b0e; }
.message .message-icon-bin { .message .message-icon-bin {
padding: 18px; } padding: 18px; }
.message .message-icon-bin:ltr { .message .message-icon-bin:ltr {
@ -2236,24 +2320,31 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2d2f38; } background-color: #2e313d;
border-color: #1a1c23; }
.lg-extension:focus { .lg-extension:focus {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #2c364c; background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.lg-extension:focus:hover { .lg-extension:focus:hover {
background-color: #333d54; background-color: #333e58;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.lg-extension:focus:active { .lg-extension:focus:active {
background-color: #39435b; background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.lg-extension:hover { .lg-extension:hover {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #343640; } background-color: #333742;
border-color: #1a1c23; }
.lg-extension:active { .lg-extension:active {
border: 1px solid transparent;
color: #eeeeec; color: #eeeeec;
background-color: #3b3d49; } background-color: #393c47;
border-color: #0b0b0e; }
.lg-extension-meta { .lg-extension-meta {
spacing: 6px; } spacing: 6px; }
@ -2308,13 +2399,16 @@ StScrollBar {
border-color: #1c1e25; } border-color: #1c1e25; }
.login-dialog .modal-dialog-button:insensitive, .login-dialog .modal-dialog-button:insensitive,
.unlock-dialog .modal-dialog-button:insensitive { .unlock-dialog .modal-dialog-button:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5); 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;
border-color: #1c1e25; border-color: #1c1e25;
background-color: #1c1e25; background-color: #1c1e25;
color: rgba(255, 255, 255, 0.7); } color: rgba(255, 255, 255, 0.7); }
.login-dialog .modal-dialog-button:default, .login-dialog .modal-dialog-button:default,
.unlock-dialog .modal-dialog-button:default { .unlock-dialog .modal-dialog-button:default {
border: 1px solid transparent;
background-color: #2777ff; background-color: #2777ff;
color: #ffffff; } color: #ffffff; }
.login-dialog .modal-dialog-button:default:focus, .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, .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:hover,
.unlock-dialog .modal-dialog-button:default:focus { .unlock-dialog .modal-dialog-button:default:focus {
background-color: #4187ff; background-color: #317dfe;
color: white; } color: white; }
.login-dialog .modal-dialog-button:default:active, .login-dialog .modal-dialog-button:default:active,
.unlock-dialog .modal-dialog-button:default:active { .unlock-dialog .modal-dialog-button:default:active {
@ -2331,8 +2425,10 @@ StScrollBar {
color: #ededed; } color: #ededed; }
.login-dialog .modal-dialog-button:default:insensitive, .login-dialog .modal-dialog-button:default:insensitive,
.unlock-dialog .modal-dialog-button:default:insensitive { .unlock-dialog .modal-dialog-button:default:insensitive {
border: 1px solid transparent;
color: rgba(238, 238, 236, 0.5); 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;
background-color: rgba(39, 119, 255, 0.5); background-color: rgba(39, 119, 255, 0.5);
color: rgba(255, 255, 255, 0.5); } color: rgba(255, 255, 255, 0.5); }
.login-dialog .cancel-button, .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"); } background-image: url("assets/view-grid-symbolic-dark.svg"); }
/* Date/Time Menu */ /* Date/Time Menu */
.datemenu-today-button { .datemenu-today-button:insensitive {
border-radius: 8px; color: inherit; }
margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); .datemenu-today-button .day-label {
color: #eeeeec; font-weight: normal; }
background-color: #2d2f38; }
.datemenu-today-button:focus { .datemenu-today-button .date-label {
color: #eeeeec; font-weight: lighter; }
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; }
/* Search */ /* Search */
.search-entry { .search-entry {

View File

@ -54,11 +54,14 @@ stage {
border-width: 1px; border-width: 1px;
font-weight: bold; font-weight: bold;
padding: 3px 24px; padding: 3px 24px;
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #f7f7f8; } background-color: white;
border-color: #d1d1d1; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #e2eaf9; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } 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 { #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover {
background-color: #e9f1ff; background-color: #e9f1ff;
@ -67,17 +70,24 @@ stage {
background-color: #e9f1ff; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } 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 { #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #fafafb;
border-color: #d1d1d1; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive {
border: 1px solid transparent;
color: rgba(92, 97, 108, 0.5); color: rgba(92, 97, 108, 0.5);
background-color: rgba(92, 97, 108, 0.05); } background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #f5f6f6;
border-color: #d1d1d1; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked { #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #f0f1f2; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover { #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover {
background-color: white; } background-color: white; }
#LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active { #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active {
@ -86,36 +96,46 @@ stage {
.modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button {
padding: 12px; padding: 12px;
font-weight: bold !important; font-weight: bold !important;
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #dadadb; } background-color: #ededed;
border-color: #b3b3b3; }
.modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr { .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr {
margin-right: 1px; } margin-right: 1px; }
.modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl { .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl {
margin-left: 1px; } margin-left: 1px; }
.modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive {
border: 1px solid transparent;
color: rgba(92, 97, 108, 0.5); color: rgba(92, 97, 108, 0.5);
background-color: rgba(92, 97, 108, 0.05); } background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9; }
.modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #c8d0df; background-color: #d9e1ef;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } 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 { .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover {
background-color: #cfd7e5; background-color: #e0e8f6;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } 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 { .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active {
background-color: #d6deec; background-color: #e7effd;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } 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 { .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #e2e2e3; } background-color: #e9e9e9;
border-color: #c4c4c4; }
.modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #eaeaea; } background-color: #e4e5e5;
border-color: #b3b3b3; }
.modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #f1f1f2; } background-color: #e0e1e2; }
.modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover {
background-color: #f9f9f9; } background-color: white; }
.modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active { .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active {
background-color: white; } background-color: white; }
.modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr { .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr {
@ -134,42 +154,56 @@ stage {
margin-right: 0 !important; } margin-right: 0 !important; }
.screenshot-ui-show-pointer-button, .screenshot-ui-type-button { .screenshot-ui-show-pointer-button, .screenshot-ui-type-button {
border: 1px solid transparent;
background-color: transparent; background-color: transparent;
background-color: none; } background-color: none;
border-color: transparent; }
.screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
border: 1px solid transparent;
color: rgba(92, 97, 108, 0.5); color: rgba(92, 97, 108, 0.5);
background-color: rgba(92, 97, 108, 0.05); background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9;
background-color: transparent; } background-color: transparent; }
.screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
border: 1px solid transparent;
background-color: 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 { .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive {
border: 1px solid transparent;
color: rgba(92, 97, 108, 0.5); color: rgba(92, 97, 108, 0.5);
background-color: rgba(92, 97, 108, 0.05); background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9;
background-color: transparent; } background-color: transparent; }
.screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #313d55; background-color: #394560;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } 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 { .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover {
background-color: #37435d; background-color: #3f4b68;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } 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 { .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active {
background-color: #3d4965; background-color: #455170;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #393d4b; } background-color: #3c404f;
border-color: #181a20; }
.screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #3f4453; } background-color: #3d4150;
border-color: #08090b; }
.screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { .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: #5c616c; color: #5c616c;
background-color: #464b5c; } background-color: #3e4251; }
.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 { .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: #4c5265; } 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 { .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: #535a6e; } background-color: #5b627a; }
/* General Typography */ /* General Typography */
.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext {
@ -484,17 +518,24 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
background-color: transparent; background-color: transparent;
background-color: none; background-color: none;
border-color: transparent;
box-shadow: none !important; box-shadow: none !important;
padding: 9px; } padding: 9px; }
.datemenu-today-button:insensitive { .datemenu-today-button:insensitive {
border: 1px solid transparent;
color: rgba(92, 97, 108, 0.5); color: rgba(92, 97, 108, 0.5);
background-color: rgba(92, 97, 108, 0.05); background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9;
background-color: transparent; } background-color: transparent; }
.datemenu-today-button:insensitive {
border-color: transparent; }
.datemenu-today-button:focus { .datemenu-today-button:focus {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #e2eaf9; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.datemenu-today-button:focus:hover { .datemenu-today-button:focus:hover {
background-color: #e9f1ff; background-color: #e9f1ff;
@ -503,28 +544,39 @@ StScrollBar {
background-color: #e9f1ff; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:hover { .datemenu-today-button:hover {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #fafafb;
border-color: #d1d1d1; }
.datemenu-today-button:active { .datemenu-today-button:active {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #f5f6f6;
border-color: #d1d1d1; }
/* Calendar */ /* Calendar */
.calendar { .calendar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
background-color: transparent; background-color: transparent;
background-color: none; background-color: none;
border-color: transparent;
box-shadow: none !important; box-shadow: none !important;
margin-top: 0; } margin-top: 0; }
.calendar:insensitive { .calendar:insensitive {
border: 1px solid transparent;
color: rgba(92, 97, 108, 0.5); color: rgba(92, 97, 108, 0.5);
background-color: rgba(92, 97, 108, 0.05); background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9;
background-color: transparent; } background-color: transparent; }
.calendar:insensitive {
border-color: transparent; }
.calendar:focus { .calendar:focus {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #e2eaf9; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.calendar:focus:hover { .calendar:focus:hover {
background-color: #e9f1ff; background-color: #e9f1ff;
@ -533,11 +585,15 @@ StScrollBar {
background-color: #e9f1ff; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.calendar:hover { .calendar:hover {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #fafafb;
border-color: #d1d1d1; }
.calendar:active { .calendar:active {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #f5f6f6;
border-color: #d1d1d1; }
.calendar .calendar-month-header .calendar-change-month-back StIcon, .calendar .calendar-month-header .calendar-change-month-back StIcon,
.calendar .calendar-month-header .calendar-change-month-forward StIcon { .calendar .calendar-month-header .calendar-change-month-forward StIcon {
icon-size: 1.09em; } icon-size: 1.09em; }
@ -614,12 +670,15 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #f7f7f8; background-color: white;
border-color: #d1d1d1;
padding: 12px; } padding: 12px; }
.events-button:focus { .events-button:focus {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #e2eaf9; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.events-button:focus:hover { .events-button:focus:hover {
background-color: #e9f1ff; background-color: #e9f1ff;
@ -628,11 +687,15 @@ StScrollBar {
background-color: #e9f1ff; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.events-button:hover { .events-button:hover {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #fafafb;
border-color: #d1d1d1; }
.events-button:active { .events-button:active {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #f5f6f6;
border-color: #d1d1d1; }
.events-button .events-box { .events-button .events-box {
spacing: 6px; } spacing: 6px; }
.events-button .events-list { .events-button .events-list {
@ -648,12 +711,15 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #f7f7f8; background-color: white;
border-color: #d1d1d1;
padding: 12px; } padding: 12px; }
.world-clocks-button:focus { .world-clocks-button:focus {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #e2eaf9; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.world-clocks-button:focus:hover { .world-clocks-button:focus:hover {
background-color: #e9f1ff; background-color: #e9f1ff;
@ -662,11 +728,15 @@ StScrollBar {
background-color: #e9f1ff; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.world-clocks-button:hover { .world-clocks-button:hover {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #fafafb;
border-color: #d1d1d1; }
.world-clocks-button:active { .world-clocks-button:active {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #f5f6f6;
border-color: #d1d1d1; }
.world-clocks-button .world-clocks-grid { .world-clocks-button .world-clocks-grid {
spacing-rows: 6px; spacing-rows: 6px;
spacing-columns: 12px; } spacing-columns: 12px; }
@ -688,12 +758,15 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #f7f7f8; background-color: white;
border-color: #d1d1d1;
padding: 12px; } padding: 12px; }
.weather-button:focus { .weather-button:focus {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #e2eaf9; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.weather-button:focus:hover { .weather-button:focus:hover {
background-color: #e9f1ff; background-color: #e9f1ff;
@ -702,11 +775,15 @@ StScrollBar {
background-color: #e9f1ff; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.weather-button:hover { .weather-button:hover {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #fafafb;
border-color: #d1d1d1; }
.weather-button:active { .weather-button:active {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #f5f6f6;
border-color: #d1d1d1; }
.weather-button .weather-box { .weather-button .weather-box {
spacing: 10px; } spacing: 10px; }
.weather-button .weather-header-box { .weather-button .weather-header-box {
@ -774,11 +851,14 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #f7f7f8; } background-color: white;
border-color: #d1d1d1; }
.message:focus { .message:focus {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #e2eaf9; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.message:focus:hover { .message:focus:hover {
background-color: #e9f1ff; background-color: #e9f1ff;
@ -787,11 +867,15 @@ StScrollBar {
background-color: #e9f1ff; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.message:hover { .message:hover {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #fafafb;
border-color: #d1d1d1; }
.message:active { .message:active {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #f5f6f6;
border-color: #d1d1d1; }
.message .message-icon-bin { .message .message-icon-bin {
padding: 18px; } padding: 18px; }
.message .message-icon-bin:ltr { .message .message-icon-bin:ltr {
@ -2236,11 +2320,14 @@ StScrollBar {
border-radius: 8px; border-radius: 8px;
margin: 4px; margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #f7f7f8; } background-color: white;
border-color: #d1d1d1; }
.lg-extension:focus { .lg-extension:focus {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: #e2eaf9; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.lg-extension:focus:hover { .lg-extension:focus:hover {
background-color: #e9f1ff; background-color: #e9f1ff;
@ -2249,11 +2336,15 @@ StScrollBar {
background-color: #e9f1ff; background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.lg-extension:hover { .lg-extension:hover {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #fafafb;
border-color: #d1d1d1; }
.lg-extension:active { .lg-extension:active {
border: 1px solid transparent;
color: #5c616c; color: #5c616c;
background-color: white; } background-color: #f5f6f6;
border-color: #d1d1d1; }
.lg-extension-meta { .lg-extension-meta {
spacing: 6px; } spacing: 6px; }
@ -2308,13 +2399,16 @@ StScrollBar {
border-color: #1c1e25; } border-color: #1c1e25; }
.login-dialog .modal-dialog-button:insensitive, .login-dialog .modal-dialog-button:insensitive,
.unlock-dialog .modal-dialog-button:insensitive { .unlock-dialog .modal-dialog-button:insensitive {
border: 1px solid transparent;
color: rgba(92, 97, 108, 0.5); color: rgba(92, 97, 108, 0.5);
background-color: rgba(92, 97, 108, 0.05); background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9;
border-color: #1c1e25; border-color: #1c1e25;
background-color: #1c1e25; background-color: #1c1e25;
color: rgba(255, 255, 255, 0.7); } color: rgba(255, 255, 255, 0.7); }
.login-dialog .modal-dialog-button:default, .login-dialog .modal-dialog-button:default,
.unlock-dialog .modal-dialog-button:default { .unlock-dialog .modal-dialog-button:default {
border: 1px solid transparent;
background-color: #2777ff; background-color: #2777ff;
color: #ffffff; } color: #ffffff; }
.login-dialog .modal-dialog-button:default:focus, .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, .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:hover,
.unlock-dialog .modal-dialog-button:default:focus { .unlock-dialog .modal-dialog-button:default:focus {
background-color: #4187ff; background-color: #2a76f8;
color: white; } color: white; }
.login-dialog .modal-dialog-button:default:active, .login-dialog .modal-dialog-button:default:active,
.unlock-dialog .modal-dialog-button:default:active { .unlock-dialog .modal-dialog-button:default:active {
@ -2331,8 +2425,10 @@ StScrollBar {
color: #ededed; } color: #ededed; }
.login-dialog .modal-dialog-button:default:insensitive, .login-dialog .modal-dialog-button:default:insensitive,
.unlock-dialog .modal-dialog-button:default:insensitive { .unlock-dialog .modal-dialog-button:default:insensitive {
border: 1px solid transparent;
color: rgba(92, 97, 108, 0.5); color: rgba(92, 97, 108, 0.5);
background-color: rgba(92, 97, 108, 0.05); background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9;
background-color: rgba(39, 119, 255, 0.5); background-color: rgba(39, 119, 255, 0.5);
color: rgba(255, 255, 255, 0.5); } color: rgba(255, 255, 255, 0.5); }
.login-dialog .cancel-button, .login-dialog .cancel-button,
@ -2695,34 +2791,14 @@ $_osd_color: if($variant=='light', black, $fg_color);
background-image: url("assets/view-grid-symbolic-dark.svg"); } background-image: url("assets/view-grid-symbolic-dark.svg"); }
/* Date/Time Menu */ /* Date/Time Menu */
.datemenu-today-button { .datemenu-today-button:insensitive {
border-radius: 8px; color: inherit; }
margin: 4px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); .datemenu-today-button .day-label {
color: #5c616c; font-weight: normal; }
background-color: #f7f7f8; }
.datemenu-today-button:focus { .datemenu-today-button .date-label {
color: #5c616c; font-weight: lighter; }
background-color: #e2eaf9;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.datemenu-today-button:focus:hover {
background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:focus:active {
background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:hover {
color: #5c616c;
background-color: white; }
.datemenu-today-button:active {
color: #5c616c;
background-color: white; }
.datemenu-today-button:insensitive {
color: inherit; }
.datemenu-today-button .day-label {
font-weight: normal; }
.datemenu-today-button .date-label {
font-weight: lighter; }
/* Search */ /* Search */
.search-entry { .search-entry {

View File

@ -182,8 +182,6 @@ $_osd_color: if($variant=='light', black, $fg_color);
/* Date/Time Menu */ /* Date/Time Menu */
.datemenu-today-button { .datemenu-today-button {
@include card($flat: false);
&:insensitive { color: inherit; } &:insensitive { color: inherit; }
.day-label { font-weight: normal; } .day-label { font-weight: normal; }

View File

@ -130,12 +130,19 @@
} }
@function draw_border_color ($c) {
//
// colored buttons want the border form the base color
//
@return if($variant == 'light', darken($c, 18%), darken($c, 4%));
}
// buttons // buttons
// since buttons are all flat an borderless now the mixin is simpler // since buttons are all flat an borderless now the mixin is simpler
@mixin button($t, $tc:$fg_color, $c:$bg_color) { @mixin button($t, $tc:$fg_color, $c:$bg_color) {
$button_bg_color: mix($tc, $c, 5%); $button_bg_color: lighten($c, 5%);
// //
// Button drawing function // Button drawing function
// //
@ -149,10 +156,13 @@ $button_bg_color: mix($tc, $c, 5%);
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
// //
border: 1px solid transparent;
// normal button // normal button
@if $t==normal { @if $t==normal {
color: $tc; color: $tc;
background-color: $button_bg_color; background-color: $button_bg_color;
border-color: draw_border_color($c);
} }
// focused button // focused button
@ -173,19 +183,21 @@ $button_bg_color: mix($tc, $c, 5%);
// hover button // hover button
@else if $t==hover { @else if $t==hover {
color: $tc; color: $tc;
background-color: lighten($button_bg_color, 3%); background-color: mix($tc, $button_bg_color, 3%);
border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
} }
// active button // active button
@else if $t==active { @else if $t==active {
color: $tc; color: $tc;
background-color: lighten($button_bg_color, 6%); background-color: mix($tc, $button_bg_color, 6%);
border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
} }
// checked button // checked button
@else if $t==checked { @else if $t==checked {
color: $tc; color: $tc;
background-color: lighten($button_bg_color, 9%); background-color: mix($tc, $button_bg_color, 9%);
&:hover { background-color: lighten($button_bg_color, 12%);} &:hover { background-color: lighten($button_bg_color, 12%);}
&:active { background-color: lighten($button_bg_color, 15%);} &:active { background-color: lighten($button_bg_color, 15%);}
} }
@ -194,6 +206,7 @@ $button_bg_color: mix($tc, $c, 5%);
@else if $t==insensitive { @else if $t==insensitive {
color: transparentize($tc, 0.5); color: transparentize($tc, 0.5);
background-color: transparentize($tc, .95); background-color: transparentize($tc, .95);
border-color: $insensitive_borders_color;
} }
// default/suggested button // default/suggested button
@ -204,7 +217,7 @@ $button_bg_color: mix($tc, $c, 5%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4); box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
} }
&:hover, &:focus { &:hover, &:focus {
background-color: lighten($selected_bg_color, 5%); background-color: mix($tc, $selected_bg_color, 5%);
color: lighten($selected_fg_color, 5%); color: lighten($selected_fg_color, 5%);
} }
&:active { &:active {
@ -222,6 +235,7 @@ $button_bg_color: mix($tc, $c, 5%);
@else if $t==undecorated { @else if $t==undecorated {
background-color: transparent; background-color: transparent;
background-color: none; background-color: none;
border-color: transparent;
&:insensitive { &:insensitive {
@include button(insensitive); @include button(insensitive);
background-color: transparent; background-color: transparent;
@ -294,6 +308,7 @@ $button_bg_color: mix($tc, $c, 5%);
@if $flat { @if $flat {
@include button(undecorated); @include button(undecorated);
box-shadow: none !important; box-shadow: none !important;
&:insensitive { border-color: transparent; }
} @else { } @else {
@include button(normal); @include button(normal);
} }

View File

@ -1,4 +1,45 @@
132a133,139
> @function draw_border_color ($c) {
> //
> // colored buttons want the border form the base color
> //
> @return if($variant == 'light', darken($c, 18%), darken($c, 4%));
> }
>
138c145
< $button_bg_color: mix($tc, $c, 5%);
---
> $button_bg_color: lighten($c, 5%);
151a159,160
> border: 1px solid transparent;
>
155a165
> border-color: draw_border_color($c);
176c186,187
< background-color: lighten($button_bg_color, 3%);
---
> background-color: mix($tc, $button_bg_color, 3%);
> border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
182c193,194
< background-color: lighten($button_bg_color, 6%);
---
> background-color: mix($tc, $button_bg_color, 6%);
> border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
188c200
< background-color: lighten($button_bg_color, 9%);
---
> background-color: mix($tc, $button_bg_color, 9%);
196a209
> border-color: $insensitive_borders_color;
207c220
< background-color: lighten($selected_bg_color, 5%);
---
> background-color: mix($tc, $selected_bg_color, 5%);
224a238
> border-color: transparent;
228c228 228c228
< color: transparentize($selected_fg_color, .5); < color: transparentize($selected_fg_color, .5);
--- ---
> //color: transparentize($selected_fg_color, .5); > //color: transparentize($selected_fg_color, .5);
296a311
> &:insensitive { border-color: transparent; }