aboutsummaryrefslogtreecommitdiff
path: root/.themes/oomox-Awkward/cinnamon/scss/sections/_panel.scss
diff options
context:
space:
mode:
Diffstat (limited to '.themes/oomox-Awkward/cinnamon/scss/sections/_panel.scss')
-rw-r--r--.themes/oomox-Awkward/cinnamon/scss/sections/_panel.scss573
1 files changed, 573 insertions, 0 deletions
diff --git a/.themes/oomox-Awkward/cinnamon/scss/sections/_panel.scss b/.themes/oomox-Awkward/cinnamon/scss/sections/_panel.scss
new file mode 100644
index 00000000..f1743f54
--- /dev/null
+++ b/.themes/oomox-Awkward/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;
+}
+