Generate Iceberg GTK theme and icons with oomox
This commit is contained in:
David Todd
372
home/.themes/oomox-iceberg/cinnamon/scss/_extends.scss
Normal file
372
home/.themes/oomox-iceberg/cinnamon/scss/_extends.scss
Normal file
@@ -0,0 +1,372 @@
|
||||
// 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;
|
||||
}
|
||||
84
home/.themes/oomox-iceberg/cinnamon/scss/_global.scss
Normal file
84
home/.themes/oomox-iceberg/cinnamon/scss/_global.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
// scss-lint:disable ColorVariable
|
||||
|
||||
// main colors used in theme
|
||||
// 1.0 < 1 will result in most cinnamon surfaces being transparent
|
||||
$button_bg_color: #6b7089;
|
||||
$button_fg_color: #c6c8d1;
|
||||
$selected_bg_color: #84a0c6;
|
||||
$selected_fg_color: #d2d4de;
|
||||
$tooltip_bg_color: #c6c8d1;
|
||||
$tooltip_fg_color: #161821;
|
||||
$dark_bg_color: fade-out(#161821, 1 - 1.0);
|
||||
$dark_fg_color: #c6c8d1;
|
||||
|
||||
// an always transparent color used for expo & scale views and the lightbox effect when cinnamon is showing an OSD.
|
||||
$dark_bg_color_trans: fade-out(#161821, 1 - (1.0 / 2));
|
||||
|
||||
// used to calculate gradients for gradient values > 0
|
||||
$lighten_amount: 1 + (0.0 / 2);
|
||||
$darken_amount: 1 - (0.0 / 2);
|
||||
|
||||
// main background surface gradient start and end colors
|
||||
$light_bg_grad: if($lighten_amount > 1, lighten($dark_bg_color, ($lighten_amount - 1) * lightness($dark_bg_color)), $dark_bg_color);
|
||||
$dark_bg_grad: if($darken_amount < 1, darken($dark_bg_color, (1 - $darken_amount) * lightness($dark_bg_color)), $dark_bg_color);
|
||||
|
||||
// hovered background surface gradient start and end colors - used for window list
|
||||
$hover_bg_color: lighten($dark_bg_color, .05 * lightness($dark_bg_color));
|
||||
$light_hover_bg_grad: if($lighten_amount > 1, lighten($hover_bg_color, ($lighten_amount - 1) * lightness($hover_bg_color)), $hover_bg_color);
|
||||
$dark_hover_bg_grad: if($darken_amount < 1, darken($hover_bg_color, (1 - $darken_amount) * lightness($hover_bg_color)), $hover_bg_color);
|
||||
|
||||
// selected background surface gradient start and end colors - used for window list & buttons
|
||||
$light_selected_bg_grad: if($lighten_amount > 1, lighten($selected_bg_color, ($lighten_amount - 1) * lightness($selected_bg_color)), $selected_bg_color);
|
||||
$dark_selected_bg_grad: if($darken_amount < 1, darken($selected_bg_color, (1 - $darken_amount) * lightness($selected_bg_color)), $selected_bg_color);
|
||||
|
||||
// hovered selected background surface gradient start and end colors - used for window list
|
||||
$hover_selected_color: lighten($selected_bg_color, .05 * lightness($selected_bg_color));
|
||||
$light_hover_selected_grad: if($lighten_amount > 1, lighten($hover_selected_color, ($lighten_amount - 1) * lightness($hover_selected_color)), $hover_selected_color);
|
||||
$dark_hover_selected_grad: if($darken_amount < 1, darken($hover_selected_color, (1 - $darken_amount) * lightness($hover_selected_color)), $hover_selected_color);
|
||||
|
||||
// button background surface gradient start and end colors - used for buttons
|
||||
$light_button_bg_grad: if($lighten_amount > 1, lighten($button_bg_color, ($lighten_amount - 1) * lightness($button_bg_color)), $button_bg_color);
|
||||
$dark_button_bg_grad: if($darken_amount < 1, darken($button_bg_color, (1 - $darken_amount) * lightness($button_bg_color)), $button_bg_color);
|
||||
|
||||
// hovered button background surface gradient start and end colors - used for buttons
|
||||
$hover_button_bg: lighten($button_bg_color, .05 * lightness($button_bg_color));
|
||||
$light_hover_button_bg_grad: if($lighten_amount > 1, lighten($hover_button_bg, ($lighten_amount - 1) * lightness($hover_button_bg)), $hover_button_bg);
|
||||
$dark_hover_button_bg_grad: if($darken_amount < 1, darken($hover_button_bg, (1 - $darken_amount) * lightness($hover_button_bg)), $hover_button_bg);
|
||||
|
||||
// tooltip background surface gradient start and end colors - used for tooltips
|
||||
$light_tooltip_bg_grad: if($lighten_amount > 1, lighten($tooltip_bg_color, ($lighten_amount - 1) * lightness($tooltip_bg_color)), $tooltip_bg_color);
|
||||
$dark_tooltip_bg_grad: if($darken_amount < 1, darken($tooltip_bg_color, (1 - $darken_amount) * lightness($tooltip_bg_color)), $tooltip_bg_color);
|
||||
|
||||
// borders used throughout theme buttons also use selected_borders_color
|
||||
$selected_border: mix($dark_bg_color, $selected_bg_color, if(lightness($dark_bg_color) < 50%, 18%, 10%));
|
||||
$border_strength: if(lightness($dark_fg_color) > 50, .1, .2);
|
||||
$interior_border: fade-out($dark_fg_color, 0.88 - $border_strength);
|
||||
$exterior_border: mix($dark_bg_color, $dark_fg_color, (30 + ($border_strength * 100)));
|
||||
|
||||
// decoration for buttons
|
||||
$button_border_strength: if(lightness($button_fg_color) > 50, .1, .2);
|
||||
$button_border: fade-out($button_fg_color, 0.88 - $button_border_strength);
|
||||
|
||||
// scrollbar colors
|
||||
$scrollbar_bg_color: darken($dark_bg_color, 5%);
|
||||
$scrollbar_slider_color: mix($dark_bg_color, $dark_fg_color, 20%);
|
||||
$scrollbar_slider_hover_color: mix($dark_bg_color, $selected_bg_color, 20%);
|
||||
|
||||
// caret colors for dialog entrys
|
||||
$primary_caret_color: #161821;
|
||||
|
||||
// other colors used in the theme
|
||||
$link_color: #84a0c6;
|
||||
$success_color: #c0ca8e;
|
||||
$warning_color: #e9b189;
|
||||
$error_color: #e98989;
|
||||
$info_fg_color: #161821;
|
||||
$info_bg_color: #91acd1;
|
||||
|
||||
// used for border-radius throughout theme
|
||||
$roundness: 4px;
|
||||
|
||||
// used for buttons, entrys, panel spacing, and menu item spacing.
|
||||
$spacing: 3px;
|
||||
$spacing_plus2: (3 + 2) + px;
|
||||
|
||||
14
home/.themes/oomox-iceberg/cinnamon/scss/cinnamon.scss
Normal file
14
home/.themes/oomox-iceberg/cinnamon/scss/cinnamon.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
@import "_global";
|
||||
@import "_extends";
|
||||
|
||||
@import "sections/_stage";
|
||||
@import "sections/_menu";
|
||||
@import "sections/_panel";
|
||||
@import "sections/_calendar";
|
||||
@import "sections/_accessibility";
|
||||
@import "sections/_notifications";
|
||||
@import "sections/_dialogs";
|
||||
@import "sections/_desklets";
|
||||
@import "sections/_alt-tab";
|
||||
@import "sections/_overview";
|
||||
@import "sections/_tile-hud";
|
||||
@@ -0,0 +1,46 @@
|
||||
// on screen keyboard
|
||||
#keyboard {
|
||||
background-color: $dark_bg_color_trans;
|
||||
}
|
||||
.keyboard-key {
|
||||
@extend %shared-button;
|
||||
|
||||
&:grayed {
|
||||
color: $selected_fg_color;
|
||||
border-color: $selected_fg_color;
|
||||
}
|
||||
&:checked {
|
||||
border-color: $selected_border;
|
||||
}
|
||||
&:hover {
|
||||
@extend %shared-button-hover;
|
||||
}
|
||||
&:active {
|
||||
@extend %shared-button-active;
|
||||
}
|
||||
}
|
||||
.keyboard-layout {
|
||||
spacing: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
.keyboard-row {
|
||||
spacing: 16px;
|
||||
}
|
||||
.keyboard-subkeys {
|
||||
color: $dark_fg_color;
|
||||
padding: 4px;
|
||||
-arrow-border-radius: $roundness;
|
||||
-arrow-background-color: $dark_bg_color;
|
||||
-arrow-border-width: 1px;
|
||||
-arrow-border-color: $dark_fg_color;
|
||||
-arrow-base: 16px;
|
||||
-arrow-rise: 8px;
|
||||
-boxpointer-gap: 4px;
|
||||
}
|
||||
// desktop zoom feature
|
||||
.magnifier-zoom-region {
|
||||
border: 3px solid $exterior_border;
|
||||
&.full-screen {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// non 3D alt-tab options
|
||||
#altTabPopup {
|
||||
padding: 8px;
|
||||
spacing: 16px;
|
||||
}
|
||||
.switcher-list {
|
||||
@extend %bg-grad-to-bottom;
|
||||
|
||||
border-radius: $roundness;
|
||||
border: 1px solid $exterior_border;
|
||||
padding: 16px;
|
||||
color: $dark_fg_color;
|
||||
.item-box {
|
||||
padding: 8px;
|
||||
border-radius: $roundness;
|
||||
&:selected {
|
||||
@extend %selected-bg-grad-to-bottom;
|
||||
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
.thumbnail-box {
|
||||
padding: 2px;
|
||||
spacing: 4px;
|
||||
color: $dark_fg_color;
|
||||
}
|
||||
.thumbnail {
|
||||
min-width: 20em;
|
||||
}
|
||||
.separator {
|
||||
width: 1px;
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
.switcher-list-item-container {
|
||||
spacing: 8px;
|
||||
}
|
||||
.thumbnail-scroll-gradient-left {
|
||||
background-gradient-direction: horizontal;
|
||||
background-gradient-start: rgba(51, 51, 51, 1.0);
|
||||
background-gradient-end: rgba(51, 51, 51, 0);
|
||||
border-radius: $roundness;
|
||||
border-radius-topright: 0;
|
||||
border-radius-bottomright: 0;
|
||||
width: 60px;
|
||||
}
|
||||
.thumbnail-scroll-gradient-right {
|
||||
background-gradient-direction: horizontal;
|
||||
background-gradient-start: rgba(51, 51, 51, 0);
|
||||
background-gradient-end: rgba(51, 51, 51, 1.0);
|
||||
border-radius: $roundness;
|
||||
border-radius-topleft: 0;
|
||||
border-radius-bottomleft: 0;
|
||||
width: 60px;
|
||||
}
|
||||
.switcher-arrow {
|
||||
border-color: rgba(0,0,0,0);
|
||||
color: $dark_fg_color;
|
||||
&:highlighted {
|
||||
border-color: rgba(0,0,0,0);
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
.switcher-preview-backdrop {
|
||||
background-color: rgba(25,25,25,0.65);
|
||||
}
|
||||
120
home/.themes/oomox-iceberg/cinnamon/scss/sections/_calendar.scss
Normal file
120
home/.themes/oomox-iceberg/cinnamon/scss/sections/_calendar.scss
Normal file
@@ -0,0 +1,120 @@
|
||||
// the calendar displayed by the calendar applet is a heavily modified menu and inherits from the .menu selectosr
|
||||
// indivudual elements within the menu can be themed seperately with these selectors
|
||||
.calendar {
|
||||
padding: 1em 1.75em;
|
||||
spacing-rows: 1px;
|
||||
spacing-columns: 5px;
|
||||
}
|
||||
// also covers the year label
|
||||
.calendar-month-label {
|
||||
color: $dark_fg_color;
|
||||
font-size: 0.8em;
|
||||
padding: 5px 10px;
|
||||
border-radius: $roundness;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.calendar-change-month-back {
|
||||
@extend %calendar-shared;
|
||||
|
||||
border: 1px solid transparent;
|
||||
background-image: url(assets/calendar-arrow-left.svg);
|
||||
&:rtl {
|
||||
background-image: url(assets/calendar-arrow-right.svg);
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid $selected_bg_color;
|
||||
}
|
||||
&:active {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
.calendar-change-month-forward {
|
||||
@extend %calendar-shared;
|
||||
|
||||
border: 1px solid transparent;
|
||||
background-image: url(assets/calendar-arrow-right.svg);
|
||||
&:rtl {
|
||||
background-image: url(assets/calendar-arrow-left.svg);
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid $selected_bg_color;
|
||||
}
|
||||
&:active {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
.datemenu-date-label {
|
||||
padding: 1em 1.75em;
|
||||
color: $dark_fg_color;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.calendar-day-base {
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
width: 2.4em;
|
||||
height: 1.8em;
|
||||
border-radius: $roundness;
|
||||
&:active {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
&:hover {
|
||||
}
|
||||
}
|
||||
.calendar-day-heading {
|
||||
color: $dark_fg_color;
|
||||
padding-top: 0.9em;
|
||||
}
|
||||
.calendar-week-number {
|
||||
color: $dark_fg_color;
|
||||
font-weight: bold;
|
||||
padding-top: 0.6em;
|
||||
}
|
||||
.calendar-day {
|
||||
&:ltr {
|
||||
color: $dark_fg_color;
|
||||
padding: 2px;
|
||||
}
|
||||
&:rtl {
|
||||
color: $dark_fg_color;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
.calendar-day-top {
|
||||
&:ltr {
|
||||
}
|
||||
&:rtl {
|
||||
}
|
||||
}
|
||||
.calendar-day-left {
|
||||
&:ltr {
|
||||
}
|
||||
&:rtl {
|
||||
}
|
||||
}
|
||||
.calendar-work-day {
|
||||
}
|
||||
.calendar-nonwork-day {
|
||||
font-weight: bold;
|
||||
}
|
||||
// this is always is an active state
|
||||
.calendar-today {
|
||||
@extend %selected-bg-grad-to-bottom;
|
||||
|
||||
font-weight: bold;
|
||||
&:active {
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
.calendar-other-month-day {
|
||||
font-style: italic;
|
||||
}
|
||||
// this is always is an active state
|
||||
.calendar-day-with-events {
|
||||
background-color: $selected_bg_color;
|
||||
font-weight: bold;
|
||||
&:active {
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
// desklets - the base .desklet selector is for 'undecorated' desklets however some subtle background themeing is desirable
|
||||
// to maintain visibility irrespctive of wallpaper and to allow for the highlighting scheme to work
|
||||
.desklet {
|
||||
font-size: 0.9em;
|
||||
padding: 8px;
|
||||
color: $dark_fg_color;
|
||||
border-radius: $roundness;
|
||||
background-color: $dark_bg_color_trans;
|
||||
&:highlight {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
// these do not inherit from .desklet
|
||||
.desklet-with-borders {
|
||||
@extend %desklet-shared;
|
||||
|
||||
font-size: 0.9em;
|
||||
border-radius: $roundness;
|
||||
&:highlight {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
.desklet-with-borders-and-header {
|
||||
@extend %desklet-shared;
|
||||
|
||||
font-size: 0.9em;
|
||||
border-radius-bottomleft: $roundness;
|
||||
border-radius-bottomright: $roundness;
|
||||
&:highlight {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
.desklet-header {
|
||||
@extend %desklet-shared;
|
||||
|
||||
font-size: 1.2em;
|
||||
border-radius-topleft: $roundness;
|
||||
border-radius-topright: $roundness;
|
||||
&:highlight {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
.photoframe-box {
|
||||
@extend %desklet-shared;
|
||||
|
||||
border-radius: $roundness;
|
||||
&:highlight {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
.desklet-drag-placeholder {
|
||||
border: 2px solid $selected_bg_color;
|
||||
background-color: $dark_bg_color_trans;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
.launcher {
|
||||
padding: 1px;
|
||||
transition-duration: 150;
|
||||
.icon-box {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
// inherits font characteristics from .desklet-header
|
||||
.clock-desklet-label {
|
||||
}
|
||||
201
home/.themes/oomox-iceberg/cinnamon/scss/sections/_dialogs.scss
Normal file
201
home/.themes/oomox-iceberg/cinnamon/scss/sections/_dialogs.scss
Normal file
@@ -0,0 +1,201 @@
|
||||
// on screen messages and input boxes
|
||||
.modal-dialog {
|
||||
@extend %bg-grad-to-right;
|
||||
|
||||
border: 1px solid $exterior_border;
|
||||
border-radius: $roundness;
|
||||
color: $dark_fg_color;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.modal-dialog-button-box {
|
||||
spacing: 16px;
|
||||
}
|
||||
.modal-dialog-button {
|
||||
@extend %shared-button;
|
||||
|
||||
min-width: 5em;
|
||||
min-height: 1em;
|
||||
padding: $spacing_plus2;
|
||||
&:hover {
|
||||
@extend %shared-button-hover;
|
||||
}
|
||||
&:focus {
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
&:active {
|
||||
@extend %shared-button-active;
|
||||
}
|
||||
&:pressed {
|
||||
@extend %shared-button-active;
|
||||
}
|
||||
&:disabled {
|
||||
color: rgb(60, 60, 60);
|
||||
}
|
||||
}
|
||||
// run dialog (ALT-F2)
|
||||
.run-dialog-label {
|
||||
color: $dark_fg_color;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.run-dialog-error-label {
|
||||
color: $selected_bg_color;
|
||||
}
|
||||
.run-dialog-error-box {
|
||||
padding-top: 15px;
|
||||
spacing: 5px;
|
||||
}
|
||||
.run-dialog-completion-box {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.run-dialog-entry {
|
||||
@extend %dialog-entry;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
}
|
||||
.run-dialog {
|
||||
border-radius: $roundness;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
// removable media dialogs
|
||||
.cinnamon-mount-operation-icon {
|
||||
icon-size: 4.8em;
|
||||
}
|
||||
.mount-password-reask {
|
||||
color: $warning_color;
|
||||
}
|
||||
.show-processes-dialog {
|
||||
spacing: 24px;
|
||||
}
|
||||
.mount-question-dialog {
|
||||
spacing: 24px;
|
||||
}
|
||||
.show-processes-dialog-subject {
|
||||
@extend %shared-dialogs-subject;
|
||||
|
||||
&:rtl {
|
||||
@extend %shared-dialogs-subject-rtl;
|
||||
}
|
||||
}
|
||||
.mount-question-dialog-subject {
|
||||
@extend %shared-dialogs-subject;
|
||||
|
||||
&:rtl {
|
||||
@extend %shared-dialogs-subject-rtl;
|
||||
}
|
||||
}
|
||||
.show-processes-dialog-description {
|
||||
@extend %shared-dialogs-description;
|
||||
|
||||
&:rtl {
|
||||
padding-right: 17px;
|
||||
}
|
||||
}
|
||||
.mount-question-dialog-description {
|
||||
@extend %shared-dialogs-description;
|
||||
|
||||
&:rtl {
|
||||
padding-right: 17px;
|
||||
}
|
||||
}
|
||||
.show-processes-dialog-app-list {
|
||||
max-height: 200px;
|
||||
padding-top: 24px;
|
||||
padding-left: 49px;
|
||||
padding-right: 32px;
|
||||
&:rtl {
|
||||
padding-right: 49px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
.show-processes-dialog-app-list-item {
|
||||
color: $dark_fg_color;
|
||||
&:hover {
|
||||
color: $dark_fg_color;
|
||||
}
|
||||
&:ltr {
|
||||
padding-right: 1em;
|
||||
}
|
||||
&:rtl {
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
.show-processes-dialog-app-list-item-icon {
|
||||
&:ltr {
|
||||
padding-right: 17px;
|
||||
}
|
||||
&:rtl {
|
||||
padding-left: 17px;
|
||||
}
|
||||
}
|
||||
.show-processes-dialog-app-list-item-name {
|
||||
}
|
||||
// displayed when media keys are pressed.
|
||||
.osd-window {
|
||||
@extend %osd-shared;
|
||||
|
||||
spacing: 1em;
|
||||
padding: 16px;
|
||||
.level {
|
||||
height: 0.7em;
|
||||
border-radius: 0.3em;
|
||||
background-color: $scrollbar_bg_color;
|
||||
}
|
||||
.level-bar {
|
||||
border-radius: 0.3em;
|
||||
background-color: $scrollbar_slider_hover_color;
|
||||
}
|
||||
}
|
||||
.info-osd, .workspace-osd, .overview-empty-placeholder {
|
||||
@extend %osd-shared;
|
||||
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
// this is an full screen overlay that is displayed with any cinnamon OSD or modal dialog which needs to always be semi transparent
|
||||
.lightbox {
|
||||
background-color: $dark_bg_color_trans;
|
||||
}
|
||||
// applet 'about' OSDs - inherits from modal dialogs
|
||||
.about-content {
|
||||
min-width: 250px;
|
||||
min-height: 150px;
|
||||
spacing: 8px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.about-title {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.about-uuid {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.about-icon {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.about-scrollBox {
|
||||
border: 1px solid $exterior_border;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
.about-scrollBox-innerBox {
|
||||
padding: 1.2em;
|
||||
spacing: 1.2em;
|
||||
}
|
||||
.about-description {
|
||||
padding-top: 4px;
|
||||
}
|
||||
.about-version {
|
||||
padding-left: 7px;
|
||||
}
|
||||
// dialog box for the cinnamon debug utility
|
||||
#LookingGlassDialog {
|
||||
@extend %bg-grad-to-bottom;
|
||||
|
||||
spacing: 4px;
|
||||
padding: 8px;
|
||||
border: 1px solid $exterior_border;
|
||||
border-radius: $roundness;
|
||||
color: $dark_fg_color;
|
||||
}
|
||||
238
home/.themes/oomox-iceberg/cinnamon/scss/sections/_menu.scss
Normal file
238
home/.themes/oomox-iceberg/cinnamon/scss/sections/_menu.scss
Normal file
@@ -0,0 +1,238 @@
|
||||
.menu {
|
||||
@extend %shared-menu;
|
||||
|
||||
min-width: 100px;
|
||||
margin: 4px;
|
||||
}
|
||||
// scale view right click menu
|
||||
.popup-combo-menu {
|
||||
@extend %shared-menu;
|
||||
}
|
||||
.popup-menu-arrow {
|
||||
icon-size: 1.14em;
|
||||
}
|
||||
// applet submenus
|
||||
// the margin here causes the 'bounce' on opening the sub menu
|
||||
// does StScrollBar need to be here? No as long as it isnt themed differently to staging
|
||||
.popup-sub-menu {
|
||||
@extend %bg-grad-to-bottom;
|
||||
|
||||
border: 1px solid $interior_border;
|
||||
border-radius: $roundness;
|
||||
padding: 8px;
|
||||
}
|
||||
.popup-menu-content {
|
||||
padding: 0;
|
||||
}
|
||||
// individual menu entries are themed here
|
||||
.popup-menu-item {
|
||||
@extend %menu-buttons-shared;
|
||||
|
||||
color: $dark_fg_color;
|
||||
spacing: .5em;
|
||||
&:active {
|
||||
background-color: $selected_bg_color;
|
||||
border-radius: $roundness;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
&:insensitive {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
.popup-combobox-item {
|
||||
@extend %menu-buttons-shared;
|
||||
}
|
||||
// sliders and separators in menus
|
||||
.popup-separator-menu-item {
|
||||
@extend %separator-shared;
|
||||
|
||||
-gradient-direction: horizontal;
|
||||
}
|
||||
.popup-slider-menu-item {
|
||||
@extend %slider-shared;
|
||||
}
|
||||
.popup-device-menu-item {
|
||||
spacing: .5em;
|
||||
}
|
||||
.popup-inactive-menu-item {
|
||||
font-style: italic;
|
||||
color: $dark_fg_color;
|
||||
}
|
||||
.popup-subtitle-menu-item {
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
}
|
||||
.popup-menu-icon {
|
||||
icon-size: 1.14em;
|
||||
}
|
||||
.popup-menu-item-dot {
|
||||
}
|
||||
.popup-submenu-menu-item:open {
|
||||
}
|
||||
.popup-alternating-menu-item:alternate {
|
||||
font-weight: bold;
|
||||
}
|
||||
// toggles in menus
|
||||
.toggle-switch {
|
||||
width: 64px;
|
||||
height: 22px;
|
||||
}
|
||||
.toggle-switch-us {
|
||||
background-image: url(assets/toggle-off-us.svg);
|
||||
&:checked {
|
||||
background-image: url(assets/toggle-on-us.svg);
|
||||
}
|
||||
}
|
||||
.toggle-switch-intl {
|
||||
background-image: url(assets/toggle-off-intl.svg);
|
||||
&:checked {
|
||||
background-image: url(assets/toggle-on-intl.svg);
|
||||
}
|
||||
}
|
||||
.nm-menu-item-icons {
|
||||
spacing: .5em;
|
||||
icon-size: 1.14em;
|
||||
}
|
||||
// all the remaining code is for the main menu applet
|
||||
.menu-favorites-box {
|
||||
@extend %bg-grad-to-right;
|
||||
|
||||
padding: 0.8em;
|
||||
border: 1px solid $interior_border;
|
||||
border-radius: $roundness;
|
||||
transition-duration: 150;
|
||||
spacing: 1em;
|
||||
}
|
||||
// This is for the stock menu in Cinnamon 4.0.2 and later - adds more vfade to the scrollable favorites box and fakes a seperator from the system buttons with a bottom border.
|
||||
.menu-favorites-scrollbox {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid;
|
||||
border-color: $interior_border;
|
||||
&.vfade {
|
||||
-st-vfade-offset: 136px;
|
||||
}
|
||||
}
|
||||
.menu-favorites-button {
|
||||
@extend %menu-buttons-shared;
|
||||
|
||||
&:hover {
|
||||
background-color: $selected_bg_color;
|
||||
border-radius: $roundness;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
.menu-categories-box {
|
||||
padding: 0.8em;
|
||||
}
|
||||
.menu-applications-inner-box {
|
||||
@extend %bg-grad-to-right;
|
||||
|
||||
padding: 0.8em;
|
||||
border-radius: $roundness;
|
||||
border: 1px solid $interior_border;
|
||||
StScrollView {
|
||||
@extend %menu-context-shared;
|
||||
}
|
||||
}
|
||||
.menu-applications-outer-box {
|
||||
@extend %bg-grad-to-right;
|
||||
|
||||
padding: 0.8em;
|
||||
border: 1px solid $interior_border;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
.menu-application-button {
|
||||
@extend %menu-buttons-shared;
|
||||
|
||||
&:highlighted {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.menu-application-button-selected {
|
||||
@extend %menu-buttons-shared;
|
||||
|
||||
background-color: $selected_bg_color;
|
||||
border-radius: $roundness;
|
||||
color: $selected_fg_color;
|
||||
&:highlighted {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.menu-application-button-label {
|
||||
@extend %menu-button-label-shared;
|
||||
}
|
||||
.menu-category-button {
|
||||
@extend %menu-buttons-shared;
|
||||
}
|
||||
.menu-category-button-greyed {
|
||||
@extend %menu-buttons-shared;
|
||||
|
||||
color: $dark_fg_color;
|
||||
font-style: italic;
|
||||
}
|
||||
.menu-category-button-selected {
|
||||
@extend %menu-buttons-shared;
|
||||
|
||||
background-color: $selected_bg_color;
|
||||
border-radius: $roundness;
|
||||
color: $selected_fg_color;
|
||||
&:hover {
|
||||
}
|
||||
}
|
||||
.menu-category-button-label {
|
||||
@extend %menu-button-label-shared;
|
||||
}
|
||||
// in the stock menu app descriptions are shown at the base of the menu
|
||||
.menu-selected-app-box {
|
||||
padding: 2px 8px;
|
||||
text-align: right;
|
||||
&:rtl {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.menu-selected-app-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.menu-selected-app-description {
|
||||
max-width: 150px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
// the menus search box
|
||||
.menu-search-box {
|
||||
&:ltr {
|
||||
padding-left: 30px;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
&:rtl {
|
||||
padding-right: 30px;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
#menu-search-entry {
|
||||
@extend %dialog-entry;
|
||||
|
||||
margin-bottom: 0.5em;
|
||||
&:focus {
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
&:hover {
|
||||
}
|
||||
}
|
||||
.menu-search-entry-icon {
|
||||
icon-size: 1em;
|
||||
color: $tooltip_fg_color;
|
||||
}
|
||||
// new styleclasses for the Cinnamon 4.0.0 stock menu - note this menu was dropped in Cinnamon 4.0.1 but retain styling in case it's revived.
|
||||
.menu-top-box {
|
||||
spacing: 10px; }
|
||||
.menu-systembuttons-box {
|
||||
padding-bottom: 12px;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 0.5em; }
|
||||
// cinnVIIstark menu right click favourites context menu
|
||||
.starkmenu-favorites-box .menu-context-menu, .menu-context-menu {
|
||||
@extend %menu-context-shared;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
// notification system
|
||||
#notification {
|
||||
@extend %bg-grad-to-right;
|
||||
|
||||
border-radius: $roundness;
|
||||
border: 1px solid $exterior_border;
|
||||
padding: 8px;
|
||||
spacing-rows: 5px;
|
||||
spacing-columns: 10px;
|
||||
margin-from-right-edge-of-screen: 20px;
|
||||
width: 34em;
|
||||
color: $dark_fg_color;
|
||||
&.multi-line-notification {
|
||||
padding-bottom: 8px;
|
||||
color: $dark_fg_color;
|
||||
}
|
||||
StEntry {
|
||||
@extend %dialog-entry;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
}
|
||||
.url-highlighter {
|
||||
link-color: $link_color;
|
||||
}
|
||||
}
|
||||
.notification-with-image {
|
||||
min-height: 159px;
|
||||
color: $dark_fg_color;
|
||||
}
|
||||
#notification-scrollview {
|
||||
max-height: 10em;
|
||||
> {
|
||||
.top-shadow {
|
||||
height: 1em;
|
||||
}
|
||||
.bottom-shadow {
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
&:ltr > StScrollBar {
|
||||
padding-left: 6px;
|
||||
}
|
||||
&:rtl > StScrollBar {
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
#notification-body {
|
||||
spacing: 4px;
|
||||
}
|
||||
#notification-actions {
|
||||
spacing: 8px;
|
||||
}
|
||||
.notification-button {
|
||||
@extend %shared-button;
|
||||
|
||||
border-radius: $roundness;
|
||||
min-width: 5em;
|
||||
min-height: 1em;
|
||||
padding: $spacing_plus2;
|
||||
&:hover {
|
||||
@extend %shared-button-hover;
|
||||
}
|
||||
&:focus {
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
&:active {
|
||||
@extend %shared-button-active;
|
||||
}
|
||||
}
|
||||
.notification-icon-button {
|
||||
@extend %shared-button;
|
||||
|
||||
border-radius: $roundness;
|
||||
min-width: 2em;
|
||||
min-height: 2em;
|
||||
padding: $spacing_plus2;
|
||||
&:hover {
|
||||
@extend %shared-button-hover;
|
||||
}
|
||||
&:focus {
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
&:active {
|
||||
@extend %shared-button-active;
|
||||
}
|
||||
> StIcon {
|
||||
icon-size: 1.5em;
|
||||
}
|
||||
}
|
||||
119
home/.themes/oomox-iceberg/cinnamon/scss/sections/_overview.scss
Normal file
119
home/.themes/oomox-iceberg/cinnamon/scss/sections/_overview.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
// scale and expo views
|
||||
#overview {
|
||||
spacing: 12px;
|
||||
}
|
||||
.workspace-thumbnails {
|
||||
spacing: 14px;
|
||||
}
|
||||
.workspace-add-button {
|
||||
background-image: url(assets/add-workspace.png);
|
||||
height: 200px;
|
||||
width: 35px;
|
||||
border-radius-topleft: 10px;
|
||||
border-radius-bottomleft: 10px;
|
||||
transition-duration: 150;
|
||||
background-color: $info_bg_color;
|
||||
border-top: 1px solid;
|
||||
border-left: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
border-color: $button_border;
|
||||
&:hover {
|
||||
background-image: url(assets/add-workspace-hover.png);
|
||||
border-color: $selected_border;
|
||||
}
|
||||
&:active {
|
||||
background-image: url(assets/add-workspace.png);
|
||||
border-color: $selected_border;
|
||||
background-color: $success_color;
|
||||
}
|
||||
}
|
||||
.workspace-close-button {
|
||||
background-image: url(assets/close-window.svg);
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
-cinnamon-close-overlap: 20px;
|
||||
}
|
||||
// this always looks better semi transparent
|
||||
.workspace-overview-background-shade {
|
||||
background-color: $dark_bg_color_trans;
|
||||
}
|
||||
.window-caption {
|
||||
@extend %bg-grad-to-bottom;
|
||||
|
||||
padding: 4px 6px;
|
||||
border: 1px solid $exterior_border;
|
||||
border-radius: $roundness;
|
||||
color: $dark_fg_color;
|
||||
-cinnamon-caption-spacing: 4px;
|
||||
&:focus, &#selected {
|
||||
@extend %selected-bg-grad-to-bottom;
|
||||
|
||||
color: $selected_fg_color;
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
}
|
||||
.window-border {
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
.window-close {
|
||||
background-image: url(assets/close-window.svg);
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
-cinnamon-close-overlap: 20px;
|
||||
&:rtl {
|
||||
-st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
.window-close-area {
|
||||
background-image: url(assets/trash-icon.png);
|
||||
background-size: 100px;
|
||||
background-color: $dark_bg_color_trans;
|
||||
border: 1px solid $exterior_border;
|
||||
border-bottom-width: 0;
|
||||
border-radius: 20px 20px 0 0;
|
||||
height: 120px;
|
||||
width: 400px;
|
||||
}
|
||||
.expo-background {
|
||||
@extend %bg-grad-to-bottom;
|
||||
}
|
||||
.expo-workspace-thumbnail-frame {
|
||||
border: 1px solid $exterior_border;
|
||||
&#active {
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
}
|
||||
.expo-workspaces-name-entry {
|
||||
@extend %bg-grad-to-bottom;
|
||||
|
||||
padding: 4px 6px;
|
||||
height: 1.5em;
|
||||
border: 1px solid $exterior_border;
|
||||
border-radius: $roundness;
|
||||
selected-color: $selected_fg_color;
|
||||
selection-background-color: $selected_bg_color;
|
||||
color: $dark_fg_color;
|
||||
text-align: center;
|
||||
&#selected {
|
||||
@extend %selected-bg-grad-to-bottom;
|
||||
|
||||
color: $selected_fg_color;
|
||||
selected-color: $dark_fg_color;
|
||||
selection-background-color: $selected_bg_color;
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
&:focus {
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
}
|
||||
// hot corners animation
|
||||
.ripple-box {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
background-image: url(assets/corner-ripple.png);
|
||||
background-color: $selected_bg_color;
|
||||
border-radius: 52px;
|
||||
}
|
||||
573
home/.themes/oomox-iceberg/cinnamon/scss/sections/_panel.scss
Normal file
573
home/.themes/oomox-iceberg/cinnamon/scss/sections/_panel.scss
Normal file
@@ -0,0 +1,573 @@
|
||||
// panels can be on any side of the screen
|
||||
// some panel item theming is specific to panel orientation and is included in this section
|
||||
// each panel is also split into three zones
|
||||
// dnd is for panel edit mode
|
||||
// dummy is for adding or moving panels
|
||||
#panel {
|
||||
color: $dark_fg_color;
|
||||
height: 2.5em;
|
||||
width: 3.2em;
|
||||
&:highlight {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
.panel-dummy {
|
||||
background-color: rgba(255, 0, 0, 0.6);
|
||||
&:entered {
|
||||
background-color: rgba(0, 255, 0, 0.6);
|
||||
}
|
||||
}
|
||||
.panelLeft {
|
||||
spacing: 4px;
|
||||
&:dnd {
|
||||
background-color: rgba(255, 0, 0, 0.6);
|
||||
}
|
||||
&:ltr {
|
||||
padding-right: 4px;
|
||||
}
|
||||
&:rtl {
|
||||
padding-left: 4px;
|
||||
}
|
||||
&.vertical {
|
||||
padding: 0;
|
||||
&:dnd {
|
||||
}
|
||||
}
|
||||
}
|
||||
.panelCenter {
|
||||
spacing: 4px;
|
||||
&:dnd {
|
||||
background-color: rgba(0, 255, 0, 0.6);
|
||||
}
|
||||
&.vertical {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
&:dnd {
|
||||
}
|
||||
}
|
||||
}
|
||||
.panelRight {
|
||||
spacing: 4px;
|
||||
&:dnd {
|
||||
background-color: rgba(0, 0, 255, 0.6);
|
||||
}
|
||||
&:ltr {
|
||||
padding-left: 0;
|
||||
spacing: 0;
|
||||
}
|
||||
&:rtl {
|
||||
padding-right: 0;
|
||||
spacing: 0;
|
||||
}
|
||||
&.vertical {
|
||||
padding: 0;
|
||||
&:dnd {
|
||||
}
|
||||
}
|
||||
}
|
||||
// panel borders must be defined with a border-top color or other color definition that encompasses border-top
|
||||
// panels do not support different colors of borders on different edges
|
||||
// due to a bug in cinnamons placing of panel items on a bordered panel small margins are used to ensure that bordered panel objects
|
||||
// do not overlap the panel border
|
||||
.panel-top {
|
||||
@extend %bg-grad-to-bottom;
|
||||
|
||||
box-shadow: 0 -1px 0 0 $exterior_border inset;
|
||||
.window-list-item-box {
|
||||
@extend %bg-grad-to-top;
|
||||
margin-bottom: 1px;
|
||||
&:hover {
|
||||
@extend %hover-bg-grad-to-top;
|
||||
}
|
||||
&:active, &:checked, &:focus, &:running {
|
||||
@extend %panel-top-shared;
|
||||
|
||||
&:hover {
|
||||
@extend %hover-selected-grad-to-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
.grouped-window-list-item-box {
|
||||
&:active, &:checked {
|
||||
box-shadow: 0 2px 0 0 $dark_fg_color inset;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 2px 0 0 $selected_border inset;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 4px 0 0 $selected_border inset;
|
||||
}
|
||||
}
|
||||
.workspace-switcher, .workspace-graph {
|
||||
padding: 1px $spacing;
|
||||
}
|
||||
.panel-launchers .launcher:hover {
|
||||
box-shadow: 0 2px 0 0 $selected_border inset;
|
||||
}
|
||||
.applet-separator {
|
||||
padding: 3px $spacing;
|
||||
}
|
||||
}
|
||||
.panel-bottom {
|
||||
@extend %bg-grad-to-top;
|
||||
|
||||
box-shadow: 0 1px 0 0 $exterior_border inset;
|
||||
.window-list-item-box {
|
||||
@extend %bg-grad-to-bottom;
|
||||
margin-top: 1px;
|
||||
|
||||
&:hover {
|
||||
@extend %hover-bg-grad-to-bottom;
|
||||
}
|
||||
&:active, &:checked, &:focus, &:running {
|
||||
@extend %panel-bottom-shared;
|
||||
|
||||
&:hover {
|
||||
@extend %hover-selected-grad-to-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
.grouped-window-list-item-box {
|
||||
&:active, &:checked {
|
||||
box-shadow: 0 -2px 0 0 $dark_fg_color inset;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 -2px 0 0 $selected_border inset;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 -4px 0 0 $selected_border inset;
|
||||
}
|
||||
}
|
||||
.workspace-switcher, .workspace-graph {
|
||||
padding: 1px $spacing;
|
||||
}
|
||||
.panel-launchers .launcher:hover {
|
||||
box-shadow: 0 -2px 0 0 $selected_border inset;
|
||||
}
|
||||
.applet-separator {
|
||||
padding: 3px $spacing;
|
||||
}
|
||||
}
|
||||
.panel-left {
|
||||
@extend %bg-grad-to-right;
|
||||
|
||||
box-shadow: -1px 0 0 0 $exterior_border inset;
|
||||
.window-list-item-box {
|
||||
margin-right: 1px;
|
||||
@extend %bg-grad-to-left;
|
||||
|
||||
&:hover {
|
||||
@extend %hover-bg-grad-to-left;
|
||||
}
|
||||
&:active, &:checked, &:focus, &:running {
|
||||
@extend %panel-left-shared;
|
||||
|
||||
&:hover {
|
||||
@extend %hover-selected-grad-to-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.grouped-window-list-item-box {
|
||||
&:active, &:checked {
|
||||
box-shadow: 2px 0 0 0 $dark_fg_color inset;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 2px 0 0 0 $selected_border inset;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 4px 0 0 0 $selected_border inset;
|
||||
}
|
||||
}
|
||||
.workspace-switcher, .workspace-graph {
|
||||
padding: $spacing 1px;
|
||||
}
|
||||
.panel-launchers .launcher:hover {
|
||||
box-shadow: 2px 0 0 0 $selected_border inset;
|
||||
}
|
||||
.applet-separator {
|
||||
padding: $spacing 3px;
|
||||
}
|
||||
}
|
||||
.panel-right {
|
||||
@extend %bg-grad-to-left;
|
||||
|
||||
box-shadow: 1px 0 0 0 $exterior_border inset;
|
||||
.window-list-item-box {
|
||||
margin-left: 1px;
|
||||
@extend %bg-grad-to-right;
|
||||
|
||||
&:hover {
|
||||
@extend %hover-bg-grad-to-right;
|
||||
}
|
||||
&:active, &:checked, &:focus, &:running {
|
||||
@extend %panel-right-shared;
|
||||
|
||||
&:hover {
|
||||
@extend %hover-selected-grad-to-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.grouped-window-list-item-box {
|
||||
&:active, &:checked {
|
||||
box-shadow: -2px 0 0 0 $dark_fg_color inset;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: -2px 0 0 0 $selected_border inset;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: -4px 0 0 0 $selected_border inset;
|
||||
}
|
||||
}
|
||||
.workspace-switcher, .workspace-graph {
|
||||
padding: $spacing 1px;
|
||||
}
|
||||
.panel-launchers .launcher:hover {
|
||||
box-shadow: -2px 0 0 0 $selected_border inset;
|
||||
}
|
||||
.applet-separator {
|
||||
padding: $spacing 3px;
|
||||
}
|
||||
}
|
||||
// a non feature - not worth themeing
|
||||
.panel-corner {
|
||||
&:active {
|
||||
}
|
||||
&:overview {
|
||||
}
|
||||
&:focus {
|
||||
}
|
||||
}
|
||||
// remaining code is for panel items starting with the generic applets
|
||||
.applet-separator-line {
|
||||
width: 2px;
|
||||
background: $selected_bg_color;
|
||||
}
|
||||
.applet-separator-line-vertical {
|
||||
border-color: $selected_bg_color;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
.applet-spacer:highlight {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
.applet-box {
|
||||
color: $dark_fg_color;
|
||||
transition-duration: 150;
|
||||
border-radius: $roundness;
|
||||
padding: 0 $spacing;
|
||||
&.vertical {
|
||||
padding: $spacing 0;
|
||||
}
|
||||
&:checked {
|
||||
color: $selected_bg_color;
|
||||
.applet-label {
|
||||
color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: $selected_bg_color;
|
||||
.applet-label {
|
||||
color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
&:highlight {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
.applet-label {
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.applet-label {
|
||||
font-weight: bold;
|
||||
color: $dark_fg_color;
|
||||
padding-left: 3px;
|
||||
}
|
||||
// icon-size set to 22 to match hard-coded menu icon size - applet-icon style is used for search provider results in menu
|
||||
.applet-icon {
|
||||
color: $dark_fg_color;
|
||||
padding: 0;
|
||||
spacing: 0;
|
||||
icon-size: 22px;
|
||||
}
|
||||
// used by power applet to warn of low battery
|
||||
.system-status-icon {
|
||||
icon-size: 1.14em;
|
||||
padding: 0;
|
||||
spacing: 0;
|
||||
&.warning {
|
||||
color: $warning_color;
|
||||
}
|
||||
&.error {
|
||||
color: $error_color;
|
||||
}
|
||||
}
|
||||
// keyboard layout applet
|
||||
.panel-status-button {
|
||||
-natural-hpadding: 4px;
|
||||
-minimum-hpadding: 4px;
|
||||
font-weight: bold;
|
||||
color: $dark_fg_color;
|
||||
&:hover {
|
||||
color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
// user applet specific themeing
|
||||
.user-box {
|
||||
padding: 0.4em 1.3em;
|
||||
spacing: 10px;
|
||||
}
|
||||
.user-icon {
|
||||
padding: 4px;
|
||||
border: none;
|
||||
}
|
||||
.user-label {
|
||||
color: $dark_fg_color;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
}
|
||||
// the window list applet. Some third party applets inherit some of this theming.
|
||||
.window-list-box {
|
||||
spacing: $spacing;
|
||||
padding: 1px 3px;
|
||||
font-size: 0.9em;
|
||||
border-radius: $roundness;
|
||||
&.vertical {
|
||||
spacing: $spacing;
|
||||
padding: 3px 1px;
|
||||
}
|
||||
&:highlight {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
#appMenuIcon {
|
||||
}
|
||||
}
|
||||
// progress was added with cinnamon 3.6 and allows compatible applications to use the window list as a progress bar
|
||||
.window-list-item {
|
||||
&-box {
|
||||
border: 1px solid $interior_border;
|
||||
border-radius: $roundness;
|
||||
transition-duration: 150;
|
||||
&:hover {
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
&.top StLabel, &.bottom StLabel {
|
||||
padding-left: 3px;
|
||||
}
|
||||
.progress {
|
||||
background-color: $success_color;
|
||||
border: 1px solid $selected_border;
|
||||
border-radius: $roundness;
|
||||
color: $info_fg_color;
|
||||
}
|
||||
#appMenuIcon {
|
||||
padding-right: 0.2em;
|
||||
}
|
||||
}
|
||||
&-demands-attention {
|
||||
background-color: $info_bg_color;
|
||||
color: $info_fg_color;
|
||||
}
|
||||
}
|
||||
// cinnamon 3.8 will support an improved window-list-thumbnail preview which now has it's own selector
|
||||
.window-list-preview {
|
||||
@extend %bg-grad-to-right;
|
||||
|
||||
border-radius: $roundness;
|
||||
border: 1px solid $exterior_border;
|
||||
padding: 6px 12px;
|
||||
spacing: $spacing;
|
||||
color: $dark_fg_color;
|
||||
}
|
||||
// Cinnamon 4.0 has a new grouped window list applet with it's own selectors.
|
||||
// Initial theme support is defined here.
|
||||
|
||||
.grouped-window-list {
|
||||
&-thumbnail-label {
|
||||
padding-left: 3px;
|
||||
}
|
||||
&-number-label {
|
||||
z-index: 99;
|
||||
font-size: 0.8em;
|
||||
color: $dark_fg_color;
|
||||
}
|
||||
// May need to revise depending on upstream GWL developments
|
||||
&-button-label {
|
||||
padding: 0;
|
||||
}
|
||||
&-badge {
|
||||
border-radius: 256px;
|
||||
background-color: $dark_bg_color;
|
||||
}
|
||||
&-thumbnail-alert {
|
||||
background: $warning_color;
|
||||
}
|
||||
&-item-box {
|
||||
transition-duration: 150;
|
||||
spacing: 1em;
|
||||
background-color: rgba(0, 0, 0, 0.01);
|
||||
&:hover, &:focus, {
|
||||
color: $selected_bg_color;
|
||||
}
|
||||
&:focus {
|
||||
font-weight: bold;
|
||||
}
|
||||
.progress {
|
||||
background-color: $success_color;
|
||||
}
|
||||
}
|
||||
&-demands-attention {
|
||||
background-color: $info_bg_color;
|
||||
color: $info_fg_color;
|
||||
}
|
||||
&-thumbnail-menu {
|
||||
@extend %bg-grad-to-right;
|
||||
|
||||
border-radius: $roundness;
|
||||
padding: 10px 15px;
|
||||
spacing: $spacing;
|
||||
color: $dark_fg_color;
|
||||
.item-box {
|
||||
padding: 8px;
|
||||
border-radius: $roundness;
|
||||
border: 1px solid $interior_border;
|
||||
&:outlined {
|
||||
border: 1px solid $selected_border;
|
||||
}
|
||||
&:selected {
|
||||
background-color: $selected_bg_color;
|
||||
border: 1px solid $selected_border;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
.thumbnail-box {
|
||||
padding: 2px;
|
||||
spacing: $spacing;
|
||||
}
|
||||
.thumbnail {
|
||||
width: 256px;
|
||||
}
|
||||
.separator {
|
||||
width: 1px;
|
||||
background: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// the sound player applet
|
||||
.sound-player {
|
||||
StButton {
|
||||
@extend %shared-button;
|
||||
|
||||
min-width: 2em;
|
||||
min-height: 2em;
|
||||
padding: $spacing_plus2;
|
||||
color: $button_fg_color;
|
||||
border-radius: $roundness;
|
||||
&:small {
|
||||
min-width: 1.5em;
|
||||
min-height: 1.5em;
|
||||
padding: $spacing;
|
||||
StIcon {
|
||||
icon-size: 1em;
|
||||
}
|
||||
}
|
||||
StIcon {
|
||||
icon-size: 1.5em;
|
||||
}
|
||||
&:hover {
|
||||
@extend %shared-button-hover;
|
||||
}
|
||||
&:focus {
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
&:active {
|
||||
@extend %shared-button-active;
|
||||
}
|
||||
}
|
||||
.slider {
|
||||
@extend %slider-shared;
|
||||
height: 4px;
|
||||
}
|
||||
StBoxLayout {
|
||||
spacing: 0.5em;
|
||||
}
|
||||
> StBoxLayout {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
.sound-player-generic-coverart {
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
.sound-player-overlay {
|
||||
@extend %bg-grad-to-bottom;
|
||||
|
||||
min-width: 300px;
|
||||
padding: 12px 16px;
|
||||
spacing: 0.5em;
|
||||
color: $dark_fg_color;
|
||||
}
|
||||
// workspace switcher applet simple button view
|
||||
.workspace-button {
|
||||
width: 2em;
|
||||
height: 1em;
|
||||
color: $dark_fg_color;
|
||||
border: 1px solid $interior_border;
|
||||
margin: 2px;
|
||||
transition-duration: 150;
|
||||
&.vertical {
|
||||
height: 1.5em;
|
||||
}
|
||||
&:outlined {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
border-color: $selected_border;
|
||||
}
|
||||
}
|
||||
// workspace switcher applet graph view
|
||||
.workspace-graph {
|
||||
.workspace {
|
||||
@extend %bg-grad-to-bottom;
|
||||
|
||||
border: 1px solid $interior_border;
|
||||
&:active {
|
||||
@extend %selected-bg-grad-to-bottom;
|
||||
|
||||
border: 1px solid $interior_border;
|
||||
.windows {
|
||||
-active-window-background: rgba(255, 255, 255, 0.8);
|
||||
-active-window-border: rgba(0, 0, 0, 0.9);
|
||||
-inactive-window-background: rgba(140, 140, 140, 0.8);
|
||||
-inactive-window-border: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
.windows {
|
||||
-active-window-background: rgba(140, 140, 140, 0.8);
|
||||
-active-window-border: rgba(0, 0, 0, 0.7);
|
||||
-inactive-window-background: rgba(140, 140, 140, 0.8);
|
||||
-inactive-window-border: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
// most panel launcher themeing is orientation specific
|
||||
.panel-launchers {
|
||||
padding: 0 $spacing;
|
||||
spacing: $spacing;
|
||||
.launcher {
|
||||
background-color:rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
&.vertical {
|
||||
padding: $spacing 0;
|
||||
}
|
||||
}
|
||||
.notification-applet-padding {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
.notification-applet-container {
|
||||
max-height: 100px;
|
||||
}
|
||||
.systray {
|
||||
spacing: $spacing;
|
||||
}
|
||||
.flashspot {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
|
||||
114
home/.themes/oomox-iceberg/cinnamon/scss/sections/_stage.scss
Normal file
114
home/.themes/oomox-iceberg/cinnamon/scss/sections/_stage.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
// defines font family and standard font size across the whole theme
|
||||
// em is preferred for better support for text scaling
|
||||
stage {
|
||||
font-family: roboto, Noto Sans, sans, sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
.cinnamon-link {
|
||||
color: $link_color;
|
||||
font-style: italic;
|
||||
&:hover {
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
.label-shadow {
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
// themeing for various standard elements
|
||||
StScrollBar {
|
||||
padding: 2px;
|
||||
StButton {
|
||||
&#vhandle {
|
||||
background-color: $scrollbar_slider_color;
|
||||
border-radius: $roundness;
|
||||
&:hover {
|
||||
background-color: $scrollbar_slider_hover_color;
|
||||
}
|
||||
}
|
||||
&#hhandle {
|
||||
background-color: $scrollbar_slider_color;
|
||||
border-radius: $roundness;
|
||||
&:hover {
|
||||
background-color: $scrollbar_slider_hover_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
StBin#trough {
|
||||
background-color: $scrollbar_bg_color;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
StScrollView {
|
||||
&.vfade {
|
||||
-st-vfade-offset: 68px;
|
||||
}
|
||||
&.hfade {
|
||||
-st-hfade-offset: 68px;
|
||||
}
|
||||
StScrollBar {
|
||||
min-width: 0.8em;
|
||||
min-height: 0.8em;
|
||||
}
|
||||
}
|
||||
.separator {
|
||||
@extend %separator-shared;
|
||||
}
|
||||
.slider {
|
||||
@extend %slider-shared;
|
||||
}
|
||||
.check-box {
|
||||
CinnamonGenericContainer {
|
||||
spacing: .2em;
|
||||
}
|
||||
StBin {
|
||||
@extend %check-box-shared;
|
||||
}
|
||||
&:focus {
|
||||
StBin {
|
||||
@extend %check-box-shared;
|
||||
}
|
||||
&:checked StBin {
|
||||
background-image: url(assets/checkbox.svg);
|
||||
}
|
||||
}
|
||||
StLabel {
|
||||
font-weight: normal;
|
||||
}
|
||||
&:checked StBin {
|
||||
background-image: url(assets/checkbox.svg);
|
||||
}
|
||||
}
|
||||
.radiobutton {
|
||||
CinnamonGenericContainer {
|
||||
spacing: .2em;
|
||||
height: 18px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
StBin {
|
||||
@extend %radiobutton-shared;
|
||||
}
|
||||
&:focus {
|
||||
StBin {
|
||||
@extend %radiobutton-shared;
|
||||
}
|
||||
&:checked StBin {
|
||||
background-image: url(assets/radiobutton.svg);
|
||||
}
|
||||
}
|
||||
StLabel {
|
||||
padding-top: 4px;
|
||||
font-size: 0.8em;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:checked StBin {
|
||||
background-image: url(assets/radiobutton.svg);
|
||||
}
|
||||
}
|
||||
#Tooltip {
|
||||
@extend %tooltip-bg-grad-to-top;
|
||||
|
||||
padding: 5px 8px;
|
||||
color: $tooltip_fg_color;
|
||||
text-align: center;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
// on screen preview of windows tiling placement
|
||||
.tile-preview {
|
||||
@extend %tile-shared;
|
||||
|
||||
&.snap {
|
||||
@extend %tile-shared-snap;
|
||||
}
|
||||
}
|
||||
.tile-hud {
|
||||
@extend %tile-shared;
|
||||
|
||||
&.snap {
|
||||
@extend %tile-shared-snap;
|
||||
}
|
||||
&:top {
|
||||
border-top-width: 0;
|
||||
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
&:bottom {
|
||||
border-bottom-width: 0;
|
||||
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
}
|
||||
&:left {
|
||||
border-left-width: 0;
|
||||
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
&:right {
|
||||
border-right-width: 0;
|
||||
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
&:top-left {
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
|
||||
border-radius: 0 0 10px 0;
|
||||
}
|
||||
&:top-right {
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
|
||||
border-radius: 0 0 0 10px;
|
||||
}
|
||||
&:bottom-left {
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 0;
|
||||
|
||||
border-radius: 0 10px 0 0;
|
||||
}
|
||||
&:bottom-right {
|
||||
border-bottom-width: 0;
|
||||
border-right-width: 0;
|
||||
|
||||
border-radius: 10px 0 0 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user