aboutsummaryrefslogtreecommitdiff
path: root/common/cinnamon/sass
diff options
context:
space:
mode:
Diffstat (limited to 'common/cinnamon/sass')
-rw-r--r--common/cinnamon/sass/_common.scss185
1 files changed, 154 insertions, 31 deletions
diff --git a/common/cinnamon/sass/_common.scss b/common/cinnamon/sass/_common.scss
index 30ffa1f..5a3f27d 100644
--- a/common/cinnamon/sass/_common.scss
+++ b/common/cinnamon/sass/_common.scss
@@ -33,7 +33,10 @@ stage {
min-height: 20px;
padding: 5px 32px;
transition-duration: 0;
- border-radius: 2px;
+
+ &, &:focus, &:hover, &:hover:focus, &:active, &:active:focus, &:insensitive {
+ border-radius: 2px;
+ }
@include button(normal);
@@ -119,7 +122,7 @@ StScrollBar {
}
StButton#vhandle, StButton#hhandle {
- border-radius: 4px;
+ border-radius: 2px;
background-color: mix($fg_color, $bg_color, 40%);
border: 0px solid;
margin: 0px;
@@ -130,10 +133,19 @@ StScrollBar {
}
}
+.separator {
+ -gradient-height: 1px;
+ -gradient-start: rgba(0,0,0,0);
+ -gradient-end: rgba(0,0,0,0);
+ -margin-horizontal: 1.5em;
+ height: 1em;
+}
+
//
// Slider
//
-.popup-slider-menu-item {
+.popup-slider-menu-item,
+.slider {
-slider-height: 4px;
-slider-background-color: $button_border; //background of the trough
-slider-border-color: transparentize(black, 1); //trough border color
@@ -252,6 +264,8 @@ StScrollBar {
color: $fg_color;
border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9;
+ &-arrow { icon-size: 16px; }
+
.popup-sub-menu {
background-gradient-direction: none;
box-shadow: none;
@@ -264,12 +278,6 @@ StScrollBar {
padding: 4px;
StBin#trough, StBin#vhandle { border-width: 0; }
}
-
- &-menu-item:open {
- background: none;
- box-shadow: none;
- border-image: url("#{$asset_path}/menu/submenu-open.svg") 9 9 9 9;
- }
}
.popup-menu-content { padding: 1em 0em 1em 0em; }
@@ -441,7 +449,7 @@ StScrollBar {
.expo-workspaces-name-entry,
.expo-workspaces-name-entry#selected {
- spacing: 25px;
+ height: 15px;
border-radius: 2px;
font-size: 9pt;
padding: 5px 8px;
@@ -479,7 +487,7 @@ StScrollBar {
//&-controls { visible-height: 32px; }
&-thumbnails {
- spacing: 14px;
+ spacing: 26px;
&-background, &-background:rtl { padding: 8px; }
}
@@ -488,11 +496,15 @@ StScrollBar {
background-image: url("common-assets/misc/add-workspace.svg");
height: 200px;
width: 35px;
- transition-duration: 200;
+ transition-duration: 100;
&:hover {
background-image: url("common-assets/misc/add-workspace-hover.svg");
- transition-duration: 200;
+ transition-duration: 100;
+ }
+ &:active {
+ background-image: url("common-assets/misc/add-workspace-active.svg");
+ transition-duration: 100;
}
}
&-overview-background-shade { background-color: rgba(0,0,0,0.5); }
@@ -605,35 +617,35 @@ StScrollBar {
//arrow back
.calendar-change-month-back {
- background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg");
+ background-image: url("common-assets/misc/calendar-arrow-left.svg");
- &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); }
+ &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); }
- &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); }
+ &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); }
&:rtl {
- background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg");
+ background-image: url("common-assets/misc/calendar-arrow-right.svg");
- &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); }
+ &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); }
- &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); }
+ &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); }
}
}
//arrow forward
.calendar-change-month-forward {
- background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg");
+ background-image: url("common-assets/misc/calendar-arrow-right.svg");
- &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); }
+ &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); }
- &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); }
+ &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); }
&:rtl {
- background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg");
+ background-image: url("common-assets/misc/calendar-arrow-left.svg");
- &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); }
+ &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); }
- &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); }
+ &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); }
}
}
@@ -712,7 +724,10 @@ StScrollBar {
color: $fg_color;
border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9;
- .notification-button, .notification-icon-button { @extend %button; }
+ .notification-button, .notification-icon-button {
+ @extend %button;
+ padding: 5px;
+ }
StEntry { @extend %entry; }
}
@@ -742,7 +757,10 @@ StScrollBar {
color: $osd_fg_color;
}
- &-button, &-icon-button { @extend %osd_button; }
+ &-button, &-icon-button {
+ @extend %osd_button;
+ padding: 5px;
+ }
&-icon-button > StIcon { icon-size: 36px; }
@@ -765,6 +783,10 @@ StScrollBar {
border-radius: 3px;
padding: 20px;
+ > StBoxLayout {
+ padding: 4px;
+ }
+
&-item-container { spacing: 8px; }
.item-box {
@@ -779,7 +801,7 @@ StScrollBar {
&:selected {
color: $selected_fg_color;
background-color: $selected_bg_color;
- border: 1px solid $selected_bg_color;
+ border: 0px solid $selected_bg_color;
}
}
@@ -1049,7 +1071,7 @@ StScrollBar {
padding: 10px;
border: 1px solid rgba(0,0,0,0);
- &:hover { @include button(hover); }
+ &:hover { @extend %button:hover; }
}
&-places {
@@ -1077,7 +1099,7 @@ StScrollBar {
&-selected {
padding: 7px;
- @include button(hover);
+ @extend %button:hover;
&:highlighted { font-weight: bold; }
}
@@ -1092,7 +1114,7 @@ StScrollBar {
&-selected {
padding: 7px;
- @include button(hover);
+ @extend %button:hover;
}
&-hover {
background-color: red;
@@ -1290,6 +1312,70 @@ StScrollBar {
.sound-playback-control { padding: 5px 10px 10px 10px; }
+// 2.8
+.sound-player {
+ padding: 0 4px;
+
+ > StBoxLayout:first-child {
+ padding: 5px 10px 12px 10px;
+ spacing: 0.5em;
+
+ StButton:small {
+ width: 16px;
+ height: 8px;
+ padding: 1px;
+
+ StIcon { icon-size: 12px; }
+ }
+ }
+
+ &-generic-coverart {
+ background: rgba(0,0,0,0.2);
+ }
+
+ &-overlay {
+ width: 290px;
+ height: 70px;
+ padding: 15px;
+ spacing: 0.5em;
+ background: transparentize(darken($osd_bg_color, 5%), 0.1);
+ border: 0px solid darken($osd_bg_color, 10%);
+ border-bottom: 1px ;
+ color: $osd_fg_color;
+
+ StButton {
+ width: 22px;
+ height: 13px;
+ padding: 5px;
+ color: $osd_fg_color;
+ border-radius: 2px;
+ border: 1px solid transparentize($osd_bg_color,1);
+
+ StIcon { icon-size: 16px; }
+
+ &:hover{ @include button(osd-hover); }
+ &:active { @include button(active); }
+ }
+
+ StBoxLayout {
+ padding-top: 2px;
+ }
+ }
+
+ .slider {
+ height: 0.5em;
+ padding: 0;
+ border: none;
+ -slider-height: 0.5em;
+ -slider-background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
+ -slider-border-color: rgba(0,0,0,0);
+ -slider-active-background-color: $selected_bg_color;
+ -slider-active-border-color: rgba(0,0,0,0);
+ -slider-border-width: 0px;
+ -slider-handle-radius: 0px;
+ }
+}
+
//
// Workspace Switcher applet (workspaceSwitcher.js)
//
@@ -1298,6 +1384,12 @@ StScrollBar {
padding: 3px;
}
+/* Controls the styling when using the "Simple buttons" option */
+.workspace-switcher {
+ padding-left: 3px;
+ padding-right: 3px;
+}
+
.workspace-button {
width: 20px;
height: 10px;
@@ -1310,6 +1402,37 @@ StScrollBar {
&:hover { color: transparentize($selected_bg_color, 0.5) }
}
+/* Controls the style when using the "Visual representation" option */
+.workspace-graph {
+ padding: 3px;
+ spacing: 3px;
+}
+
+.workspace-graph .workspace {
+ border: 1px solid transparentize(black, 0.6);
+ background-gradient-direction: none;
+ background-color: transparentize(black, 0.8);
+}
+
+.workspace-graph .workspace:active {
+ border: 1px solid $selected_bg_color;
+ background-gradient-direction: none;
+}
+
+.workspace-graph .workspace .windows {
+ -active-window-background: lighten($panel_bg, 15%);
+ -active-window-border: rgba(0, 0, 0, 0.8);
+ -inactive-window-background: lighten($panel_bg, 15%);
+ -inactive-window-border: rgba(0, 0, 0, 0.8);
+}
+
+.workspace-graph .workspace:active .windows {
+ -active-window-background: lighten($panel_bg, 20%);
+ -active-window-border: rgba(0, 0, 0, 0.8);
+ -inactive-window-background: lighten($panel_bg, 5%);
+ -inactive-window-border: rgba(0, 0, 0, 0.8);
+}
+
//
// Panel Launchers Applet (panelLaunchers.js)
//