aboutsummaryrefslogtreecommitdiff
path: root/.themes/MikunoNaka/cinnamon/scss/sections
diff options
context:
space:
mode:
authorVidhu Kant Sharma <bokuwakanojogahoshii@yahoo.com>2021-02-21 19:21:46 +0530
committerVidhu Kant Sharma <bokuwakanojogahoshii@yahoo.com>2021-02-21 19:21:46 +0530
commit158b6cd4efe058b1e21a020f3861c610818a1a67 (patch)
treefd35be35323cc8b9785e86f3580936813967f2e7 /.themes/MikunoNaka/cinnamon/scss/sections
parent1b3658c85f5a5a25643da0cc417c70986b7caa6a (diff)
Tweaked the custom gtk theme
Diffstat (limited to '.themes/MikunoNaka/cinnamon/scss/sections')
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_accessibility.scss46
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_alt-tab.scss66
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_calendar.scss120
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_desklets.scss65
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_dialogs.scss201
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_menu.scss238
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_notifications.scss91
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_overview.scss119
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_panel.scss573
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_stage.scss114
-rw-r--r--.themes/MikunoNaka/cinnamon/scss/sections/_tile-hud.scss59
11 files changed, 1692 insertions, 0 deletions
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;
+ }
+}