574 lines
14 KiB
SCSS
574 lines
14 KiB
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;
|
||
|
|
}
|
||
|
|
|