99b1178abd
Add missings styles for arrow if app has multiple windows Fix background color in selected app when browsing their windows
157 lines
3.8 KiB
CSS
157 lines
3.8 KiB
CSS
/* OSD */
|
|
|
|
.switcher-list, /* alt + tab */
|
|
.resize-popup, /* i dunno what is that :( */
|
|
.workspace-switcher, /* ctrl + alt + arr_left/arr_right */
|
|
.osd-window /* volume/brightness/.. switcher */ {
|
|
color: TEXT-PRIMARY-COLOR;
|
|
background-color: BACKGROUND-COLOR;
|
|
border: 1px solid BORDER-MENU-SHADOW;
|
|
border-radius: 20px;
|
|
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
|
|
}
|
|
|
|
/* alt + tab */
|
|
.switcher-list { border-radius: 24px; }
|
|
|
|
/* running apps in switcher list */
|
|
.switcher-list .item-box {
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.switcher-list .item-box:hover,
|
|
.switcher-list .item-box:focus,
|
|
.switcher-list .item-box:selected,
|
|
.switcher-list .item-box:outlined {
|
|
background-color: ACCENT-DISABLED-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
|
|
/* arrow if app has multiple windows */
|
|
.switcher-arrow {
|
|
color: TEXT-DISABLED-COLOR;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.switcher-arrow:highlighted {
|
|
color: TEXT-SECONDARY-COLOR;
|
|
}
|
|
|
|
|
|
/* ctrl + alt + arr_left/arr_right */
|
|
.ws-switcher-indicator {
|
|
background-color: TEXT-SECONDARY-COLOR;
|
|
}
|
|
|
|
|
|
/* Modal dialog */
|
|
.modal-dialog {
|
|
border-radius: 20px;
|
|
background-color: BACKGROUND-COLOR;
|
|
border: none;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
color: TEXT-PRIMARY-COLOR;
|
|
}
|
|
|
|
|
|
/* user avatar */
|
|
.user-icon.user-avatar {
|
|
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
|
|
/* password entry */
|
|
.prompt-dialog-password-entry {
|
|
background-color: SECTION-COLOR;
|
|
}
|
|
|
|
|
|
/* button in modals */
|
|
.modal-dialog-linked-button,
|
|
.notification-button,
|
|
.hotplug-notification-item {
|
|
padding: 10px 0 !important;
|
|
border-radius: 12px !important;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
background-color: ACCENT-DISABLED-COLOR;
|
|
color: TEXT-PRIMARY-COLOR;
|
|
animation-duration: 100ms;
|
|
}
|
|
|
|
|
|
/* if first button: margin-right: 12px/2 */
|
|
.modal-dialog-linked-button:ltr:first-child,
|
|
.notification-button:ltr:first-child,
|
|
.hotplug-notification-item:ltr:first-child,
|
|
.modal-dialog-linked-button:rtl:last-child,
|
|
.notification-button:rtl:last-child,
|
|
.hotplug-notification-item:rtl:last-child {
|
|
margin: 0 6px 12px 12px !important;
|
|
}
|
|
|
|
/* if last button: margin-left: 12px/2 */
|
|
.modal-dialog-linked-button:ltr:last-child,
|
|
.notification-button:ltr:last-child,
|
|
.hotplug-notification-item:ltr:last-child,
|
|
.modal-dialog-linked-button:rtl:first-child,
|
|
.notification-button:rtl:first-child,
|
|
.hotplug-notification-item:rtl:first-child {
|
|
margin: 0 12px 12px 6px !important;
|
|
}
|
|
|
|
/* if only button: normal margin */
|
|
.modal-dialog-linked-button:first-child:last-child,
|
|
.notification-button:first-child:last-child,
|
|
.hotplug-notification-item:first-child:last-child {
|
|
margin: 0 12px 12px 12px !important;
|
|
}
|
|
|
|
/* else: margin-right/left: 12px/2 */
|
|
.modal-dialog-linked-button,
|
|
.notification-button,
|
|
.hotplug-notification-item {
|
|
margin: 0 6px 12px 6px !important;
|
|
}
|
|
|
|
|
|
.modal-dialog-linked-button:hover,
|
|
.modal-dialog-linked-button:focus,
|
|
.notification-button:hover,
|
|
.notification-button:focus {
|
|
background: ACCENT-DISABLED_HOVER;
|
|
color: TEXT-PRIMARY-COLOR;
|
|
}
|
|
|
|
.modal-dialog-linked-button:last-child {
|
|
background-color: BUTTON-COLOR;
|
|
color: BUTTON-TEXT-COLOR;
|
|
}
|
|
|
|
.modal-dialog-linked-button:last-child:hover,
|
|
.modal-dialog-linked-button:last-child:focus {
|
|
background-color: BUTTON_HOVER;
|
|
}
|
|
|
|
.modal-dialog-linked-button:focus,
|
|
.hotplug-notification-item:focus,
|
|
.notification-button:focus {
|
|
animation-duration: 100ms;
|
|
box-shadow: inset 0 0 0 1px TEXT-DISABLED-COLOR !important;
|
|
}
|
|
|
|
.modal-dialog-linked-button:focus:hover,
|
|
.hotplug-notification-item:focus:hover,
|
|
.notification-button:focus:hover,
|
|
.modal-dialog-linked-button:focus:active,
|
|
.hotplug-notification-item:focus:active,
|
|
.notification-button:focus:active {
|
|
box-shadow: inset 0 0 0 1px TEXT-SECONDARY-COLOR !important;
|
|
}
|
|
|
|
.modal-dialog .modal-dialog-linked-button:insensitive,
|
|
.hotplug-notification-item:insensitive,
|
|
.notification-banner .notification-button:insensitive {
|
|
color: BUTTON-TEXT_SECONDARY;
|
|
background-color: BUTTON_INSENSITIVE;
|
|
} |