From e4c806b3d768fc3c1e048f5354c518d2abdbe876 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 13 Aug 2015 21:21:06 +0200 Subject: add cinnamon theme --- common/cinnamon/.nvmrc | 1 + common/cinnamon/README | 19 + common/cinnamon/cinnamon.css | 1226 ++++++++++++++++ .../cinnamon/common-assets/menu/menu-separator.svg | 60 + .../common-assets/misc/add-workspace-hover.svg | 117 ++ .../cinnamon/common-assets/misc/add-workspace.svg | 117 ++ common/cinnamon/common-assets/misc/bg.svg | 127 ++ common/cinnamon/common-assets/misc/button-box.svg | 99 ++ .../cinnamon/common-assets/misc/close-active.svg | 100 ++ common/cinnamon/common-assets/misc/close-hover.svg | 100 ++ common/cinnamon/common-assets/misc/close.svg | 100 ++ .../common-assets/misc/corner-ripple-ltr.svg | 125 ++ .../common-assets/misc/corner-ripple-rtl.svg | 75 + .../cinnamon/common-assets/misc/desklet-header.svg | 158 +++ common/cinnamon/common-assets/misc/desklet.svg | 152 ++ common/cinnamon/common-assets/misc/osd.svg | 127 ++ .../cinnamon/common-assets/misc/overview-hover.png | Bin 0 -> 838 bytes common/cinnamon/common-assets/misc/overview.png | Bin 0 -> 680 bytes common/cinnamon/common-assets/misc/trash-icon.svg | 97 ++ .../common-assets/panel/activities-active.svg | 158 +++ common/cinnamon/common-assets/panel/activities.svg | 158 +++ .../cinnamon/common-assets/panel/panel-bottom.svg | 75 + common/cinnamon/common-assets/panel/panel-top.svg | 75 + .../panel/window-list-active-bottom.svg | 142 ++ .../common-assets/panel/window-list-active-top.svg | 142 ++ .../checkbox/checkbox-checked-focused.svg | 195 +++ .../dark-assets/checkbox/checkbox-checked.svg | 195 +++ .../checkbox/checkbox-unchecked-focused.svg | 141 ++ .../dark-assets/checkbox/checkbox-unchecked.svg | 141 ++ common/cinnamon/dark-assets/menu/menu-hover.svg | 97 ++ common/cinnamon/dark-assets/menu/menu.svg | 127 ++ common/cinnamon/dark-assets/menu/submenu-open.svg | 109 ++ common/cinnamon/dark-assets/menu/submenu.svg | 109 ++ .../dark-assets/misc/calendar-arrow-left-hover.svg | 169 +++ .../dark-assets/misc/calendar-arrow-left.svg | 169 +++ .../misc/calendar-arrow-right-hover.svg | 171 +++ .../dark-assets/misc/calendar-arrow-right.svg | 171 +++ common/cinnamon/dark-assets/misc/message.svg | 76 + common/cinnamon/dark-assets/misc/modal.svg | 143 ++ common/cinnamon/dark-assets/switch/switch-off.svg | 201 +++ common/cinnamon/dark-assets/switch/switch-on.svg | 220 +++ common/cinnamon/gulpfile.js | 18 + .../checkbox/checkbox-checked-focused.svg | 223 +++ .../light-assets/checkbox/checkbox-checked.svg | 223 +++ .../checkbox/checkbox-unchecked-focused.svg | 141 ++ .../light-assets/checkbox/checkbox-unchecked.svg | 141 ++ common/cinnamon/light-assets/menu/menu-hover.svg | 97 ++ common/cinnamon/light-assets/menu/menu.svg | 127 ++ common/cinnamon/light-assets/menu/submenu-open.svg | 109 ++ common/cinnamon/light-assets/menu/submenu.svg | 109 ++ .../misc/calendar-arrow-left-hover.svg | 169 +++ .../light-assets/misc/calendar-arrow-left.svg | 169 +++ .../misc/calendar-arrow-right-hover.svg | 171 +++ .../light-assets/misc/calendar-arrow-right.svg | 171 +++ common/cinnamon/light-assets/misc/message.svg | 76 + common/cinnamon/light-assets/misc/modal.svg | 143 ++ common/cinnamon/light-assets/switch/switch-off.svg | 201 +++ common/cinnamon/light-assets/switch/switch-on.svg | 220 +++ common/cinnamon/package.json | 7 + common/cinnamon/sass/_colors.scss | 90 ++ common/cinnamon/sass/_common.scss | 1483 ++++++++++++++++++++ common/cinnamon/sass/_drawing.scss | 157 +++ common/cinnamon/sass/cinnamon.scss | 7 + 63 files changed, 10236 insertions(+) create mode 100644 common/cinnamon/.nvmrc create mode 100644 common/cinnamon/README create mode 100644 common/cinnamon/cinnamon.css create mode 100644 common/cinnamon/common-assets/menu/menu-separator.svg create mode 100644 common/cinnamon/common-assets/misc/add-workspace-hover.svg create mode 100644 common/cinnamon/common-assets/misc/add-workspace.svg create mode 100644 common/cinnamon/common-assets/misc/bg.svg create mode 100644 common/cinnamon/common-assets/misc/button-box.svg create mode 100644 common/cinnamon/common-assets/misc/close-active.svg create mode 100644 common/cinnamon/common-assets/misc/close-hover.svg create mode 100644 common/cinnamon/common-assets/misc/close.svg create mode 100644 common/cinnamon/common-assets/misc/corner-ripple-ltr.svg create mode 100644 common/cinnamon/common-assets/misc/corner-ripple-rtl.svg create mode 100644 common/cinnamon/common-assets/misc/desklet-header.svg create mode 100644 common/cinnamon/common-assets/misc/desklet.svg create mode 100644 common/cinnamon/common-assets/misc/osd.svg create mode 100644 common/cinnamon/common-assets/misc/overview-hover.png create mode 100644 common/cinnamon/common-assets/misc/overview.png create mode 100644 common/cinnamon/common-assets/misc/trash-icon.svg create mode 100644 common/cinnamon/common-assets/panel/activities-active.svg create mode 100644 common/cinnamon/common-assets/panel/activities.svg create mode 100644 common/cinnamon/common-assets/panel/panel-bottom.svg create mode 100644 common/cinnamon/common-assets/panel/panel-top.svg create mode 100644 common/cinnamon/common-assets/panel/window-list-active-bottom.svg create mode 100644 common/cinnamon/common-assets/panel/window-list-active-top.svg create mode 100644 common/cinnamon/dark-assets/checkbox/checkbox-checked-focused.svg create mode 100644 common/cinnamon/dark-assets/checkbox/checkbox-checked.svg create mode 100644 common/cinnamon/dark-assets/checkbox/checkbox-unchecked-focused.svg create mode 100644 common/cinnamon/dark-assets/checkbox/checkbox-unchecked.svg create mode 100644 common/cinnamon/dark-assets/menu/menu-hover.svg create mode 100644 common/cinnamon/dark-assets/menu/menu.svg create mode 100644 common/cinnamon/dark-assets/menu/submenu-open.svg create mode 100644 common/cinnamon/dark-assets/menu/submenu.svg create mode 100644 common/cinnamon/dark-assets/misc/calendar-arrow-left-hover.svg create mode 100644 common/cinnamon/dark-assets/misc/calendar-arrow-left.svg create mode 100644 common/cinnamon/dark-assets/misc/calendar-arrow-right-hover.svg create mode 100644 common/cinnamon/dark-assets/misc/calendar-arrow-right.svg create mode 100644 common/cinnamon/dark-assets/misc/message.svg create mode 100644 common/cinnamon/dark-assets/misc/modal.svg create mode 100644 common/cinnamon/dark-assets/switch/switch-off.svg create mode 100644 common/cinnamon/dark-assets/switch/switch-on.svg create mode 100644 common/cinnamon/gulpfile.js create mode 100644 common/cinnamon/light-assets/checkbox/checkbox-checked-focused.svg create mode 100644 common/cinnamon/light-assets/checkbox/checkbox-checked.svg create mode 100644 common/cinnamon/light-assets/checkbox/checkbox-unchecked-focused.svg create mode 100644 common/cinnamon/light-assets/checkbox/checkbox-unchecked.svg create mode 100644 common/cinnamon/light-assets/menu/menu-hover.svg create mode 100644 common/cinnamon/light-assets/menu/menu.svg create mode 100644 common/cinnamon/light-assets/menu/submenu-open.svg create mode 100644 common/cinnamon/light-assets/menu/submenu.svg create mode 100644 common/cinnamon/light-assets/misc/calendar-arrow-left-hover.svg create mode 100644 common/cinnamon/light-assets/misc/calendar-arrow-left.svg create mode 100644 common/cinnamon/light-assets/misc/calendar-arrow-right-hover.svg create mode 100644 common/cinnamon/light-assets/misc/calendar-arrow-right.svg create mode 100644 common/cinnamon/light-assets/misc/message.svg create mode 100644 common/cinnamon/light-assets/misc/modal.svg create mode 100644 common/cinnamon/light-assets/switch/switch-off.svg create mode 100644 common/cinnamon/light-assets/switch/switch-on.svg create mode 100644 common/cinnamon/package.json create mode 100644 common/cinnamon/sass/_colors.scss create mode 100644 common/cinnamon/sass/_common.scss create mode 100644 common/cinnamon/sass/_drawing.scss create mode 100644 common/cinnamon/sass/cinnamon.scss diff --git a/common/cinnamon/.nvmrc b/common/cinnamon/.nvmrc new file mode 100644 index 0000000..2bf5ad0 --- /dev/null +++ b/common/cinnamon/.nvmrc @@ -0,0 +1 @@ +stable diff --git a/common/cinnamon/README b/common/cinnamon/README new file mode 100644 index 0000000..f040030 --- /dev/null +++ b/common/cinnamon/README @@ -0,0 +1,19 @@ +This theme uses libsass/gulp to process the sass/*.scss. Never edit any of the .css files manually. + +How to edit this theme: + +1. Install `nodejs` and `npm` + +2. Install `gulp` + + sudo npm install --global gulp + +3. Execute the following from the directory containing `gulpfile.js` + + npm install + +4. Edit the sass/*.scss files + +5. Regenerate the .css files by executing from the directory containing `gulpfile.js` + + gulp diff --git a/common/cinnamon/cinnamon.css b/common/cinnamon/cinnamon.css new file mode 100644 index 0000000..3e3b65b --- /dev/null +++ b/common/cinnamon/cinnamon.css @@ -0,0 +1,1226 @@ +@charset "UTF-8"; +stage { + font-family: Futura Bk bt, sans, Sans-Serif; + font-size: 9pt; + color: #5c616c; } + +.label-shadow { + color: transparent; } + +.popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .sound-button { + min-height: 20px; + padding: 5px 32px; + transition-duration: 0; + border-radius: 2px; + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5c616c; + background-color: #fbfbfc; + border: 1px solid #cfd6e6; } + .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .sound-button:focus { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5c616c; + background-color: #fbfbfc; + border: 1px solid #5294E2; } + .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .sound-button:hover { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5c616c; + background-color: #fbfbfc; + border: 1px solid #5294E2; } + .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .sound-button:hover:focus { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5294E2; + background-color: #fbfbfc; + border: 1px solid #5294E2; } + .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #ffffff; + background-color: #5294E2; + border: 1px solid #5294E2; } + .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: rgba(92, 97, 108, 0.55); + border: 1px solid rgba(207, 214, 230, 0.55); + background-color: rgba(251, 251, 252, 0.55); } + +.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(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.45); + background-color: rgba(0, 0, 0, 0.3); } + .notification-button:hover, .notification-icon-button:hover, .modal-dialog-button-box .modal-dialog-button:hover { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #BAC3CF; + border: 1px solid #5294E2; + background-color: rgba(0, 0, 0, 0.3); } + .notification-button:focus, .notification-icon-button:focus, .modal-dialog-button-box .modal-dialog-button:focus { + color: #5294E2; } + .notification-button:active, .notification-icon-button:active, .modal-dialog-button-box .modal-dialog-button:active { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #ffffff; + border: 1px solid #5294E2; + background-color: #5294E2; } + .notification-button:insensitive, .notification-icon-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #555a62; + border: 1px solid rgba(0, 0, 0, 0.45); + background-color: rgba(0, 0, 0, 0.15); } + +.popup-menu #notification StEntry, #menu-search-entry { + padding: 7px; + caret-size: 1px; + selection-background-color: #5294E2; + selected-color: #ffffff; + transition-duration: 300ms; + border-radius: 20px; + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5c616c; + background-color: #ffffff; + border: 1px solid #cfd6e6; } + .popup-menu #notification StEntry:focus, #menu-search-entry:focus, .popup-menu #notification StEntry:hover, #menu-search-entry:hover { + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5c616c; + background-color: #ffffff; + border: 1px solid #5294E2; } + .popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive { + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: rgba(92, 97, 108, 0.55); + background-color: #fbfbfb; + border-color: 1px solid #e0e4ee; } + .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: #5294E2; + selected-color: #ffffff; + transition-duration: 300ms; + border-radius: 20px; + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #BAC3CF; + background-color: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(0, 0, 0, 0.4); } + .notification StEntry:focus { + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #BAC3CF; + background-color: rgba(0, 0, 0, 0.2); + border: 1px solid #5294E2; } + .notification StEntry:insensitive { + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #555a62; + background-color: rgba(0, 0, 0, 0.1); + border-color: 1px solid rgba(0, 0, 0, 0.4); } + +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(255, 255, 255, 0.1); + border-radius: 8px; } + StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { + border-radius: 4px; + background-color: #b8babf; + border: 0px solid; + margin: 0px; } + StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { + background-color: #c7c9cd; } + StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { + background-color: #5294E2; } + +.popup-slider-menu-item { + -slider-height: 4px; + -slider-background-color: #cfd6e6; + -slider-border-color: transparent; + -slider-active-background-color: #5294E2; + -slider-active-border-color: transparent; + -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; } + +.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("light-assets/checkbox/checkbox-unchecked.svg"); } + +.check-box:focus StBin { + background-image: url("light-assets/checkbox/checkbox-unchecked-focused.svg"); } + +.check-box:checked StBin { + background-image: url("light-assets/checkbox/checkbox-checked.svg"); } + +.check-box:focus:checked StBin { + background-image: url("light-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("light-assets/checkbox/checkbox-unchecked.svg"); } + +.radiobutton:focus StBin { + background-image: url("light-assets/checkbox/checkbox-unchecked-focused.svg"); } + +.radiobutton:checked StBin { + background-image: url("light-assets/checkbox/checkbox-checked.svg"); } + +.radiobutton:focus:checked StBin { + background-image: url("light-assets/checkbox/checkbox-checked-focused.svg"); } + +.toggle-switch { + width: 50px; + height: 20px; + background-size: contain; } + .toggle-switch-us, .toggle-switch-intl { + background-image: url("light-assets/switch/switch-off.svg"); } + .toggle-switch-us:checked, .toggle-switch-intl:checked { + background-image: url("light-assets/switch/switch-on.svg"); } + +.cinnamon-link { + color: #2679db; + text-decoration: underline; } + .cinnamon-link:hover { + color: #5294e2; } + +#Tooltip { + border-radius: l3px; + padding: 5px 12px; + background-color: rgba(42, 44, 51, 0.95); + color: #BAC3CF; + font-size: 1em; + font-weight: normal; + text-align: center; } + +.popup-menu { + color: white; + min-width: 200px; + color: #5c616c; + border-image: url("light-assets/menu/menu.svg") 9 9 9 9; } + .popup-menu .popup-sub-menu { + background-gradient-direction: none; + box-shadow: none; + border-image: url("light-assets/menu/submenu.svg") 9 9 9 9; } + .popup-menu .popup-sub-menu .popup-menu-item:ltr { + padding-right: 0em; } + .popup-menu .popup-sub-menu .popup-menu-item:rtl { + padding-left: 0em; } + .popup-menu .popup-sub-menu StScrollBar { + padding: 4px; } + .popup-menu .popup-sub-menu StScrollBar StBin#trough, .popup-menu .popup-sub-menu StScrollBar StBin#vhandle { + border-width: 0; } + .popup-menu .popup-sub-menu-menu-item:open { + background: none; + box-shadow: none; + border-image: url("light-assets/menu/submenu-open.svg") 9 9 9 9; } + .popup-menu .popup-menu-content { + padding: 1em 0em 1em 0em; } + .popup-menu .popup-menu-item { + padding: 0.4em 1.75em; + spacing: 1em; } + .popup-menu .popup-menu-item:active { + color: #5c616c; + background-color: transparent; + border-image: url("light-assets/menu/menu-hover.svg") 9 9 1 1; } + .popup-menu .popup-menu-item:insensitive { + color: rgba(92, 97, 108, 0.5); + background: none; } + .popup-menu .popup-inactive-menu-item { + color: #5c616c; } + .popup-menu .popup-inactive-menu-item:insensitive { + color: rgba(92, 97, 108, 0.55); } + .popup-menu-icon { + icon-size: 16px; } + +.popup-menu-boxpointer { + -arrow-border-radius: 3px; + -arrow-background-color: transparent; + -arrow-border-width: 1px; + -arrow-border-color: transparent; + -arrow-base: 0; + -arrow-rise: 0; } + +/*Don't know what this does*/ +.popup-combo-menu { + background-color: rgba(0, 0, 0, 0.4); + padding: 1em 0em; + color: red; + border: 1px solid rgba(0, 0, 0, 0.6); + border-radius: 3px; } + +.popup-combobox-item { + spacing: 1em; } + +.popup-separator-menu-item { + height: 2px; + margin: 10px 0px; + background-color: transparent; + border: none; + border-image: url("common-assets/menu-separator.svg") 1 1 1 1; } + +.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-weight: bold; + height: 2.1em; + min-height: 27px; } + #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; } + #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; } + #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 { + color: #ffffff; + font-size: 1em; + padding: 0px; } + +.panel-top { + border-image: url("common-assets/panel/panel-top.svg") 1 1 1 1; } + +.panel-bottom { + border-image: url("common-assets/panel/panel-bottom.svg") 1 1 1 1; } + +.panel-status-button { + border-widht: 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: rgba(42, 44, 51, 0.95); + border: 1px solid rgba(42, 44, 51, 0.95); + color: #BAC3CF; + spacing: 25px; + border-radius: 2px; + font-size: 9pt; + padding: 5px 8px; + -cinnamon-caption-spacing: 4px; } + .window-caption#selected { + background-color: #5294E2; + color: #ffffff; + border: 1px solid #5294E2; + spacing: 25px; } + +.expo-workspaces-name-entry, +.expo-workspaces-name-entry#selected { + spacing: 25px; + border-radius: 2px; + font-size: 9pt; + padding: 5px 8px; + -cinnamon-caption-spacing: 4px; + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #BAC3CF; + background-color: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(0, 0, 0, 0.4); } + .expo-workspaces-name-entry:focus, + .expo-workspaces-name-entry#selected:focus { + border: 1px solid #5294E2; + background-color: #5294E2; + color: #ffffff; + font-style: italic; + transition-duration: 300; + selection-background-color: #ffffff; + selected-color: #5294E2; } + +.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 #5294E2; + background-color: black; + border-radius: 2px; } + +.expo-background { + background-color: #2a2c33; } + +.workspace-thumbnails { + spacing: 14px; } + .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: 200; } + .workspace-add-button:hover { + background-image: url("common-assets/misc/add-workspace-hover.svg"); + transition-duration: 200; } + +.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 #dbdfe3; + border-radius: 2px; + background-color: #ffffff; + 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: 0.4em 1.75em; + spacing-rows: 0px; + spacing-columns: 0px; } + +.calendar-month-label { + color: #5c616c; + 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("light-assets/misc/calendar-arrow-left.svg"); } + .calendar-change-month-back:focus, .calendar-change-month-back:hover { + background-image: url("light-assets/misc/calendar-arrow-left-hover.svg"); } + .calendar-change-month-back:active { + background-image: url("light-assets/misc/calendar-arrow-left.svg"); } + .calendar-change-month-back:rtl { + background-image: url("light-assets/misc/calendar-arrow-right.svg"); } + .calendar-change-month-back:rtl:focus, .calendar-change-month-back:rtl:hover { + background-image: url("light-assets/misc/calendar-arrow-right-hover.svg"); } + .calendar-change-month-back:rtl:active { + background-image: url("light-assets/misc/calendar-arrow-right.svg"); } + +.calendar-change-month-forward { + background-image: url("light-assets/misc/calendar-arrow-right.svg"); } + .calendar-change-month-forward:focus, .calendar-change-month-forward:hover { + background-image: url("light-assets/misc/calendar-arrow-right-hover.svg"); } + .calendar-change-month-forward:active { + background-image: url("light-assets/misc/calendar-arrow-right.svg"); } + .calendar-change-month-forward:rtl { + background-image: url("light-assets/misc/calendar-arrow-left.svg"); } + .calendar-change-month-forward:rtl:focus, .calendar-change-month-forward:rtl:hover { + background-image: url("light-assets/misc/calendar-arrow-left-hover.svg"); } + .calendar-change-month-forward:rtl:active { + background-image: url("light-assets/misc/calendar-arrow-left.svg"); } + +.datemenu-date-label { + padding: 0.4em 1.75em; + font-weight: bold; + text-align: center; + color: #5c616c; + 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(92, 97, 108, 0.85); + margin-top: 1em; + font-size: 70%; } + +.calendar-day { + border-width: 0; + color: rgba(92, 97, 108, 0.8); } + +.calendar-day-top { + border-top-width: 0; } + +.calendar-day-left { + border-left-width: 0; } + +.calendar-nonwork-day { + color: #5c616c; + background-color: transparent; + font-weight: bold; } + +.calendar-today, +.calendar-today:active, +.calendar-today:focus, +.calendar-today:hover { + font-weight: bold; + color: #ffffff; + background-color: #5294E2; + border-width: 0; } + +.calendar-other-month-day { + color: rgba(92, 97, 108, 0.3); + opacity: 1; } + +#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; } + .popup-menu #notification { + color: #5c616c; + border-image: url("light-assets/misc/message.svg") 9 9 9 9; } + #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-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-item-container { + spacing: 8px; } + .switcher-list .item-box { + padding: 8px; + border-radius: 2px; } + .switcher-list .item-box:outlined { + padding: 8px; + border: 1px solid #5294E2; } + .switcher-list .item-box:selected { + color: #ffffff; + background-color: #5294E2; + border: 1px solid #5294E2; } + .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: transparent; + color: #BAC3CF; } + .switcher-arrow:highlighted { + border-color: transparent; + color: #ffffff; } + +.thumbnail-scroll-gradient-left { + background-color: transparent; + border-radius: 24px; + border-radius-topright: 0px; + border-radius-bottomright: 0px; + width: 60px; } + +.thumbnail-scroll-gradient-right { + background-color: transparent; + border-radius: 24px; + border-radius-topleft: 0px; + border-radius-bottomleft: 0px; + width: 60px; } + +.ripple-box { + width: 52px; + height: 52px; + background-image: url("common-assets/misc/corner-ripple-ltr.svg"); + background-size: contain; } + .ripple-box:rtl { + background-image: url("common-assets/misc/corner-ripple-rtl.svg"); } + +.lightbox { + background-color: rgba(0, 0, 0, 0.4); } + +.flashspot { + background-color: white; } + +.modal-dialog { + color: #5c616c; + background-color: rgba(245, 246, 247, 0); + border: none; + border-image: url("light-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("common-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: 20px; + caret-color: #BAC3CF; + selected-color: #ffffff; + selection-background-color: #5294E2; + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #BAC3CF; + background-color: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(0, 0, 0, 0.4); } + .run-dialog-entry:focus { + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #BAC3CF; + background-color: rgba(0, 0, 0, 0.2); + border: 1px solid #5294E2; } + .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: rgba(42, 44, 51, 0.95); + 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(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #BAC3CF; + border: 1px solid rgba(0, 0, 0, 0.45); + background-color: rgba(0, 0, 0, 0.3); } + .keyboard-key:hover { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #BAC3CF; + border: 1px solid #5294E2; + background-color: rgba(0, 0, 0, 0.3); } + .keyboard-key:active, .keyboard-key:checked { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #ffffff; + border: 1px solid #5294E2; + background-color: #5294E2; } + .keyboard-key:grayed { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #555a62; + border: 1px solid rgba(0, 0, 0, 0.45); + background-color: rgba(0, 0, 0, 0.15); } + +.keyboard-subkeys { + color: #BAC3CF; + padding: 5px; + -arrow-border-radius: 2px; + -arrow-background-color: rgba(42, 44, 51, 0.95); + -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: #F5F6F7; + border: 1px solid #dbdfe3; } + +.menu-favorites-button { + padding: 10px; + border: 1px solid transparent; } + .menu-favorites-button:hover { + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5c616c; + background-color: #fbfbfc; + border: 1px solid #5294E2; } + +.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 transparent; } + .menu-application-button:highlighted { + font-weight: bold; } + .menu-application-button-selected { + padding: 7px; + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5c616c; + background-color: #fbfbfc; + border: 1px solid #5294E2; } + .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 transparent; } + .menu-category-button-selected { + padding: 7px; + text-shadow: 0 1px rgba(255, 255, 255, 0); + box-shadow: inset 0 0 rgba(255, 255, 255, 0); + color: #5c616c; + background-color: #fbfbfc; + border: 1px solid #5294E2; } + .menu-category-button-hover { + background-color: red; + border-radius: 2px; } + .menu-category-button-greyed { + padding: 7px; + color: rgba(92, 97, 108, 0.55); + border: 1px solid transparent; } + .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: #5c616c; } + +.menu-search-entry-icon { + icon-size: 1em; + color: #5c616c; } + +/* Context menu (at the moment only for favorites) */ +.info-osd { + text-align: center; + font-weight: bold; + spacing: 1em; + padding: 16px; + color: #ffffff; + 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: #ffffff; + 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: #5294E2; } + +.window-list-box { + spacing: 6px; + padding-left: 10px; } + .panel-bottom .window-list-box { + padding-top: 1px; } + .panel-top .window-list-box { + padding-bottom: 1px; } + +.window-list-item-label { + font-weight: bold; + width: 15em; + min-width: 5px; } + +.window-list-item-box { + font-weight: bold; + background-image: none; + padding-left: 8px; + padding-right: 8px; + transition-duration: 100; + color: rgba(255, 255, 255, 0.6); } + .window-list-item-box:hover { + color: #ffffff; } + .window-list-item-box:active, + .window-list-item-box:checked, + .window-list-item-box:focus { + color: #ffffff; } + .panel-bottom .window-list-item-box:active, + .panel-bottom .window-list-item-box:checked, + .panel-bottom .window-list-item-box:focus { + border-image: url("common-assets/panel/window-list-active-bottom.svg") 3 3 1 3; } + .panel-top .window-list-item-box:active, + .panel-top .window-list-item-box:checked, + .panel-top .window-list-item-box:focus { + border-image: url("common-assets/panel/window-list-active-top.svg") 3 3 3 1; } + +.window-list-item-demands-attention { + background-gradient-start: #F27835; + background-gradient-end: #F27835; } + +.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: 0.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; } + +#workspaceSwitcher { + spacing: 0px; + padding: 3px; } + +.workspace-button { + width: 20px; + height: 10px; + color: #ffffff; + padding: 3px; + padding-top: 4px; + transition-duration: 300; } + .workspace-button:outlined, .workspace-button:outlined:hover { + color: #5294E2; } + .workspace-button:hover { + color: rgba(82, 148, 226, 0.5); } + +#panel-launchers-box { + padding-left: 7px; } + +.panel-launcher { + margin: 1px; + padding: 1px; + transition-duration: 200; } + .panel-launcher:hover { + background-gradient-direction: none; + border: 0px solid #5294E2; } + .panel-bottom .panel-launcher:hover { + border-bottom-width: 1px; } + .panel-top .panel-launcher:hover { + border-top-width: 1px; } + +#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: #ffffff; + text-shadow: none; + transition-duration: 100; } + .applet-box:hover { + color: #ffffff; + background-color: #5294E2; } + +.applet-label { + font-weight: bold; + color: #ffffff; } + .applet-label:hover, .applet-box:hover > .applet-label { + color: #ffffff; + text-shadow: none; } + +.applet-icon { + color: #ffffff; + icon-size: 22px; } + .applet-icon:hover, .applet-box:hover > .applet-icon { + color: #ffffff; + text-shadow: none; } + +.user-icon { + width: 32px; + height: 32px; + background-color: transparent; + border: none; + border-radius: 0; } + +.user-label { + color: #5c616c; + font-size: 1em; + font-weight: bold; + margin: 0px; } + +.desklet { + color: #BAC3CF; } + .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-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-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 #5294E2; + background-color: rgba(82, 148, 226, 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: 0.5em 1em; } + +.notification-applet-container { + max-height: 100px; } + +.tile-preview, .tile-preview.snap, +.tile-hud, .tile-hud.snap { + background-color: rgba(82, 148, 226, 0.3); + border: 1px solid #5294E2; } + +.xkcd-box { + padding: 6px; + border: 0px; + background-color: transparent; + border-radius: 0px; } diff --git a/common/cinnamon/common-assets/menu/menu-separator.svg b/common/cinnamon/common-assets/menu/menu-separator.svg new file mode 100644 index 0000000..4962ebc --- /dev/null +++ b/common/cinnamon/common-assets/menu/menu-separator.svg @@ -0,0 +1,60 @@ + + + + + + + + + + image/svg+xml + + + + + + + diff --git a/common/cinnamon/common-assets/misc/add-workspace-hover.svg b/common/cinnamon/common-assets/misc/add-workspace-hover.svg new file mode 100644 index 0000000..0cb3f8a --- /dev/null +++ b/common/cinnamon/common-assets/misc/add-workspace-hover.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/common/cinnamon/common-assets/misc/add-workspace.svg b/common/cinnamon/common-assets/misc/add-workspace.svg new file mode 100644 index 0000000..d7ce9d5 --- /dev/null +++ b/common/cinnamon/common-assets/misc/add-workspace.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/common/cinnamon/common-assets/misc/bg.svg b/common/cinnamon/common-assets/misc/bg.svg new file mode 100644 index 0000000..cf27958 --- /dev/null +++ b/common/cinnamon/common-assets/misc/bg.svg @@ -0,0 +1,127 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/common-assets/misc/button-box.svg b/common/cinnamon/common-assets/misc/button-box.svg new file mode 100644 index 0000000..7435084 --- /dev/null +++ b/common/cinnamon/common-assets/misc/button-box.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/common/cinnamon/common-assets/misc/close-active.svg b/common/cinnamon/common-assets/misc/close-active.svg new file mode 100644 index 0000000..95822bf --- /dev/null +++ b/common/cinnamon/common-assets/misc/close-active.svg @@ -0,0 +1,100 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/common/cinnamon/common-assets/misc/close-hover.svg b/common/cinnamon/common-assets/misc/close-hover.svg new file mode 100644 index 0000000..7b52140 --- /dev/null +++ b/common/cinnamon/common-assets/misc/close-hover.svg @@ -0,0 +1,100 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/common/cinnamon/common-assets/misc/close.svg b/common/cinnamon/common-assets/misc/close.svg new file mode 100644 index 0000000..e221a33 --- /dev/null +++ b/common/cinnamon/common-assets/misc/close.svg @@ -0,0 +1,100 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/common/cinnamon/common-assets/misc/corner-ripple-ltr.svg b/common/cinnamon/common-assets/misc/corner-ripple-ltr.svg new file mode 100644 index 0000000..357a544 --- /dev/null +++ b/common/cinnamon/common-assets/misc/corner-ripple-ltr.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/common/cinnamon/common-assets/misc/corner-ripple-rtl.svg b/common/cinnamon/common-assets/misc/corner-ripple-rtl.svg new file mode 100644 index 0000000..57176d2 --- /dev/null +++ b/common/cinnamon/common-assets/misc/corner-ripple-rtl.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/common/cinnamon/common-assets/misc/desklet-header.svg b/common/cinnamon/common-assets/misc/desklet-header.svg new file mode 100644 index 0000000..fd6b6df --- /dev/null +++ b/common/cinnamon/common-assets/misc/desklet-header.svg @@ -0,0 +1,158 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/common-assets/misc/desklet.svg b/common/cinnamon/common-assets/misc/desklet.svg new file mode 100644 index 0000000..8445c61 --- /dev/null +++ b/common/cinnamon/common-assets/misc/desklet.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/common-assets/misc/osd.svg b/common/cinnamon/common-assets/misc/osd.svg new file mode 100644 index 0000000..e7a4202 --- /dev/null +++ b/common/cinnamon/common-assets/misc/osd.svg @@ -0,0 +1,127 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/common-assets/misc/overview-hover.png b/common/cinnamon/common-assets/misc/overview-hover.png new file mode 100644 index 0000000..75673f9 Binary files /dev/null and b/common/cinnamon/common-assets/misc/overview-hover.png differ diff --git a/common/cinnamon/common-assets/misc/overview.png b/common/cinnamon/common-assets/misc/overview.png new file mode 100644 index 0000000..9eb4f87 Binary files /dev/null and b/common/cinnamon/common-assets/misc/overview.png differ diff --git a/common/cinnamon/common-assets/misc/trash-icon.svg b/common/cinnamon/common-assets/misc/trash-icon.svg new file mode 100644 index 0000000..61097dd --- /dev/null +++ b/common/cinnamon/common-assets/misc/trash-icon.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/common/cinnamon/common-assets/panel/activities-active.svg b/common/cinnamon/common-assets/panel/activities-active.svg new file mode 100644 index 0000000..6986f5c --- /dev/null +++ b/common/cinnamon/common-assets/panel/activities-active.svg @@ -0,0 +1,158 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/common/cinnamon/common-assets/panel/activities.svg b/common/cinnamon/common-assets/panel/activities.svg new file mode 100644 index 0000000..b4a4b0d --- /dev/null +++ b/common/cinnamon/common-assets/panel/activities.svg @@ -0,0 +1,158 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/common/cinnamon/common-assets/panel/panel-bottom.svg b/common/cinnamon/common-assets/panel/panel-bottom.svg new file mode 100644 index 0000000..2e83f1d --- /dev/null +++ b/common/cinnamon/common-assets/panel/panel-bottom.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/common/cinnamon/common-assets/panel/panel-top.svg b/common/cinnamon/common-assets/panel/panel-top.svg new file mode 100644 index 0000000..106ffac --- /dev/null +++ b/common/cinnamon/common-assets/panel/panel-top.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/common/cinnamon/common-assets/panel/window-list-active-bottom.svg b/common/cinnamon/common-assets/panel/window-list-active-bottom.svg new file mode 100644 index 0000000..ce7d5d7 --- /dev/null +++ b/common/cinnamon/common-assets/panel/window-list-active-bottom.svg @@ -0,0 +1,142 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/common/cinnamon/common-assets/panel/window-list-active-top.svg b/common/cinnamon/common-assets/panel/window-list-active-top.svg new file mode 100644 index 0000000..d2b8f15 --- /dev/null +++ b/common/cinnamon/common-assets/panel/window-list-active-top.svg @@ -0,0 +1,142 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/common/cinnamon/dark-assets/checkbox/checkbox-checked-focused.svg b/common/cinnamon/dark-assets/checkbox/checkbox-checked-focused.svg new file mode 100644 index 0000000..d1b59ee --- /dev/null +++ b/common/cinnamon/dark-assets/checkbox/checkbox-checked-focused.svg @@ -0,0 +1,195 @@ + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/checkbox/checkbox-checked.svg b/common/cinnamon/dark-assets/checkbox/checkbox-checked.svg new file mode 100644 index 0000000..fee35ec --- /dev/null +++ b/common/cinnamon/dark-assets/checkbox/checkbox-checked.svg @@ -0,0 +1,195 @@ + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/checkbox/checkbox-unchecked-focused.svg b/common/cinnamon/dark-assets/checkbox/checkbox-unchecked-focused.svg new file mode 100644 index 0000000..513b1ad --- /dev/null +++ b/common/cinnamon/dark-assets/checkbox/checkbox-unchecked-focused.svg @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/checkbox/checkbox-unchecked.svg b/common/cinnamon/dark-assets/checkbox/checkbox-unchecked.svg new file mode 100644 index 0000000..1a34771 --- /dev/null +++ b/common/cinnamon/dark-assets/checkbox/checkbox-unchecked.svg @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/menu/menu-hover.svg b/common/cinnamon/dark-assets/menu/menu-hover.svg new file mode 100644 index 0000000..a023a8e --- /dev/null +++ b/common/cinnamon/dark-assets/menu/menu-hover.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/menu/menu.svg b/common/cinnamon/dark-assets/menu/menu.svg new file mode 100644 index 0000000..d6a9fea --- /dev/null +++ b/common/cinnamon/dark-assets/menu/menu.svg @@ -0,0 +1,127 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/menu/submenu-open.svg b/common/cinnamon/dark-assets/menu/submenu-open.svg new file mode 100644 index 0000000..bd817b0 --- /dev/null +++ b/common/cinnamon/dark-assets/menu/submenu-open.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/menu/submenu.svg b/common/cinnamon/dark-assets/menu/submenu.svg new file mode 100644 index 0000000..ebab963 --- /dev/null +++ b/common/cinnamon/dark-assets/menu/submenu.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/misc/calendar-arrow-left-hover.svg b/common/cinnamon/dark-assets/misc/calendar-arrow-left-hover.svg new file mode 100644 index 0000000..7f292f8 --- /dev/null +++ b/common/cinnamon/dark-assets/misc/calendar-arrow-left-hover.svg @@ -0,0 +1,169 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/misc/calendar-arrow-left.svg b/common/cinnamon/dark-assets/misc/calendar-arrow-left.svg new file mode 100644 index 0000000..5602eff --- /dev/null +++ b/common/cinnamon/dark-assets/misc/calendar-arrow-left.svg @@ -0,0 +1,169 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/misc/calendar-arrow-right-hover.svg b/common/cinnamon/dark-assets/misc/calendar-arrow-right-hover.svg new file mode 100644 index 0000000..beadead --- /dev/null +++ b/common/cinnamon/dark-assets/misc/calendar-arrow-right-hover.svg @@ -0,0 +1,171 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/misc/calendar-arrow-right.svg b/common/cinnamon/dark-assets/misc/calendar-arrow-right.svg new file mode 100644 index 0000000..734b53b --- /dev/null +++ b/common/cinnamon/dark-assets/misc/calendar-arrow-right.svg @@ -0,0 +1,171 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/misc/message.svg b/common/cinnamon/dark-assets/misc/message.svg new file mode 100644 index 0000000..2fb2d4f --- /dev/null +++ b/common/cinnamon/dark-assets/misc/message.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/misc/modal.svg b/common/cinnamon/dark-assets/misc/modal.svg new file mode 100644 index 0000000..4f5a61b --- /dev/null +++ b/common/cinnamon/dark-assets/misc/modal.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/switch/switch-off.svg b/common/cinnamon/dark-assets/switch/switch-off.svg new file mode 100644 index 0000000..bfd52bd --- /dev/null +++ b/common/cinnamon/dark-assets/switch/switch-off.svg @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/dark-assets/switch/switch-on.svg b/common/cinnamon/dark-assets/switch/switch-on.svg new file mode 100644 index 0000000..a2dd168 --- /dev/null +++ b/common/cinnamon/dark-assets/switch/switch-on.svg @@ -0,0 +1,220 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/gulpfile.js b/common/cinnamon/gulpfile.js new file mode 100644 index 0000000..230ac9d --- /dev/null +++ b/common/cinnamon/gulpfile.js @@ -0,0 +1,18 @@ +var gulp = require("gulp"); +var sass = require("gulp-sass"); +var filter = require('gulp-filter'); + +gulp.task('sass', function () { + return gulp.src('sass/*.scss') + .pipe(sass({ + outputStyle: 'nested', + precision: 5, + onError: function (err) { + notify().write(err); + } + })) + .pipe(gulp.dest('.')) +}); + + +gulp.task('default', ['sass']); diff --git a/common/cinnamon/light-assets/checkbox/checkbox-checked-focused.svg b/common/cinnamon/light-assets/checkbox/checkbox-checked-focused.svg new file mode 100644 index 0000000..983e7f8 --- /dev/null +++ b/common/cinnamon/light-assets/checkbox/checkbox-checked-focused.svg @@ -0,0 +1,223 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/checkbox/checkbox-checked.svg b/common/cinnamon/light-assets/checkbox/checkbox-checked.svg new file mode 100644 index 0000000..e8da8e6 --- /dev/null +++ b/common/cinnamon/light-assets/checkbox/checkbox-checked.svg @@ -0,0 +1,223 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/checkbox/checkbox-unchecked-focused.svg b/common/cinnamon/light-assets/checkbox/checkbox-unchecked-focused.svg new file mode 100644 index 0000000..6c2f719 --- /dev/null +++ b/common/cinnamon/light-assets/checkbox/checkbox-unchecked-focused.svg @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/checkbox/checkbox-unchecked.svg b/common/cinnamon/light-assets/checkbox/checkbox-unchecked.svg new file mode 100644 index 0000000..d50e0e2 --- /dev/null +++ b/common/cinnamon/light-assets/checkbox/checkbox-unchecked.svg @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/menu/menu-hover.svg b/common/cinnamon/light-assets/menu/menu-hover.svg new file mode 100644 index 0000000..938245a --- /dev/null +++ b/common/cinnamon/light-assets/menu/menu-hover.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/menu/menu.svg b/common/cinnamon/light-assets/menu/menu.svg new file mode 100644 index 0000000..5ae7466 --- /dev/null +++ b/common/cinnamon/light-assets/menu/menu.svg @@ -0,0 +1,127 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/menu/submenu-open.svg b/common/cinnamon/light-assets/menu/submenu-open.svg new file mode 100644 index 0000000..8062443 --- /dev/null +++ b/common/cinnamon/light-assets/menu/submenu-open.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/menu/submenu.svg b/common/cinnamon/light-assets/menu/submenu.svg new file mode 100644 index 0000000..766c82e --- /dev/null +++ b/common/cinnamon/light-assets/menu/submenu.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/misc/calendar-arrow-left-hover.svg b/common/cinnamon/light-assets/misc/calendar-arrow-left-hover.svg new file mode 100644 index 0000000..7f292f8 --- /dev/null +++ b/common/cinnamon/light-assets/misc/calendar-arrow-left-hover.svg @@ -0,0 +1,169 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/misc/calendar-arrow-left.svg b/common/cinnamon/light-assets/misc/calendar-arrow-left.svg new file mode 100644 index 0000000..5602eff --- /dev/null +++ b/common/cinnamon/light-assets/misc/calendar-arrow-left.svg @@ -0,0 +1,169 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/misc/calendar-arrow-right-hover.svg b/common/cinnamon/light-assets/misc/calendar-arrow-right-hover.svg new file mode 100644 index 0000000..beadead --- /dev/null +++ b/common/cinnamon/light-assets/misc/calendar-arrow-right-hover.svg @@ -0,0 +1,171 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/misc/calendar-arrow-right.svg b/common/cinnamon/light-assets/misc/calendar-arrow-right.svg new file mode 100644 index 0000000..734b53b --- /dev/null +++ b/common/cinnamon/light-assets/misc/calendar-arrow-right.svg @@ -0,0 +1,171 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/misc/message.svg b/common/cinnamon/light-assets/misc/message.svg new file mode 100644 index 0000000..a1f8615 --- /dev/null +++ b/common/cinnamon/light-assets/misc/message.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/common/cinnamon/light-assets/misc/modal.svg b/common/cinnamon/light-assets/misc/modal.svg new file mode 100644 index 0000000..b61f537 --- /dev/null +++ b/common/cinnamon/light-assets/misc/modal.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/switch/switch-off.svg b/common/cinnamon/light-assets/switch/switch-off.svg new file mode 100644 index 0000000..96749e2 --- /dev/null +++ b/common/cinnamon/light-assets/switch/switch-off.svg @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/light-assets/switch/switch-on.svg b/common/cinnamon/light-assets/switch/switch-on.svg new file mode 100644 index 0000000..0203bbb --- /dev/null +++ b/common/cinnamon/light-assets/switch/switch-on.svg @@ -0,0 +1,220 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/common/cinnamon/package.json b/common/cinnamon/package.json new file mode 100644 index 0000000..b08961b --- /dev/null +++ b/common/cinnamon/package.json @@ -0,0 +1,7 @@ +{ + "devDependencies": { + "gulp": "~3.9.0", + "gulp-filter": "~2.0.2", + "gulp-sass": "~2.0.4" + } +} diff --git a/common/cinnamon/sass/_colors.scss b/common/cinnamon/sass/_colors.scss new file mode 100644 index 0000000..9c51858 --- /dev/null +++ b/common/cinnamon/sass/_colors.scss @@ -0,0 +1,90 @@ +// When color definition differs for dark and light variant, +// it gets @if ed depending on $variant + + +$base_color: if($variant =='light', #ffffff, #383C45); +$text_color: if($variant == 'light', #5c616c, #D3DAE3); +$bg_color: if($variant =='light', #F5F6F7, #444852); +$fg_color: if($variant =='light', #5c616c, #D3DAE3); + +$selected_fg_color: #ffffff; +$selected_bg_color: #5294E2; +$selected_borders_color: darken($selected_bg_color, 20%); +$borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,10%)); + +$link_color: if($variant == 'light', darken($selected_bg_color,10%), + lighten($selected_bg_color,20%)); +$link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), + lighten($selected_bg_color,10%)); + +$selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); +$warning_color: #F27835; +$error_color: #FC4138; +$success_color: #73d216; +$destructive_color: #F04A50; +$suggested_color: #4DADD4; + +//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%)); + + +$entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); +$entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); + +$button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); +$button_border: $entry_border; + +$header_bg: red; +@if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); } +@if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; } +@if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343b, 0.03); } +@if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343b; } + +$header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); + +$header_border: if($variant == 'light', darken($header_bg, 7%), darken($header_bg, 5%)); + +$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: if($transparency == 'true', transparentize(#3c4049, 0.05), #3c4049); +$dark_sidebar_fg: #BAC3CF; +$dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 10%)); + +$osd_fg_color: $dark_sidebar_fg; +$osd_bg_color: darken($dark_sidebar_bg, 8%); + +$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: darken($osd_bg_color, 4.7%); +$panel_fg: $osd_fg_color; + +//WM Buttons + +// Close +$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f37076, #e45e65); +$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f79da1, #f48085); +$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #ef4048, #e6262f); + +$wm_icon_close_bg: $selected_fg_color; +$wm_icon_close_hover_bg: $selected_fg_color; +$wm_icon_close_active_bg: $selected_fg_color; + +// Minimize, Maximize +$wm_button_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #272c32); +$wm_button_unfocused_bg: if($variant == 'light' and $darker == 'false', #f6f7f8, #2a3035); +$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #272c32); +$wm_button_active_bg: $selected_bg_color; + +$wm_button_border: if($variant == 'light' and $darker == 'false', #d8dae0, #191C21); +$wm_button_unfocused_border: if($variant == 'light' and $darker == 'false', #dddee2, #1F2328); +$wm_button_hover_border: $selected_bg_color; +$wm_button_active_border: $selected_bg_color; + +$wm_icon_bg: if($variant == 'light' and $darker == 'false', #8d93a4, #939ca8); +$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #b8bcc7, #686f78); +$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #70788d, #afb8c5); +$wm_icon_active_bg: $selected_fg_color; diff --git a/common/cinnamon/sass/_common.scss b/common/cinnamon/sass/_common.scss new file mode 100644 index 0000000..6f3d5ad --- /dev/null +++ b/common/cinnamon/sass/_common.scss @@ -0,0 +1,1483 @@ +$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); + +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; + 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: 20px; + + @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: 20px; + + @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: 4px; + 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; } + } +} + +// +// Slider +// +.popup-slider-menu-item { + -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; +} + +// +// 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; + + &-us, &-intl { + background-image: url("#{$asset_path}/switch/switch-off.svg"); + + &:checked { background-image: url("#{$asset_path}/switch/switch-on.svg"); } + } +} + +// +// Links +// +.cinnamon-link { + color: $link_color; + text-decoration: underline; + + &:hover { color: lighten($link_color,10%); } +} + +// +// Tooltip +// +#Tooltip { + border-radius: l3px; + padding: 5px 12px; + background-color: $osd_bg_color; + color: $osd_fg_color; + font-size: 1em; + font-weight: normal; + text-align: center; +} + +// +// Popvers/Menus +// +.popup-menu { + color: white; + min-width: 200px; + color: $fg_color; + border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9; + + .popup-sub-menu { + background-gradient-direction: none; + box-shadow: none; + border-image: url("#{$asset_path}/menu/submenu.svg") 9 9 9 9; + + .popup-menu-item:ltr { padding-right: 0em; } + .popup-menu-item:rtl { padding-left: 0em; } + + StScrollBar { + padding: 4px; + StBin#trough, StBin#vhandle { border-width: 0; } + } + + &-menu-item:open { + background: none; + box-shadow: none; + border-image: url("#{$asset_path}/menu/submenu-open.svg") 9 9 9 9; + } + } + + .popup-menu-content { padding: 1em 0em 1em 0em; } + .popup-menu-item { + padding: .4em 1.75em; + spacing: 1em; + + &:active { + color: $fg_color; + background-color: transparent; + border-image: url("#{$asset_path}/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; } + } + + &-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; +} + +/*Don't know what this does*/ +.popup-combo-menu { + background-color: rgba(0,0,0,0.4); + padding: 1em 0em; + color: red; + border: 1px solid rgba(0,0,0,0.6); + border-radius: 3px; +} +.popup-image-menu-item {} + +.popup-combobox-item { spacing: 1em; } + +.popup-separator-menu-item { + height: 2px; //not really the whole box + margin: 10px 0px; + background-color: transparent; + border: none; + border-image: url("common-assets/menu-separator.svg") 1 1 1 1; +} + +.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-weight: bold; + height: 2.1em; + min-height: 27px; + + &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; } + } + + &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; } + } + + &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 { + + &-top, &-bottom { + color: $selected_fg_color; + font-size: 1em; + padding: 0px; + } + + &-top { border-image: url('common-assets/panel/panel-top.svg') 1 1 1 1; } + &-bottom { border-image: url('common-assets/panel/panel-bottom.svg') 1 1 1 1; } + + &-status-button { + border-widht: 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 { + spacing: 25px; + 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: 14px; + + &-background, &-background:rtl { padding: 8px; } + } + + &-add-button { + background-image: url("common-assets/misc/add-workspace.svg"); + height: 200px; + width: 35px; + transition-duration: 200; + + &:hover { + background-image: url("common-assets/misc/add-workspace-hover.svg"); + transition-duration: 200; + } + } + &-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("#{$asset_path}/misc/calendar-arrow-left.svg"); + + &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } + + &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } + + &:rtl { + background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); + + &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } + + &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } + } +} + +//arrow forward +.calendar-change-month-forward { + background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); + + &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } + + &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } + + &:rtl { + background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); + + &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } + + &:active { background-image: url("#{$asset_path}/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; +} + +// +// 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; + + .popup-menu & { + color: $fg_color; + border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9; + + .notification-button, .notification-icon-button { @extend %button; } + + 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; } + + &-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; + + &-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: 1px 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: $selected_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: 52px; + height: 52px; + background-image: url("common-assets/misc/corner-ripple-ltr.svg"); + background-size: contain; + + &:rtl { background-image: url("common-assets/misc/corner-ripple-rtl.svg"); } +} + +// +// 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("common-assets/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: 20px; + 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 { @include 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; + @include 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; + @include 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: $selected_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: $selected_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; + } +} + +// +// Window list (windowList.js) +// +.window-list { + + &-box { + spacing: 6px; + padding-left: 10px; + + .panel-bottom & { padding-top: 1px; } + .panel-top & { padding-bottom: 1px; } + } + + &-item-label { + font-weight: bold; + width: 15em; + min-width: 5px; + } + + &-item-box { + font-weight: bold; + background-image: none; + padding-left: 8px; + padding-right: 8px; + transition-duration: 100; + color: transparentize($selected_fg_color, 0.4); + + &:hover {color: $selected_fg_color;} + + &:active, + &:checked, + &:focus { + color: $selected_fg_color; + + .panel-bottom & { border-image: url("common-assets/panel/window-list-active-bottom.svg") 3 3 1 3; } + + .panel-top & { border-image: url("common-assets/panel/window-list-active-top.svg") 3 3 3 1; } + } + } + + &-item-demands-attention { + background-gradient-start: $warning_color; + background-gradient-end: $warning_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; } + +// +// Workspace Switcher applet (workspaceSwitcher.js) +// +#workspaceSwitcher { + spacing: 0px; + padding: 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) } +} + +// +// Panel Launchers Applet (panelLaunchers.js) +// +#panel-launchers-box { + padding-left: 7px; +} + +.panel-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; } + } +} + +// +// 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: $selected_fg_color; + text-shadow: none; + transition-duration: 100; + + &:hover { + color: $selected_fg_color; + background-color: $selected_bg_color; + } + } + + &-label { + font-weight: bold; + color: $selected_fg_color; + + &:hover, .applet-box:hover > & { + color: $selected_fg_color; + text-shadow: none; + } + } + + &-icon { + color: $selected_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; + + &-with-borders { + border-image: url("common-assets/misc/bg.svg") 9 9 9 9; + color: $osd_fg_color; + padding: 12px; + padding-bottom: 16px; + } + &-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; + } + &-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/common/cinnamon/sass/_drawing.scss b/common/cinnamon/sass/_drawing.scss new file mode 100644 index 0000000..03b9f15 --- /dev/null +++ b/common/cinnamon/sass/_drawing.scss @@ -0,0 +1,157 @@ +// 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; + box-shadow: inset 0 0 transparentize($base_color, 1); + + @if $t==normal { + color: $text_color; + background-color: $entry_bg; + border: 1px solid $entry_border; + } + + @if $t==focus { + color: $fg_color; + background-color: $entry_bg; + border: 1px solid $selected_bg_color; + } + + @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%); + } + + @if $t==osd { + color: $osd_fg_color; + background-color: transparentize(black, 0.8); + border: 1px solid transparentize(black, 0.6); + } + + @if $t==osd-focus { + color: $osd_fg_color; + background-color: transparentize(black, 0.8); + border: 1px solid $selected_bg_color; + } + + @if $t==osd-insensitive { + color: $osd_insensitive_fg_color; + background-color: transparentize(black, 0.9); + border-color: 1px solid transparentize(black, 0.6); + } +} + +// Buttons + +@mixin button($t) { +// +// Button drawing function +// + //@extend %reset_style; + + text-shadow: 0 1px transparentize($base_color, 1); + box-shadow: inset 0 0 transparentize($base_color, 1); + + @if $t==normal { + // + // normal button + // + color: $fg_color; + background-color: $button_bg; + border: 1px solid $button_border; + } + + @else if $t==focus { + // + // focused button + // + color: $fg_color; + background-color: $button_bg; + border: 1px solid $selected_bg_color; + } + + @else if $t==focus-hover { + // + // focused button + // + color: $selected_bg_color; + background-color: $button_bg; + border: 1px solid $selected_bg_color; + } + + @else if $t==hover { + // + // hovered button + // + color: $fg_color; + background-color: $button_bg; + border: 1px solid $selected_bg_color; + } + + @else if $t==active { + // + // pushed button + // + color: $selected_fg_color; + background-color: $selected_bg_color; + border: 1px solid $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); + } + + @else if $t==osd { + // + // normal osd button + // + color: $osd_fg_color; + border: 1px solid transparentize(black, 0.55); + background-color: transparentize(black, 0.7); + } + + @else if $t==osd-hover { + // + // active osd button + // + color: $osd_fg_color; + border: 1px solid $selected_bg_color; + background-color: transparentize(black, 0.7); + } + + @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 transparentize(black, 0.55); + background-color: transparentize(black, 0.85); + } +} diff --git a/common/cinnamon/sass/cinnamon.scss b/common/cinnamon/sass/cinnamon.scss new file mode 100644 index 0000000..674f742 --- /dev/null +++ b/common/cinnamon/sass/cinnamon.scss @@ -0,0 +1,7 @@ +$variant: 'light'; +$transparency: 'true'; +$darker: 'false'; + +@import "_colors"; //use gtk colors +@import "_drawing"; +@import "_common"; -- cgit v1.2.3