dotfiles/home/.themes/oomox-iceberg/cinnamon/scss/_extends.scss

373 lines
10 KiB
SCSS
Raw Normal View History

// 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;
}