373 lines
10 KiB
SCSS
373 lines
10 KiB
SCSS
// extend-elements
|
|
|
|
// to bottom
|
|
%bg-grad-to-bottom {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $dark_bg_grad;
|
|
background-gradient-end: $light_bg_grad;
|
|
}
|
|
|
|
// hover to bottom
|
|
%hover-bg-grad-to-bottom {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $dark_hover_bg_grad;
|
|
background-gradient-end: $light_hover_bg_grad;
|
|
}
|
|
|
|
// button to top
|
|
%button-bg-grad-to-top {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $light_button_bg_grad;
|
|
background-gradient-end: $dark_button_bg_grad;
|
|
}
|
|
|
|
// hover button to top
|
|
%hover-button-bg-grad-to-top {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $light_hover_button_bg_grad;
|
|
background-gradient-end: $dark_hover_button_bg_grad;
|
|
}
|
|
|
|
// to top
|
|
%bg-grad-to-top {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $light_bg_grad;
|
|
background-gradient-end: $dark_bg_grad;
|
|
}
|
|
|
|
// hover to top
|
|
%hover-bg-grad-to-top {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $light_hover_bg_grad;
|
|
background-gradient-end: $dark_hover_bg_grad;
|
|
}
|
|
|
|
// selected to bottom
|
|
%selected-bg-grad-to-bottom {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $dark_selected_bg_grad;
|
|
background-gradient-end: $light_selected_bg_grad;
|
|
}
|
|
|
|
// selected to top
|
|
%selected-bg-grad-to-top {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $light_selected_bg_grad;
|
|
background-gradient-end: $dark_selected_bg_grad;
|
|
}
|
|
|
|
// hover selected to bottom
|
|
%hover-selected-grad-to-bottom {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $dark_hover_selected_grad;
|
|
background-gradient-end: $light_hover_selected_grad;
|
|
}
|
|
|
|
// hover selected to top
|
|
%hover-selected-grad-to-top {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $light_hover_selected_grad;
|
|
background-gradient-end: $dark_hover_selected_grad;
|
|
}
|
|
|
|
// to right
|
|
%bg-grad-to-right {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: $dark_bg_grad;
|
|
background-gradient-end: $light_bg_grad;
|
|
}
|
|
|
|
// to left
|
|
%bg-grad-to-left {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: $light_bg_grad;
|
|
background-gradient-end: $dark_bg_grad;
|
|
}
|
|
|
|
// hover to right
|
|
%hover-bg-grad-to-right {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: $dark_hover_bg_grad;
|
|
background-gradient-end: $light_hover_bg_grad;
|
|
}
|
|
|
|
// hover to left
|
|
%hover-bg-grad-to-left {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: $light_hover_bg_grad;
|
|
background-gradient-end: $dark_hover_bg_grad;
|
|
}
|
|
|
|
// selected to right
|
|
%selected-bg-grad-to-right {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: $dark_selected_bg_grad;
|
|
background-gradient-end: $light_selected_bg_grad;
|
|
}
|
|
|
|
// selected to left
|
|
%selected-bg-grad-to-left {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: $light_selected_bg_grad;
|
|
background-gradient-end: $dark_selected_bg_grad;
|
|
}
|
|
|
|
// hover selected to right
|
|
%hover-selected-grad-to-right {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: $dark_hover_selected_grad;
|
|
background-gradient-end: $light_hover_selected_grad;
|
|
}
|
|
|
|
// hover selected to left
|
|
%hover-selected-grad-to-left {
|
|
background-gradient-direction: horizontal;
|
|
background-gradient-start: $light_hover_selected_grad;
|
|
background-gradient-end: $dark_hover_selected_grad;
|
|
}
|
|
|
|
// tooltip to top
|
|
%tooltip-bg-grad-to-top {
|
|
background-gradient-direction: vertical;
|
|
background-gradient-start: $light_tooltip_bg_grad;
|
|
background-gradient-end: $dark_tooltip_bg_grad;
|
|
}
|
|
|
|
// used in selectors
|
|
// .osd-window, .info-osd, .workspace-osd
|
|
%osd-shared {
|
|
@extend %bg-grad-to-bottom;
|
|
|
|
border: 1px solid $exterior_border;
|
|
border-radius: $roundness;
|
|
color: $dark_fg_color;
|
|
}
|
|
|
|
// used in selectors
|
|
// .slider, .sound-player .slider, .popup-slider-menu-item
|
|
%slider-shared {
|
|
height: 1.2em;
|
|
min-width: 15em;
|
|
color: $button_bg_color;
|
|
-slider-height: 2px;
|
|
-slider-background-color: $scrollbar_bg_color;
|
|
-slider-border-color: $interior_border;
|
|
-slider-active-background-color: $scrollbar_slider_hover_color;
|
|
-slider-active-border-color: $selected_border;
|
|
-slider-border-width: 1px;
|
|
-slider-border-radius: $roundness;
|
|
-slider-handle-radius: 8px;
|
|
-slider-handle-border-color: $button_border;
|
|
}
|
|
|
|
// used in selectors
|
|
// .separator, .popup-seperator-menu-item
|
|
%separator-shared {
|
|
-gradient-height: 3px;
|
|
-gradient-start: $selected_bg_color;
|
|
-gradient-end: $dark_bg_color;
|
|
-margin-horizontal: 4px;
|
|
height: 1em;
|
|
}
|
|
|
|
// used in selectors
|
|
// #menu-search-entry, .run-dialog-entry, #notification StEntry
|
|
%dialog-entry {
|
|
@extend %tooltip-bg-grad-to-top;
|
|
|
|
padding: $spacing_plus2;
|
|
border-radius: $roundness;
|
|
color: $tooltip_fg_color;
|
|
border: 1px solid $interior_border;
|
|
selection-background-color: $selected_bg_color;
|
|
selected-color: $selected_fg_color;
|
|
caret-color: $primary_caret_color;
|
|
caret-size: 0.1em;
|
|
width: 250px;
|
|
height: 1.5em;
|
|
transition-duration: 150;
|
|
}
|
|
|
|
// used in selectors
|
|
// .desklet-with-borders, .desklet-with-borders-and-header, .desklet-header, .photoframe-box
|
|
%desklet-shared {
|
|
@extend %bg-grad-to-right;
|
|
|
|
color: $dark_fg_color;
|
|
padding: 8px;
|
|
border: 1px solid $exterior_border;
|
|
}
|
|
|
|
// used in selectors
|
|
// .calendar-change-month-back, .calendar-change-month-forward
|
|
%calendar-shared {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: $roundness;
|
|
transition-duration: 150;
|
|
}
|
|
|
|
// used in selectors
|
|
// .notification-button, .notification-icon-button, .modal-dialog-button, .sound-player-overlay StButton, .keyboard-key
|
|
%shared-button {
|
|
@extend %button-bg-grad-to-top;
|
|
|
|
border: 1px solid $button_border;
|
|
border-radius: $roundness;
|
|
text-align: center;
|
|
color: $button_fg_color;
|
|
transition-duration: 150;
|
|
}
|
|
|
|
// used in selectors
|
|
// .notification-button:hover, .notification-icon-button:hover, .modal-dialog-button:hover, .sound-player-overlay StButton:hover, .keyboard-key:hover
|
|
%shared-button-hover {
|
|
@extend %hover-button-bg-grad-to-top;
|
|
|
|
border: 1px solid $selected_border;
|
|
}
|
|
|
|
// used in selectors
|
|
// .notification-button:active, .notification-icon-button:active, .modal-dialog-button:active, .modal-dialog-button:pressed, .sound-player-overlay StButton:active, .keyboard-key:active
|
|
%shared-button-active {
|
|
@extend %selected-bg-grad-to-bottom;
|
|
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
// used in selectors
|
|
// .menu .popup-combo-menu
|
|
%shared-menu {
|
|
@extend %bg-grad-to-right;
|
|
|
|
padding: 8px;
|
|
border: 1px solid $exterior_border;
|
|
border-radius: $roundness;
|
|
color: $dark_fg_color;
|
|
}
|
|
|
|
// used in selectors
|
|
// .menu-application-button-label, .menu-category-button-label
|
|
%menu-button-label-shared {
|
|
&:ltr {
|
|
padding-left: 4px;
|
|
}
|
|
&:rtl {
|
|
padding-right: 4px;
|
|
}
|
|
}
|
|
|
|
// used in selectors
|
|
// .popup-menu-item, .popup-combobox-item, .menu-favorites-button, .menu-places-button, .menu-category-button, .menu-category-button-greyed, .menu-category-button-selected
|
|
%menu-buttons-shared {
|
|
//min-height: 22px; //setting a min height accross the board for all menu types (menu entries with an application icon are hardcoded to this min-height) causes display issues in cinnamon :-(
|
|
padding: $spacing_plus2;
|
|
}
|
|
|
|
// used in selectors
|
|
// .show-processes-dialog-subject, .mount-question-dialog-subject
|
|
%shared-dialogs-subject {
|
|
font-weight: bold;
|
|
color: $dark_fg_color;
|
|
padding-top: 10px;
|
|
padding-left: 17px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
// used in selectors
|
|
// .show-processes-dialog-subject:rtl, .mount-question-dialog-subject:rtl
|
|
%shared-dialogs-subject-rtl {
|
|
padding-left: 0;
|
|
padding-right: 17px;
|
|
}
|
|
|
|
// used in selectors
|
|
// .show-processes-dialog-description, .mount-question-dialog-description
|
|
%shared-dialogs-description {
|
|
color: $dark_fg_color;
|
|
padding-left: 17px;
|
|
width: 28em;
|
|
}
|
|
|
|
// used in selectors
|
|
// .menu-applications-inner-box StScrollView, .starkmenu-favorites-box .menu-context-menu
|
|
%menu-context-shared {
|
|
@extend %bg-grad-to-bottom;
|
|
|
|
padding: 8px;
|
|
margin: 8px 0;
|
|
border-radius: $roundness;
|
|
border: 1px solid $interior_border;
|
|
StIcon {
|
|
&:ltr {
|
|
padding-right: 4px;
|
|
}
|
|
&:rtl {
|
|
padding-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// used in selectors
|
|
// .panel-top .window-list-item-box:active, .panel-top .window-list-item-box:checked, .panel-top .window-list-item-box:focus
|
|
%panel-top-shared {
|
|
@extend %selected-bg-grad-to-top;
|
|
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
// used in selectors
|
|
// .panel-bottom .windows-list-item-box:active, .panel-bottom .window-list-item-box:checked, .panel-bottom .window-list-item-box:focus
|
|
%panel-bottom-shared {
|
|
@extend %selected-bg-grad-to-bottom;
|
|
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
// used in selectors
|
|
// .panel-left .window-list-item-box:active, .panel-left .window-list-item-box:checked, .panel-left .window-list-item-box:focus
|
|
%panel-left-shared {
|
|
@extend %selected-bg-grad-to-left;
|
|
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
// used in selectors
|
|
// .panel-right .windows-list-item-box:active, .panel-right .window-list-item-box:checked, .panel-right .window-list-item-box:focus
|
|
%panel-right-shared {
|
|
@extend %selected-bg-grad-to-right;
|
|
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
// used in selectors
|
|
// .check-box StBin, .check-box:focus StBin
|
|
%check-box-shared {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(assets/checkbox-off.svg);
|
|
}
|
|
|
|
// used in selectors
|
|
// .radiobutton StBin, .radiobutton:focus StBin
|
|
%radiobutton-shared {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url(assets/radiobutton-off.svg);
|
|
border-radius: $roundness;
|
|
}
|
|
|
|
// used in selectors
|
|
// .tile-preview, .tile-hud
|
|
%tile-shared {
|
|
background-color: $dark_bg_color_trans;
|
|
border: 2px solid $exterior_border;
|
|
}
|
|
|
|
// used in selectors
|
|
// .tile-preview.snap, .tile-hud.snap
|
|
%tile-shared-snap {
|
|
background-color: $dark_bg_color_trans;
|
|
border: 2px solid $selected_border;
|
|
}
|