themes/.themes/blaquemagick/cinnamon/scss/sections/_panel.scss
// 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;
}
