diff options
Diffstat (limited to '.themes/MikunoNaka/cinnamon/scss')
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/_extends.scss | 372 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/_global.scss | 84 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/cinnamon.scss | 14 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_accessibility.scss | 46 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_alt-tab.scss | 66 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_calendar.scss | 120 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_desklets.scss | 65 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_dialogs.scss | 201 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_menu.scss | 238 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_notifications.scss | 91 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_overview.scss | 119 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_panel.scss | 573 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_stage.scss | 114 | ||||
| -rw-r--r-- | .themes/MikunoNaka/cinnamon/scss/sections/_tile-hud.scss | 59 |
14 files changed, 2162 insertions, 0 deletions
diff --git a/.themes/MikunoNaka/cinnamon/scss/_extends.scss b/.themes/MikunoNaka/cinnamon/scss/_extends.scss new file mode 100644 index 00000000..9a78c30f --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/_extends.scss @@ -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; +} diff --git a/.themes/MikunoNaka/cinnamon/scss/_global.scss b/.themes/MikunoNaka/cinnamon/scss/_global.scss new file mode 100644 index 00000000..3604d334 --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/_global.scss @@ -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: #8d5bd0; +$button_fg_color: #e6e1ec; +$selected_bg_color: #8d5bd0; +$selected_fg_color: #ffffff; +$tooltip_bg_color: #130f23; +$tooltip_fg_color: #d2a0c9; +$dark_bg_color: fade-out(#1d1b4c, 1 - 1.0); +$dark_fg_color: #ffffff; + +// 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(#1d1b4c, 1 - (1.0 / 2)); + +// used to calculate gradients for gradient values > 0 +$lighten_amount: 1 + (0.13 / 2); +$darken_amount: 1 - (0.13 / 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: #b9bcb5; + +// other colors used in the theme +$link_color: #7e12bf; +$success_color: #add954; +$warning_color: #ebb352; +$error_color: #eb5b7a; +$info_fg_color: #130f23; +$info_bg_color: #8d5bd0; + +// used for border-radius throughout theme +$roundness: 20px; + +// used for buttons, entrys, panel spacing, and menu item spacing. +$spacing: 0px; +$spacing_plus2: (0 + 2) + px; + diff --git a/.themes/MikunoNaka/cinnamon/scss/cinnamon.scss b/.themes/MikunoNaka/cinnamon/scss/cinnamon.scss new file mode 100644 index 00000000..0d1f522e --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/cinnamon.scss @@ -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"; diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_accessibility.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_accessibility.scss new file mode 100644 index 00000000..265978ec --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_accessibility.scss @@ -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; + } +} diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_alt-tab.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_alt-tab.scss new file mode 100644 index 00000000..06e57e16 --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_alt-tab.scss @@ -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); +} diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_calendar.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_calendar.scss new file mode 100644 index 00000000..1bf695c1 --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_calendar.scss @@ -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; + } +} diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_desklets.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_desklets.scss new file mode 100644 index 00000000..74f88664 --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_desklets.scss @@ -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 { +} diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_dialogs.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_dialogs.scss new file mode 100644 index 00000000..9f1ee3f6 --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_dialogs.scss @@ -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; +} diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_menu.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_menu.scss new file mode 100644 index 00000000..c4e45be8 --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_menu.scss @@ -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; +} diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_notifications.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_notifications.scss new file mode 100644 index 00000000..9bd5097e --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_notifications.scss @@ -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; + } +} diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_overview.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_overview.scss new file mode 100644 index 00000000..c87d5d0d --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_overview.scss @@ -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; +} diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_panel.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_panel.scss new file mode 100644 index 00000000..f1743f54 --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_panel.scss @@ -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; +} + diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_stage.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_stage.scss new file mode 100644 index 00000000..e6944a66 --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_stage.scss @@ -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; +} diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_tile-hud.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_tile-hud.scss new file mode 100644 index 00000000..35f5ed8e --- /dev/null +++ b/.themes/MikunoNaka/cinnamon/scss/sections/_tile-hud.scss @@ -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; + } +} |