diff --git a/Gulpfile.js b/Gulpfile.js index 4d07293..9f21794 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -19,11 +19,22 @@ gulp.task('shell-style', function(done) { done(); }); +gulp.task('cinnamon-style', function(done) { + gulp.src('cinnamon/**/*.scss') + .pipe(sass().on('error', sass.logError)) + .pipe(gulp.dest('./cinnamon/')) + done(); +}); + //Watch task gulp.task('default',function() { gulp.watch('gtk-3.0/**/*.scss', gulp.series('styles')); }); gulp.task('shell',function() { - gulp.watch('gnome-shell/*.scss', gulp.series('shell-style')); + gulp.watch('gnome-shell/**/*.scss', gulp.series('shell-style')); +}); + +gulp.task('cinnamon',function() { + gulp.watch('cinnamon/**/*.scss', gulp.series('cinnamon-style')); }); \ No newline at end of file diff --git a/cinnamon/_colors.scss b/cinnamon/_colors.scss new file mode 100644 index 0000000..cc03f48 --- /dev/null +++ b/cinnamon/_colors.scss @@ -0,0 +1,110 @@ +// When color definition differs for dark and light variant, +// it gets @if ed depending on $variant + + +$base_color: #181b28; +$text_color: #98abb2; +$bg_color: #181b28; +$fg_color: #98abb2; + +$main_dark_color: darken($bg_color, 5%); + +$lime: #71f79f; +$red: #ed254e; +$orange: #ff6a00; +$yellow: #f9dc5c; +$purple: #c74ded; +$darkpurple: #7b7bbd; +$blue: #7cb7ff; +$cyan: #00c1e4; + +$g1: #c50ed2; +$g2: #8500f7; + +$selected_fg_color: #fefefe; +$selected_bg_color: #c50ed2; +$selected_borders_color: darken($selected_bg_color, 20%); +$borders_color: darken($main_dark_color, 5%); + +$link_color: $blue; +$link_visited_color:transparentize($link_color,0.5); + +$selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); +$selection_mode_fg: $selected_fg_color; +$warning_color: #F27835; +$error_color: #FC4138; +$warning_fg_color: white; +$error_fg_color: white; +$success_color: #73d216; +$destructive_color: #F04A50; +$suggested_color: #4DADD4; +$destructive_fg_color: white; +$suggested_fg_color: white; + +$drop_target_color: #F08437; + +//insensitive state derived colors +$insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); +$insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); + +$header_bg: $bg_color; + + +$header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); + +$header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); + +$header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); +$header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); + +$dark_sidebar_bg: $main_dark_color; +$dark_sidebar_fg: #BAC3CF; +$dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); + +$osd_fg_color: $dark_sidebar_fg; +$osd_bg_color: $dark_sidebar_bg; + +$osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); +$osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6); + +$osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); +$osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); + +$osd_insensitive_bg_color: darken($osd_bg_color, 3%); +$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); +$osd_borders_color: transparentize(black, 0.3); + +$panel_bg: $main_dark_color; +$panel_fg: $dark_sidebar_fg; + +$entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); +$entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); + +$header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); +$header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); + +$button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); +$button_border: $entry_border; + +$header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($button_bg, 0.1)); +$header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); + +//WM Buttons + +// Close +$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d); +$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d); +$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841); + +$wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); + +// Minimize, Maximize +$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); +$wm_button_active_bg: $selected_bg_color; + +$wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); + +$wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B); +$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74); +$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC); +$wm_icon_active_bg: $selected_fg_color; diff --git a/cinnamon/_common.scss b/cinnamon/_common.scss new file mode 100644 index 0000000..a635119 --- /dev/null +++ b/cinnamon/_common.scss @@ -0,0 +1,1812 @@ +$asset_path: if($variant == 'dark', dark-assets, light-assets); + +// +// Globals +// +$font-size: 9; +$font-family: Futura Bk bt, sans, Sans-Serif; +$_bubble_bg_color: opacify($osd_bg_color,0.25); +$_bubble_fg_color: $osd_fg_color; +$_bubble_borders_color: transparentize($osd_fg_color,0.8); +$_shell_fg_color: $fg_color; + +stage { + font-family: $font-family; + @include fontsize($font-size); + color: $fg_color; +} + +.label-shadow { + color: rgba(0, 0, 0, 0); +} + +%reset_style { + background-color: transparent !important; + background-gradient-direction: none !important; + border: none !important; + border-radius: 0 !important; +} + +// +// Buttons +// +%button { + min-height: 20px; + padding: 5px 32px; + transition-duration: 0; + + &, &:focus, &:hover, &:hover:focus, &:active, &:active:focus, &:insensitive { + border-radius: 2px; + } + + @include button(normal); + + &:focus { @include button(focus); } + &:hover { @include button(hover); } + &:hover:focus { @include button(focus-hover); } + &:active, &:active:focus { @include button(active); } + &:insensitive { @include button(insensitive); } +} + +%osd_button { + min-height: 20px; + padding: 5px 32px; + transition-duration: 0; + border-radius: 2px; + + @include button(osd); + + &:hover { @include button(osd-hover); } + &:focus { color: $selected_bg_color; } + &:active { @include button(osd-active); } + &:insensitive { @include button(osd-insensitive); } +} + +// +// Entries +// +%entry { + padding: 7px; + caret-size: 1px; + selection-background-color: $selected_bg_color; + selected-color: $selected_fg_color; + transition-duration: 300ms; + border-radius: 3px; + + @include entry(normal); + + &:focus, &:hover { @include entry(focus); } + &:insensitive { @include entry(insensitive); } + + StIcon.capslock-warning { + icon-size: 16px; + warning-color: $warning_color; + padding: 0 4px; + } +} + +%osd_entry { + padding: 7px; + caret-size: 1px; + caret-color: $osd_fg_color; + selection-background-color: $selected_bg_color; + selected-color: $selected_fg_color; + transition-duration: 300ms; + border-radius: 3px; + + @include entry(osd); + + &:focus { @include entry(osd-focus); } + &:insensitive { @include entry(osd-insensitive); } +} + +// +// Scrollbars +// +StScrollView { + &.vfade { -st-vfade-offset: 0px; } + &.hfade { -st-hfade-offset: 0px; } +} + +StScrollBar { + + padding: 8px; + + StScrollView & { + min-width: 5px; + min-height: 5px; + } + + StBin#trough { + background-color: transparentize($base_color, 0.9); + border-radius: 8px; + } + + StButton#vhandle, StButton#hhandle { + border-radius: 2px; + background-color: mix($fg_color, $bg_color, 40%); + border: 0px solid; + margin: 0px; + + &:hover { background-color: mix($fg_color, $bg_color, 30%); } + + &:active { background-color: $selected_bg_color; } + } +} + +.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, +.slider { + -slider-height: 4px; + -slider-background-color: $button_border; //background of the trough + -slider-border-color: transparentize(black, 1); //trough border color + -slider-active-background-color: $selected_bg_color; //active trough fill + -slider-active-border-color: transparentize(black, 1); //active trough border + -slider-border-width: 0; + -slider-handle-radius: 4px; + height: 18px; + min-width: 15em; + border: 0 solid transparent; + border-right-width: 1px; + border-left-width: 5px; + color: transparent; + + .popup-menu-item:active & { + -slider-background-color: transparentize(black, 0.8); + -slider-active-background-color: $selected_fg_color; + } +} + +// +// Check Boxes +// +.check-box { + + CinnamonGenericContainer { + spacing: .2em; + min-height: 30px; + padding-top: 2px; + } + + StLabel { font-weight: normal; } + + StBin { + width: 16px; + height: 16px; + background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg"); + } + + &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); } + + &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); } + + &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); } +} + +// +// Radio Buttons +// +.radiobutton { + + CinnamonGenericContainer { + spacing: .2em; + height: 26px; + padding-top: 2px; + } + + StLabel { + padding-top: 4px; + font-size: 0.9em; + box-shadow: none; + } + + StBin { + width: 16px; + height: 16px; + background-image: url("#{$asset_path}/checkbox/checkbox-unchecked.svg"); + } + + &:focus StBin { background-image: url("#{$asset_path}/checkbox/checkbox-unchecked-focused.svg"); } + + &:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked.svg"); } + + &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/checkbox-checked-focused.svg"); } +} + +// +// Switches +// +.toggle-switch { + width: 50px; + height: 20px; + background-size: contain; + background-image: url("#{$asset_path}/switch/switch-off.svg"); + + &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); } + + .popup-menu-item:active & { + background-image: url("common-assets/switch/switch-off-selected.svg"); + + &:checked { background-image: url("common-assets/switch/switch-on-selected.svg"); } + } +} + +// +// Links +// +.cinnamon-link { + color: $link_color; + text-decoration: underline; + + &:hover { color: lighten($link_color,10%); } +} + +// +// Tooltip +// +#Tooltip { + border-radius: 3px; + padding: 5px 12px; + background-color: $osd_bg_color; + color: $osd_fg_color; + font-size: 1em; + font-weight: normal; + text-align: center; +} + +// +// Popvers/Menus +// +.menu, +.popup-menu, +%menu { + color: $fg_color; + background-color: $panel_bg; + border-radius: 5px; + border: 1px solid $borders_color; + + &-arrow { icon-size: 16px; } + + .popup-sub-menu { + background-gradient-direction: none; + box-shadow: none; + background-color: darken($main_dark_color, 2%); + + .popup-menu-item:ltr { padding-right: 0em; } + .popup-menu-item:rtl { padding-left: 0em; } + + StScrollBar { + padding: 4px; + StBin#trough, StBin#vhandle { border-width: 0; } + } + } + + .popup-menu-content { padding: 1em 0em 1em 0em; } + .popup-menu-item { + padding: .4em 1.75em; + spacing: 1em; + + &:active { + color: $selected_fg_color; + background-color: transparent; + border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; + } + &:insensitive { + color: transparentize($fg_color, 0.5); + background: none; + } + } + + .popup-inactive-menu-item { //all icons and other graphical elements + color: $fg_color; + + &:insensitive { color: $insensitive_fg_color; } + } + + .popup-menu-item:active .popup-inactive-menu-item { color: $selected_fg_color; } + + &-icon { icon-size: 16px; } +} + +.popup-menu-boxpointer { + -arrow-border-radius: 3px; + -arrow-background-color: rgba(0,0,0,0.0); + -arrow-border-width: 1px; + -arrow-border-color: rgba(0,0,0,0.0); + -arrow-base: 0; + -arrow-rise: 0; +} + +.popup-combo-menu { + @extend %menu; + padding: 10px 1px; +} +.popup-image-menu-item {} + +.popup-combobox-item { spacing: 1em; } + +.popup-separator-menu-item { + -gradient-height: 2px; + -gradient-start: transparent; + -gradient-end: transparent; + -margin-horizontal: 1.5em; + height: 1em; +} + +.popup-alternating-menu-item:alternate { + font-weight: normal; +} + +.popup-device-menu-item { spacing: .5em; } + +.popup-subtitle-menu-item { font-weight: normal; } + +.nm-menu-item-icons { spacing: .5em; } + +// +// Panel +// +#panel { + font-size: 10pt; + height: 28px; + width: 32px; + font-weight: 700; + background-color: $panel_bg; + color: $fg_color; + &:highlight { + border-image: none; + background-color: transparentize($error_color, 0.5); + } + + &Left { + spacing: 4px; + + &:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(255,0,0,0.05); + background-gradient-end: rgba(255,0,0,0.2); + } + &:ltr { padding-right: 4px; } + &:rtl { padding-left: 4px; } + + &.vertical { + padding: 0; + + &:ltr { padding-right: 0px; } + &:rtl { padding-left: 0px; } + } + } + + &Right { + + &:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(0,0,255,0.05); + background-gradient-end: rgba(0,0,255,0.2); + } + &:ltr { padding-left: 4px; spacing: 0px; } + &:rtl { padding-right: 4px; spacing: 0px; } + + &.vertical { + padding: 0; + + &:ltr { padding-right: 0px; } + &:rtl { padding-left: 0px; } + } + } + + &Center { + spacing: 4px; + + &:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(0,255,0,0.05); + background-gradient-end: rgba(0,255,0,0.2); + } + } +} + +.panel { + $_panel_fg_color: $_shell_fg_color; + + &-top, &-bottom, &-left, &-right { + color: $_panel_fg_color; + font-size: 1em; + padding: 0px; + } + + + &-dummy { + background-color: transparentize($error_color, 0.5); + + &:entered { background-color: transparentize($error_color, 0.4); } + } + + &-status-button { + border-width: 0; + -natural-hpadding: 3px; + -minimum-hpadding: 3px; + font-weight: bold; + color: white; + height: 22px; + + &:hover {} + } + + &-button { + -natural-hpadding: 6px; + -minimum-hpadding: 2px; + font-weight: bold; + color: green; + transition-duration: 100; + + &:hover {} + } +} + +.system-status-icon { + icon-size: 16px; + padding: 0 1px; +} + +// +// Overview +// +#overview { spacing: 12px; } + +.window-caption { + background-color: $osd_bg_color; + border: 1px solid $osd_bg_color; + color: $osd_fg_color; + spacing: 25px; + border-radius: 2px; + font-size: 9pt; + padding: 5px 8px; + -cinnamon-caption-spacing: 4px; + + &#selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + border: 1px solid $selected_bg_color; + spacing: 25px; + } +} + +.expo-workspaces-name-entry, +.expo-workspaces-name-entry#selected { + height: 15px; + border-radius: 2px; + font-size: 9pt; + padding: 5px 8px; + -cinnamon-caption-spacing: 4px; + @include entry(osd); + + &:focus { + border: 1px solid $selected_bg_color; + background-color: $selected_bg_color; + color: $selected_fg_color; + font-style: italic; + transition-duration: 300; + selection-background-color: $selected_fg_color; + selected-color: $selected_bg_color; + } +} + +.expo-workspace-thumbnail-frame { + border: 4px solid rgba(255,255,255,0.0); + background-color: rgba(255,255,255,0.0); + border-radius: 2px; + + &#active { + border: 4px solid $selected_bg_color; + background-color: black; + border-radius: 2px; + } +} + +.expo-background { + background-color: opacify($osd_bg_color, 1); +} + +.workspace { + //&-controls { visible-height: 32px; } + + &-thumbnails { + spacing: 26px; + + &-background, &-background:rtl { padding: 8px; } + } + + &-add-button { + background-image: url("common-assets/misc/add-workspace.svg"); + height: 200px; + width: 35px; + transition-duration: 100; + + &:hover { + background-image: url("common-assets/misc/add-workspace-hover.svg"); + 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); } +} + +.workspace-close-button, +.window-close { + background-image: url("common-assets/misc/close.svg"); + background-size: 26px; + height: 26px; + width: 26px; + -cinnamon-close-overlap: 10px; + + &:hover { + background-image: url("common-assets/misc/close-hover.svg"); + background-size: 26px; + height: 26px; + width: 26px; + } + &:active { + background-image: url("common-assets/misc/close-active.svg"); + background-size: 26px; + height: 26px; + width: 26px; + } +} + +//.workspace-thumbnail-indicator { +// outline: 2px solid red; +// border: 1px solid green; +//} +// +//.window-close:rtl { +// -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); +//} + +.window-close-area { + background-image: url("common-assets/misc/trash-icon.svg"); + height: 120px; + width: 400px; +} + +// +// About Dialog (applet.js and desklet.js) +// +.about { + &-content { + width: 550px; + height: 250px; + spacing: 8px; + padding-bottom: 10px; + } + &-title { + font-size: 2em; + font-weight: bold; + } + &-uuid { + font-size: 10px; + color: #888; + } + &-icon { + padding-right: 20px; + padding-bottom: 14px; + } + &-scrollBox { + border: 1px solid $borders_color; + border-radius: 2px; + background-color: $base_color; + padding: 4px; + padding-right: 0; + border-radius: 0; + + &-innerBox { + padding: 1.2em; + spacing: 1.2em; + } + } + &-description { + padding-top: 4px; + padding-bottom: 16px; + } + &-version { + padding-left: 7px; + font-size: 10px; + color: #888; + } +} + + +// +// Calendar +// +.calendar { + padding: .4em 1.75em; + spacing-rows: 0px; + spacing-columns: 0px; +} + +.calendar-month-label { + color: $fg_color; + font-weight: bold; + padding: 8px 0; +} + +.calendar-change-month-back, +.calendar-change-month-forward { + width: 16px; + height: 16px; +} + +//arrow back +.calendar-change-month-back { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); + + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } + + &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + + &:rtl { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); + + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } + + &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + } +} + +//arrow forward +.calendar-change-month-forward { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); + + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } + + &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + + &:rtl { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); + + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } + + &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + } +} + +.datemenu-date-label { + padding: .4em 1.75em; + font-weight: bold; + text-align: center; + color: $fg_color; + border-radius: 2px; +} + +.calendar-day-base { + font-size: 80%; + text-align: center; + width: 25px; + height: 25px; + padding: 0.1em; + margin: 2px; + border-radius: 12.5px; +} + +.calendar-day-heading { + color: transparentize($fg_color, 0.15); + margin-top: 1em; + font-size: 70%; +} + +.calendar-day { + border-width: 0; + color: transparentize($fg_color, 0.2); +} + +.calendar-day-top { + border-top-width: 0; +} + +.calendar-day-left { + border-left-width: 0; +} + +.calendar-nonwork-day { + color: $fg_color; + background-color: transparent; + font-weight: bold; +} + +.calendar-today, +.calendar-today:active, +.calendar-today:focus, +.calendar-today:hover { + font-weight: bold; + color: $selected_fg_color; + background-color: $selected_bg_color; + border-width: 0; +} + +.calendar-other-month-day { + color: transparentize($fg_color, 0.7); + opacity: 1; +} + +.calendar-week-number { + color: transparentize($fg_color, 0.3); + font-size: 80%; +} + +// +// Notifications +// +#notification { + border-radius: 3px; + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + padding: 13px; + spacing-rows: 10px; + spacing-columns: 10px; + margin-from-right-edge-of-screen: 20px; + width: 34em; + color: $osd_fg_color; + + .menu &, + .popup-menu & { + &, &.multi-line-notification { color: $fg_color; } + border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9; + + .notification-button, .notification-icon-button { + @extend %button; + padding: 5px; + } + + StEntry { @extend %entry; } + } + + &.multi-line-notification { + padding-bottom: 13px; + color: $osd_fg_color; + } + + &-scrollview { + max-height: 10em; + + > .top-shadow, > .bottom-shadow { height: 1em; } + + &:ltr > StScrollBar { padding-left: 6px; } + &:rtl > StScrollBar { padding-right: 6px; } + } + + &-body { spacing: 5px; } + &-actions { spacing: 10px; } +} + +.notification { + + &-with-image { + min-height: 159px; + color: $osd_fg_color; + } + + &-button, &-icon-button { + @extend %osd_button; + padding: 5px; + } + + &-icon-button > StIcon { icon-size: 36px; } + + StEntry { @extend %osd_entry; } +} + +// +// Alt Tab +/// +#altTabPopup { + padding: 8px; + spacing: 16px; +} + +.switcher-list { + color: $osd_fg_color; + background: none; + border: none; + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + border-radius: 3px; + padding: 20px; + + > StBoxLayout { + padding: 4px; + } + + &-item-container { spacing: 8px; } + + .item-box { + padding: 8px; + border-radius: 2px; + + &:outlined { + padding: 8px; + border: 1px solid $selected_bg_color; + } + + &:selected { + color: $selected_fg_color; + background-color: $selected_bg_color; + border: 0px solid $selected_bg_color; + } + } + + .thumbnail { width: 256px; } + + .thumbnail-box { + padding: 2px; + spacing: 4px; + } + .separator { + width: 1px; + background: rgba(255,255,255,0.2); + } +} + +.switcher-arrow { + border-color: rgba(0,0,0,0); + color: $osd_fg_color; + + &:highlighted { + border-color: rgba(0,0,0,0); + color: $_shell_fg_color; + } +} + +//.switcher-preview-backdrop { background-color: rgba(25,25,25,0.95); } + +.thumbnail-scroll-gradient-left { + background-color: rgba(0, 0, 0, 0); + border-radius: 24px; + border-radius-topright: 0px; + border-radius-bottomright: 0px; + width: 60px; +} + +.thumbnail-scroll-gradient-right { + background-color: rgba(0, 0, 0, 0); + border-radius: 24px; + border-radius-topleft: 0px; + border-radius-bottomleft: 0px; + width: 60px; +} + +// +//Activities Ripples +// +.ripple-box { + width: 104px; + height: 104px; + background-image: url("common-assets/misc/corner-ripple.svg"); + background-size: contain; +} + +// +// Modal dialogs +// +.lightbox { background-color: rgba(0, 0, 0, 0.4); } +.flashspot { background-color: white; } + +.modal-dialog { + color: $fg_color; + background-color: transparentize($bg_color, 1); + border: none; + border-image: url("#{$asset_path}/misc/modal.svg") 9 9 9 67; + padding: 0 5px 6px 5px; + + > StBoxLayout:first-child { + padding: 20px 10px 10px 10px; + } + + &-button-box { + spacing: 0; + margin: 0px; + padding: 14px 10px; + background: none; + border: none; + border-image: url("#{$asset_path}/misc/button-box.svg") 9 9 9 9; + + .modal-dialog-button { + padding-top: 0; + padding-bottom: 0; + height: 30px; + + @extend %osd_button; + } + } +} + +// +// Run dialog +// +.run-dialog { + padding: 0px 15px 10px 15px; + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + + > * { padding: 0; } + + &-label { + font-size: 0; + font-weight: bold; + color: $osd_fg_color; + padding-bottom: 0; + } + + &-error-label { color: $error_color; } + + &-error-box { + padding-top: 15px; + spacing: 5px; + } + &-completion-box { + padding-left: 15px; + font-size: 10px; + } + &-entry { + width: 21em; + padding: 7px; + border-radius: 3px; + caret-color: $osd_fg_color; + selected-color: $selected_fg_color; + selection-background-color: $selected_bg_color; + + @include entry(osd); + + &:focus { @include entry(osd-focus); } + } + .modal-dialog-button-box { + border: none; + box-shadow: none; + background: none; + background-gradient-direction: none; + } +} + +/* CinnamonMountOperation Dialogs */ +.cinnamon-mount-operation-icon { + icon-size: 48px; +} + +.mount-password-reask { + color: $warning_color; +} + +.show-processes-dialog, +.mount-question-dialog { + spacing: 24px; + + &-subject { + padding-top: 10px; + padding-left: 17px; + padding-bottom: 6px; + + &:rtl { + padding-left: 0px; + padding-right: 17px; + } + } + &-description { + padding-left: 17px; + width: 28em; + + &: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; + } + + &-item { + color: #ccc; + + &:hover { color: white } + + &:ltr { padding-right: 1em; } + &:rtl { padding-left: 1em; } + + &-icon:ltr { padding-right: 17px; } + &-icon:rtl { padding-left: 17px; } + + &-name { font-size: 1.1em; } + } +} + +// +// Magnifier +// +.magnifier-zoom-region { + border: 2px solid rgba(128, 0, 0, 1); + + .full-screen { border-width: 0px; } +} + +// +// On-Screen Keyboard +// +#keyboard { + background-color: $osd_bg_color; + border-width: 0; + border-top-width: 1px; + border-color: transparentize(black, 0.6); +} + +.keyboard-layout { + spacing: 10px; + padding: 10px; +} + +.keyboard-row { + spacing: 15px; +} + +.keyboard-key { + min-height: 2em; + min-width: 2em; + font-size: 14pt; + font-weight: bold; + border-radius: 3px; + box-shadow: none; + + @include button(osd); + + &:hover { @include button(osd-hover); } + &:active, &:checked { @include button(osd-active); } + + &:grayed { @include button(osd-insensitive); } +} + +.keyboard-subkeys { //long press on a key popup + color: $osd_fg_color; + padding: 5px; + -arrow-border-radius: 2px; + -arrow-background-color: $osd_bg_color; + -arrow-border-width: 1px; + -arrow-border-color: transparentize(black, 0.6);; + -arrow-base: 20px; + -arrow-rise: 10px; + -boxpointer-gap: 5px; +} + +// +// Cinnamon Specific Section +// + +// +// Menu (menu.js) +// +.menu { + &-favorites-box { + margin: auto; + padding: 10px; + transition-duration: 300; + background-color: $bg_color; + border: 1px solid $borders_color; + } + + &-favorites-button { + padding: 10px; + border: 1px solid rgba(0,0,0,0); + + &:hover { @extend %button:hover; } + } + + &-places { + + &-box { + margin: auto; + padding: 10px; + border: 0px solid red; + } + + &-button { padding: 10px; } + } + + &-categories-box { padding: 10px 30px 10px 30px; } + + &-applications-inner-box, + &-applications-outer-box { padding: 10px 10px 0 10px; } + + &-application-button { + padding: 7px; + border: 1px solid rgba(0,0,0,0); + + // This style is used in menu application buttons for applications which were newly installed + &:highlighted { font-weight: bold; } + + &-selected { + padding: 7px; + @extend %button:hover; + + &:highlighted { font-weight: bold; } + } + + &-label:ltr { padding-left: 5px; } + &-label:rtl { padding-right: 5px; } + } + + &-category-button { + padding: 7px; + border: 1px solid rgba(0,0,0,0); + + &-selected { + padding: 7px; + @extend %button:hover; + } + &-hover { + background-color: red; + border-radius: 2px; + } + &-greyed { + padding: 7px; + color: $insensitive_fg_color; + border: 1px solid rgba(0,0,0,0); + } + + &-label:ltr { padding-left: 5px; } + &-label:rtl { padding-right: 5px; } + } + + // Name and description of the currently hovered item in the menu + // This appears on the bottom right hand corner of the menu + &-selected-app-box { + padding-right: 30px; + padding-left: 28px; + text-align: right; + height: 30px; + + &:rtl { + padding-top: 10px; + height: 30px; + } + } + + &-selected-app-title { font-weight: bold; } + + &-selected-app-description { max-width: 150px; } + + &-search-box:ltr { padding-left: 30px; } + &-search-box-rtl { padding-right: 30px; } +} + +#menu-search-entry { + width: 250px; + height: 15px; + font-weight: normal; + caret-color: $fg_color; + + @extend %entry; +} + +.menu-search-entry-icon { + icon-size: 1em; + color: $fg_color; +} + +/* Context menu (at the moment only for favorites) */ +.menu-context-menu { +} + +// +// OSD +// +.info-osd { + text-align: center; + font-weight: bold; + spacing: 1em; + padding: 16px; + color: $_shell_fg_color; + border-image: url("common-assets/misc/osd.svg") 9 9 9 9; +} + +.osd-window { + text-align: center; + font-weight: bold; + spacing: 1em; + padding: 20px; + margin: 32px; + min-width: 64px; + min-height: 64px; + + color: $_shell_fg_color; + background: none; + border: none; + border-radius: 5px; + border-image: url("common-assets/misc/osd.svg") 9 9 9 9; + +.osd-monitor-label { font-size: 3em; } + + .level { + padding: 0; + height: 4px; + background-color: transparentize(black, 0.5); + border-radius: 2px; + color: $selected_bg_color; + } + .level-bar { + background-color: $selected_bg_color; + } +} + +// +// Window list (windowList.js) +// + +.window-list { + &-box { + spacing: 0; + + .panel-top, + .panel-bottom & { + &:ltr { padding: 0 0 0 8px; } + &:rtl { padding: 0 8px 0 0; } + } + + &.vertical { padding: 6px 0 0 0; } + + &:highlight { background-color: $selected_bg_color } + } + + &-item-box { + border: 0 none transparent; + border-image: none; + background-image: none; + background-color: $panel_bg; + color: $osd_fg_color; + box-shadow: none; + font-weight: 400; + + &:hover { + color: $selected_fg_color; + @each $position, $_indicator in (top, 0 2px), + (bottom, 0 -2px), + (left, 2px 0), + (right, -2px 0) { + .panel-#{$position} & { + box-shadow: inset #{$_indicator} $selected_bg_color; + } + } + + } + &:active, + &:checked, + &:focus { + &, &:hover { + color: $selected_fg_color; + + @each $position, $_indicator in (top, 0 2px), + (bottom, 0 -2px), + (left, 2px 0), + (right, -2px 0) { + .panel-#{$position} & { + box-shadow: inset #{$_indicator} $red; + } + } + } + } + + StIcon, + StBin { + .panel-top &, + .panel-bottom & { padding: 0 (6px - 2px); } + } + + &.vertical StIcon, + &.vertical StBin { padding: 0; } + + StLabel { + font-weight: 400; + + .panel-top &, + .panel-bottom & { + &:ltr { padding: 0 (6px - 2px) 0 0; } + &:rtl { padding: 0 0 0 (6px - 2px); } + } + } + + &:progress, + .progress { + background-gradient-start: $selected_bg_color; + background-gradient-end: $selected_bg_color; + } + } + + &-item-demands-attention { + background-gradient-start: $selected_bg_color; + background-gradient-end: $selected_bg_color; + color: $selected_fg_color; + + @each $position, $_indicator in (top, 0 2px), + (bottom, 0 -2px), + (left, 2px 0), + (right, -2px 0) { + .panel-#{$position} & { + box-shadow: inset #{$_indicator} $selected_bg_color; + } + } + } + + + + // >= 3.6.7 + &-preview { // thumbnail popup windows = .switcher-list + padding: 20px - 8px; // = .switcher-list - .item-box + spacing: 8px; // = .switcher-list-item-container + border: none; + border-image: url("assets/misc/osd.svg") 9 9 9 9; + border-radius: 2px; + color: $osd_fg_color; + background: none; + } +} + + +.grouped-window-list { + &-item-box { + border: 0 none transparent; + border-image: none; + background-image: none; + background-color: $panel_bg; + color: $osd_fg_color; + box-shadow: none; + font-weight: 400; + + StIcon, + StBin { + .panel-top &, + .panel-bottom & { padding: 0 (6px - 2px); } + } + + &:active, + &:checked { + @each $position, $_indicator in (top, 0 2px), + (bottom, 0 -2px), + (left, 2px 0), + (right, -2px 0) { + .panel-#{$position} & { + box-shadow: inset #{$_indicator} lighten($panel_bg, 30%); + } + } + } + + &:hover, + &:active:hover, + &:focus, + &:active:focus, + &:focus:hover, + &:active:focus:hover { + @each $position, $_indicator in (top, 0 2px), + (bottom, 0 -2px), + (left, 2px 0), + (right, -2px 0) { + .panel-#{$position} & { + box-shadow: inset #{$_indicator} $selected_bg_color + } + } + } + + + &:progress, + .progress { + background-gradient-start: $selected_bg_color; + background-gradient-end: $selected_bg_color; + } + } + + &-item-demands-attention { + background-gradient-start: $selected_bg_color; + background-gradient-end: $selected_bg_color; + color: $selected_fg_color; + + @each $position, $_indicator in (top, 0 2px), + (bottom, 0 -2px), + (left, 2px 0), + (right, -2px 0) { + .panel-#{$position} & { + box-shadow: inset #{$_indicator} $selected_bg_color; + } + } + } + +} +/// +// Sound Applet (status/volume.js) +// +.sound-button { + width: 22px; + height: 13px; + padding: 8px; + + @extend %button; + + &-container { + padding-right: 3px; + padding-left: 3px; + } + StIcon { icon-size: 1.4em; } +} + +.sound-track { + &-infos { padding: 5px; } + &-info { + padding-top: 2px; + padding-bottom: 2px; + + StIcon { icon-size: 16px; } + + StLabel { + padding-left: 5px; + padding-right: 5px; + } + } + &-box { + padding-left: 15px; + padding-right: 15px; + max-width: 220px; + } +} + +.sound-seek-box { + padding-left: 15px; + + StLabel { padding-top: 2px; } + StIcon { icon-size: 16px; } +} + +.sound-seek-slider { width: 140px; } + +.sound-volume-menu-item { + padding: .4em 1.75em; + + StIcon { + icon-size: 1.14em; + padding-left: 8px; + padding-right: 8px; + } +} + +.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) +// +#workspaceSwitcher { + spacing: 0px; + 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; + color: $selected_fg_color; + padding: 3px; + padding-top: 4px; + transition-duration: 300; + + &:outlined, &:outlined:hover { color: $selected_bg_color; } + &: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) +// +#panel-launchers-box { + padding-left: 7px; + + &.vertical { + padding: 2px 0; + } +} + +.panel-launcher, +.launcher { + margin: 1px; + padding: 1px; + transition-duration: 200; + + &:hover { + background-gradient-direction: none; + border: 0px solid $selected_bg_color; + + .panel-bottom & { border-bottom-width: 1px; } + .panel-top & { border-top-width: 1px; } + .panel-left & { border-left-width: 1px; padding-left: 0; } + .panel-right & { border-right-width: 1px; padding-right: 0; } + } +} + +// +// Overview corner +// +#overview-corner { + background-image: url("common-assets/misc/overview.png"); + + &:hover { background-image: url("common-assets/misc/overview-hover.png"); } +} + +// +// Applets (applet.js) +// +.applet { + &-separator { padding: 1px 4px; } + + &-separator-line { + width: 1px; + background: rgba(255,255,255, 0.12); + } + + &-box { + padding-left: 3px; + padding-right: 3px; + color: $_shell_fg_color; + text-shadow: none; + transition-duration: 100; + + &.vertical { + padding: 3px 0; + } + + &:hover { + color: $selected_fg_color; + background-color: $selected_bg_color; + } + + &:highlight { + background-image: none; + border-image: none; + background-color: transparentize($error_color, 0.5); + } + } + + &-label { + font-weight: bold; + color: $_shell_fg_color; + + &:hover, .applet-box:hover & { + color: $selected_fg_color; + text-shadow: none; + } + } + + &-icon { + color: $_shell_fg_color; + icon-size: 22px; + + &:hover, .applet-box:hover > & { + color: $selected_fg_color; + text-shadow: none; + } + } + +} + +// +// User Applet +// +.user-icon { + width: 32px; + height: 32px; + background-color: transparent; + border: none; + border-radius: 0; +} + +.user-label { + color: $fg_color; + font-size: 1em; + font-weight: bold; + margin: 0px; +} + +// +// Desklets (desklet.js) +// +.desklet { + color: $osd_fg_color; + + &:highlight { + background-color: transparentize($error_color, 0.5); + } + + &-with-borders { + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + color: $osd_fg_color; + padding: 12px; + padding-bottom: 16px; + + &:highlight { + background-color: transparentize($error_color, 0.5); + } + } + &-with-borders-and-header { + border-image: url("common-assets/misc/desklet.svg") 9 9 9 9; + color: $osd_fg_color; + border-radius: 0; + border-radius-topleft: 0; + border-radius-topright: 0; + padding: 12px; + padding-bottom: 17px; + + &:highlight { + background-color: transparentize($error_color, 0.5); + } + } + &-header { + border-image: url("common-assets/misc/desklet-header.svg") 9 9 9 9; + color: $osd_fg_color; + font-size: 1em; + padding: 12px; + padding-bottom: 6px; + } + &-drag-placeholder { + border: 2px solid $selected_bg_color; + background-color: transparentize($selected_bg_color, 0.7); + } +} + +.photoframe-box { + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + color: $osd_fg_color; + padding: 12px; + padding-bottom: 16px; +} + +// +// Workspace OSD +// +/*FIXME*/ +.workspace-osd { + /*color: red;*/ + text-shadow: black 5px 5px 5px; + font-weight: bold; + font-size: 48pt; +} + +// +// Notification Applet +// +.notification-applet-padding { padding: .5em 1em; } + +.notification-applet-container { max-height: 100px; } + +// +// Tile Preview +// +.tile-preview, .tile-preview.snap, +.tile-hud, .tile-hud.snap { + background-color: transparentize($selected_bg_color, 0.7); + border: 1px solid $selected_bg_color; +} + +// +// Xkcd Desklet +// +.xkcd-box { + padding: 6px; + border: 0px; + background-color: rgba(0,0,0,0); + border-radius: 0px; +} diff --git a/cinnamon/_drawing.scss b/cinnamon/_drawing.scss new file mode 100644 index 0000000..738a69d --- /dev/null +++ b/cinnamon/_drawing.scss @@ -0,0 +1,167 @@ +// Drawing mixins + +// generic drawing of more complex things + +// provide font size in rem, with px fallback +@mixin fontsize($size: 24, $base: 16) { + font-size: round($size) + pt; + //font-size: ($size / $base) * 1rem; +} + +// Entries + +@mixin entry($t, $dark:false) { +// +// Entries drawing function +// + //@extend %reset_style; + + @if $t==normal { + color: $text_color; + background-color: $entry_bg; + border: 1px solid $entry_border; + box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); + } + + @if $t==focus { + color: $fg_color; + background-color: $entry_bg; + border: 1px solid $selected_bg_color; + box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); + } + + @if $t==insensitive { + color: $insensitive_fg_color; + background-color: mix($entry_bg, $bg_color, 55%); + border-color: 1px solid mix($entry_border, $bg_color, 55%); + box-shadow: inset 0 2px 4px transparentize(mix($entry_bg, $bg_color, 55%), 0.95); + } + + @if $t==osd { + color: $osd_fg_color; + background-color: $osd_entry_bg; + border: 1px solid $osd_entry_border; + box-shadow: inset 0 2px 4px transparentize(black, 0.95); + } + + @if $t==osd-focus { + color: $selected_fg_color; + background-color: $selected_bg_color; + border: 1px solid $selected_bg_color; + box-shadow: inset 0 2px 4px transparentize(black, 0.95); + } + + @if $t==osd-insensitive { + color: transparentize($osd_fg_color, 0.45); + background-color: transparentize($osd_entry_bg, 0.15); + border: 1px solid $osd_entry_border; + box-shadow: inset 0 2px 4px transparentize(black, 0.95); + } +} + +// Buttons + +@mixin button($t) { +// +// Button drawing function +// + //@extend %reset_style; + + text-shadow: 0 1px transparentize($base_color, 1); + + @if $t==normal { + // + // normal button + // + color: $fg_color; + background-color: $button_bg; + border: 1px solid $button_border; + box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); + } + + @else if $t==focus { + // + // focused button + // + color: $fg_color; + background-color: $button_bg; + border: 1px solid $selected_bg_color; + box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); + } + + @else if $t==focus-hover { + // + // focused button + // + color: $fg_color; + background-color: $button_bg; + border: 1px solid $selected_bg_color; + box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); + } + + @else if $t==hover { + // + // hovered button + // + color: $fg_color; + background-color: lighten($button_bg, 5%); + border: 1px solid $button_border; + box-shadow: inset 0 2px 4px transparentize(lighten($button_bg, 5%), 0.95); + } + + @else if $t==active { + // + // pushed button + // + color: $selected_fg_color; + background-color: $selected_bg_color; + border: 1px solid $selected_bg_color; + box-shadow: inset 0 2px 4px $selected_bg_color; + } + + @else if $t==insensitive { + // + // insensitive button + // + color: $insensitive_fg_color; + border: 1px solid transparentize($button_border, 0.45); + background-color: transparentize($button_bg, 0.45); + box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); + } + + @else if $t==osd { + // + // normal osd button + // + color: $osd_fg_color; + border: 1px solid $osd_button_border; + background-color: $osd_button_bg; + } + + @else if $t==osd-hover { + // + // active osd button + // + color: $osd_fg_color; + border: 1px solid $osd_button_border; + background-color: opacify(lighten($osd_button_bg, 7%), 0.1); + } + + @else if $t==osd-active { + // + // active osd button + // + color: $selected_fg_color; + border: 1px solid $selected_bg_color; + background-color: $selected_bg_color; + } + + @else if $t==osd-insensitive { + // + // insensitive osd button + // + color: $osd_insensitive_fg_color; + border: 1px solid $osd_button_border; + background-color: transparentize($osd_button_bg, 0.15); + } +} diff --git a/cinnamon/cinnamon-dark.css b/cinnamon/cinnamon-dark.css new file mode 100644 index 0000000..2e539fb --- /dev/null +++ b/cinnamon/cinnamon-dark.css @@ -0,0 +1,1517 @@ +stage { + font-family: Futura Bk bt, sans, Sans-Serif; + font-size: 9pt; + color: #98abb2; } + +.label-shadow { + color: rgba(0, 0, 0, 0); } + +.menu #notification .notification-button, .menu #notification .notification-icon-button, +.popup-menu #notification .notification-button, +.popup-menu #notification .notification-icon-button, .sound-button { + min-height: 20px; + padding: 5px 32px; + transition-duration: 0; + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #98abb2; + background-color: #1c1f2e; + border: 1px solid #050508; + box-shadow: inset 0 2px 4px rgba(28, 31, 46, 0.05); } + .menu #notification .notification-button, .menu #notification .notification-icon-button, + .popup-menu #notification .notification-button, + .popup-menu #notification .notification-icon-button, .sound-button, .menu #notification .notification-button:focus, .menu #notification .notification-icon-button:focus, + .popup-menu #notification .notification-button:focus, + .popup-menu #notification .notification-icon-button:focus, .sound-button:focus, .menu #notification .notification-button:hover, .menu #notification .notification-icon-button:hover, + .popup-menu #notification .notification-button:hover, + .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover, .menu #notification .notification-button:hover:focus, .menu #notification .notification-icon-button:hover:focus, + .popup-menu #notification .notification-button:hover:focus, + .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus, .menu #notification .notification-button:active, .menu #notification .notification-icon-button:active, + .popup-menu #notification .notification-button:active, + .popup-menu #notification .notification-icon-button:active, .sound-button:active, .menu #notification .notification-button:active:focus, .menu #notification .notification-icon-button:active:focus, + .popup-menu #notification .notification-button:active:focus, + .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus, .menu #notification .notification-button:insensitive, .menu #notification .notification-icon-button:insensitive, + .popup-menu #notification .notification-button:insensitive, + .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { + border-radius: 2px; } + .menu #notification .notification-button:focus, .menu #notification .notification-icon-button:focus, + .popup-menu #notification .notification-button:focus, + .popup-menu #notification .notification-icon-button:focus, .sound-button:focus { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #98abb2; + background-color: #1c1f2e; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px rgba(28, 31, 46, 0.05); } + .menu #notification .notification-button:hover, .menu #notification .notification-icon-button:hover, + .popup-menu #notification .notification-button:hover, + .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #98abb2; + background-color: #252a3e; + border: 1px solid #050508; + box-shadow: inset 0 2px 4px rgba(37, 42, 62, 0.05); } + .menu #notification .notification-button:hover:focus, .menu #notification .notification-icon-button:hover:focus, + .popup-menu #notification .notification-button:hover:focus, + .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #98abb2; + background-color: #1c1f2e; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px rgba(28, 31, 46, 0.05); } + .menu #notification .notification-button:active, .menu #notification .notification-icon-button:active, + .popup-menu #notification .notification-button:active, + .popup-menu #notification .notification-icon-button:active, .sound-button:active, .menu #notification .notification-button:active:focus, .menu #notification .notification-icon-button:active:focus, + .popup-menu #notification .notification-button:active:focus, + .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #fefefe; + background-color: #c50ed2; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px #c50ed2; } + .menu #notification .notification-button:insensitive, .menu #notification .notification-icon-button:insensitive, + .popup-menu #notification .notification-button:insensitive, + .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: rgba(152, 171, 178, 0.45); + border: 1px solid rgba(5, 5, 8, 0.55); + background-color: rgba(28, 31, 46, 0.55); + box-shadow: inset 0 2px 4px rgba(28, 31, 46, 0.05); } + +.notification-button, .notification-icon-button, .modal-dialog-button-box .modal-dialog-button { + min-height: 20px; + padding: 5px 32px; + transition-duration: 0; + border-radius: 2px; + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(57, 64, 94, 0.4); } + .notification-button:hover, .notification-icon-button:hover, .modal-dialog-button-box .modal-dialog-button:hover { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(70, 79, 117, 0.5); } + .notification-button:focus, .notification-icon-button:focus, .modal-dialog-button-box .modal-dialog-button:focus { + color: #c50ed2; } + .notification-button:active, .notification-icon-button:active, .modal-dialog-button-box .modal-dialog-button:active { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #fefefe; + border: 1px solid #c50ed2; + background-color: #c50ed2; } + .notification-button:insensitive, .notification-icon-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #42464f; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(57, 64, 94, 0.25); } + +.menu #notification StEntry, +.popup-menu #notification StEntry, #menu-search-entry { + padding: 7px; + caret-size: 1px; + selection-background-color: #c50ed2; + selected-color: #fefefe; + transition-duration: 300ms; + border-radius: 3px; + color: #98abb2; + background-color: #181b28; + border: 1px solid #050508; + box-shadow: inset 0 2px 4px rgba(24, 27, 40, 0.05); } + .menu #notification StEntry:focus, + .popup-menu #notification StEntry:focus, #menu-search-entry:focus, .menu #notification StEntry:hover, + .popup-menu #notification StEntry:hover, #menu-search-entry:hover { + color: #98abb2; + background-color: #181b28; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px rgba(24, 27, 40, 0.05); } + .menu #notification StEntry:insensitive, + .popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive { + color: rgba(152, 171, 178, 0.45); + background-color: #181b28; + border-color: 1px solid #0d0f16; + box-shadow: inset 0 2px 4px rgba(24, 27, 40, 0.05); } + .menu #notification StEntry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning { + icon-size: 16px; + warning-color: #F27835; + padding: 0 4px; } + +.notification StEntry { + padding: 7px; + caret-size: 1px; + caret-color: #BAC3CF; + selection-background-color: #c50ed2; + selected-color: #fefefe; + transition-duration: 300ms; + border-radius: 3px; + color: #BAC3CF; + background-color: rgba(57, 64, 94, 0.4); + border: 1px solid rgba(0, 0, 0, 0.4); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + .notification StEntry:focus { + color: #fefefe; + background-color: #c50ed2; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + .notification StEntry:insensitive { + color: rgba(186, 195, 207, 0.55); + background-color: rgba(57, 64, 94, 0.25); + border: 1px solid rgba(0, 0, 0, 0.4); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + +StScrollView.vfade { + -st-vfade-offset: 0px; } + +StScrollView.hfade { + -st-hfade-offset: 0px; } + +StScrollBar { + padding: 8px; } + StScrollView StScrollBar { + min-width: 5px; + min-height: 5px; } + StScrollBar StBin#trough { + background-color: rgba(24, 27, 40, 0.1); + border-radius: 8px; } + StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { + border-radius: 2px; + background-color: #4b555f; + border: 0px solid; + margin: 0px; } + StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { + background-color: #3e4651; } + StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { + background-color: #c50ed2; } + +.separator { + -gradient-height: 1px; + -gradient-start: rgba(0, 0, 0, 0); + -gradient-end: rgba(0, 0, 0, 0); + -margin-horizontal: 1.5em; + height: 1em; } + +.popup-slider-menu-item, +.slider { + -slider-height: 4px; + -slider-background-color: #050508; + -slider-border-color: rgba(0, 0, 0, 0); + -slider-active-background-color: #c50ed2; + -slider-active-border-color: rgba(0, 0, 0, 0); + -slider-border-width: 0; + -slider-handle-radius: 4px; + height: 18px; + min-width: 15em; + border: 0 solid transparent; + border-right-width: 1px; + border-left-width: 5px; + color: transparent; } + .popup-menu-item:active .popup-slider-menu-item, .popup-menu-item:active + .slider { + -slider-background-color: rgba(0, 0, 0, 0.2); + -slider-active-background-color: #fefefe; } + +.check-box CinnamonGenericContainer { + spacing: .2em; + min-height: 30px; + padding-top: 2px; } + +.check-box StLabel { + font-weight: normal; } + +.check-box StBin { + width: 16px; + height: 16px; + background-image: url("dark-assets/checkbox/checkbox-unchecked.svg"); } + +.check-box:focus StBin { + background-image: url("dark-assets/checkbox/checkbox-unchecked-focused.svg"); } + +.check-box:checked StBin { + background-image: url("dark-assets/checkbox/checkbox-checked.svg"); } + +.check-box:focus:checked StBin { + background-image: url("dark-assets/checkbox/checkbox-checked-focused.svg"); } + +.radiobutton CinnamonGenericContainer { + spacing: .2em; + height: 26px; + padding-top: 2px; } + +.radiobutton StLabel { + padding-top: 4px; + font-size: 0.9em; + box-shadow: none; } + +.radiobutton StBin { + width: 16px; + height: 16px; + background-image: url("dark-assets/checkbox/checkbox-unchecked.svg"); } + +.radiobutton:focus StBin { + background-image: url("dark-assets/checkbox/checkbox-unchecked-focused.svg"); } + +.radiobutton:checked StBin { + background-image: url("dark-assets/checkbox/checkbox-checked.svg"); } + +.radiobutton:focus:checked StBin { + background-image: url("dark-assets/checkbox/checkbox-checked-focused.svg"); } + +.toggle-switch { + width: 50px; + height: 20px; + background-size: contain; + background-image: url("dark-assets/switch/switch-off.svg"); } + .toggle-switch:checked { + background-image: url("dark-assets/switch/switch-on.svg"); } + .popup-menu-item:active .toggle-switch { + background-image: url("common-assets/switch/switch-off-selected.svg"); } + .popup-menu-item:active .toggle-switch:checked { + background-image: url("common-assets/switch/switch-on-selected.svg"); } + +.cinnamon-link { + color: #7cb7ff; + text-decoration: underline; } + .cinnamon-link:hover { + color: #afd3ff; } + +#Tooltip { + border-radius: 3px; + padding: 5px 12px; + background-color: #0e1018; + color: #BAC3CF; + font-size: 1em; + font-weight: normal; + text-align: center; } + +.menu, +.popup-menu, +.popup-combo-menu { + color: #98abb2; + background-color: #0e1018; + border-radius: 5px; + border: 1px solid #050508; } + .menu-arrow, + .popup-menu-arrow { + icon-size: 16px; } + .menu .popup-sub-menu, + .popup-menu .popup-sub-menu, + .popup-combo-menu .popup-sub-menu { + background-gradient-direction: none; + box-shadow: none; + background-color: #0b0c12; } + .menu .popup-sub-menu .popup-menu-item:ltr, + .popup-menu .popup-sub-menu .popup-menu-item:ltr, + .popup-combo-menu .popup-sub-menu .popup-menu-item:ltr { + padding-right: 0em; } + .menu .popup-sub-menu .popup-menu-item:rtl, + .popup-menu .popup-sub-menu .popup-menu-item:rtl, + .popup-combo-menu .popup-sub-menu .popup-menu-item:rtl { + padding-left: 0em; } + .menu .popup-sub-menu StScrollBar, + .popup-menu .popup-sub-menu StScrollBar, + .popup-combo-menu .popup-sub-menu StScrollBar { + padding: 4px; } + .menu .popup-sub-menu StScrollBar StBin#trough, .menu .popup-sub-menu StScrollBar StBin#vhandle, + .popup-menu .popup-sub-menu StScrollBar StBin#trough, + .popup-menu .popup-sub-menu StScrollBar StBin#vhandle, + .popup-combo-menu .popup-sub-menu StScrollBar StBin#trough, + .popup-combo-menu .popup-sub-menu StScrollBar StBin#vhandle { + border-width: 0; } + .menu .popup-menu-content, + .popup-menu .popup-menu-content, + .popup-combo-menu .popup-menu-content { + padding: 1em 0em 1em 0em; } + .menu .popup-menu-item, + .popup-menu .popup-menu-item, + .popup-combo-menu .popup-menu-item { + padding: .4em 1.75em; + spacing: 1em; } + .menu .popup-menu-item:active, + .popup-menu .popup-menu-item:active, + .popup-combo-menu .popup-menu-item:active { + color: #fefefe; + background-color: transparent; + border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; } + .menu .popup-menu-item:insensitive, + .popup-menu .popup-menu-item:insensitive, + .popup-combo-menu .popup-menu-item:insensitive { + color: rgba(152, 171, 178, 0.5); + background: none; } + .menu .popup-inactive-menu-item, + .popup-menu .popup-inactive-menu-item, + .popup-combo-menu .popup-inactive-menu-item { + color: #98abb2; } + .menu .popup-inactive-menu-item:insensitive, + .popup-menu .popup-inactive-menu-item:insensitive, + .popup-combo-menu .popup-inactive-menu-item:insensitive { + color: rgba(152, 171, 178, 0.45); } + .menu .popup-menu-item:active .popup-inactive-menu-item, + .popup-menu .popup-menu-item:active .popup-inactive-menu-item, + .popup-combo-menu .popup-menu-item:active .popup-inactive-menu-item { + color: #fefefe; } + .menu-icon, + .popup-menu-icon { + icon-size: 16px; } + +.popup-menu-boxpointer { + -arrow-border-radius: 3px; + -arrow-background-color: rgba(0, 0, 0, 0); + -arrow-border-width: 1px; + -arrow-border-color: rgba(0, 0, 0, 0); + -arrow-base: 0; + -arrow-rise: 0; } + +.popup-combo-menu { + padding: 10px 1px; } + +.popup-combobox-item { + spacing: 1em; } + +.popup-separator-menu-item { + -gradient-height: 2px; + -gradient-start: transparent; + -gradient-end: transparent; + -margin-horizontal: 1.5em; + height: 1em; } + +.popup-alternating-menu-item:alternate { + font-weight: normal; } + +.popup-device-menu-item { + spacing: .5em; } + +.popup-subtitle-menu-item { + font-weight: normal; } + +.nm-menu-item-icons { + spacing: .5em; } + +#panel { + font-size: 10pt; + height: 28px; + width: 32px; + font-weight: 700; + background-color: #0e1018; + color: #98abb2; } + #panel:highlight { + border-image: none; + background-color: rgba(252, 65, 56, 0.5); } + #panelLeft { + spacing: 4px; } + #panelLeft:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(255, 0, 0, 0.05); + background-gradient-end: rgba(255, 0, 0, 0.2); } + #panelLeft:ltr { + padding-right: 4px; } + #panelLeft:rtl { + padding-left: 4px; } + #panelLeft.vertical { + padding: 0; } + #panelLeft.vertical:ltr { + padding-right: 0px; } + #panelLeft.vertical:rtl { + padding-left: 0px; } + #panelRight:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(0, 0, 255, 0.05); + background-gradient-end: rgba(0, 0, 255, 0.2); } + #panelRight:ltr { + padding-left: 4px; + spacing: 0px; } + #panelRight:rtl { + padding-right: 4px; + spacing: 0px; } + #panelRight.vertical { + padding: 0; } + #panelRight.vertical:ltr { + padding-right: 0px; } + #panelRight.vertical:rtl { + padding-left: 0px; } + #panelCenter { + spacing: 4px; } + #panelCenter:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(0, 255, 0, 0.05); + background-gradient-end: rgba(0, 255, 0, 0.2); } + +.panel-top, .panel-bottom, .panel-left, .panel-right { + color: #98abb2; + font-size: 1em; + padding: 0px; } + +.panel-dummy { + background-color: rgba(252, 65, 56, 0.5); } + .panel-dummy:entered { + background-color: rgba(252, 65, 56, 0.6); } + +.panel-status-button { + border-width: 0; + -natural-hpadding: 3px; + -minimum-hpadding: 3px; + font-weight: bold; + color: white; + height: 22px; } + +.panel-button { + -natural-hpadding: 6px; + -minimum-hpadding: 2px; + font-weight: bold; + color: green; + transition-duration: 100; } + +.system-status-icon { + icon-size: 16px; + padding: 0 1px; } + +#overview { + spacing: 12px; } + +.window-caption { + background-color: #0e1018; + border: 1px solid #0e1018; + color: #BAC3CF; + spacing: 25px; + border-radius: 2px; + font-size: 9pt; + padding: 5px 8px; + -cinnamon-caption-spacing: 4px; } + .window-caption#selected { + background-color: #c50ed2; + color: #fefefe; + border: 1px solid #c50ed2; + spacing: 25px; } + +.expo-workspaces-name-entry, +.expo-workspaces-name-entry#selected { + height: 15px; + border-radius: 2px; + font-size: 9pt; + padding: 5px 8px; + -cinnamon-caption-spacing: 4px; + color: #BAC3CF; + background-color: rgba(57, 64, 94, 0.4); + border: 1px solid rgba(0, 0, 0, 0.4); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + .expo-workspaces-name-entry:focus, + .expo-workspaces-name-entry#selected:focus { + border: 1px solid #c50ed2; + background-color: #c50ed2; + color: #fefefe; + font-style: italic; + transition-duration: 300; + selection-background-color: #fefefe; + selected-color: #c50ed2; } + +.expo-workspace-thumbnail-frame { + border: 4px solid rgba(255, 255, 255, 0); + background-color: rgba(255, 255, 255, 0); + border-radius: 2px; } + .expo-workspace-thumbnail-frame#active { + border: 4px solid #c50ed2; + background-color: black; + border-radius: 2px; } + +.expo-background { + background-color: #0e1018; } + +.workspace-thumbnails { + spacing: 26px; } + .workspace-thumbnails-background, .workspace-thumbnails-background:rtl { + padding: 8px; } + +.workspace-add-button { + background-image: url("common-assets/misc/add-workspace.svg"); + height: 200px; + width: 35px; + transition-duration: 100; } + .workspace-add-button:hover { + background-image: url("common-assets/misc/add-workspace-hover.svg"); + transition-duration: 100; } + .workspace-add-button:active { + background-image: url("common-assets/misc/add-workspace-active.svg"); + transition-duration: 100; } + +.workspace-overview-background-shade { + background-color: rgba(0, 0, 0, 0.5); } + +.workspace-close-button, +.window-close { + background-image: url("common-assets/misc/close.svg"); + background-size: 26px; + height: 26px; + width: 26px; + -cinnamon-close-overlap: 10px; } + .workspace-close-button:hover, + .window-close:hover { + background-image: url("common-assets/misc/close-hover.svg"); + background-size: 26px; + height: 26px; + width: 26px; } + .workspace-close-button:active, + .window-close:active { + background-image: url("common-assets/misc/close-active.svg"); + background-size: 26px; + height: 26px; + width: 26px; } + +.window-close-area { + background-image: url("common-assets/misc/trash-icon.svg"); + height: 120px; + width: 400px; } + +.about-content { + width: 550px; + height: 250px; + spacing: 8px; + padding-bottom: 10px; } + +.about-title { + font-size: 2em; + font-weight: bold; } + +.about-uuid { + font-size: 10px; + color: #888; } + +.about-icon { + padding-right: 20px; + padding-bottom: 14px; } + +.about-scrollBox { + border: 1px solid #050508; + border-radius: 2px; + background-color: #181b28; + padding: 4px; + padding-right: 0; + border-radius: 0; } + .about-scrollBox-innerBox { + padding: 1.2em; + spacing: 1.2em; } + +.about-description { + padding-top: 4px; + padding-bottom: 16px; } + +.about-version { + padding-left: 7px; + font-size: 10px; + color: #888; } + +.calendar { + padding: .4em 1.75em; + spacing-rows: 0px; + spacing-columns: 0px; } + +.calendar-month-label { + color: #98abb2; + font-weight: bold; + padding: 8px 0; } + +.calendar-change-month-back, +.calendar-change-month-forward { + width: 16px; + height: 16px; } + +.calendar-change-month-back { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + .calendar-change-month-back:focus, .calendar-change-month-back:hover { + background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } + .calendar-change-month-back:active { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + .calendar-change-month-back:rtl { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + .calendar-change-month-back:rtl:focus, .calendar-change-month-back:rtl:hover { + background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } + .calendar-change-month-back:rtl:active { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + +.calendar-change-month-forward { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + .calendar-change-month-forward:focus, .calendar-change-month-forward:hover { + background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } + .calendar-change-month-forward:active { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + .calendar-change-month-forward:rtl { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + .calendar-change-month-forward:rtl:focus, .calendar-change-month-forward:rtl:hover { + background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } + .calendar-change-month-forward:rtl:active { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + +.datemenu-date-label { + padding: .4em 1.75em; + font-weight: bold; + text-align: center; + color: #98abb2; + border-radius: 2px; } + +.calendar-day-base { + font-size: 80%; + text-align: center; + width: 25px; + height: 25px; + padding: 0.1em; + margin: 2px; + border-radius: 12.5px; } + +.calendar-day-heading { + color: rgba(152, 171, 178, 0.85); + margin-top: 1em; + font-size: 70%; } + +.calendar-day { + border-width: 0; + color: rgba(152, 171, 178, 0.8); } + +.calendar-day-top { + border-top-width: 0; } + +.calendar-day-left { + border-left-width: 0; } + +.calendar-nonwork-day { + color: #98abb2; + background-color: transparent; + font-weight: bold; } + +.calendar-today, +.calendar-today:active, +.calendar-today:focus, +.calendar-today:hover { + font-weight: bold; + color: #fefefe; + background-color: #c50ed2; + border-width: 0; } + +.calendar-other-month-day { + color: rgba(152, 171, 178, 0.3); + opacity: 1; } + +.calendar-week-number { + color: rgba(152, 171, 178, 0.7); + font-size: 80%; } + +#notification { + border-radius: 3px; + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + padding: 13px; + spacing-rows: 10px; + spacing-columns: 10px; + margin-from-right-edge-of-screen: 20px; + width: 34em; + color: #BAC3CF; } + .menu #notification, + .popup-menu #notification { + border-image: url("dark-assets/misc/message.svg") 9 9 9 9; } + .menu #notification, .menu #notification.multi-line-notification, + .popup-menu #notification, + .popup-menu #notification.multi-line-notification { + color: #98abb2; } + .menu #notification .notification-button, .menu #notification .notification-icon-button, + .popup-menu #notification .notification-button, + .popup-menu #notification .notification-icon-button { + padding: 5px; } + #notification.multi-line-notification { + padding-bottom: 13px; + color: #BAC3CF; } + #notification-scrollview { + max-height: 10em; } + #notification-scrollview > .top-shadow, #notification-scrollview > .bottom-shadow { + height: 1em; } + #notification-scrollview:ltr > StScrollBar { + padding-left: 6px; } + #notification-scrollview:rtl > StScrollBar { + padding-right: 6px; } + #notification-body { + spacing: 5px; } + #notification-actions { + spacing: 10px; } + +.notification-with-image { + min-height: 159px; + color: #BAC3CF; } + +.notification-button, .notification-icon-button { + padding: 5px; } + +.notification-icon-button > StIcon { + icon-size: 36px; } + +#altTabPopup { + padding: 8px; + spacing: 16px; } + +.switcher-list { + color: #BAC3CF; + background: none; + border: none; + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + border-radius: 3px; + padding: 20px; } + .switcher-list > StBoxLayout { + padding: 4px; } + .switcher-list-item-container { + spacing: 8px; } + .switcher-list .item-box { + padding: 8px; + border-radius: 2px; } + .switcher-list .item-box:outlined { + padding: 8px; + border: 1px solid #c50ed2; } + .switcher-list .item-box:selected { + color: #fefefe; + background-color: #c50ed2; + border: 0px solid #c50ed2; } + .switcher-list .thumbnail { + width: 256px; } + .switcher-list .thumbnail-box { + padding: 2px; + spacing: 4px; } + .switcher-list .separator { + width: 1px; + background: rgba(255, 255, 255, 0.2); } + +.switcher-arrow { + border-color: rgba(0, 0, 0, 0); + color: #BAC3CF; } + .switcher-arrow:highlighted { + border-color: rgba(0, 0, 0, 0); + color: #98abb2; } + +.thumbnail-scroll-gradient-left { + background-color: rgba(0, 0, 0, 0); + border-radius: 24px; + border-radius-topright: 0px; + border-radius-bottomright: 0px; + width: 60px; } + +.thumbnail-scroll-gradient-right { + background-color: rgba(0, 0, 0, 0); + border-radius: 24px; + border-radius-topleft: 0px; + border-radius-bottomleft: 0px; + width: 60px; } + +.ripple-box { + width: 104px; + height: 104px; + background-image: url("common-assets/misc/corner-ripple.svg"); + background-size: contain; } + +.lightbox { + background-color: rgba(0, 0, 0, 0.4); } + +.flashspot { + background-color: white; } + +.modal-dialog { + color: #98abb2; + background-color: rgba(24, 27, 40, 0); + border: none; + border-image: url("dark-assets/misc/modal.svg") 9 9 9 67; + padding: 0 5px 6px 5px; } + .modal-dialog > StBoxLayout:first-child { + padding: 20px 10px 10px 10px; } + .modal-dialog-button-box { + spacing: 0; + margin: 0px; + padding: 14px 10px; + background: none; + border: none; + border-image: url("dark-assets/misc/button-box.svg") 9 9 9 9; } + .modal-dialog-button-box .modal-dialog-button { + padding-top: 0; + padding-bottom: 0; + height: 30px; } + +.run-dialog { + padding: 0px 15px 10px 15px; + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; } + .run-dialog > * { + padding: 0; } + .run-dialog-label { + font-size: 0; + font-weight: bold; + color: #BAC3CF; + padding-bottom: 0; } + .run-dialog-error-label { + color: #FC4138; } + .run-dialog-error-box { + padding-top: 15px; + spacing: 5px; } + .run-dialog-completion-box { + padding-left: 15px; + font-size: 10px; } + .run-dialog-entry { + width: 21em; + padding: 7px; + border-radius: 3px; + caret-color: #BAC3CF; + selected-color: #fefefe; + selection-background-color: #c50ed2; + color: #BAC3CF; + background-color: rgba(57, 64, 94, 0.4); + border: 1px solid rgba(0, 0, 0, 0.4); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + .run-dialog-entry:focus { + color: #fefefe; + background-color: #c50ed2; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + .run-dialog .modal-dialog-button-box { + border: none; + box-shadow: none; + background: none; + background-gradient-direction: none; } + +/* CinnamonMountOperation Dialogs */ +.cinnamon-mount-operation-icon { + icon-size: 48px; } + +.mount-password-reask { + color: #F27835; } + +.show-processes-dialog, +.mount-question-dialog { + spacing: 24px; } + .show-processes-dialog-subject, + .mount-question-dialog-subject { + padding-top: 10px; + padding-left: 17px; + padding-bottom: 6px; } + .show-processes-dialog-subject:rtl, + .mount-question-dialog-subject:rtl { + padding-left: 0px; + padding-right: 17px; } + .show-processes-dialog-description, + .mount-question-dialog-description { + padding-left: 17px; + width: 28em; } + .show-processes-dialog-description:rtl, + .mount-question-dialog-description:rtl { + padding-right: 17px; } + +.show-processes-dialog-app-list { + max-height: 200px; + padding-top: 24px; + padding-left: 49px; + padding-right: 32px; } + .show-processes-dialog-app-list:rtl { + padding-right: 49px; + padding-left: 32px; } + .show-processes-dialog-app-list-item { + color: #ccc; } + .show-processes-dialog-app-list-item:hover { + color: white; } + .show-processes-dialog-app-list-item:ltr { + padding-right: 1em; } + .show-processes-dialog-app-list-item:rtl { + padding-left: 1em; } + .show-processes-dialog-app-list-item-icon:ltr { + padding-right: 17px; } + .show-processes-dialog-app-list-item-icon:rtl { + padding-left: 17px; } + .show-processes-dialog-app-list-item-name { + font-size: 1.1em; } + +.magnifier-zoom-region { + border: 2px solid maroon; } + .magnifier-zoom-region .full-screen { + border-width: 0px; } + +#keyboard { + background-color: #0e1018; + border-width: 0; + border-top-width: 1px; + border-color: rgba(0, 0, 0, 0.4); } + +.keyboard-layout { + spacing: 10px; + padding: 10px; } + +.keyboard-row { + spacing: 15px; } + +.keyboard-key { + min-height: 2em; + min-width: 2em; + font-size: 14pt; + font-weight: bold; + border-radius: 3px; + box-shadow: none; + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(57, 64, 94, 0.4); } + .keyboard-key:hover { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(70, 79, 117, 0.5); } + .keyboard-key:active, .keyboard-key:checked { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #fefefe; + border: 1px solid #c50ed2; + background-color: #c50ed2; } + .keyboard-key:grayed { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #42464f; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(57, 64, 94, 0.25); } + +.keyboard-subkeys { + color: #BAC3CF; + padding: 5px; + -arrow-border-radius: 2px; + -arrow-background-color: #0e1018; + -arrow-border-width: 1px; + -arrow-border-color: rgba(0, 0, 0, 0.4); + -arrow-base: 20px; + -arrow-rise: 10px; + -boxpointer-gap: 5px; } + +.menu-favorites-box { + margin: auto; + padding: 10px; + transition-duration: 300; + background-color: #181b28; + border: 1px solid #050508; } + +.menu-favorites-button { + padding: 10px; + border: 1px solid rgba(0, 0, 0, 0); } + +.menu-places-box { + margin: auto; + padding: 10px; + border: 0px solid red; } + +.menu-places-button { + padding: 10px; } + +.menu-categories-box { + padding: 10px 30px 10px 30px; } + +.menu-applications-inner-box, .menu-applications-outer-box { + padding: 10px 10px 0 10px; } + +.menu-application-button { + padding: 7px; + border: 1px solid rgba(0, 0, 0, 0); } + .menu-application-button:highlighted { + font-weight: bold; } + .menu-application-button-selected { + padding: 7px; } + .menu-application-button-selected:highlighted { + font-weight: bold; } + .menu-application-button-label:ltr { + padding-left: 5px; } + .menu-application-button-label:rtl { + padding-right: 5px; } + +.menu-category-button { + padding: 7px; + border: 1px solid rgba(0, 0, 0, 0); } + .menu-category-button-selected { + padding: 7px; } + .menu-category-button-hover { + background-color: red; + border-radius: 2px; } + .menu-category-button-greyed { + padding: 7px; + color: rgba(152, 171, 178, 0.45); + border: 1px solid rgba(0, 0, 0, 0); } + .menu-category-button-label:ltr { + padding-left: 5px; } + .menu-category-button-label:rtl { + padding-right: 5px; } + +.menu-selected-app-box { + padding-right: 30px; + padding-left: 28px; + text-align: right; + height: 30px; } + .menu-selected-app-box:rtl { + padding-top: 10px; + height: 30px; } + +.menu-selected-app-title { + font-weight: bold; } + +.menu-selected-app-description { + max-width: 150px; } + +.menu-search-box:ltr { + padding-left: 30px; } + +.menu-search-box-rtl { + padding-right: 30px; } + +#menu-search-entry { + width: 250px; + height: 15px; + font-weight: normal; + caret-color: #98abb2; } + +.menu-search-entry-icon { + icon-size: 1em; + color: #98abb2; } + +/* Context menu (at the moment only for favorites) */ +.info-osd { + text-align: center; + font-weight: bold; + spacing: 1em; + padding: 16px; + color: #98abb2; + border-image: url("common-assets/misc/osd.svg") 9 9 9 9; } + +.osd-window { + text-align: center; + font-weight: bold; + spacing: 1em; + padding: 20px; + margin: 32px; + min-width: 64px; + min-height: 64px; + color: #98abb2; + background: none; + border: none; + border-radius: 5px; + border-image: url("common-assets/misc/osd.svg") 9 9 9 9; } + .osd-window .osd-monitor-label { + font-size: 3em; } + .osd-window .level { + padding: 0; + height: 4px; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 2px; + color: #c50ed2; } + .osd-window .level-bar { + background-color: #c50ed2; } + +.window-list-box { + spacing: 0; } + .window-list-box .panel-top:ltr, + .panel-bottom .window-list-box:ltr { + padding: 0 0 0 8px; } + .window-list-box .panel-top:rtl, + .panel-bottom .window-list-box:rtl { + padding: 0 8px 0 0; } + .window-list-box.vertical { + padding: 6px 0 0 0; } + .window-list-box:highlight { + background-color: #c50ed2; } + +.window-list-item-box { + border: 0 none transparent; + border-image: none; + background-image: none; + background-color: #0e1018; + color: #BAC3CF; + box-shadow: none; + font-weight: 400; } + .window-list-item-box:hover { + color: #fefefe; } + .panel-top .window-list-item-box:hover { + box-shadow: inset 0 2px #c50ed2; } + .panel-bottom .window-list-item-box:hover { + box-shadow: inset 0 -2px #c50ed2; } + .panel-left .window-list-item-box:hover { + box-shadow: inset 2px 0 #c50ed2; } + .panel-right .window-list-item-box:hover { + box-shadow: inset -2px 0 #c50ed2; } + .window-list-item-box:active, .window-list-item-box:active:hover, .window-list-item-box:checked, .window-list-item-box:checked:hover, .window-list-item-box:focus, .window-list-item-box:focus:hover { + color: #fefefe; } + .panel-top .window-list-item-box:active, .panel-top .window-list-item-box:active:hover, .panel-top .window-list-item-box:checked, .panel-top .window-list-item-box:checked:hover, .panel-top .window-list-item-box:focus, .panel-top .window-list-item-box:focus:hover { + box-shadow: inset 0 2px #ed254e; } + .panel-bottom .window-list-item-box:active, .panel-bottom .window-list-item-box:active:hover, .panel-bottom .window-list-item-box:checked, .panel-bottom .window-list-item-box:checked:hover, .panel-bottom .window-list-item-box:focus, .panel-bottom .window-list-item-box:focus:hover { + box-shadow: inset 0 -2px #ed254e; } + .panel-left .window-list-item-box:active, .panel-left .window-list-item-box:active:hover, .panel-left .window-list-item-box:checked, .panel-left .window-list-item-box:checked:hover, .panel-left .window-list-item-box:focus, .panel-left .window-list-item-box:focus:hover { + box-shadow: inset 2px 0 #ed254e; } + .panel-right .window-list-item-box:active, .panel-right .window-list-item-box:active:hover, .panel-right .window-list-item-box:checked, .panel-right .window-list-item-box:checked:hover, .panel-right .window-list-item-box:focus, .panel-right .window-list-item-box:focus:hover { + box-shadow: inset -2px 0 #ed254e; } + .panel-top .window-list-item-box StIcon, + .panel-bottom .window-list-item-box StIcon, .panel-top + .window-list-item-box StBin, + .panel-bottom + .window-list-item-box StBin { + padding: 0 4px; } + .window-list-item-box.vertical StIcon, + .window-list-item-box.vertical StBin { + padding: 0; } + .window-list-item-box StLabel { + font-weight: 400; } + .panel-top .window-list-item-box StLabel:ltr, + .panel-bottom .window-list-item-box StLabel:ltr { + padding: 0 4px 0 0; } + .panel-top .window-list-item-box StLabel:rtl, + .panel-bottom .window-list-item-box StLabel:rtl { + padding: 0 0 0 4px; } + .window-list-item-box:progress, + .window-list-item-box .progress { + background-gradient-start: #c50ed2; + background-gradient-end: #c50ed2; } + +.window-list-item-demands-attention { + background-gradient-start: #c50ed2; + background-gradient-end: #c50ed2; + color: #fefefe; } + .panel-top .window-list-item-demands-attention { + box-shadow: inset 0 2px #c50ed2; } + .panel-bottom .window-list-item-demands-attention { + box-shadow: inset 0 -2px #c50ed2; } + .panel-left .window-list-item-demands-attention { + box-shadow: inset 2px 0 #c50ed2; } + .panel-right .window-list-item-demands-attention { + box-shadow: inset -2px 0 #c50ed2; } + +.window-list-preview { + padding: 12px; + spacing: 8px; + border: none; + border-image: url("assets/misc/osd.svg") 9 9 9 9; + border-radius: 2px; + color: #BAC3CF; + background: none; } + +.grouped-window-list-item-box { + border: 0 none transparent; + border-image: none; + background-image: none; + background-color: #0e1018; + color: #BAC3CF; + box-shadow: none; + font-weight: 400; } + .panel-top .grouped-window-list-item-box StIcon, + .panel-bottom .grouped-window-list-item-box StIcon, .panel-top + .grouped-window-list-item-box StBin, + .panel-bottom + .grouped-window-list-item-box StBin { + padding: 0 4px; } + .panel-top .grouped-window-list-item-box:active, .panel-top .grouped-window-list-item-box:checked { + box-shadow: inset 0 2px #485178; } + .panel-bottom .grouped-window-list-item-box:active, .panel-bottom .grouped-window-list-item-box:checked { + box-shadow: inset 0 -2px #485178; } + .panel-left .grouped-window-list-item-box:active, .panel-left .grouped-window-list-item-box:checked { + box-shadow: inset 2px 0 #485178; } + .panel-right .grouped-window-list-item-box:active, .panel-right .grouped-window-list-item-box:checked { + box-shadow: inset -2px 0 #485178; } + .panel-top .grouped-window-list-item-box:hover, .panel-top .grouped-window-list-item-box:active:hover, .panel-top .grouped-window-list-item-box:focus, .panel-top .grouped-window-list-item-box:active:focus, .panel-top .grouped-window-list-item-box:focus:hover, .panel-top .grouped-window-list-item-box:active:focus:hover { + box-shadow: inset 0 2px #c50ed2; } + .panel-bottom .grouped-window-list-item-box:hover, .panel-bottom .grouped-window-list-item-box:active:hover, .panel-bottom .grouped-window-list-item-box:focus, .panel-bottom .grouped-window-list-item-box:active:focus, .panel-bottom .grouped-window-list-item-box:focus:hover, .panel-bottom .grouped-window-list-item-box:active:focus:hover { + box-shadow: inset 0 -2px #c50ed2; } + .panel-left .grouped-window-list-item-box:hover, .panel-left .grouped-window-list-item-box:active:hover, .panel-left .grouped-window-list-item-box:focus, .panel-left .grouped-window-list-item-box:active:focus, .panel-left .grouped-window-list-item-box:focus:hover, .panel-left .grouped-window-list-item-box:active:focus:hover { + box-shadow: inset 2px 0 #c50ed2; } + .panel-right .grouped-window-list-item-box:hover, .panel-right .grouped-window-list-item-box:active:hover, .panel-right .grouped-window-list-item-box:focus, .panel-right .grouped-window-list-item-box:active:focus, .panel-right .grouped-window-list-item-box:focus:hover, .panel-right .grouped-window-list-item-box:active:focus:hover { + box-shadow: inset -2px 0 #c50ed2; } + .grouped-window-list-item-box:progress, + .grouped-window-list-item-box .progress { + background-gradient-start: #c50ed2; + background-gradient-end: #c50ed2; } + +.grouped-window-list-item-demands-attention { + background-gradient-start: #c50ed2; + background-gradient-end: #c50ed2; + color: #fefefe; } + .panel-top .grouped-window-list-item-demands-attention { + box-shadow: inset 0 2px #c50ed2; } + .panel-bottom .grouped-window-list-item-demands-attention { + box-shadow: inset 0 -2px #c50ed2; } + .panel-left .grouped-window-list-item-demands-attention { + box-shadow: inset 2px 0 #c50ed2; } + .panel-right .grouped-window-list-item-demands-attention { + box-shadow: inset -2px 0 #c50ed2; } + +.sound-button { + width: 22px; + height: 13px; + padding: 8px; } + .sound-button-container { + padding-right: 3px; + padding-left: 3px; } + .sound-button StIcon { + icon-size: 1.4em; } + +.sound-track-infos { + padding: 5px; } + +.sound-track-info { + padding-top: 2px; + padding-bottom: 2px; } + .sound-track-info StIcon { + icon-size: 16px; } + .sound-track-info StLabel { + padding-left: 5px; + padding-right: 5px; } + +.sound-track-box { + padding-left: 15px; + padding-right: 15px; + max-width: 220px; } + +.sound-seek-box { + padding-left: 15px; } + .sound-seek-box StLabel { + padding-top: 2px; } + .sound-seek-box StIcon { + icon-size: 16px; } + +.sound-seek-slider { + width: 140px; } + +.sound-volume-menu-item { + padding: .4em 1.75em; } + .sound-volume-menu-item StIcon { + icon-size: 1.14em; + padding-left: 8px; + padding-right: 8px; } + +.sound-playback-control { + padding: 5px 10px 10px 10px; } + +.sound-player { + padding: 0 4px; } + .sound-player > StBoxLayout:first-child { + padding: 5px 10px 12px 10px; + spacing: 0.5em; } + .sound-player > StBoxLayout:first-child StButton:small { + width: 16px; + height: 8px; + padding: 1px; } + .sound-player > StBoxLayout:first-child StButton:small StIcon { + icon-size: 12px; } + .sound-player-generic-coverart { + background: rgba(0, 0, 0, 0.2); } + .sound-player-overlay { + width: 290px; + height: 70px; + padding: 15px; + spacing: 0.5em; + background: rgba(5, 5, 8, 0.9); + border: 0px solid black; + border-bottom: 1px; + color: #BAC3CF; } + .sound-player-overlay StButton { + width: 22px; + height: 13px; + padding: 5px; + color: #BAC3CF; + border-radius: 2px; + border: 1px solid rgba(14, 16, 24, 0); } + .sound-player-overlay StButton StIcon { + icon-size: 16px; } + .sound-player-overlay StButton:hover { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(70, 79, 117, 0.5); } + .sound-player-overlay StButton:active { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #fefefe; + background-color: #c50ed2; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px #c50ed2; } + .sound-player-overlay StBoxLayout { + padding-top: 2px; } + .sound-player .slider { + height: 0.5em; + padding: 0; + border: none; + -slider-height: 0.5em; + -slider-background-color: #0e1018; + -slider-border-color: rgba(0, 0, 0, 0); + -slider-active-background-color: #c50ed2; + -slider-active-border-color: rgba(0, 0, 0, 0); + -slider-border-width: 0px; + -slider-handle-radius: 0px; } + +#workspaceSwitcher { + spacing: 0px; + 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; + color: #fefefe; + padding: 3px; + padding-top: 4px; + transition-duration: 300; } + .workspace-button:outlined, .workspace-button:outlined:hover { + color: #c50ed2; } + .workspace-button:hover { + color: rgba(197, 14, 210, 0.5); } + +/* Controls the style when using the "Visual representation" option */ +.workspace-graph { + padding: 3px; + spacing: 3px; } + +.workspace-graph .workspace { + border: 1px solid rgba(0, 0, 0, 0.4); + background-gradient-direction: none; + background-color: rgba(0, 0, 0, 0.2); } + +.workspace-graph .workspace:active { + border: 1px solid #c50ed2; + background-gradient-direction: none; } + +.workspace-graph .workspace .windows { + -active-window-background: #2b3148; + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: #2b3148; + -inactive-window-border: rgba(0, 0, 0, 0.8); } + +.workspace-graph .workspace:active .windows { + -active-window-background: #353b58; + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: #181b28; + -inactive-window-border: rgba(0, 0, 0, 0.8); } + +#panel-launchers-box { + padding-left: 7px; } + #panel-launchers-box.vertical { + padding: 2px 0; } + +.panel-launcher, +.launcher { + margin: 1px; + padding: 1px; + transition-duration: 200; } + .panel-launcher:hover, + .launcher:hover { + background-gradient-direction: none; + border: 0px solid #c50ed2; } + .panel-bottom .panel-launcher:hover, .panel-bottom + .launcher:hover { + border-bottom-width: 1px; } + .panel-top .panel-launcher:hover, .panel-top + .launcher:hover { + border-top-width: 1px; } + .panel-left .panel-launcher:hover, .panel-left + .launcher:hover { + border-left-width: 1px; + padding-left: 0; } + .panel-right .panel-launcher:hover, .panel-right + .launcher:hover { + border-right-width: 1px; + padding-right: 0; } + +#overview-corner { + background-image: url("common-assets/misc/overview.png"); } + #overview-corner:hover { + background-image: url("common-assets/misc/overview-hover.png"); } + +.applet-separator { + padding: 1px 4px; } + +.applet-separator-line { + width: 1px; + background: rgba(255, 255, 255, 0.12); } + +.applet-box { + padding-left: 3px; + padding-right: 3px; + color: #98abb2; + text-shadow: none; + transition-duration: 100; } + .applet-box.vertical { + padding: 3px 0; } + .applet-box:hover { + color: #fefefe; + background-color: #c50ed2; } + .applet-box:highlight { + background-image: none; + border-image: none; + background-color: rgba(252, 65, 56, 0.5); } + +.applet-label { + font-weight: bold; + color: #98abb2; } + .applet-label:hover, .applet-box:hover .applet-label { + color: #fefefe; + text-shadow: none; } + +.applet-icon { + color: #98abb2; + icon-size: 22px; } + .applet-icon:hover, .applet-box:hover > .applet-icon { + color: #fefefe; + text-shadow: none; } + +.user-icon { + width: 32px; + height: 32px; + background-color: transparent; + border: none; + border-radius: 0; } + +.user-label { + color: #98abb2; + font-size: 1em; + font-weight: bold; + margin: 0px; } + +.desklet { + color: #BAC3CF; } + .desklet:highlight { + background-color: rgba(252, 65, 56, 0.5); } + .desklet-with-borders { + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + color: #BAC3CF; + padding: 12px; + padding-bottom: 16px; } + .desklet-with-borders:highlight { + background-color: rgba(252, 65, 56, 0.5); } + .desklet-with-borders-and-header { + border-image: url("common-assets/misc/desklet.svg") 9 9 9 9; + color: #BAC3CF; + border-radius: 0; + border-radius-topleft: 0; + border-radius-topright: 0; + padding: 12px; + padding-bottom: 17px; } + .desklet-with-borders-and-header:highlight { + background-color: rgba(252, 65, 56, 0.5); } + .desklet-header { + border-image: url("common-assets/misc/desklet-header.svg") 9 9 9 9; + color: #BAC3CF; + font-size: 1em; + padding: 12px; + padding-bottom: 6px; } + .desklet-drag-placeholder { + border: 2px solid #c50ed2; + background-color: rgba(197, 14, 210, 0.3); } + +.photoframe-box { + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + color: #BAC3CF; + padding: 12px; + padding-bottom: 16px; } + +/*FIXME*/ +.workspace-osd { + /*color: red;*/ + text-shadow: black 5px 5px 5px; + font-weight: bold; + font-size: 48pt; } + +.notification-applet-padding { + padding: .5em 1em; } + +.notification-applet-container { + max-height: 100px; } + +.tile-preview, .tile-preview.snap, +.tile-hud, .tile-hud.snap { + background-color: rgba(197, 14, 210, 0.3); + border: 1px solid #c50ed2; } + +.xkcd-box { + padding: 6px; + border: 0px; + background-color: rgba(0, 0, 0, 0); + border-radius: 0px; } diff --git a/cinnamon/cinnamon-dark.scss b/cinnamon/cinnamon-dark.scss new file mode 100644 index 0000000..8898486 --- /dev/null +++ b/cinnamon/cinnamon-dark.scss @@ -0,0 +1,8 @@ +$variant: 'dark'; +$transparency: 'true'; +$darker: 'false'; + +@import "_colors"; //use gtk colors +@import "_drawing"; +@import "_common"; + diff --git a/cinnamon/cinnamon.css b/cinnamon/cinnamon.css new file mode 100644 index 0000000..2e539fb --- /dev/null +++ b/cinnamon/cinnamon.css @@ -0,0 +1,1517 @@ +stage { + font-family: Futura Bk bt, sans, Sans-Serif; + font-size: 9pt; + color: #98abb2; } + +.label-shadow { + color: rgba(0, 0, 0, 0); } + +.menu #notification .notification-button, .menu #notification .notification-icon-button, +.popup-menu #notification .notification-button, +.popup-menu #notification .notification-icon-button, .sound-button { + min-height: 20px; + padding: 5px 32px; + transition-duration: 0; + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #98abb2; + background-color: #1c1f2e; + border: 1px solid #050508; + box-shadow: inset 0 2px 4px rgba(28, 31, 46, 0.05); } + .menu #notification .notification-button, .menu #notification .notification-icon-button, + .popup-menu #notification .notification-button, + .popup-menu #notification .notification-icon-button, .sound-button, .menu #notification .notification-button:focus, .menu #notification .notification-icon-button:focus, + .popup-menu #notification .notification-button:focus, + .popup-menu #notification .notification-icon-button:focus, .sound-button:focus, .menu #notification .notification-button:hover, .menu #notification .notification-icon-button:hover, + .popup-menu #notification .notification-button:hover, + .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover, .menu #notification .notification-button:hover:focus, .menu #notification .notification-icon-button:hover:focus, + .popup-menu #notification .notification-button:hover:focus, + .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus, .menu #notification .notification-button:active, .menu #notification .notification-icon-button:active, + .popup-menu #notification .notification-button:active, + .popup-menu #notification .notification-icon-button:active, .sound-button:active, .menu #notification .notification-button:active:focus, .menu #notification .notification-icon-button:active:focus, + .popup-menu #notification .notification-button:active:focus, + .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus, .menu #notification .notification-button:insensitive, .menu #notification .notification-icon-button:insensitive, + .popup-menu #notification .notification-button:insensitive, + .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { + border-radius: 2px; } + .menu #notification .notification-button:focus, .menu #notification .notification-icon-button:focus, + .popup-menu #notification .notification-button:focus, + .popup-menu #notification .notification-icon-button:focus, .sound-button:focus { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #98abb2; + background-color: #1c1f2e; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px rgba(28, 31, 46, 0.05); } + .menu #notification .notification-button:hover, .menu #notification .notification-icon-button:hover, + .popup-menu #notification .notification-button:hover, + .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #98abb2; + background-color: #252a3e; + border: 1px solid #050508; + box-shadow: inset 0 2px 4px rgba(37, 42, 62, 0.05); } + .menu #notification .notification-button:hover:focus, .menu #notification .notification-icon-button:hover:focus, + .popup-menu #notification .notification-button:hover:focus, + .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #98abb2; + background-color: #1c1f2e; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px rgba(28, 31, 46, 0.05); } + .menu #notification .notification-button:active, .menu #notification .notification-icon-button:active, + .popup-menu #notification .notification-button:active, + .popup-menu #notification .notification-icon-button:active, .sound-button:active, .menu #notification .notification-button:active:focus, .menu #notification .notification-icon-button:active:focus, + .popup-menu #notification .notification-button:active:focus, + .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #fefefe; + background-color: #c50ed2; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px #c50ed2; } + .menu #notification .notification-button:insensitive, .menu #notification .notification-icon-button:insensitive, + .popup-menu #notification .notification-button:insensitive, + .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: rgba(152, 171, 178, 0.45); + border: 1px solid rgba(5, 5, 8, 0.55); + background-color: rgba(28, 31, 46, 0.55); + box-shadow: inset 0 2px 4px rgba(28, 31, 46, 0.05); } + +.notification-button, .notification-icon-button, .modal-dialog-button-box .modal-dialog-button { + min-height: 20px; + padding: 5px 32px; + transition-duration: 0; + border-radius: 2px; + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(57, 64, 94, 0.4); } + .notification-button:hover, .notification-icon-button:hover, .modal-dialog-button-box .modal-dialog-button:hover { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(70, 79, 117, 0.5); } + .notification-button:focus, .notification-icon-button:focus, .modal-dialog-button-box .modal-dialog-button:focus { + color: #c50ed2; } + .notification-button:active, .notification-icon-button:active, .modal-dialog-button-box .modal-dialog-button:active { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #fefefe; + border: 1px solid #c50ed2; + background-color: #c50ed2; } + .notification-button:insensitive, .notification-icon-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #42464f; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(57, 64, 94, 0.25); } + +.menu #notification StEntry, +.popup-menu #notification StEntry, #menu-search-entry { + padding: 7px; + caret-size: 1px; + selection-background-color: #c50ed2; + selected-color: #fefefe; + transition-duration: 300ms; + border-radius: 3px; + color: #98abb2; + background-color: #181b28; + border: 1px solid #050508; + box-shadow: inset 0 2px 4px rgba(24, 27, 40, 0.05); } + .menu #notification StEntry:focus, + .popup-menu #notification StEntry:focus, #menu-search-entry:focus, .menu #notification StEntry:hover, + .popup-menu #notification StEntry:hover, #menu-search-entry:hover { + color: #98abb2; + background-color: #181b28; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px rgba(24, 27, 40, 0.05); } + .menu #notification StEntry:insensitive, + .popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive { + color: rgba(152, 171, 178, 0.45); + background-color: #181b28; + border-color: 1px solid #0d0f16; + box-shadow: inset 0 2px 4px rgba(24, 27, 40, 0.05); } + .menu #notification StEntry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning { + icon-size: 16px; + warning-color: #F27835; + padding: 0 4px; } + +.notification StEntry { + padding: 7px; + caret-size: 1px; + caret-color: #BAC3CF; + selection-background-color: #c50ed2; + selected-color: #fefefe; + transition-duration: 300ms; + border-radius: 3px; + color: #BAC3CF; + background-color: rgba(57, 64, 94, 0.4); + border: 1px solid rgba(0, 0, 0, 0.4); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + .notification StEntry:focus { + color: #fefefe; + background-color: #c50ed2; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + .notification StEntry:insensitive { + color: rgba(186, 195, 207, 0.55); + background-color: rgba(57, 64, 94, 0.25); + border: 1px solid rgba(0, 0, 0, 0.4); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + +StScrollView.vfade { + -st-vfade-offset: 0px; } + +StScrollView.hfade { + -st-hfade-offset: 0px; } + +StScrollBar { + padding: 8px; } + StScrollView StScrollBar { + min-width: 5px; + min-height: 5px; } + StScrollBar StBin#trough { + background-color: rgba(24, 27, 40, 0.1); + border-radius: 8px; } + StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { + border-radius: 2px; + background-color: #4b555f; + border: 0px solid; + margin: 0px; } + StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { + background-color: #3e4651; } + StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { + background-color: #c50ed2; } + +.separator { + -gradient-height: 1px; + -gradient-start: rgba(0, 0, 0, 0); + -gradient-end: rgba(0, 0, 0, 0); + -margin-horizontal: 1.5em; + height: 1em; } + +.popup-slider-menu-item, +.slider { + -slider-height: 4px; + -slider-background-color: #050508; + -slider-border-color: rgba(0, 0, 0, 0); + -slider-active-background-color: #c50ed2; + -slider-active-border-color: rgba(0, 0, 0, 0); + -slider-border-width: 0; + -slider-handle-radius: 4px; + height: 18px; + min-width: 15em; + border: 0 solid transparent; + border-right-width: 1px; + border-left-width: 5px; + color: transparent; } + .popup-menu-item:active .popup-slider-menu-item, .popup-menu-item:active + .slider { + -slider-background-color: rgba(0, 0, 0, 0.2); + -slider-active-background-color: #fefefe; } + +.check-box CinnamonGenericContainer { + spacing: .2em; + min-height: 30px; + padding-top: 2px; } + +.check-box StLabel { + font-weight: normal; } + +.check-box StBin { + width: 16px; + height: 16px; + background-image: url("dark-assets/checkbox/checkbox-unchecked.svg"); } + +.check-box:focus StBin { + background-image: url("dark-assets/checkbox/checkbox-unchecked-focused.svg"); } + +.check-box:checked StBin { + background-image: url("dark-assets/checkbox/checkbox-checked.svg"); } + +.check-box:focus:checked StBin { + background-image: url("dark-assets/checkbox/checkbox-checked-focused.svg"); } + +.radiobutton CinnamonGenericContainer { + spacing: .2em; + height: 26px; + padding-top: 2px; } + +.radiobutton StLabel { + padding-top: 4px; + font-size: 0.9em; + box-shadow: none; } + +.radiobutton StBin { + width: 16px; + height: 16px; + background-image: url("dark-assets/checkbox/checkbox-unchecked.svg"); } + +.radiobutton:focus StBin { + background-image: url("dark-assets/checkbox/checkbox-unchecked-focused.svg"); } + +.radiobutton:checked StBin { + background-image: url("dark-assets/checkbox/checkbox-checked.svg"); } + +.radiobutton:focus:checked StBin { + background-image: url("dark-assets/checkbox/checkbox-checked-focused.svg"); } + +.toggle-switch { + width: 50px; + height: 20px; + background-size: contain; + background-image: url("dark-assets/switch/switch-off.svg"); } + .toggle-switch:checked { + background-image: url("dark-assets/switch/switch-on.svg"); } + .popup-menu-item:active .toggle-switch { + background-image: url("common-assets/switch/switch-off-selected.svg"); } + .popup-menu-item:active .toggle-switch:checked { + background-image: url("common-assets/switch/switch-on-selected.svg"); } + +.cinnamon-link { + color: #7cb7ff; + text-decoration: underline; } + .cinnamon-link:hover { + color: #afd3ff; } + +#Tooltip { + border-radius: 3px; + padding: 5px 12px; + background-color: #0e1018; + color: #BAC3CF; + font-size: 1em; + font-weight: normal; + text-align: center; } + +.menu, +.popup-menu, +.popup-combo-menu { + color: #98abb2; + background-color: #0e1018; + border-radius: 5px; + border: 1px solid #050508; } + .menu-arrow, + .popup-menu-arrow { + icon-size: 16px; } + .menu .popup-sub-menu, + .popup-menu .popup-sub-menu, + .popup-combo-menu .popup-sub-menu { + background-gradient-direction: none; + box-shadow: none; + background-color: #0b0c12; } + .menu .popup-sub-menu .popup-menu-item:ltr, + .popup-menu .popup-sub-menu .popup-menu-item:ltr, + .popup-combo-menu .popup-sub-menu .popup-menu-item:ltr { + padding-right: 0em; } + .menu .popup-sub-menu .popup-menu-item:rtl, + .popup-menu .popup-sub-menu .popup-menu-item:rtl, + .popup-combo-menu .popup-sub-menu .popup-menu-item:rtl { + padding-left: 0em; } + .menu .popup-sub-menu StScrollBar, + .popup-menu .popup-sub-menu StScrollBar, + .popup-combo-menu .popup-sub-menu StScrollBar { + padding: 4px; } + .menu .popup-sub-menu StScrollBar StBin#trough, .menu .popup-sub-menu StScrollBar StBin#vhandle, + .popup-menu .popup-sub-menu StScrollBar StBin#trough, + .popup-menu .popup-sub-menu StScrollBar StBin#vhandle, + .popup-combo-menu .popup-sub-menu StScrollBar StBin#trough, + .popup-combo-menu .popup-sub-menu StScrollBar StBin#vhandle { + border-width: 0; } + .menu .popup-menu-content, + .popup-menu .popup-menu-content, + .popup-combo-menu .popup-menu-content { + padding: 1em 0em 1em 0em; } + .menu .popup-menu-item, + .popup-menu .popup-menu-item, + .popup-combo-menu .popup-menu-item { + padding: .4em 1.75em; + spacing: 1em; } + .menu .popup-menu-item:active, + .popup-menu .popup-menu-item:active, + .popup-combo-menu .popup-menu-item:active { + color: #fefefe; + background-color: transparent; + border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1; } + .menu .popup-menu-item:insensitive, + .popup-menu .popup-menu-item:insensitive, + .popup-combo-menu .popup-menu-item:insensitive { + color: rgba(152, 171, 178, 0.5); + background: none; } + .menu .popup-inactive-menu-item, + .popup-menu .popup-inactive-menu-item, + .popup-combo-menu .popup-inactive-menu-item { + color: #98abb2; } + .menu .popup-inactive-menu-item:insensitive, + .popup-menu .popup-inactive-menu-item:insensitive, + .popup-combo-menu .popup-inactive-menu-item:insensitive { + color: rgba(152, 171, 178, 0.45); } + .menu .popup-menu-item:active .popup-inactive-menu-item, + .popup-menu .popup-menu-item:active .popup-inactive-menu-item, + .popup-combo-menu .popup-menu-item:active .popup-inactive-menu-item { + color: #fefefe; } + .menu-icon, + .popup-menu-icon { + icon-size: 16px; } + +.popup-menu-boxpointer { + -arrow-border-radius: 3px; + -arrow-background-color: rgba(0, 0, 0, 0); + -arrow-border-width: 1px; + -arrow-border-color: rgba(0, 0, 0, 0); + -arrow-base: 0; + -arrow-rise: 0; } + +.popup-combo-menu { + padding: 10px 1px; } + +.popup-combobox-item { + spacing: 1em; } + +.popup-separator-menu-item { + -gradient-height: 2px; + -gradient-start: transparent; + -gradient-end: transparent; + -margin-horizontal: 1.5em; + height: 1em; } + +.popup-alternating-menu-item:alternate { + font-weight: normal; } + +.popup-device-menu-item { + spacing: .5em; } + +.popup-subtitle-menu-item { + font-weight: normal; } + +.nm-menu-item-icons { + spacing: .5em; } + +#panel { + font-size: 10pt; + height: 28px; + width: 32px; + font-weight: 700; + background-color: #0e1018; + color: #98abb2; } + #panel:highlight { + border-image: none; + background-color: rgba(252, 65, 56, 0.5); } + #panelLeft { + spacing: 4px; } + #panelLeft:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(255, 0, 0, 0.05); + background-gradient-end: rgba(255, 0, 0, 0.2); } + #panelLeft:ltr { + padding-right: 4px; } + #panelLeft:rtl { + padding-left: 4px; } + #panelLeft.vertical { + padding: 0; } + #panelLeft.vertical:ltr { + padding-right: 0px; } + #panelLeft.vertical:rtl { + padding-left: 0px; } + #panelRight:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(0, 0, 255, 0.05); + background-gradient-end: rgba(0, 0, 255, 0.2); } + #panelRight:ltr { + padding-left: 4px; + spacing: 0px; } + #panelRight:rtl { + padding-right: 4px; + spacing: 0px; } + #panelRight.vertical { + padding: 0; } + #panelRight.vertical:ltr { + padding-right: 0px; } + #panelRight.vertical:rtl { + padding-left: 0px; } + #panelCenter { + spacing: 4px; } + #panelCenter:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(0, 255, 0, 0.05); + background-gradient-end: rgba(0, 255, 0, 0.2); } + +.panel-top, .panel-bottom, .panel-left, .panel-right { + color: #98abb2; + font-size: 1em; + padding: 0px; } + +.panel-dummy { + background-color: rgba(252, 65, 56, 0.5); } + .panel-dummy:entered { + background-color: rgba(252, 65, 56, 0.6); } + +.panel-status-button { + border-width: 0; + -natural-hpadding: 3px; + -minimum-hpadding: 3px; + font-weight: bold; + color: white; + height: 22px; } + +.panel-button { + -natural-hpadding: 6px; + -minimum-hpadding: 2px; + font-weight: bold; + color: green; + transition-duration: 100; } + +.system-status-icon { + icon-size: 16px; + padding: 0 1px; } + +#overview { + spacing: 12px; } + +.window-caption { + background-color: #0e1018; + border: 1px solid #0e1018; + color: #BAC3CF; + spacing: 25px; + border-radius: 2px; + font-size: 9pt; + padding: 5px 8px; + -cinnamon-caption-spacing: 4px; } + .window-caption#selected { + background-color: #c50ed2; + color: #fefefe; + border: 1px solid #c50ed2; + spacing: 25px; } + +.expo-workspaces-name-entry, +.expo-workspaces-name-entry#selected { + height: 15px; + border-radius: 2px; + font-size: 9pt; + padding: 5px 8px; + -cinnamon-caption-spacing: 4px; + color: #BAC3CF; + background-color: rgba(57, 64, 94, 0.4); + border: 1px solid rgba(0, 0, 0, 0.4); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + .expo-workspaces-name-entry:focus, + .expo-workspaces-name-entry#selected:focus { + border: 1px solid #c50ed2; + background-color: #c50ed2; + color: #fefefe; + font-style: italic; + transition-duration: 300; + selection-background-color: #fefefe; + selected-color: #c50ed2; } + +.expo-workspace-thumbnail-frame { + border: 4px solid rgba(255, 255, 255, 0); + background-color: rgba(255, 255, 255, 0); + border-radius: 2px; } + .expo-workspace-thumbnail-frame#active { + border: 4px solid #c50ed2; + background-color: black; + border-radius: 2px; } + +.expo-background { + background-color: #0e1018; } + +.workspace-thumbnails { + spacing: 26px; } + .workspace-thumbnails-background, .workspace-thumbnails-background:rtl { + padding: 8px; } + +.workspace-add-button { + background-image: url("common-assets/misc/add-workspace.svg"); + height: 200px; + width: 35px; + transition-duration: 100; } + .workspace-add-button:hover { + background-image: url("common-assets/misc/add-workspace-hover.svg"); + transition-duration: 100; } + .workspace-add-button:active { + background-image: url("common-assets/misc/add-workspace-active.svg"); + transition-duration: 100; } + +.workspace-overview-background-shade { + background-color: rgba(0, 0, 0, 0.5); } + +.workspace-close-button, +.window-close { + background-image: url("common-assets/misc/close.svg"); + background-size: 26px; + height: 26px; + width: 26px; + -cinnamon-close-overlap: 10px; } + .workspace-close-button:hover, + .window-close:hover { + background-image: url("common-assets/misc/close-hover.svg"); + background-size: 26px; + height: 26px; + width: 26px; } + .workspace-close-button:active, + .window-close:active { + background-image: url("common-assets/misc/close-active.svg"); + background-size: 26px; + height: 26px; + width: 26px; } + +.window-close-area { + background-image: url("common-assets/misc/trash-icon.svg"); + height: 120px; + width: 400px; } + +.about-content { + width: 550px; + height: 250px; + spacing: 8px; + padding-bottom: 10px; } + +.about-title { + font-size: 2em; + font-weight: bold; } + +.about-uuid { + font-size: 10px; + color: #888; } + +.about-icon { + padding-right: 20px; + padding-bottom: 14px; } + +.about-scrollBox { + border: 1px solid #050508; + border-radius: 2px; + background-color: #181b28; + padding: 4px; + padding-right: 0; + border-radius: 0; } + .about-scrollBox-innerBox { + padding: 1.2em; + spacing: 1.2em; } + +.about-description { + padding-top: 4px; + padding-bottom: 16px; } + +.about-version { + padding-left: 7px; + font-size: 10px; + color: #888; } + +.calendar { + padding: .4em 1.75em; + spacing-rows: 0px; + spacing-columns: 0px; } + +.calendar-month-label { + color: #98abb2; + font-weight: bold; + padding: 8px 0; } + +.calendar-change-month-back, +.calendar-change-month-forward { + width: 16px; + height: 16px; } + +.calendar-change-month-back { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + .calendar-change-month-back:focus, .calendar-change-month-back:hover { + background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } + .calendar-change-month-back:active { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + .calendar-change-month-back:rtl { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + .calendar-change-month-back:rtl:focus, .calendar-change-month-back:rtl:hover { + background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } + .calendar-change-month-back:rtl:active { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + +.calendar-change-month-forward { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + .calendar-change-month-forward:focus, .calendar-change-month-forward:hover { + background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } + .calendar-change-month-forward:active { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + .calendar-change-month-forward:rtl { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + .calendar-change-month-forward:rtl:focus, .calendar-change-month-forward:rtl:hover { + background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } + .calendar-change-month-forward:rtl:active { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + +.datemenu-date-label { + padding: .4em 1.75em; + font-weight: bold; + text-align: center; + color: #98abb2; + border-radius: 2px; } + +.calendar-day-base { + font-size: 80%; + text-align: center; + width: 25px; + height: 25px; + padding: 0.1em; + margin: 2px; + border-radius: 12.5px; } + +.calendar-day-heading { + color: rgba(152, 171, 178, 0.85); + margin-top: 1em; + font-size: 70%; } + +.calendar-day { + border-width: 0; + color: rgba(152, 171, 178, 0.8); } + +.calendar-day-top { + border-top-width: 0; } + +.calendar-day-left { + border-left-width: 0; } + +.calendar-nonwork-day { + color: #98abb2; + background-color: transparent; + font-weight: bold; } + +.calendar-today, +.calendar-today:active, +.calendar-today:focus, +.calendar-today:hover { + font-weight: bold; + color: #fefefe; + background-color: #c50ed2; + border-width: 0; } + +.calendar-other-month-day { + color: rgba(152, 171, 178, 0.3); + opacity: 1; } + +.calendar-week-number { + color: rgba(152, 171, 178, 0.7); + font-size: 80%; } + +#notification { + border-radius: 3px; + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + padding: 13px; + spacing-rows: 10px; + spacing-columns: 10px; + margin-from-right-edge-of-screen: 20px; + width: 34em; + color: #BAC3CF; } + .menu #notification, + .popup-menu #notification { + border-image: url("dark-assets/misc/message.svg") 9 9 9 9; } + .menu #notification, .menu #notification.multi-line-notification, + .popup-menu #notification, + .popup-menu #notification.multi-line-notification { + color: #98abb2; } + .menu #notification .notification-button, .menu #notification .notification-icon-button, + .popup-menu #notification .notification-button, + .popup-menu #notification .notification-icon-button { + padding: 5px; } + #notification.multi-line-notification { + padding-bottom: 13px; + color: #BAC3CF; } + #notification-scrollview { + max-height: 10em; } + #notification-scrollview > .top-shadow, #notification-scrollview > .bottom-shadow { + height: 1em; } + #notification-scrollview:ltr > StScrollBar { + padding-left: 6px; } + #notification-scrollview:rtl > StScrollBar { + padding-right: 6px; } + #notification-body { + spacing: 5px; } + #notification-actions { + spacing: 10px; } + +.notification-with-image { + min-height: 159px; + color: #BAC3CF; } + +.notification-button, .notification-icon-button { + padding: 5px; } + +.notification-icon-button > StIcon { + icon-size: 36px; } + +#altTabPopup { + padding: 8px; + spacing: 16px; } + +.switcher-list { + color: #BAC3CF; + background: none; + border: none; + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + border-radius: 3px; + padding: 20px; } + .switcher-list > StBoxLayout { + padding: 4px; } + .switcher-list-item-container { + spacing: 8px; } + .switcher-list .item-box { + padding: 8px; + border-radius: 2px; } + .switcher-list .item-box:outlined { + padding: 8px; + border: 1px solid #c50ed2; } + .switcher-list .item-box:selected { + color: #fefefe; + background-color: #c50ed2; + border: 0px solid #c50ed2; } + .switcher-list .thumbnail { + width: 256px; } + .switcher-list .thumbnail-box { + padding: 2px; + spacing: 4px; } + .switcher-list .separator { + width: 1px; + background: rgba(255, 255, 255, 0.2); } + +.switcher-arrow { + border-color: rgba(0, 0, 0, 0); + color: #BAC3CF; } + .switcher-arrow:highlighted { + border-color: rgba(0, 0, 0, 0); + color: #98abb2; } + +.thumbnail-scroll-gradient-left { + background-color: rgba(0, 0, 0, 0); + border-radius: 24px; + border-radius-topright: 0px; + border-radius-bottomright: 0px; + width: 60px; } + +.thumbnail-scroll-gradient-right { + background-color: rgba(0, 0, 0, 0); + border-radius: 24px; + border-radius-topleft: 0px; + border-radius-bottomleft: 0px; + width: 60px; } + +.ripple-box { + width: 104px; + height: 104px; + background-image: url("common-assets/misc/corner-ripple.svg"); + background-size: contain; } + +.lightbox { + background-color: rgba(0, 0, 0, 0.4); } + +.flashspot { + background-color: white; } + +.modal-dialog { + color: #98abb2; + background-color: rgba(24, 27, 40, 0); + border: none; + border-image: url("dark-assets/misc/modal.svg") 9 9 9 67; + padding: 0 5px 6px 5px; } + .modal-dialog > StBoxLayout:first-child { + padding: 20px 10px 10px 10px; } + .modal-dialog-button-box { + spacing: 0; + margin: 0px; + padding: 14px 10px; + background: none; + border: none; + border-image: url("dark-assets/misc/button-box.svg") 9 9 9 9; } + .modal-dialog-button-box .modal-dialog-button { + padding-top: 0; + padding-bottom: 0; + height: 30px; } + +.run-dialog { + padding: 0px 15px 10px 15px; + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; } + .run-dialog > * { + padding: 0; } + .run-dialog-label { + font-size: 0; + font-weight: bold; + color: #BAC3CF; + padding-bottom: 0; } + .run-dialog-error-label { + color: #FC4138; } + .run-dialog-error-box { + padding-top: 15px; + spacing: 5px; } + .run-dialog-completion-box { + padding-left: 15px; + font-size: 10px; } + .run-dialog-entry { + width: 21em; + padding: 7px; + border-radius: 3px; + caret-color: #BAC3CF; + selected-color: #fefefe; + selection-background-color: #c50ed2; + color: #BAC3CF; + background-color: rgba(57, 64, 94, 0.4); + border: 1px solid rgba(0, 0, 0, 0.4); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + .run-dialog-entry:focus { + color: #fefefe; + background-color: #c50ed2; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } + .run-dialog .modal-dialog-button-box { + border: none; + box-shadow: none; + background: none; + background-gradient-direction: none; } + +/* CinnamonMountOperation Dialogs */ +.cinnamon-mount-operation-icon { + icon-size: 48px; } + +.mount-password-reask { + color: #F27835; } + +.show-processes-dialog, +.mount-question-dialog { + spacing: 24px; } + .show-processes-dialog-subject, + .mount-question-dialog-subject { + padding-top: 10px; + padding-left: 17px; + padding-bottom: 6px; } + .show-processes-dialog-subject:rtl, + .mount-question-dialog-subject:rtl { + padding-left: 0px; + padding-right: 17px; } + .show-processes-dialog-description, + .mount-question-dialog-description { + padding-left: 17px; + width: 28em; } + .show-processes-dialog-description:rtl, + .mount-question-dialog-description:rtl { + padding-right: 17px; } + +.show-processes-dialog-app-list { + max-height: 200px; + padding-top: 24px; + padding-left: 49px; + padding-right: 32px; } + .show-processes-dialog-app-list:rtl { + padding-right: 49px; + padding-left: 32px; } + .show-processes-dialog-app-list-item { + color: #ccc; } + .show-processes-dialog-app-list-item:hover { + color: white; } + .show-processes-dialog-app-list-item:ltr { + padding-right: 1em; } + .show-processes-dialog-app-list-item:rtl { + padding-left: 1em; } + .show-processes-dialog-app-list-item-icon:ltr { + padding-right: 17px; } + .show-processes-dialog-app-list-item-icon:rtl { + padding-left: 17px; } + .show-processes-dialog-app-list-item-name { + font-size: 1.1em; } + +.magnifier-zoom-region { + border: 2px solid maroon; } + .magnifier-zoom-region .full-screen { + border-width: 0px; } + +#keyboard { + background-color: #0e1018; + border-width: 0; + border-top-width: 1px; + border-color: rgba(0, 0, 0, 0.4); } + +.keyboard-layout { + spacing: 10px; + padding: 10px; } + +.keyboard-row { + spacing: 15px; } + +.keyboard-key { + min-height: 2em; + min-width: 2em; + font-size: 14pt; + font-weight: bold; + border-radius: 3px; + box-shadow: none; + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(57, 64, 94, 0.4); } + .keyboard-key:hover { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(70, 79, 117, 0.5); } + .keyboard-key:active, .keyboard-key:checked { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #fefefe; + border: 1px solid #c50ed2; + background-color: #c50ed2; } + .keyboard-key:grayed { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #42464f; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(57, 64, 94, 0.25); } + +.keyboard-subkeys { + color: #BAC3CF; + padding: 5px; + -arrow-border-radius: 2px; + -arrow-background-color: #0e1018; + -arrow-border-width: 1px; + -arrow-border-color: rgba(0, 0, 0, 0.4); + -arrow-base: 20px; + -arrow-rise: 10px; + -boxpointer-gap: 5px; } + +.menu-favorites-box { + margin: auto; + padding: 10px; + transition-duration: 300; + background-color: #181b28; + border: 1px solid #050508; } + +.menu-favorites-button { + padding: 10px; + border: 1px solid rgba(0, 0, 0, 0); } + +.menu-places-box { + margin: auto; + padding: 10px; + border: 0px solid red; } + +.menu-places-button { + padding: 10px; } + +.menu-categories-box { + padding: 10px 30px 10px 30px; } + +.menu-applications-inner-box, .menu-applications-outer-box { + padding: 10px 10px 0 10px; } + +.menu-application-button { + padding: 7px; + border: 1px solid rgba(0, 0, 0, 0); } + .menu-application-button:highlighted { + font-weight: bold; } + .menu-application-button-selected { + padding: 7px; } + .menu-application-button-selected:highlighted { + font-weight: bold; } + .menu-application-button-label:ltr { + padding-left: 5px; } + .menu-application-button-label:rtl { + padding-right: 5px; } + +.menu-category-button { + padding: 7px; + border: 1px solid rgba(0, 0, 0, 0); } + .menu-category-button-selected { + padding: 7px; } + .menu-category-button-hover { + background-color: red; + border-radius: 2px; } + .menu-category-button-greyed { + padding: 7px; + color: rgba(152, 171, 178, 0.45); + border: 1px solid rgba(0, 0, 0, 0); } + .menu-category-button-label:ltr { + padding-left: 5px; } + .menu-category-button-label:rtl { + padding-right: 5px; } + +.menu-selected-app-box { + padding-right: 30px; + padding-left: 28px; + text-align: right; + height: 30px; } + .menu-selected-app-box:rtl { + padding-top: 10px; + height: 30px; } + +.menu-selected-app-title { + font-weight: bold; } + +.menu-selected-app-description { + max-width: 150px; } + +.menu-search-box:ltr { + padding-left: 30px; } + +.menu-search-box-rtl { + padding-right: 30px; } + +#menu-search-entry { + width: 250px; + height: 15px; + font-weight: normal; + caret-color: #98abb2; } + +.menu-search-entry-icon { + icon-size: 1em; + color: #98abb2; } + +/* Context menu (at the moment only for favorites) */ +.info-osd { + text-align: center; + font-weight: bold; + spacing: 1em; + padding: 16px; + color: #98abb2; + border-image: url("common-assets/misc/osd.svg") 9 9 9 9; } + +.osd-window { + text-align: center; + font-weight: bold; + spacing: 1em; + padding: 20px; + margin: 32px; + min-width: 64px; + min-height: 64px; + color: #98abb2; + background: none; + border: none; + border-radius: 5px; + border-image: url("common-assets/misc/osd.svg") 9 9 9 9; } + .osd-window .osd-monitor-label { + font-size: 3em; } + .osd-window .level { + padding: 0; + height: 4px; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 2px; + color: #c50ed2; } + .osd-window .level-bar { + background-color: #c50ed2; } + +.window-list-box { + spacing: 0; } + .window-list-box .panel-top:ltr, + .panel-bottom .window-list-box:ltr { + padding: 0 0 0 8px; } + .window-list-box .panel-top:rtl, + .panel-bottom .window-list-box:rtl { + padding: 0 8px 0 0; } + .window-list-box.vertical { + padding: 6px 0 0 0; } + .window-list-box:highlight { + background-color: #c50ed2; } + +.window-list-item-box { + border: 0 none transparent; + border-image: none; + background-image: none; + background-color: #0e1018; + color: #BAC3CF; + box-shadow: none; + font-weight: 400; } + .window-list-item-box:hover { + color: #fefefe; } + .panel-top .window-list-item-box:hover { + box-shadow: inset 0 2px #c50ed2; } + .panel-bottom .window-list-item-box:hover { + box-shadow: inset 0 -2px #c50ed2; } + .panel-left .window-list-item-box:hover { + box-shadow: inset 2px 0 #c50ed2; } + .panel-right .window-list-item-box:hover { + box-shadow: inset -2px 0 #c50ed2; } + .window-list-item-box:active, .window-list-item-box:active:hover, .window-list-item-box:checked, .window-list-item-box:checked:hover, .window-list-item-box:focus, .window-list-item-box:focus:hover { + color: #fefefe; } + .panel-top .window-list-item-box:active, .panel-top .window-list-item-box:active:hover, .panel-top .window-list-item-box:checked, .panel-top .window-list-item-box:checked:hover, .panel-top .window-list-item-box:focus, .panel-top .window-list-item-box:focus:hover { + box-shadow: inset 0 2px #ed254e; } + .panel-bottom .window-list-item-box:active, .panel-bottom .window-list-item-box:active:hover, .panel-bottom .window-list-item-box:checked, .panel-bottom .window-list-item-box:checked:hover, .panel-bottom .window-list-item-box:focus, .panel-bottom .window-list-item-box:focus:hover { + box-shadow: inset 0 -2px #ed254e; } + .panel-left .window-list-item-box:active, .panel-left .window-list-item-box:active:hover, .panel-left .window-list-item-box:checked, .panel-left .window-list-item-box:checked:hover, .panel-left .window-list-item-box:focus, .panel-left .window-list-item-box:focus:hover { + box-shadow: inset 2px 0 #ed254e; } + .panel-right .window-list-item-box:active, .panel-right .window-list-item-box:active:hover, .panel-right .window-list-item-box:checked, .panel-right .window-list-item-box:checked:hover, .panel-right .window-list-item-box:focus, .panel-right .window-list-item-box:focus:hover { + box-shadow: inset -2px 0 #ed254e; } + .panel-top .window-list-item-box StIcon, + .panel-bottom .window-list-item-box StIcon, .panel-top + .window-list-item-box StBin, + .panel-bottom + .window-list-item-box StBin { + padding: 0 4px; } + .window-list-item-box.vertical StIcon, + .window-list-item-box.vertical StBin { + padding: 0; } + .window-list-item-box StLabel { + font-weight: 400; } + .panel-top .window-list-item-box StLabel:ltr, + .panel-bottom .window-list-item-box StLabel:ltr { + padding: 0 4px 0 0; } + .panel-top .window-list-item-box StLabel:rtl, + .panel-bottom .window-list-item-box StLabel:rtl { + padding: 0 0 0 4px; } + .window-list-item-box:progress, + .window-list-item-box .progress { + background-gradient-start: #c50ed2; + background-gradient-end: #c50ed2; } + +.window-list-item-demands-attention { + background-gradient-start: #c50ed2; + background-gradient-end: #c50ed2; + color: #fefefe; } + .panel-top .window-list-item-demands-attention { + box-shadow: inset 0 2px #c50ed2; } + .panel-bottom .window-list-item-demands-attention { + box-shadow: inset 0 -2px #c50ed2; } + .panel-left .window-list-item-demands-attention { + box-shadow: inset 2px 0 #c50ed2; } + .panel-right .window-list-item-demands-attention { + box-shadow: inset -2px 0 #c50ed2; } + +.window-list-preview { + padding: 12px; + spacing: 8px; + border: none; + border-image: url("assets/misc/osd.svg") 9 9 9 9; + border-radius: 2px; + color: #BAC3CF; + background: none; } + +.grouped-window-list-item-box { + border: 0 none transparent; + border-image: none; + background-image: none; + background-color: #0e1018; + color: #BAC3CF; + box-shadow: none; + font-weight: 400; } + .panel-top .grouped-window-list-item-box StIcon, + .panel-bottom .grouped-window-list-item-box StIcon, .panel-top + .grouped-window-list-item-box StBin, + .panel-bottom + .grouped-window-list-item-box StBin { + padding: 0 4px; } + .panel-top .grouped-window-list-item-box:active, .panel-top .grouped-window-list-item-box:checked { + box-shadow: inset 0 2px #485178; } + .panel-bottom .grouped-window-list-item-box:active, .panel-bottom .grouped-window-list-item-box:checked { + box-shadow: inset 0 -2px #485178; } + .panel-left .grouped-window-list-item-box:active, .panel-left .grouped-window-list-item-box:checked { + box-shadow: inset 2px 0 #485178; } + .panel-right .grouped-window-list-item-box:active, .panel-right .grouped-window-list-item-box:checked { + box-shadow: inset -2px 0 #485178; } + .panel-top .grouped-window-list-item-box:hover, .panel-top .grouped-window-list-item-box:active:hover, .panel-top .grouped-window-list-item-box:focus, .panel-top .grouped-window-list-item-box:active:focus, .panel-top .grouped-window-list-item-box:focus:hover, .panel-top .grouped-window-list-item-box:active:focus:hover { + box-shadow: inset 0 2px #c50ed2; } + .panel-bottom .grouped-window-list-item-box:hover, .panel-bottom .grouped-window-list-item-box:active:hover, .panel-bottom .grouped-window-list-item-box:focus, .panel-bottom .grouped-window-list-item-box:active:focus, .panel-bottom .grouped-window-list-item-box:focus:hover, .panel-bottom .grouped-window-list-item-box:active:focus:hover { + box-shadow: inset 0 -2px #c50ed2; } + .panel-left .grouped-window-list-item-box:hover, .panel-left .grouped-window-list-item-box:active:hover, .panel-left .grouped-window-list-item-box:focus, .panel-left .grouped-window-list-item-box:active:focus, .panel-left .grouped-window-list-item-box:focus:hover, .panel-left .grouped-window-list-item-box:active:focus:hover { + box-shadow: inset 2px 0 #c50ed2; } + .panel-right .grouped-window-list-item-box:hover, .panel-right .grouped-window-list-item-box:active:hover, .panel-right .grouped-window-list-item-box:focus, .panel-right .grouped-window-list-item-box:active:focus, .panel-right .grouped-window-list-item-box:focus:hover, .panel-right .grouped-window-list-item-box:active:focus:hover { + box-shadow: inset -2px 0 #c50ed2; } + .grouped-window-list-item-box:progress, + .grouped-window-list-item-box .progress { + background-gradient-start: #c50ed2; + background-gradient-end: #c50ed2; } + +.grouped-window-list-item-demands-attention { + background-gradient-start: #c50ed2; + background-gradient-end: #c50ed2; + color: #fefefe; } + .panel-top .grouped-window-list-item-demands-attention { + box-shadow: inset 0 2px #c50ed2; } + .panel-bottom .grouped-window-list-item-demands-attention { + box-shadow: inset 0 -2px #c50ed2; } + .panel-left .grouped-window-list-item-demands-attention { + box-shadow: inset 2px 0 #c50ed2; } + .panel-right .grouped-window-list-item-demands-attention { + box-shadow: inset -2px 0 #c50ed2; } + +.sound-button { + width: 22px; + height: 13px; + padding: 8px; } + .sound-button-container { + padding-right: 3px; + padding-left: 3px; } + .sound-button StIcon { + icon-size: 1.4em; } + +.sound-track-infos { + padding: 5px; } + +.sound-track-info { + padding-top: 2px; + padding-bottom: 2px; } + .sound-track-info StIcon { + icon-size: 16px; } + .sound-track-info StLabel { + padding-left: 5px; + padding-right: 5px; } + +.sound-track-box { + padding-left: 15px; + padding-right: 15px; + max-width: 220px; } + +.sound-seek-box { + padding-left: 15px; } + .sound-seek-box StLabel { + padding-top: 2px; } + .sound-seek-box StIcon { + icon-size: 16px; } + +.sound-seek-slider { + width: 140px; } + +.sound-volume-menu-item { + padding: .4em 1.75em; } + .sound-volume-menu-item StIcon { + icon-size: 1.14em; + padding-left: 8px; + padding-right: 8px; } + +.sound-playback-control { + padding: 5px 10px 10px 10px; } + +.sound-player { + padding: 0 4px; } + .sound-player > StBoxLayout:first-child { + padding: 5px 10px 12px 10px; + spacing: 0.5em; } + .sound-player > StBoxLayout:first-child StButton:small { + width: 16px; + height: 8px; + padding: 1px; } + .sound-player > StBoxLayout:first-child StButton:small StIcon { + icon-size: 12px; } + .sound-player-generic-coverart { + background: rgba(0, 0, 0, 0.2); } + .sound-player-overlay { + width: 290px; + height: 70px; + padding: 15px; + spacing: 0.5em; + background: rgba(5, 5, 8, 0.9); + border: 0px solid black; + border-bottom: 1px; + color: #BAC3CF; } + .sound-player-overlay StButton { + width: 22px; + height: 13px; + padding: 5px; + color: #BAC3CF; + border-radius: 2px; + border: 1px solid rgba(14, 16, 24, 0); } + .sound-player-overlay StButton StIcon { + icon-size: 16px; } + .sound-player-overlay StButton:hover { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(70, 79, 117, 0.5); } + .sound-player-overlay StButton:active { + text-shadow: 0 1px rgba(24, 27, 40, 0); + color: #fefefe; + background-color: #c50ed2; + border: 1px solid #c50ed2; + box-shadow: inset 0 2px 4px #c50ed2; } + .sound-player-overlay StBoxLayout { + padding-top: 2px; } + .sound-player .slider { + height: 0.5em; + padding: 0; + border: none; + -slider-height: 0.5em; + -slider-background-color: #0e1018; + -slider-border-color: rgba(0, 0, 0, 0); + -slider-active-background-color: #c50ed2; + -slider-active-border-color: rgba(0, 0, 0, 0); + -slider-border-width: 0px; + -slider-handle-radius: 0px; } + +#workspaceSwitcher { + spacing: 0px; + 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; + color: #fefefe; + padding: 3px; + padding-top: 4px; + transition-duration: 300; } + .workspace-button:outlined, .workspace-button:outlined:hover { + color: #c50ed2; } + .workspace-button:hover { + color: rgba(197, 14, 210, 0.5); } + +/* Controls the style when using the "Visual representation" option */ +.workspace-graph { + padding: 3px; + spacing: 3px; } + +.workspace-graph .workspace { + border: 1px solid rgba(0, 0, 0, 0.4); + background-gradient-direction: none; + background-color: rgba(0, 0, 0, 0.2); } + +.workspace-graph .workspace:active { + border: 1px solid #c50ed2; + background-gradient-direction: none; } + +.workspace-graph .workspace .windows { + -active-window-background: #2b3148; + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: #2b3148; + -inactive-window-border: rgba(0, 0, 0, 0.8); } + +.workspace-graph .workspace:active .windows { + -active-window-background: #353b58; + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: #181b28; + -inactive-window-border: rgba(0, 0, 0, 0.8); } + +#panel-launchers-box { + padding-left: 7px; } + #panel-launchers-box.vertical { + padding: 2px 0; } + +.panel-launcher, +.launcher { + margin: 1px; + padding: 1px; + transition-duration: 200; } + .panel-launcher:hover, + .launcher:hover { + background-gradient-direction: none; + border: 0px solid #c50ed2; } + .panel-bottom .panel-launcher:hover, .panel-bottom + .launcher:hover { + border-bottom-width: 1px; } + .panel-top .panel-launcher:hover, .panel-top + .launcher:hover { + border-top-width: 1px; } + .panel-left .panel-launcher:hover, .panel-left + .launcher:hover { + border-left-width: 1px; + padding-left: 0; } + .panel-right .panel-launcher:hover, .panel-right + .launcher:hover { + border-right-width: 1px; + padding-right: 0; } + +#overview-corner { + background-image: url("common-assets/misc/overview.png"); } + #overview-corner:hover { + background-image: url("common-assets/misc/overview-hover.png"); } + +.applet-separator { + padding: 1px 4px; } + +.applet-separator-line { + width: 1px; + background: rgba(255, 255, 255, 0.12); } + +.applet-box { + padding-left: 3px; + padding-right: 3px; + color: #98abb2; + text-shadow: none; + transition-duration: 100; } + .applet-box.vertical { + padding: 3px 0; } + .applet-box:hover { + color: #fefefe; + background-color: #c50ed2; } + .applet-box:highlight { + background-image: none; + border-image: none; + background-color: rgba(252, 65, 56, 0.5); } + +.applet-label { + font-weight: bold; + color: #98abb2; } + .applet-label:hover, .applet-box:hover .applet-label { + color: #fefefe; + text-shadow: none; } + +.applet-icon { + color: #98abb2; + icon-size: 22px; } + .applet-icon:hover, .applet-box:hover > .applet-icon { + color: #fefefe; + text-shadow: none; } + +.user-icon { + width: 32px; + height: 32px; + background-color: transparent; + border: none; + border-radius: 0; } + +.user-label { + color: #98abb2; + font-size: 1em; + font-weight: bold; + margin: 0px; } + +.desklet { + color: #BAC3CF; } + .desklet:highlight { + background-color: rgba(252, 65, 56, 0.5); } + .desklet-with-borders { + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + color: #BAC3CF; + padding: 12px; + padding-bottom: 16px; } + .desklet-with-borders:highlight { + background-color: rgba(252, 65, 56, 0.5); } + .desklet-with-borders-and-header { + border-image: url("common-assets/misc/desklet.svg") 9 9 9 9; + color: #BAC3CF; + border-radius: 0; + border-radius-topleft: 0; + border-radius-topright: 0; + padding: 12px; + padding-bottom: 17px; } + .desklet-with-borders-and-header:highlight { + background-color: rgba(252, 65, 56, 0.5); } + .desklet-header { + border-image: url("common-assets/misc/desklet-header.svg") 9 9 9 9; + color: #BAC3CF; + font-size: 1em; + padding: 12px; + padding-bottom: 6px; } + .desklet-drag-placeholder { + border: 2px solid #c50ed2; + background-color: rgba(197, 14, 210, 0.3); } + +.photoframe-box { + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + color: #BAC3CF; + padding: 12px; + padding-bottom: 16px; } + +/*FIXME*/ +.workspace-osd { + /*color: red;*/ + text-shadow: black 5px 5px 5px; + font-weight: bold; + font-size: 48pt; } + +.notification-applet-padding { + padding: .5em 1em; } + +.notification-applet-container { + max-height: 100px; } + +.tile-preview, .tile-preview.snap, +.tile-hud, .tile-hud.snap { + background-color: rgba(197, 14, 210, 0.3); + border: 1px solid #c50ed2; } + +.xkcd-box { + padding: 6px; + border: 0px; + background-color: rgba(0, 0, 0, 0); + border-radius: 0px; } diff --git a/cinnamon/cinnamon.scss b/cinnamon/cinnamon.scss new file mode 100644 index 0000000..4a61461 --- /dev/null +++ b/cinnamon/cinnamon.scss @@ -0,0 +1,7 @@ +$variant: 'dark'; +$transparency: 'true'; +$darker: 'false'; + +@import "_colors"; //use gtk colors +@import "_drawing"; +@import "_common"; diff --git a/cinnamon/common-assets/menu/menu-hover.svg b/cinnamon/common-assets/menu/menu-hover.svg new file mode 100644 index 0000000..0be39ad --- /dev/null +++ b/cinnamon/common-assets/menu/menu-hover.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/cinnamon/common-assets/menu/menu-separator.svg b/cinnamon/common-assets/menu/menu-separator.svg new file mode 100644 index 0000000..4962ebc --- /dev/null +++ b/cinnamon/common-assets/menu/menu-separator.svg @@ -0,0 +1,60 @@ + + + + + + + + + + image/svg+xml + + + + + + + diff --git a/cinnamon/common-assets/misc/add-workspace-active.svg b/cinnamon/common-assets/misc/add-workspace-active.svg new file mode 100644 index 0000000..dc5801a --- /dev/null +++ b/cinnamon/common-assets/misc/add-workspace-active.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/add-workspace-hover.svg b/cinnamon/common-assets/misc/add-workspace-hover.svg new file mode 100644 index 0000000..e771e33 --- /dev/null +++ b/cinnamon/common-assets/misc/add-workspace-hover.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/add-workspace.svg b/cinnamon/common-assets/misc/add-workspace.svg new file mode 100644 index 0000000..65f5361 --- /dev/null +++ b/cinnamon/common-assets/misc/add-workspace.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/bg.svg b/cinnamon/common-assets/misc/bg.svg new file mode 100644 index 0000000..83f2efd --- /dev/null +++ b/cinnamon/common-assets/misc/bg.svg @@ -0,0 +1,131 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/calendar-arrow-left-hover.svg b/cinnamon/common-assets/misc/calendar-arrow-left-hover.svg new file mode 100644 index 0000000..60f7816 --- /dev/null +++ b/cinnamon/common-assets/misc/calendar-arrow-left-hover.svg @@ -0,0 +1,161 @@ + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/calendar-arrow-left.svg b/cinnamon/common-assets/misc/calendar-arrow-left.svg new file mode 100644 index 0000000..2774254 --- /dev/null +++ b/cinnamon/common-assets/misc/calendar-arrow-left.svg @@ -0,0 +1,152 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/calendar-arrow-right-hover.svg b/cinnamon/common-assets/misc/calendar-arrow-right-hover.svg new file mode 100644 index 0000000..730d900 --- /dev/null +++ b/cinnamon/common-assets/misc/calendar-arrow-right-hover.svg @@ -0,0 +1,161 @@ + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/calendar-arrow-right.svg b/cinnamon/common-assets/misc/calendar-arrow-right.svg new file mode 100644 index 0000000..366e69b --- /dev/null +++ b/cinnamon/common-assets/misc/calendar-arrow-right.svg @@ -0,0 +1,152 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/close-active.svg b/cinnamon/common-assets/misc/close-active.svg new file mode 100644 index 0000000..95822bf --- /dev/null +++ b/cinnamon/common-assets/misc/close-active.svg @@ -0,0 +1,100 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/cinnamon/common-assets/misc/close-hover.svg b/cinnamon/common-assets/misc/close-hover.svg new file mode 100644 index 0000000..7b52140 --- /dev/null +++ b/cinnamon/common-assets/misc/close-hover.svg @@ -0,0 +1,100 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/cinnamon/common-assets/misc/close.svg b/cinnamon/common-assets/misc/close.svg new file mode 100644 index 0000000..e221a33 --- /dev/null +++ b/cinnamon/common-assets/misc/close.svg @@ -0,0 +1,100 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/cinnamon/common-assets/misc/corner-ripple.svg b/cinnamon/common-assets/misc/corner-ripple.svg new file mode 100644 index 0000000..717a040 --- /dev/null +++ b/cinnamon/common-assets/misc/corner-ripple.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/cinnamon/common-assets/misc/desklet-header.svg b/cinnamon/common-assets/misc/desklet-header.svg new file mode 100644 index 0000000..9c08d4a --- /dev/null +++ b/cinnamon/common-assets/misc/desklet-header.svg @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/desklet.svg b/cinnamon/common-assets/misc/desklet.svg new file mode 100644 index 0000000..038de6e --- /dev/null +++ b/cinnamon/common-assets/misc/desklet.svg @@ -0,0 +1,156 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/osd.svg b/cinnamon/common-assets/misc/osd.svg new file mode 100644 index 0000000..bfe35ca --- /dev/null +++ b/cinnamon/common-assets/misc/osd.svg @@ -0,0 +1,131 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/misc/overview-hover.png b/cinnamon/common-assets/misc/overview-hover.png new file mode 100644 index 0000000..75673f9 Binary files /dev/null and b/cinnamon/common-assets/misc/overview-hover.png differ diff --git a/cinnamon/common-assets/misc/overview.png b/cinnamon/common-assets/misc/overview.png new file mode 100644 index 0000000..9eb4f87 Binary files /dev/null and b/cinnamon/common-assets/misc/overview.png differ diff --git a/cinnamon/common-assets/misc/trash-icon.svg b/cinnamon/common-assets/misc/trash-icon.svg new file mode 100644 index 0000000..61097dd --- /dev/null +++ b/cinnamon/common-assets/misc/trash-icon.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/cinnamon/common-assets/panel/activities-active.svg b/cinnamon/common-assets/panel/activities-active.svg new file mode 100644 index 0000000..3af9359 --- /dev/null +++ b/cinnamon/common-assets/panel/activities-active.svg @@ -0,0 +1,167 @@ + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/cinnamon/common-assets/panel/activities.svg b/cinnamon/common-assets/panel/activities.svg new file mode 100644 index 0000000..b4a4b0d --- /dev/null +++ b/cinnamon/common-assets/panel/activities.svg @@ -0,0 +1,158 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/cinnamon/common-assets/panel/panel-bottom.svg b/cinnamon/common-assets/panel/panel-bottom.svg new file mode 100644 index 0000000..89e3e26 --- /dev/null +++ b/cinnamon/common-assets/panel/panel-bottom.svg @@ -0,0 +1,83 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/cinnamon/common-assets/panel/panel-left.svg b/cinnamon/common-assets/panel/panel-left.svg new file mode 100644 index 0000000..8f91ed9 --- /dev/null +++ b/cinnamon/common-assets/panel/panel-left.svg @@ -0,0 +1,83 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/cinnamon/common-assets/panel/panel-right.svg b/cinnamon/common-assets/panel/panel-right.svg new file mode 100644 index 0000000..137673f --- /dev/null +++ b/cinnamon/common-assets/panel/panel-right.svg @@ -0,0 +1,83 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/cinnamon/common-assets/panel/panel-top.svg b/cinnamon/common-assets/panel/panel-top.svg new file mode 100644 index 0000000..ad26fc6 --- /dev/null +++ b/cinnamon/common-assets/panel/panel-top.svg @@ -0,0 +1,79 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/cinnamon/common-assets/panel/window-list-active-bottom.svg b/cinnamon/common-assets/panel/window-list-active-bottom.svg new file mode 100644 index 0000000..c74745c --- /dev/null +++ b/cinnamon/common-assets/panel/window-list-active-bottom.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/cinnamon/common-assets/panel/window-list-active-left.svg b/cinnamon/common-assets/panel/window-list-active-left.svg new file mode 100644 index 0000000..ea243e7 --- /dev/null +++ b/cinnamon/common-assets/panel/window-list-active-left.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/cinnamon/common-assets/panel/window-list-active-right.svg b/cinnamon/common-assets/panel/window-list-active-right.svg new file mode 100644 index 0000000..44bbe21 --- /dev/null +++ b/cinnamon/common-assets/panel/window-list-active-right.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/cinnamon/common-assets/panel/window-list-active-top.svg b/cinnamon/common-assets/panel/window-list-active-top.svg new file mode 100644 index 0000000..16e14f8 --- /dev/null +++ b/cinnamon/common-assets/panel/window-list-active-top.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/cinnamon/common-assets/switch/switch-off-selected.svg b/cinnamon/common-assets/switch/switch-off-selected.svg new file mode 100644 index 0000000..3afe623 --- /dev/null +++ b/cinnamon/common-assets/switch/switch-off-selected.svg @@ -0,0 +1,207 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/cinnamon/common-assets/switch/switch-on-selected.svg b/cinnamon/common-assets/switch/switch-on-selected.svg new file mode 100644 index 0000000..3e98326 --- /dev/null +++ b/cinnamon/common-assets/switch/switch-on-selected.svg @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/cinnamon/dark-assets/checkbox/checkbox-checked-focused.svg b/cinnamon/dark-assets/checkbox/checkbox-checked-focused.svg new file mode 100644 index 0000000..c6c508c --- /dev/null +++ b/cinnamon/dark-assets/checkbox/checkbox-checked-focused.svg @@ -0,0 +1,203 @@ + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cinnamon/dark-assets/checkbox/checkbox-checked.svg b/cinnamon/dark-assets/checkbox/checkbox-checked.svg new file mode 100644 index 0000000..95e7fe7 --- /dev/null +++ b/cinnamon/dark-assets/checkbox/checkbox-checked.svg @@ -0,0 +1,203 @@ + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cinnamon/dark-assets/checkbox/checkbox-unchecked-focused.svg b/cinnamon/dark-assets/checkbox/checkbox-unchecked-focused.svg new file mode 100644 index 0000000..f5636a3 --- /dev/null +++ b/cinnamon/dark-assets/checkbox/checkbox-unchecked-focused.svg @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cinnamon/dark-assets/checkbox/checkbox-unchecked.svg b/cinnamon/dark-assets/checkbox/checkbox-unchecked.svg new file mode 100644 index 0000000..5b2fc58 --- /dev/null +++ b/cinnamon/dark-assets/checkbox/checkbox-unchecked.svg @@ -0,0 +1,140 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cinnamon/dark-assets/menu/menu.svg b/cinnamon/dark-assets/menu/menu.svg new file mode 100644 index 0000000..d06a64e --- /dev/null +++ b/cinnamon/dark-assets/menu/menu.svg @@ -0,0 +1,131 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/cinnamon/dark-assets/menu/submenu.svg b/cinnamon/dark-assets/menu/submenu.svg new file mode 100644 index 0000000..b1e3a14 --- /dev/null +++ b/cinnamon/dark-assets/menu/submenu.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/cinnamon/dark-assets/misc/button-box.svg b/cinnamon/dark-assets/misc/button-box.svg new file mode 100644 index 0000000..98df86d --- /dev/null +++ b/cinnamon/dark-assets/misc/button-box.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/cinnamon/dark-assets/misc/message.svg b/cinnamon/dark-assets/misc/message.svg new file mode 100644 index 0000000..7c8f1b6 --- /dev/null +++ b/cinnamon/dark-assets/misc/message.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/cinnamon/dark-assets/misc/modal.svg b/cinnamon/dark-assets/misc/modal.svg new file mode 100644 index 0000000..ac93a4b --- /dev/null +++ b/cinnamon/dark-assets/misc/modal.svg @@ -0,0 +1,147 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/cinnamon/dark-assets/switch/switch-off.svg b/cinnamon/dark-assets/switch/switch-off.svg new file mode 100644 index 0000000..3afe623 --- /dev/null +++ b/cinnamon/dark-assets/switch/switch-off.svg @@ -0,0 +1,207 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/cinnamon/dark-assets/switch/switch-on.svg b/cinnamon/dark-assets/switch/switch-on.svg new file mode 100644 index 0000000..3e98326 --- /dev/null +++ b/cinnamon/dark-assets/switch/switch-on.svg @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/cinnamon/thumbnail.png b/cinnamon/thumbnail.png new file mode 100644 index 0000000..e208393 Binary files /dev/null and b/cinnamon/thumbnail.png differ