diff --git a/cinnamon-shell/meson.build b/cinnamon-shell/meson.build index cd8e969851..267f788a77 100644 --- a/cinnamon-shell/meson.build +++ b/cinnamon-shell/meson.build @@ -1,5 +1,7 @@ +cinnamonshell_default_theme_dir = join_paths(get_option('datadir'), 'themes') +cinnamonshell_alt_themes_dir = cinnamonshell_default_theme_dir flavours = [] -foreach flavour: ['default', 'dark', 'cinnamon', 'cinnamon-dark'] +foreach flavour: ['default', 'dark'] if not get_option(flavour) message('skip flavour ' + flavour) continue diff --git a/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-checked-focused.svg b/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-checked-focused.svg new file mode 100644 index 0000000000..fd7cdd51d2 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-checked-focused.svg @@ -0,0 +1,4 @@ + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-checked.svg b/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-checked.svg new file mode 100644 index 0000000000..b050efa64b --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-checked.svg @@ -0,0 +1,4 @@ + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-unchecked-focused.svg b/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-unchecked-focused.svg new file mode 100644 index 0000000000..eef68cb96a --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-unchecked-focused.svg @@ -0,0 +1,3 @@ + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-unchecked.svg b/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-unchecked.svg new file mode 100644 index 0000000000..26959f2bcf --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/checkbox/checkbox-unchecked.svg @@ -0,0 +1,3 @@ + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/checkbox/radio-checked.svg b/cinnamon-shell/src/assets/colorable-assets/checkbox/radio-checked.svg new file mode 100644 index 0000000000..7354c7cbf8 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/checkbox/radio-checked.svg @@ -0,0 +1,4 @@ + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/checkbox/radio-unchecked.svg b/cinnamon-shell/src/assets/colorable-assets/checkbox/radio-unchecked.svg new file mode 100644 index 0000000000..85fee2ce33 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/checkbox/radio-unchecked.svg @@ -0,0 +1,3 @@ + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/menu/menu-hover.svg b/cinnamon-shell/src/assets/colorable-assets/menu/menu-hover.svg new file mode 100644 index 0000000000..abd9d106ea --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/menu/menu-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/menu/menu.svg b/cinnamon-shell/src/assets/colorable-assets/menu/menu.svg new file mode 100644 index 0000000000..c2a4173193 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/menu/menu.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/menu/submenu.svg b/cinnamon-shell/src/assets/colorable-assets/menu/submenu.svg new file mode 100644 index 0000000000..f31c8483a6 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/menu/submenu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/misc/button-box.svg b/cinnamon-shell/src/assets/colorable-assets/misc/button-box.svg new file mode 100644 index 0000000000..1b87dca0a4 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/misc/button-box.svg @@ -0,0 +1,3 @@ + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/misc/close-active.svg b/cinnamon-shell/src/assets/colorable-assets/misc/close-active.svg new file mode 100644 index 0000000000..620be1a776 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/misc/close-active.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/misc/close-hover.svg b/cinnamon-shell/src/assets/colorable-assets/misc/close-hover.svg new file mode 100644 index 0000000000..d43e7778d5 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/misc/close-hover.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/misc/close.svg b/cinnamon-shell/src/assets/colorable-assets/misc/close.svg new file mode 100644 index 0000000000..fba3d31fa2 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/misc/close.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/misc/message.svg b/cinnamon-shell/src/assets/colorable-assets/misc/message.svg new file mode 100644 index 0000000000..b576ed89c4 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/misc/message.svg @@ -0,0 +1,4 @@ + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/misc/modal.svg b/cinnamon-shell/src/assets/colorable-assets/misc/modal.svg new file mode 100644 index 0000000000..a865255a1f --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/misc/modal.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/switch/switch-off.svg b/cinnamon-shell/src/assets/colorable-assets/switch/switch-off.svg new file mode 100644 index 0000000000..68e3074a53 --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/switch/switch-off.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/cinnamon-shell/src/assets/colorable-assets/switch/switch-on.svg b/cinnamon-shell/src/assets/colorable-assets/switch/switch-on.svg new file mode 100644 index 0000000000..a246f8b87c --- /dev/null +++ b/cinnamon-shell/src/assets/colorable-assets/switch/switch-on.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/menu/menu-separator.svg b/cinnamon-shell/src/assets/common-assets/menu/menu-separator.svg new file mode 100644 index 0000000000..3f6b05f3b6 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/menu/menu-separator.svg @@ -0,0 +1,2 @@ + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/add-workspace-active.svg b/cinnamon-shell/src/assets/common-assets/misc/add-workspace-active.svg new file mode 100644 index 0000000000..1acb6f528d --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/add-workspace-active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/add-workspace-hover.svg b/cinnamon-shell/src/assets/common-assets/misc/add-workspace-hover.svg new file mode 100644 index 0000000000..07c4a9c9e0 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/add-workspace-hover.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/add-workspace.svg b/cinnamon-shell/src/assets/common-assets/misc/add-workspace.svg new file mode 100644 index 0000000000..3d9729bba2 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/add-workspace.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/bg.svg b/cinnamon-shell/src/assets/common-assets/misc/bg.svg new file mode 100644 index 0000000000..63cdd3bc73 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/bg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-left-hover.svg b/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-left-hover.svg new file mode 100644 index 0000000000..4e4c2029c6 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-left-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-left.svg b/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-left.svg new file mode 100644 index 0000000000..473c322eff --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-right-hover.svg b/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-right-hover.svg new file mode 100644 index 0000000000..47b18a6e3c --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-right-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-right.svg b/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-right.svg new file mode 100644 index 0000000000..6c6eb72df5 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/calendar-arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/corner-ripple.svg b/cinnamon-shell/src/assets/common-assets/misc/corner-ripple.svg new file mode 100644 index 0000000000..60af6dfbe8 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/corner-ripple.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/corner-ripple.svg.svg b/cinnamon-shell/src/assets/common-assets/misc/corner-ripple.svg.svg new file mode 100644 index 0000000000..a608c6d451 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/corner-ripple.svg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/desklet-header.svg b/cinnamon-shell/src/assets/common-assets/misc/desklet-header.svg new file mode 100644 index 0000000000..a6e1054c71 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/desklet-header.svg @@ -0,0 +1,158 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/desklet.svg b/cinnamon-shell/src/assets/common-assets/misc/desklet.svg new file mode 100644 index 0000000000..8445c613f0 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/desklet.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/osd.svg b/cinnamon-shell/src/assets/common-assets/misc/osd.svg new file mode 100644 index 0000000000..df41a00ef2 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/osd.svg @@ -0,0 +1,127 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/misc/overview-hover.png b/cinnamon-shell/src/assets/common-assets/misc/overview-hover.png new file mode 100644 index 0000000000..75673f9cf4 Binary files /dev/null and b/cinnamon-shell/src/assets/common-assets/misc/overview-hover.png differ diff --git a/cinnamon-shell/src/assets/common-assets/misc/overview.png b/cinnamon-shell/src/assets/common-assets/misc/overview.png new file mode 100644 index 0000000000..9eb4f87f4e Binary files /dev/null and b/cinnamon-shell/src/assets/common-assets/misc/overview.png differ diff --git a/cinnamon-shell/src/assets/common-assets/misc/trash-icon.svg b/cinnamon-shell/src/assets/common-assets/misc/trash-icon.svg new file mode 100644 index 0000000000..61097ddb03 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/misc/trash-icon.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/panel/activities-active.svg b/cinnamon-shell/src/assets/common-assets/panel/activities-active.svg new file mode 100644 index 0000000000..6f4fd610e0 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/panel/activities-active.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/panel/activities.svg b/cinnamon-shell/src/assets/common-assets/panel/activities.svg new file mode 100644 index 0000000000..837c7153c6 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/panel/activities.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/cinnamon-shell/src/assets/common-assets/panel/window-list-active-bottom.svg b/cinnamon-shell/src/assets/common-assets/panel/window-list-active-bottom.svg new file mode 100644 index 0000000000..e90c85dc1b --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/panel/window-list-active-bottom.svg @@ -0,0 +1,3 @@ + + + diff --git a/cinnamon-shell/src/assets/common-assets/panel/window-list-active-top.svg b/cinnamon-shell/src/assets/common-assets/panel/window-list-active-top.svg new file mode 100644 index 0000000000..2b3dfe7cf3 --- /dev/null +++ b/cinnamon-shell/src/assets/common-assets/panel/window-list-active-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/cinnamon-shell/src/cinnamon-shell.scss.in b/cinnamon-shell/src/cinnamon-shell.scss.in new file mode 100644 index 0000000000..e6559da7f3 --- /dev/null +++ b/cinnamon-shell/src/cinnamon-shell.scss.in @@ -0,0 +1,11 @@ +$variant: if(@DarkVariant@, 'dark', 'light'); +$yaru_variant: '@YaruVariant@'; + +@import 'sass-utils'; + +@debug 'Generating Cinnamon Shell ' + $yaru_variant + ' theme (' + $variant +' variant'+')'; + +@import "@VariantDir@/_@Colors@"; +@import "@VariantDir@/_drawing"; +@import "@VariantDir@/_common"; +@import "@VariantDir@/_tweaks"; diff --git a/cinnamon-shell/src/colorable-assets.txt b/cinnamon-shell/src/colorable-assets.txt new file mode 100644 index 0000000000..fa1954b9b9 --- /dev/null +++ b/cinnamon-shell/src/colorable-assets.txt @@ -0,0 +1,23 @@ +/colorable-assets/checkbox/checkbox-checked-focused.svg +/colorable-assets/checkbox/checkbox-checked.svg +/colorable-assets/checkbox/checkbox-unchecked-focused.svg +/colorable-assets/checkbox/checkbox-unchecked.svg +/colorable-assets/checkbox/radio-checked.svg +/colorable-assets/checkbox/radio-unchecked.svg +/colorable-assets/menu/menu-hover.svg +/colorable-assets/menu/menu.svg +/colorable-assets/menu/submenu.svg +/colorable-assets/misc/button-box.svg +/colorable-assets/misc/close-active.svg +/colorable-assets/misc/close-hover.svg +/colorable-assets/misc/close.svg +/colorable-assets/misc/message.svg +/colorable-assets/misc/modal.svg +/colorable-assets/switch/switch-off.svg +/colorable-assets/switch/switch-on.svg +/common-assets/misc/add-workspace-active.svg +/common-assets/misc/calendar-arrow-left-hover.svg +/common-assets/misc/calendar-arrow-right-hover.svg +/common-assets/misc/corner-ripple.svg +/common-assets/panel/window-list-active-bottom.svg +/common-assets/panel/window-list-active-top.svg diff --git a/cinnamon-shell/src/meson.build b/cinnamon-shell/src/meson.build index 3255f67524..0aeb78679c 100644 --- a/cinnamon-shell/src/meson.build +++ b/cinnamon-shell/src/meson.build @@ -1,41 +1,243 @@ -foreach flavour: flavours - suffix = flavour == 'default' ? '' : '-@0@'.format(flavour) - theme_name = meson.project_name() + suffix - theme_dir = join_paths(get_option('datadir'), 'themes', theme_name, 'cinnamon') - - # Install CSS - scss_dependencies = run_command( - 'find', flavour, '-name', '_*.scss' +cinnamonshell_theme_dir = join_paths(cinnamonshell_default_theme_dir, + meson.project_name()) + +message() + +variants = [ + 'light', + 'dark', +] + +DEFAULT_VARIANT = 'light' +message(meson.project_build_root()) + +foreach accent: enabled_accent_colors + if enabled_accent_colors.contains(accent) + variants += (get_option('default') ? [accent] : []) + variants += (get_option('dark') ? [ accent + '-dark' ] : []) + endif +endforeach + +theme_css = [] +theme_sources = files( + run_command( + 'find', meson.current_source_dir(), '-name', '*.scss', check: true ).stdout().strip().split('\n') +) +assert(theme_sources.length() > 0, 'No theme sources found') - custom_target(theme_name, - input: join_paths(flavour, 'cinnamon.scss'), - output: '@0@.css'.format(theme_name), - depend_files: files(scss_dependencies), - command: [sassc, '-a', '@INPUT@', '@OUTPUT@'], - install: true, - install_dir: theme_dir, +common_asset_dir = meson.current_source_dir() + '/assets/common-assets' +common_theme_assets = files( + run_command( + 'find', common_asset_dir, '-name', '*.svg', '-o', '-name', '*.png', check: true + ).stdout().strip().split('\n') +) + +colorable_asset_dir = meson.current_source_dir() + '/assets/colorable-assets' +colorable_asset_file = meson.current_source_dir() + '/colorable-assets.txt' +colorable_assets = run_command( + 'cat', colorable_asset_file, check: true + ).stdout().strip().split('\n') + +colorable_assets_list = [] +foreach asset: colorable_assets + colorable_assets_list += meson.current_source_dir() + '/assets' + asset +endforeach +colorable_theme_assets = files(colorable_assets_list) + +colorable_assets_names = [] +foreach asset: colorable_theme_assets + # message(fs.parent(asset)) + basename = fs.name(asset) + colorable_assets_names += basename +endforeach + +# theme_gresource_files = theme_assets +# theme_gresource_deps = [] + +source_deps = [] + +css_sources_path = meson.current_build_dir() +foreach src: theme_sources + out_name = '___'.join('@0@'.format(src).split('/')) + source_deps += custom_target(out_name, + input: src, + output: out_name, + command: [ + 'bash', '-c', + ';'.join([ + 'output="$1/$(realpath --relative-to="'+ meson.current_source_dir() + '" $0)"', + 'mkdir -p "$(dirname "$output")"', + 'sed "s,[[:space:]]*url[[:space:]]*(, url(,g;" "$0" > "$output"', + ]), + '@INPUT@', + '@OUTDIR@', + ], + install: false, ) +endforeach + + +# theme_gresource_xml = files('data/cinnamon-shell-theme.gresource.xml')[0] +# icons_gresource_xml = files('data/cinnamon-shell-icons.gresource.xml')[0] + +foreach variant: variants + is_dark = variant == 'dark' or variant.endswith('-dark') + is_variant = variant != DEFAULT_VARIANT + variant_base_name = is_dark ? variant.split('-dark')[0] : variant + variant_suffix = is_variant ? '-@0@'.format(variant) : '' + theme_full_name = meson.project_name() + variant_suffix + is_custom_accent = enabled_accent_colors.contains(variant_base_name) + + install_theme_sources = true + install_dir = cinnamonshell_theme_dir + variant_suffix + '/cinnamon' - # Install assets - assets_folders = [ - 'common-assets', - 'light-assets', - 'dark-assets' - ] - foreach asset_folder: assets_folders - if fs.is_dir(join_paths(flavour, asset_folder)) - install_subdir(join_paths(flavour, asset_folder), - install_dir: join_paths(theme_dir, asset_folder), - strip_directory: true, - ) + accent_configuration = { + 'yaru_dark_variant': is_dark ? 'true' : 'false', + 'yaru_accent_color': is_custom_accent ? variant_base_name : 'default', + } + + # Prepare colorable assets + shell_yaru_colors_defs_scss = configure_file( + configuration: accent_configuration + { + 'yaru_theme_entry_point': yaru_colors_defs_scss + }, + input: accent_colors_definitions_scss, + output: 'cinnamon-shell-yaru-colors-defs-@0@.scss'.format(variant), + ) + + shell_yaru_colors_defs = custom_target( + 'cinnamon-shell-yaru-color-definitions-@0@'.format(variant), + input: shell_yaru_colors_defs_scss, + output: '@BASENAME@.css'.format(variant), + command: [ + sassc, '-a', '@INPUT@', '@OUTPUT@', + '-I', css_sources_path / 'sass', + ], + depends: source_deps, + depend_files: [ + yaru_colors_defs_scss, + theme_sources, + ] + ) + + # generate .css files + variant_styles = [] + output_styles = [] + + stylename = 'cinnamon' + variant_suffix + message('style: '+stylename) + + variant_styles += '@0@.css'.format(stylename) + output_styles += 'cinnamon.css' + + theme_main_file = configure_file( + input: 'cinnamon-shell.scss.in', + output: '@0@.scss'.format(stylename), + configuration: { + 'DarkVariant': is_dark ? 'true' : 'false', + 'YaruVariant': variant, + 'VariantDir': 'sass', + # 'UseGResource': cinnamonshell_use_gresource ? 'true' : 'false', + 'Colors': 'colors', + 'ColorableAssets': '@0@'.format(colorable_assets_names), + }, + ) + + if is_custom_accent + theme_sources += theme_main_file + theme_main_file = configure_file( + configuration: accent_configuration + { + 'yaru_theme_entry_point': meson.project_build_root() / '@0@'.format(theme_main_file), + }, + input: accent_colors_definitions_scss, + output: '@0@-accent-colors.scss'.format(stylename), + ) + endif + + css_file = custom_target( + 'style-@0@'.format(stylename), + input: theme_main_file, + output: '@0@.css'.format(stylename), + command: [ + sassc, '-a', '@INPUT@', '@OUTPUT@', + '-I', css_sources_path, + '-I', meson.project_source_root() / 'common', + ], + install: install_theme_sources, + install_dir: install_dir, + depends: source_deps, + depend_files: theme_sources + sass_utils_scss, + ) + + # theme_gresource_files += css_file[-1].full_path() + # theme_gresource_deps += css_file[-1] + + # This is an hack we need to remove once meson fixes this issue: + # https://github.com/mesonbuild/meson/issues/2320 + # by just making the style_css to have an output in the 'variant' subdir + if is_variant + assert(output_styles.length() == variant_styles.length(), 'Output styles length mismatch') + foreach i: range(output_styles.length()) + meson.add_install_script('bash', '-c', + 'mv -uv ${DESTDIR}${MESON_INSTALL_PREFIX}/@0@ ${DESTDIR}${MESON_INSTALL_PREFIX}/@1@'.format( + install_dir / variant_styles[i], install_dir / output_styles[i])) + endforeach + endif + + # install common assets + foreach common_asset: common_theme_assets + asset_dir = '@0@'.format(common_asset).replace(common_asset_dir, '').replace(fs.name(common_asset), '') + basename = join_paths(asset_dir, fs.name(common_asset)) + + install_data(common_asset, install_dir: install_dir+'/common-assets'+asset_dir) + endforeach + + # install colorable assets + foreach colorable_asset: colorable_theme_assets + if '@0@'.format(colorable_asset).contains('common-assets') + asset_rel_dir = '@0@'.format(colorable_asset).replace(common_asset_dir, '').replace(fs.name(colorable_asset), '') + asset_rel_dir = '/common-assets'+asset_rel_dir + else + if is_dark + asset_rel_dir = '@0@'.format(colorable_asset).replace(colorable_asset_dir, '').replace(fs.name(colorable_asset), '') + asset_rel_dir = '/dark-assets'+asset_rel_dir + else + asset_rel_dir = '@0@'.format(colorable_asset).replace(colorable_asset_dir, '').replace(fs.name(colorable_asset), '') + asset_rel_dir = '/light-assets'+asset_rel_dir + endif endif + basename = join_paths(asset_rel_dir, fs.name(colorable_asset)) + target_name = fs.stem(basename) + '-' + variant + '.svg' + + asset_target = custom_target( + '___'.join('@0@'.format(target_name).split('/')), + input: colorable_asset, + output: '@BASENAME@-@0@.svg'.format(variant), + command: [ + colorize_dummy_svg, + shell_yaru_colors_defs, + '--input-file', '@INPUT@', + '--output-folder', '@OUTDIR@'+'/@0@@1@'.format(variant, asset_rel_dir), + '--variant', variant, + ], + depends: shell_yaru_colors_defs, + build_by_default: true, + ) + + asset_src = meson.current_build_dir() + '/' + variant + asset_rel_dir + fs.stem(basename) + '-' + variant + '.svg' + asset_dir = install_dir+asset_rel_dir + asset_tgt = install_dir+basename + meson.add_install_script( + 'rename-cinnamon-assets.sh', asset_src, asset_dir, asset_tgt + ) + + # theme_gresource_files += asset_target.full_path() + # theme_gresource_deps += asset_target endforeach - # Install thumbnail image - install_data(join_paths(flavour, 'thumbnail.png'), - install_dir: theme_dir - ) + # # Install thumbnail image + # install_data(join_paths(flavour, 'thumbnail.png'), + # install_dir: theme_dir + # ) endforeach - -meson.add_install_script('post_install.py', get_option('datadir'), meson.project_name(), flavours) diff --git a/cinnamon-shell/src/rename-cinnamon-assets.sh b/cinnamon-shell/src/rename-cinnamon-assets.sh new file mode 100755 index 0000000000..f0e07a595a --- /dev/null +++ b/cinnamon-shell/src/rename-cinnamon-assets.sh @@ -0,0 +1,7 @@ +#!/usr/bin/env bash +# -*- coding: UTF-8 -*- + +# rename and install cinnamon colourable assets + +mkdir -p "${DESTDIR}${MESON_INSTALL_PREFIX}/$2" +cp -uv "$1" "${DESTDIR}${MESON_INSTALL_PREFIX}/$3" diff --git a/cinnamon-shell/src/sass/_colors.scss b/cinnamon-shell/src/sass/_colors.scss new file mode 100644 index 0000000000..a02a1c7abe --- /dev/null +++ b/cinnamon-shell/src/sass/_colors.scss @@ -0,0 +1,124 @@ +// When color definition differs for dark and light variant, +// it gets @if ed depending on $variant +@import 'palette'; + +$base_color: if($variant=='light', #ffffff, lighten($jet, 4%)); +$bg_color: if($variant=='light', #fafafa, lighten($jet, 6%)); +$fg_color_light: $inkstone; +$fg_color_dark: $porcelain; +$fg_color: if($variant=='light', $fg_color_light, $fg_color_dark); + +$selected_fg_color: $accent_fg_color; +$selected_bg_color: if($variant=='light', $accent_bg_color, darken($accent_bg_color, 4%)); +$selected_borders_color: if($variant=='light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); +$borders_color_dark: lighten(desaturate(lighten($jet, 4%), 100%), 14%); // Yaru: used for dash and other dark elements on light theme +$borders_color: if($variant=='light', darken($bg_color, 20%), $borders_color_dark); +$alt_borders_color: if($variant=='light', darken($bg_color, 24%), darken($bg_color, 10%)); +$borders_edge: if($variant=='light', transparentize(white, 0.2), transparentize($fg_color, 0.93)); +$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%)); +$top_hilight: $borders_edge; + +$warning_color: $yellow; +$error_color: $red; +$success_color: lighten($green, 5%); +$destructive_color: if($variant=='light', $red, darken($red, 10%)); + +$osd_fg_color: #eeeeec; +$osd_text_color: white; +$osd_bg_color: transparentize(lighten($jet, 2%), 0.025); +$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); +$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); +$osd_borders_color: transparentize(black, 0.3); +$osd_outer_borders_color: transparentize(white, 0.84); + +$shadow_color: transparentize(black, 0.9); +$system_bg_color: lighten($jet, 4%); // Lighten than dash but darken than bg-color + +//insensitive state derived colors +$insensitive_fg_color: mix($fg_color, $bg_color, 50%); +$insensitive_bg_color: mix($bg_color, $base_color, 60%); +$insensitive_borders_color: $borders_color; + +//colors for the backdrop state, derived from the main colors. +$backdrop_base_color: if($variant=='light', darken($base_color, 1%), lighten($base_color, 1%)); +$backdrop_bg_color: $bg_color; +$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%); +$backdrop_insensitive_color: if($variant=='light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); +$backdrop_borders_color: mix($borders_color, $bg_color, 90%); +$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); + +$base_hover_color: transparentize(white, 0.8); +$base_active_color: transparentize(white, 0.75); +$hover_fg_color: lighten($selected_fg_color, .25); +$active_fg_color: transparentize($selected_fg_color, .5); + +$panel_bg_color: darken($jet, 2%); +$panel_fg_color: darken($porcelain, 2%); +$dash_background_color: lighten($jet, 2%); +$panel-alpha-value: 0.6; +$panel_opaque_value: 0.0; + +$dash-alpha-value: 0.6; +$dash-opaque-alpha-value: 0.0; + +//special cased widget colors +$suggested_bg_color: if($variant=='light', lighten($green, 5%), darken($green, 5%)); +$suggested_border_color: if($variant=='light', darken($suggested_bg_color, 5%), darken($suggested_bg_color, 10%)); +$progress_bg_color: if($variant=='light', lighten($accent_bg_color, 10%), lighten($accent_bg_color, 5%)); +$progress_border_color: if($variant=='light', darken($progress_bg_color, 5%), darken($borders_color, 5%)); +$checkradio_bg_color: if($variant=='light', $accent_bg_color, darken($accent_bg_color, 8%)); +$checkradio_fg_color: $accent_fg_color; +$switch_bg_color: if($variant=='light', $accent_bg_color, darken($accent_bg_color, 8%)); +$switch_border_color: if($variant=='light', darken($accent_bg_color, 15%), darken($borders_color, 5%)); +$focus_border_color: lighten($accent_bg_color, 14%); + +// Yaru: color variables imported from Mint's cinnamon theme +// which are not in gnome-shell but are necessary to generate +// yaru cinnamon theme. We might modify/remove them later after +// all the yaru specific styles have been included in _tweaks.scss + +// Yaru: we already have fg color defined in gnome-shell, we prefer to use them +// $text_color: if($variant == 'light', #202020, #D3D3D3); +$text_color: $fg_color; + +$separator_color: if($variant=='light', darken($bg_color, 15%), darken($bg_color, 6%)); + +$tooltip_bg_color: #fbeaa0; +$tooltip_fg_color: #4a4a4a; +$tooltip_border_color: #d0d0d0; + +$osd_bg_color: #353535; + +$osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); +$osd_button_border: transparentize(darken($osd_bg_color, 20%), 0.6); + +$osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); +$osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); + +// Yaru: we are imitating gnome-shell panel +// which uses white-ish fg on dark bg +// for both light and dark mode +$panel_bg: $panel_bg_color; +$panel_fg: $panel_fg_color; +// $panel_bg: $bg_color; +// $panel_fg: $fg_color; + +$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; + +// Colors used for highlights in places where we don't want to use accents +$noaccent_light_bg_color: transparentize(black, 0.91); +$noaccent_light_fg_color: $fg_color_light; +$noaccent_dark_bg_color: transparentize(white, 0.91); +$noaccent_dark_fg_color: $fg_color_dark; +$noaccent_selected_bg_color: if($variant=='light', $noaccent_light_bg_color, $noaccent_dark_bg_color); +$noaccent_selected_fg_color: if($variant=='light', $noaccent_light_fg_color, $noaccent_dark_fg_color); + +$applet_separator_color: if($variant == 'light', darken($bg_color, 15%), rgba(255,255,255, 0.12)); + +$corner_bar_unhighlighted: $applet_separator_color; +$corner_bar_highlighted: if($variant == 'light', darken($applet_separator_color, 10%), opacify($applet_separator_color, .1)); diff --git a/cinnamon-shell/src/sass/_common.scss b/cinnamon-shell/src/sass/_common.scss new file mode 100644 index 0000000000..c0ceacb617 --- /dev/null +++ b/cinnamon-shell/src/sass/_common.scss @@ -0,0 +1,2285 @@ + +$asset_path: if($variant == 'dark', dark-assets, light-assets); + +stage { + color: $fg_color; +} + +.label-shadow { + color: rgba(0, 0, 0, 0); +} + +// +// Buttons +// +%button { + min-height: 20px; + padding: 5px 32px; + transition-duration: 0; + + &, &:focus, &:hover, &:hover:focus, &:active, &:active:focus, &:insensitive { + border-radius: 2px; + } + + @include button(normal); + + &:focus { @include button(focus); } + &:hover { @include button(hover); } + &:hover:focus { @include button(focus-hover); } + &:active, &:active:focus { @include button(active); } + &:insensitive { @include button(insensitive); } +} + +%osd_button { + min-height: 20px; + padding: 5px 32px; + transition-duration: 0; + border-radius: 2px; + + @include button(osd); + + &:hover { @include button(osd-hover); } + &:focus { color: $selected_bg_color; } + &:active { @include button(osd-active); } + &:insensitive { @include button(osd-insensitive); } +} + +// +// Entries +// +%entry { + padding: 7px; + caret-size: 1px; + selection-background-color: $selected_bg_color; + selected-color: $selected_fg_color; + transition-duration: 300ms; + border-radius: 3px; + + @include entry(normal); + + &:focus, &:hover { @include entry(focus); } + &:insensitive { @include entry(insensitive); } + + StIcon.capslock-warning { + icon-size: 16px; + warning-color: $warning_color; + padding: 0 4px; + } +} + +%osd_entry { + padding: 7px; + caret-size: 1px; + caret-color: $osd_fg_color; + selection-background-color: $selected_bg_color; + selected-color: $selected_fg_color; + transition-duration: 300ms; + border-radius: 3px; + + @include entry(osd); + + &:focus { @include entry(osd-focus); } + &:insensitive { @include entry(osd-insensitive); } +} + +// +// Scrollbars +// +StScrollView { + &.vfade { -st-vfade-offset: 68px; } + &.hfade { -st-hfade-offset: 68px; } +} + +StScrollBar { + + padding: 8px; + + StScrollView & { + min-width: 5px; + min-height: 5px; + } + + StBin#trough { + background-color: transparentize($base_color, 0.9); + border-radius: 8px; + } + + StButton#vhandle, StButton#hhandle { + border-radius: 2px; + background-color: mix($fg_color, $bg_color, 40%); + border: 0px solid; + margin: 0px; + + &:hover { background-color: mix($fg_color, $bg_color, 30%); } + + &:active { background-color: $selected_bg_color; } + } +} + +.separator { + -gradient-height: 1px; + -gradient-start: rgba(0,0,0,0); + -gradient-end: rgba(0,0,0,0); + -margin-horizontal: 1.5em; + height: 1em; +} + +// +// Ripples +// +.ripple-pointer-location { + width: 50px; + height: 50px; + border-radius: 25px; + background-color: transparentize($selected_bg_color, 0.7); + box-shadow: 0 0 2px 2px $selected_bg_color; +} + +// +// Slider +// +.popup-slider-menu-item, +.slider { + -slider-height: 0.3em; + -slider-background-color: $button_border; //background of the trough + -slider-border-color: transparentize($bg_color, 0.7); //trough border color + -slider-active-background-color: $selected_bg_color; //active trough fill + -slider-active-border-color: transparentize($bg_color, 0.7); //active trough border + -slider-border-width: 1px; + -slider-handle-radius: 0.5em; + height: 1em; + min-width: 15em; + border: 0 solid transparent; + border-right-width: 1px; + border-left-width: 5px; +} + +// +// 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/radio-unchecked.svg"); + } + + &:focus StBin { background-image: url("#{$asset_path}/checkbox/radio-unchecked.svg"); } + + &:checked StBin { background-image: url("#{$asset_path}/checkbox/radio-checked.svg"); } + + &:focus:checked StBin { background-image: url("#{$asset_path}/checkbox/radio-checked.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: 1px solid $tooltip_border_color; + border-radius: 3px; + padding: 5px 12px; + background-color: $tooltip_bg_color; + color: $tooltip_fg_color; + font-size: 1em; + font-weight: normal; + text-align: center; +} + +// +// Looking Glass +// +#LookingGlassDialog { + color: $fg_color; + border: 1px solid $borders_color; + border-radius: 3px; + background-color: $bg_color; + spacing: 4px; + padding: 8px; +} + +// +// Popvers/Menus +// +.menu { + color: $fg_color; + border: 1px solid $borders_color; + border-radius: 3px; + background-color: transparentize($bg_color, 0.01); + + &.top { + border-radius: 0 0 3px 3px; + } + + &.bottom { + border-radius: 3px 3px 0 0; + } + + &.left { + border-radius: 0 3px 3px 0; + } + + &.right { + border-radius: 3px 0 0 3px; + } +} + +.popup-sub-menu { + background-color: $base_color; + box-shadow: none; + + .popup-menu-item:ltr { padding-right: 1.75em; } + .popup-menu-item:rtl { padding-left: 1.75em; } + + StScrollBar { + padding: 4px; + StBin#trough, StBin#vhandle { border-width: 0; } + } +} + +.popup-menu-content { padding: 1em 0em 1em 0em; } +.popup-menu-item { + padding: .4em 1.75em; + spacing: 1em; + // border: 1px solid transparent; + border-left-width: 0; + border-right-width: 0; + + &:active { + color: $noaccent_selected_fg_color; + // border-color: transparentize($fg_color, 0.89); + background-color: $noaccent_selected_bg_color; + } + &: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; } +} + + +/* This is for popup menus in Cinnamon versions < 3.2 */ +.popup-menu { + color: white; + color: $fg_color; + + &-arrow { icon-size: 16px; } + + .popup-sub-menu { + background-color: $base_color; + box-shadow: none; + + .popup-menu-item:ltr { padding-right: 1.75em; } + .popup-menu-item:rtl { padding-left: 1.75em; } + + StScrollBar { + padding: 4px; + StBin#trough, StBin#vhandle { border-width: 0; } + } + } + + .popup-menu-content { padding: 1em 0em 1em 0em; } + .popup-menu-item { + padding: .4em 1.75em; + spacing: 1em; + border: 1px solid transparent; + border-left-width: 0; + border-right-width: 0; + + &:active { + color: $fg_color; + border-color: transparentize($fg_color, 0.89); + background-color: transparentize($fg_color, 0.92); + } + &: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: $bg_color; + -arrow-border-width: 1px; + -arrow-border-color: $borders_color; + -arrow-base: 21px; + -arrow-rise: 9px; + -boxpointer-gap: 2px; +} + +/*Scale view context menu*/ +.popup-combo-menu { + color: $fg_color; + border: 1px solid $borders_color; + border-radius: 3px; + background-color: $base_color; + box-shadow: none; + padding: 1em 0em 1em 0em; +} + +.popup-image-menu-item {} + +.popup-combobox-item { + spacing: 1em; + padding: .4em 1.75em; + border: 1px solid transparent; + border-left-width: 0; + border-right-width: 0; +} + +.popup-separator-menu-item { + -gradient-height: 1px; + -gradient-start: $separator_color; + -gradient-end: $separator_color; + -margin-horizontal: 0; + height: 1px; +} + +.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; + /* sets the height of horizontal panels */ + height: 40px; + /* sets the width of vertical panels */ + width: 32px; + /* Set the symbolic foreground color for icons, and importantly, the system tray applet icons */ + color: $fg_color; + + &Left { + spacing: 4px; + + &:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(255,0,0,0.05); + background-gradient-end: rgba(255,0,0,0.2); + } + &:ltr { padding-right: 4px; } + &:rtl { padding-left: 4px; } + &.vertical { + padding: 0px; + &:ltr { padding-right: 0px; } + &:rtl { padding-left: 0px; } + } + } + + &Right { + + &:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(0,0,255,0.05); + background-gradient-end: rgba(0,0,255,0.2); + } + &:ltr { padding-left: 4px; spacing: 0px; } + &:rtl { padding-right: 4px; spacing: 0px; } + &.vertical { + padding: 0px; + &:ltr { padding-right: 0px; } + &:rtl { padding-left: 0px; } + } + } + + &Center { + spacing: 4px; + + &:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(0,255,0,0.05); + background-gradient-end: rgba(0,255,0,0.2); + } + } + + &:highlight { + border-image: none; + background-color: transparentize($error_color, 0.5); + } +} + +.panel { + + &Left { + spacing: 4px; + + &:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(255,0,0,0.05); + background-gradient-end: rgba(255,0,0,0.2); + } + &:ltr { padding-right: 4px; } + &:rtl { padding-left: 4px; } + + &.vertical { + padding: 0px; + &:ltr { padding-right: 0px; } + &:rtl { padding-left: 0px; } + } + } + + &Right { + + &:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(0,0,255,0.05); + background-gradient-end: rgba(0,0,255,0.2); + } + &:ltr { padding-left: 4px; spacing: 0px; } + &:rtl { padding-right: 4px; spacing: 0px; } + + &.vertical { + padding: 0px; + &:ltr { padding-left: 0px; spacing: 0px; } + &:rtl { padding-right: 0px; spacing: 0px; } + } + } + + &Center { + spacing: 4px; + + &.vertical { + padding-left: 0px; + padding-right: 0px; + } + + &:dnd { + background-gradient-direction: vertical; + background-gradient-start: rgba(0,255,0,0.05); + background-gradient-end: rgba(0,255,0,0.2); + } + } + + + &-top, &-bottom, &-left, &-right { + color: $selected_fg_color; + border: none; + background-color: transparentize($panel_bg, 0.01); + font-size: 1em; + padding: 0px; + } + + &-top { + box-shadow: 0 1px $borders_color; + } + + &-bottom { + box-shadow: 0 -1px $borders_color; + } + + &-left { + box-shadow: 1px 0 $borders_color; + } + + &-right { + box-shadow: -1px 0 $borders_color; + } + + &-dummy { + background-color: transparentize($error_color, 0.5); + + &:entered { background-color: transparentize($error_color, 0.4); } + } + + &-status-button { + border-width: 0; + -natural-hpadding: 3px; + -minimum-hpadding: 3px; + font-weight: bold; + color: $panel_fg; + + &: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; + + &.warning { color: $warning_color; } + &.error { color: $error_color; } +} + +// +// Overview +// +#overview { spacing: 12px; } + +.window-caption { + background-color: $osd_bg_color; + border: 1px solid $osd_bg_color; + color: $osd_fg_color; + spacing: 8px; + border-radius: 2px; + font-size: 0.9em; + padding: 5px 8px; + -cinnamon-caption-spacing: 8px; + + &:focus { + background-color: $selected_bg_color; + color: $selected_fg_color; + border: 1px solid $selected_bg_color; + } +} + +.window-border { + border: 3px $selected_bg_color; + border-radius: 2px; + background-color: rgba(255,255,255,.05); + /* Cover rounded corners and some bad adjustment gaps */ + box-shadow: 0 0 0 1px $selected_bg_color inset; +} + +.overview-empty-placeholder { + color: #ffffff; + font-size: 2em; +} + +.expo-workspaces-name-entry, +.expo-workspaces-name-entry#selected { + height: 1.5em; + border-radius: 2px; + font-size: 1em; + padding: 5px 8px; + -cinnamon-caption-spacing: 4px; + @include entry(osd); + + &:focus { + border: 1px solid $selected_bg_color; + background-color: $selected_bg_color; + color: $selected_fg_color; + font-style: italic; + transition-duration: 300; + selection-background-color: $selected_fg_color; + selected-color: $selected_bg_color; + } +} + +.expo-workspace-thumbnail-frame { + border: 4px solid rgba(255,255,255,0.0); + background-color: rgba(255,255,255,0.0); + border-radius: 2px; + + &#active { + border: 4px solid $selected_bg_color; + background-color: black; + border-radius: 2px; + } +} + +.expo-background { + background-color: opacify($osd_bg_color, 1); +} + +.workspace { + //&-controls { visible-height: 32px; } + + &-thumbnails { + spacing: 26px; + + &-background, &-background:rtl { padding: 8px; } + } + + &-add-button { + background-image: url("common-assets/misc/add-workspace.svg"); + height: 200px; + width: 35px; + transition-duration: 100; + + &:hover { + background-image: url("common-assets/misc/add-workspace-hover.svg"); + transition-duration: 100; + } + &:active { + background-image: url("common-assets/misc/add-workspace-active.svg"); + transition-duration: 100; + } + } + &-overview-background-shade { background-color: rgba(0,0,0,0.5); } +} + +.workspace-close-button, +.window-close { + background-image: url("common-assets/misc/close.svg"); + background-size: 26px; + height: 26px; + width: 26px; + -cinnamon-close-overlap: 12px; + + &: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; +} + +// +// Calendar +// +.calendar { + spacing-rows: 0; + spacing-columns: 0; +} + +.calendar-main-box { + margin: 0 .8em .5em .8em; +} + +.calendar-events-main-box { + height: 300px; + margin-right: .5em; + padding: .5em; + min-width: 350px; + border: 1px solid $borders_color; + background-color: $base_color; +} + +.calendar-events-no-events-box { +} + +.calendar-events-no-events-button { + margin: 6px 0 6px 0; + padding: 6px; + + &:hover { + background-color: $selected_bg_color; + + .calendar-events-no-events-icon, + .calendar-events-no-events-label { + color: $selected_fg_color; + } + } +} + +.calendar-events-no-events-icon, +.calendar-events-no-events-label { + font-weight: bold; + color: $fg_color; + text-align: center; +} + +.calendar-events-date-label { + padding: .1em .1em .5em .1em; + color: $fg_color; + font-weight: bold; + text-align: center; +} + +.calendar-events-event-container { + padding: 0; +} + +.calendar-event-button { + border: 1px solid rgba(0,0,0,0); + + .calendar-event-time-past { + color: transparentize($fg_color, 0.6); + font-weight: bold; + text-align: left; + margin-bottom: .2em; + } + .calendar-event-time-present { + color: $fg_color; + font-weight: bold; + text-align: left; + margin-bottom: .2em; + + &:all-day { + color: $selected_bg_color; + } + } + .calendar-event-time-future { + color: $fg_color; + font-weight: bold; + text-align: left; + margin-bottom: .2em; + } + + .calendar-event-summary { + color: $fg_color; + text-align: left; + width: 200px; + } + + .calendar-event-countdown { + text-align: right; + margin-bottom: .6em; + color: $fg_color; + + &:soon { + font-weight: bold; + } + &:imminent { + font-weight: bold; + color: $warning_color; + } + &:current { + font-weight: bold; + color: $selected_bg_color; + } + } + + &:hover { + background-color: $selected_bg_color; + border: 1px solid $borders_color; + .calendar-event-time-past, + .calendar-event-time-present, + .calendar-event-time-future, + .calendar-event-summary { + color: $selected_fg_color + } + + .calendar-event-countdown { + text-align: right; + margin-bottom: .6em; + color: $selected_fg_color; + + &:soon { + font-weight: bold; + } + &:imminent { + font-weight: bold; + } + &:current { + font-weight: bold; + } + } + } +} + +.calendar-event-row-content { +} + +.calendar-event-color-strip { + width: 2px; +} + +.calendar-today-home-button { + padding: 6px; +} + +.calendar-today-day-label { + font-size: 1.75em; + color: $fg_color; + font-weight: bold; + text-align: center; + padding-bottom: .1em; +} + +.calendar-today-date-label { + font-size: 1.1em; + color: $fg_color; + font-weight: bold; + text-align: center; +} + +.calendar-today-home-button-enabled { + padding: 6px; + + &:hover { + background-color: $selected_bg_color; + + .calendar-today-day-label { + color: $selected_fg_color + } + .calendar-today-date-label { + color: $selected-fg-color + } + } +} + +.calendar-month-label { + color: $fg_color; + font-weight: bold; + padding: 8px 0; +} + +.calendar-change-month-back, +.calendar-change-month-forward { + width: 16px; + height: 16px; +} + +//arrow back +.calendar-change-month-back { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); + + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } + + &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + + &:rtl { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); + + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } + + &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + } +} + +//arrow forward +.calendar-change-month-forward { + background-image: url("common-assets/misc/calendar-arrow-right.svg"); + + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } + + &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } + + &:rtl { + background-image: url("common-assets/misc/calendar-arrow-left.svg"); + + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } + + &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } + } +} + +.calendar-day-event-dot-box { + margin-top: 1.7em; + max-rows: 1; +} + +.calendar-day-event-dot { + margin: 1px; + border-radius: 2px; + width: 4px; + height: 4px; +} + +.calendar-day-base { + font-size: 1em; + text-align: center; + width: 2.2em; + height: 2.2em; + padding: 0.1em; + + &:hover { + font-weight: bold; + color: $selected_fg_color; + background-color: $selected_bg_color; + } +} + +.calendar-day-heading { + color: transparentize($fg_color, 0.15); + margin-top: 1em; + font-size: 1.05em; +} + +.calendar-day { + border-width: 0; + color: transparentize($fg_color, 0.1); +} + +.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 { + color: $fg_color; + background-color: if($variant == 'light', transparentize($selected_bg_color, 0.6), transparentize($selected_bg_color, 0.6)); + border-width: 0; + + &:selected { + font-weight: bold; + } +} + +.calendar-not-today { + color: $fg_color; + + &:selected { + font-weight: bold; + background-color: if($variant == 'light', transparentize($fg_color, 0.7), transparentize($fg_color, 0.6)); + + &:hover { + font-weight: bold; + color: $fg_color; + } + } +} + +.calendar-other-month-day { + color: transparentize($fg_color, 0.7); + opacity: 1; +} + +.calendar-other-month-day:hover { + color: $selected_fg_color; + opacity: 1; +} + +.calendar-week-number { + color: transparentize($fg_color, 0.15); + font-size: 0.8em; + margin-top: 0.8em; +} + +// +// Notifications +// +#notification { + border: 1px solid $borders_color; + border-radius: 3px; + background-color: $bg_color; + padding: 13px; + spacing-rows: 10px; + spacing-columns: 10px; + margin-from-right-edge-of-screen: 20px; + width: 34em; + color: $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; + padding: 5px; + } + + StEntry { @extend %entry; } + } + + &.multi-line-notification { + padding-bottom: 13px; + color: $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: $fg_color; + } + + &-button, &-icon-button { + @extend %button; + padding: 5px; + } + + &-icon-button > StIcon { icon-size: 32px; } + + StEntry { @extend %osd_entry; } +} + +// +// Alt Tab +/// +#altTabPopup { + padding: 8px; + spacing: 16px; +} + +.switcher-list { + color: $fg_color; + border: 1px solid $borders_color; + background-color: $bg_color; + border-radius: 3px; + padding: 20px; + + > StBoxLayout { + padding: 4px; + } + + &-item-container { spacing: 8px; } + + .item-box { + padding: 8px; + border-radius: 2px; + + &:outlined { + padding: 8px; + border: 1px solid $selected_bg_color; + } + + &:selected { + color: $selected_fg_color; + background-color: $selected_bg_color; + border: 0px solid $selected_bg_color; + } + } + + .thumbnail { width: 256px; } + + .thumbnail-box { + padding: 2px; + spacing: 4px; + } + .separator { + width: 1px; + background: rgba(255,255,255,0.2); + } +} + +.switcher-arrow { + border-color: rgba(0,0,0,0); + color: $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: 104px; + height: 104px; + background-image: url("common-assets/misc/corner-ripple.svg"); + background-size: contain; + + &:rtl { background-image: url("common-assets/misc/corner-ripple.svg"); } +} + +// +// Modal dialogs +// +.lightbox { background-color: rgba(0, 0, 0, 0.4); } +.flashspot { background-color: white; } + +.modal-dialog { + background-color: $bg_color; + border: 1px solid $borders_color; + border-radius: 3px; + padding: 5px 10px; + + > StBoxLayout:first-child { + padding: 10px; + } + + &-button-box { + spacing: 0; + margin: 0px; + padding: 10px; + border: none; + background-color: $bg_color; + + .modal-dialog-button { + padding-top: 0; + padding-bottom: 0; + height: 30px; + + @extend %button; + } + } + + .confirm-dialog-title { + text-align: center; + font-weight: bold; + font-size: 1.3em; + padding-bottom: 12px; + } +} + +// +// Run dialog +// +.run-dialog { + padding: 10px 15px 10px 15px; + border: 1px solid $borders_color; + border-radius: 3px; + background-color: $bg_color; + + > * { padding: 0; } + + &-label { + font-size: 1.3em; + font-weight: bold; + color: $fg_color; + padding-bottom: 15px; + text-align: center; + } + + &-description { + color: $fg_color; + padding-top: 15px; + text-align: center; + + &.error { color: $error_color; } + } + + // &-error-label { color: $error_color; } + + // &-error-box { + // padding-top: 15px; + // spacing: 5px; + // } + &-completion-box { + padding-top: 5px; + padding-left: 15px; + font-size: 1em; + } + &-entry { + width: 21em; + height: 1.2em; + padding: 7px; + border-radius: 3px; + caret-color: $osd_fg_color; + selected-color: $selected_fg_color; + selection-background-color: $selected_bg_color; + + @include entry(osd); + + &:focus { @include entry(focus); } + } + .modal-dialog-button-box { + border: none; + box-shadow: none; + background: 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: 1.4em; + 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 { + padding: 10px; + transition-duration: 300; + background-color: darken($base_color, 5%); + border: 1px solid $borders_color; + } + + &-favorites-button { + padding: .9em 1em; + border: 1px solid rgba(0,0,0,0); + border-radius: 2px; + + &:hover { + background-color: $noaccent_selected_bg_color; + } + } + + &-places { + + &-box { + padding: 10px; + border: 0px solid red; + } + + &-button { padding: 10px; } + } + + &-categories-box { padding: 10px 30px 10px 30px; } + + &-applications-inner-box, + &-applications-outer-box { margin: 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; + color: $noaccent_selected_fg_color; + background-color: $noaccent_selected_bg_color; + border: 1px solid $borders_color; + + &: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; + color: $noaccent_selected_fg_color; + background-color: $noaccent_selected_bg_color; + border: 1px solid $borders_color; + } + &-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: 2.2em; + + &:rtl { + padding-top: 10px; + height: 2.2em; + } + } + + &-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; + min-height: 16px; + 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: $fg_color; + border: 1px solid $borders_color; + border-radius: 5px; + background-color: $bg_color; +} + +.restart-osd { + font-size: 1.6em; +} + +.workspace-osd { + font-size: 4em; +} + +.osd-window { + text-align: center; + font-weight: bold; + spacing: 1em; + padding: 20px; + + color: $fg_color; + background-color: $bg_color; + border: 1px solid $borders_color; + border-radius: 5px; + + .osd-monitor-label { font-size: 3em; } + + .level { + padding: 0; + height: 0.7em; + background-color: transparentize(black, 0.5); + border-radius: 2px; + } + + .level-bar { + border-radius: 2px; + background-color: $selected_bg_color; + } +} + +// +// Window list (windowList.js) +// +.window-list { + + &-box { + spacing: 6px; + padding-left: 10px; + padding-top: 1px; + + &.vertical { + spacing: 2px; + padding-left: 0px; + padding-right: 0px; + padding-top: 10px; + padding-bottom: 10px; + } + + &:highlight { + background-color: transparentize($error_color, 0.5); + } + } + + &-item-label { + font-weight: bold; + width: 15em; + min-width: 5px; + } + + &-item-box { + font-weight: bold; + background-image: none; + padding-top: 0; + padding-left: 8px; + padding-right: 8px; + transition-duration: 100; + color: transparentize($panel_fg, 0.2); + + &.top, + &.bottom { + border-bottom-width: 2px; + + & StLabel { padding-left: 2px; } + } + + &.right { + padding-left: 0px; + padding-right: 0px; + border-right-width: 2px; + + & StBin { padding-right: 0; } + } + + &.left { + padding-left: 0px; + padding-right: 0px; + border-left-width: 2px; + + & StBin { padding-left: 1px; } + } + + &:hover, + &:groupFocus { + color: $panel_fg; + background-color: transparentize($panel_fg, 0.8); + } + + &:active, + &:checked, + &:focus, + &:running { + color: $panel_fg; + border-color: $selected_bg_color; + background-color: transparentize($panel_fg, 0.8); + } + + & .progress { + background-color: transparentize($selected_bg_color, 0.2); + } + } + + &-item-demands-attention { + background-gradient-direction: vertical; + background-gradient-start: $destructive_color; + background-gradient-end: $destructive_color; + } + + &-preview { + spacing: 6px; + color: $fg_color; + border: 1px solid $borders_color; + background-color: $bg_color; + border-radius: 3px; + padding: 6px 12px 12px 12px; + font-size: 1em; + } +} + +// +// Grouped window list +// + +.grouped-window-list { + + &-item-label { + font-weight: bold; + width: 15em; + min-width: 5px; + } + + &-item-box { + text-align: left; + font-weight: bold; + background-image: none; + padding-top: 0; + padding-left: 8px; + padding-right: 8px; + transition-duration: 100; + color: transparentize($panel_fg, 0.2); + + &.top, + &.bottom { + border-bottom-width: 2px; + + & StLabel { padding-left: 2px; } + } + + &.right { + padding-left: 0px; + padding-right: 0px; + border-right-width: 2px; + + & StBin { padding-right: 0; } + } + + &.left { + padding-left: 0px; + padding-right: 0px; + border-left-width: 2px; + + & StBin { padding-left: 1px; } + } + + &:hover, + &:focus { + color: $panel_fg; + background-color: transparentize($panel_fg, 0.7); + } + + &:active, + &:checked { + color: $panel_fg; + border-color: $selected_bg_color; + } + + & .progress { + background-color: transparentize($selected_bg_color, 0.2); + } + } + + &-item-demands-attention { + background-gradient-direction: vertical; + background-gradient-start: $destructive_color; + background-gradient-end: $destructive_color; + } + + &-thumbnail-label { + padding-left: 4px; + } + + &-number-label { + font-size: 0.8em; + z-index: 99; + color: $tooltip_border_color; + } + + &-badge { + border-radius: 9999px; + background-color: $tooltip_fg_color; + margin: 0; + } + + &-button-label { + padding-left: 4px; + } + + &-thumbnail-alert { + background: rgba(255,52,52,0.3); + } + + &-thumbnail-menu { + color: $fg_color; + border: 1px solid $borders_color; + background-color: $bg_color; + border-radius: 3px; + padding: 0px; + + > StBoxLayout { + padding: 4px; + } + + .item-box { + padding: 10px; + border-radius: 2px; + spacing: 4px; + + &:outlined { + padding: 8px; + border: 1px solid $selected_bg_color; + } + + &:selected { + border: 1px solid $selected_bg_color; + } + } + + .thumbnail { width: 256px; } + + .separator { + width: 1px; + background: rgba(255,255,255,0.2); + } + } +} + +/// +// Sound Applet (status/volume.js) +// +.sound-button { + width: 22px; + height: 13px; + padding: 8px; + + @extend %button; + + &-container { + padding-right: 3px; + padding-left: 3px; + } + StIcon { icon-size: 1.4em; } +} + +.sound-track { + &-infos { padding: 5px; } + &-info { + padding-top: 2px; + padding-bottom: 2px; + + StIcon { icon-size: 16px; } + + StLabel { + padding-left: 5px; + padding-right: 5px; + } + } + &-box { + padding-left: 15px; + padding-right: 15px; + max-width: 220px; + } +} + +.sound-seek-box { + padding-left: 15px; + + StLabel { padding-top: 2px; } + StIcon { icon-size: 16px; } +} + +.sound-seek-slider { width: 140px; } + +.sound-volume-menu-item { + padding: .4em 1.75em; + + StIcon { + icon-size: 1.14em; + padding-left: 8px; + padding-right: 8px; + } +} + +.sound-playback-control { padding: 5px 10px 10px 10px; } + +// 2.8 +.sound-player { + // padding: 0 4px; + + > StBoxLayout:first-child { + padding: 5px 10px 12px 10px; + spacing: 0.5em; + + StButton:small { + width: 20px; + height: 20px; + border: 1px solid transparent; + + StIcon { icon-size: 12px; } + + &:hover { @include button(hover); } + &:active { @include button(active); } + } + } + + &-generic-coverart { + background: rgba(0,0,0,0.2); + } + + &-overlay { + width: 290px; + height: 70px; + padding: 15px; + spacing: 0.5em; + background: transparentize($bg_color, 0.1); + border-top: 1px solid $borders_color; + // background: transparentize(darken($osd_bg_color, 5%), 0.1); + // border: 0px solid darken($osd_bg_color, 10%); + // border-bottom: 1px ; + color: $fg_color; + + StButton { + width: 22px; + height: 13px; + padding: 5px; + color: $fg_color; + border-radius: 2px; + border: 1px solid transparent; + + StIcon { icon-size: 16px; } + + &:hover{ @include button(hover); } + &:active { @include button(active); } + } + + StBoxLayout { + padding-top: 2px; + } + + > StBoxLayout { + spacing: 5px; + } + } + + .slider { + height: 0.5em; + padding: 0; + border: none; + -slider-height: 0.5em; + -slider-background-color: if($variant == 'light', $button_border, darken($bg_color, 5%)); + -slider-border-color: rgba(0,0,0,0); + -slider-active-background-color: $selected_bg_color; + -slider-active-border-color: rgba(0,0,0,0); + -slider-border-width: 0px; + -slider-handle-radius: 0px; + } +} + +// +// Workspace Switcher applet (workspaceSwitcher.js) +// +#workspaceSwitcher { + spacing: 0px; + padding: 3px; +} + +/* Controls the styling when using the "Simple buttons" option */ +.workspace-switcher { + padding-left: 3px; + padding-right: 3px; + + .panel-left &, + .panel-right & { + padding: 0; + } +} + +.workspace-button { + border: 1px solid transparentize(black, 0.6); + background-color: transparentize(black, 0.8); + width: 20px; + height: 14px; + color: transparentize($selected_fg_color, 0.55); + padding: 3px; + padding-top: 4px; + transition-duration: 200; + + &.vertical { + height: 1.5em; + width: 24px; + padding: 0; + padding-top: 3px; + padding-bottom: 3px; + } + + &:outlined { + background-color: $selected_bg_color; + color: $selected_fg_color; + + &:hover { + background-color: transparentize($selected_bg_color, 0.3); + color: $selected_fg_color; + } + } + + &:hover { + background-color: transparentize($fg_color, 0.8); + color: $selected_fg_color; + } +} + +/* Controls the style when using the "Visual representation" option */ +.workspace-graph { + padding: 3px; + spacing: 6px; +} + +.workspace-graph .workspace { + border: 1px solid transparentize(black, 0.6); + background-color: transparentize(black, 0.8); +} + +.workspace-graph .workspace:active { + border: 1px solid $selected_bg_color; +} + +.workspace-graph .workspace .windows { + -active-window-background: lighten($panel_bg, 15%); + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: lighten($panel_bg, 15%); + -inactive-window-border: rgba(0, 0, 0, 0.8); +} + +.workspace-graph .workspace:active .windows { + -active-window-background: lighten($panel_bg, 25%); + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: lighten($panel_bg, 5%); + -inactive-window-border: rgba(0, 0, 0, 0.8); +} + +// +// Panel Launchers Applet (panelLaunchers.js) +// +.panel-launchers { + padding-left: 7px; + spacing: 2px; + + & .launcher { + padding-left: 2px; + padding-right: 2px; + padding-bottom: 2px; + // border-bottom-width: 1px; + transition-duration: 200; + &:hover { background-color: $noaccent_selected_bg_color; } + } + + &.vertical { + padding-top: 2px; + padding-bottom: 2px; + padding-left:0px; + padding-right: 0px; + spacing: 1px; + + & .launcher { + padding-top: 2px; + padding-bottom: 2px; + } + } +} + +// +// 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; + + &.vertical { padding: 4px 1px; } + } + + &-separator-line { + width: 1px; + background: $applet_separator_color; + + &-vertical { + height: 1px; + background: $applet_separator_color; + } + } + + &-box { + padding-left: 4px; + padding-right: 4px; + spacing: 4px; + color: $panel_fg; + text-shadow: none; + transition-duration: 100; + text-align: center; + + &.vertical { + padding-left: 0px; + padding-right: 0px; + padding-top: 3px; + padding-bottom: 3px; + } + + &:hover, + &:checked { + color: $noaccent_selected_fg_color; + background-color: $noaccent_selected_bg_color; + } + + &:highlight { + background-image: none; + border-image: none; + background-color: transparentize($error_color, 0.5); + } + } + + &-label { + font-weight: bold; + color: $panel_fg; + + &:hover, + &:checked, + .applet-box:hover &, + .applet-box:checked & { + color: $noaccent_selected_fg_color; + text-shadow: none; + } + } + + &-icon { + color: $noaccent_selected_fg_color; + icon-size: 22px; + + &:hover, + &:checked, + .applet-box:hover > &, + .applet-box:checked > & { + color: $noaccent_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; +} + +// +// Cornerbar Applet +// +.applet-cornerbar { + width: 8px; + background-color: $corner_bar_unhighlighted; + + &-box { + padding: 4px 4px; + + &:hover > .applet-cornerbar { + background-color: $corner_bar_highlighted; + } + } + + &.vertical { + height: 8px; + } +} + +// +// Desklets (desklet.js) +// +.desklet { + color: $fg_color; + + &:highlight { + background-color: transparentize($error_color, 0.5); + } + + &-with-borders { + border: 1px solid $borders_color; + border-radius: 5px; + background-color: $bg_color; + color: $fg_color; + padding: 12px; + padding-bottom: 16px; + + &:highlight { + background-color: transparentize($error_color, 0.5); + } + } + + &-with-borders-and-header { + border: 1px solid $borders_color; + border-top-width: 0; + border-radius: 0 0 5px 5px; + background-color: $bg_color; + color: $fg_color; + border-radius: 0; + border-radius-topleft: 0; + border-radius-topright: 0; + padding: 12px; + padding-bottom: 17px; + + &:highlight { + background-color: transparentize($error_color, 0.5); + } + } + + &-header { + border: 1px solid $borders_color; + border-radius: 5px 5px 0 0; + background-color: darken($bg_color, 3%); + color: $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: 1px solid $borders_color; + border-radius: 5px; + background-color: $bg_color; + color: $fg_color; + padding: 12px; + padding-bottom: 16px; +} + +// +// Notification Applet +// +.notification-applet-padding { padding: .5em 1em; } + +.notification-applet-container { max-height: 100px; } + +// +// Tile Preview +// +.tile-preview { + background-color: transparentize($selected_bg_color, 0.7); + border: 1px solid $selected_bg_color; + + &.snap { background-color: transparentize($selected_bg_color, 0.4); } +} + +.tile-hud { + background-color: transparentize($selected_bg_color, 0.7); + border: 1px solid $selected_bg_color; + + &.snap { background-color: transparentize($selected_bg_color, 0.4); } + + &:top { border-top-width: 0px; } + &:bottom { border-bottom-width: 0px; } + &:left { border-left-width: 0px; } + &:right { border-right-width: 0px; } + &:top-left { + border-top-width: 0px; + border-left-width: 0px; + } + &:top-right { + border-top-width: 0px; + border-right-width: 0px; + } + &:bottom-left { + border-bottom-width: 0px; + border-left-width: 0px; + } + &:bottom-right { + border-bottom-width: 0px; + border-right-width: 0px; + } +} + +.xkcd-box { + padding: 6px; + border: 0px; + background-color: rgba(0,0,0,0); + border-radius: 0px; +} diff --git a/cinnamon-shell/src/sass/_drawing.scss b/cinnamon-shell/src/sass/_drawing.scss new file mode 100644 index 0000000000..a3114af4ff --- /dev/null +++ b/cinnamon-shell/src/sass/_drawing.scss @@ -0,0 +1,155 @@ +// Drawing mixins + +// Entries + +@mixin entry($t, $dark:false) { +// +// Entries drawing function +// + + @if $t==normal { + color: $text_color; + background-color: $base_color; + border: 1px solid $entry_border; + box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); + } + + @if $t==focus { + color: $fg_color; + background-color: $base_color; + border: 1px solid $selected_bg_color; + box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); + } + + @if $t==insensitive { + color: $insensitive_fg_color; + background-color: mix($entry_bg, $bg_color, 55%); + border-color: 1px solid mix($entry_border, $bg_color, 55%); + box-shadow: inset 0 2px 4px transparentize(mix($entry_bg, $bg_color, 55%), 0.95); + } + + @if $t==osd { + color: $osd_fg_color; + background-color: $osd_entry_bg; + border: 1px solid $osd_entry_border; + box-shadow: inset 0 2px 4px transparentize(black, 0.95); + } + + @if $t==osd-focus { + color: $selected_fg_color; + background-color: $selected_bg_color; + border: 1px solid $selected_bg_color; + box-shadow: inset 0 2px 4px transparentize(black, 0.95); + } + + @if $t==osd-insensitive { + color: transparentize($osd_fg_color, 0.45); + background-color: transparentize($osd_entry_bg, 0.15); + border: 1px solid $osd_entry_border; + box-shadow: inset 0 2px 4px transparentize(black, 0.95); + } +} + +// Buttons + +@mixin button($t) { +// +// Button drawing function +// + + @if $t==normal { + // + // normal button + // + color: $fg_color; + background-color: $button_bg; + border: 1px solid $borders_color; + box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); + } + + @else if $t==focus { + // + // focused button + // + color: $fg_color; + background-color: $button_bg; + border: 1px solid $selected_bg_color; + box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); + } + + @else if $t==focus-hover { + // + // focused button + // + color: $fg_color; + background-color: lighten($button_bg, 5%); + border: 1px solid $selected_bg_color; + box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); + } + + @else if $t==hover { + // + // hovered button + // + color: $fg_color; + background-color: lighten($button_bg, 5%); + border: 1px solid $borders_color; + box-shadow: inset 0 2px 4px transparentize(lighten($button_bg, 5%), 0.95); + } + + @else if $t==active { + // + // pushed button + // + color: $selected_fg_color; + background-color: $selected_bg_color; + border: 1px solid $selected_bg_color; + box-shadow: inset 0 2px 4px $selected_bg_color; + } + + @else if $t==insensitive { + // + // insensitive button + // + color: $insensitive_fg_color; + border: 1px solid transparentize($borders_color, 0.45); + background-color: transparentize($button_bg, 0.45); + box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); + } + + @else if $t==osd { + // + // normal osd button + // + color: $osd_fg_color; + border: 1px solid $borders_color; + background-color: $osd_button_bg; + } + + @else if $t==osd-hover { + // + // active osd button + // + color: $osd_fg_color; + border: 1px solid $osd_button_border; + background-color: opacify(lighten($osd_button_bg, 7%), 0.1); + } + + @else if $t==osd-active { + // + // active osd button + // + color: $selected_fg_color; + border: 1px solid $selected_bg_color; + background-color: $selected_bg_color; + } + + @else if $t==osd-insensitive { + // + // insensitive osd button + // + color: $osd_insensitive_fg_color; + border: 1px solid $osd_button_border; + background-color: transparentize($osd_button_bg, 0.15); + } +} diff --git a/cinnamon-shell/src/sass/_palette.scss b/cinnamon-shell/src/sass/_palette.scss new file mode 100644 index 0000000000..979b01569d --- /dev/null +++ b/cinnamon-shell/src/sass/_palette.scss @@ -0,0 +1,41 @@ +// Blacks +$jet: #181818; +$inkstone: #3D3D3D; +$slate: #5D5D5D; +$graphite: #666666; + +// Whites +$white: #FFFFFF; +$porcelain: #F7F7F7; +$silk: #CCC; +$warm_gray: #AEA79F; +$ash: #878787; + +// Purples +$aubergine: #924D8B; +$purple: #762572; +$light_aubergine: #77216F; +$mid_aubergine: #5E2750; +$dark_aubergine: #2C001E; + +// Reds +$red: #c7162b; + +// Oranges +$orange: #E95420; + +// Yellows +$yellow: #f99b11; + +// Greens +$green: #0e8420; + +// Blues +$blue: #19B6EE; +$linkblue: #007aa6; +$darkblue: #335280; + + +// Semantic colors +$accent_bg_color: $orange !default; +$accent_fg_color: $white !default; diff --git a/cinnamon-shell/src/sass/_tweaks.scss b/cinnamon-shell/src/sass/_tweaks.scss new file mode 100644 index 0000000000..b3730b6bb6 --- /dev/null +++ b/cinnamon-shell/src/sass/_tweaks.scss @@ -0,0 +1,145 @@ +// Yaru: any modifications to Mint's original cinnamon theme +// may be added in this file. We will use this file override +// any settings that are contradictory to project goals of yaru +// except for the colours. Any modifications in colors should be added +// to _colors.scss + +// hover: we want the hover bg to be a visible gray for dark and light shell themes +$hover_bg_color: transparentize($fg_color, 0.9); +$hover_fg_color: $fg_color; +$hover_borders_color: lighten($borders_color, if($variant=='light', 5%, 3%)); + +// active: we want the active bg to be a visible gray for dark and light shell themes +$active_bg_color: transparentize($fg_color, 0.8); +$active_fg_color: darken($fg_color, if($variant=='light', 5%, 3%)); +$active_borders_color: darken($borders_color, if($variant=='light', 5%, 3%)); + +// +// Calendar +// +.calendar-day-base { + border-radius: 999px; +} + +// +// Check Boxes: checkboxes and radios are 24x24px +// +.check-box, +.radiobutton { + StBin { + width: 24px; + height: 24px; + } +} + + +// arrow back +.calendar-change-month-back { + + &:hover, + &:focus { + background-color: $hover_bg_color; + border-radius: 10px; + } + + &:active { + background-color: $active_bg_color; + border-radius: 10px; + } +} + +// arrow forward +.calendar-change-month-forward { + + &:hover, + &:focus { + background-color: $hover_bg_color; + border-radius: 10px; + } + + &:active { + background-color: $active_bg_color; + border-radius: 10px; + } +} + +// +// Switches: toggle-switches are 48x26px +// +.toggle-switch { + width: 48px; + height: 26px; +} + +// Fix for close assets +.workspace-close-button, +.window-close { + background-image: url("#{$asset_path}/misc/close.svg"); + background-size: 24px; + height: 24px; + width: 24px; + + &:hover { + background-image: url("#{$asset_path}/misc/close-hover.svg"); + background-size: 24px; + height: 24px; + width: 24px; + } + + &:active { + background-image: url("#{$asset_path}/misc/close-active.svg"); + background-size: 24px; + height: 24px; + width: 24px; + } +} + +// Fix panel inset box-shadow (always dark so was bugged in light theme) +.panel { + &-top { + box-shadow: 0 1px $borders_color_dark; + } + + &-bottom { + box-shadow: 0 -1px $borders_color_dark; + } + + &-left { + box-shadow: 1px 0 $borders_color_dark; + } + + &-right { + box-shadow: -1px 0 $borders_color_dark; + } +} + +// Fix applet noaccent color (forced dark panel) +.applet { + &-box { + &:hover, + &:checked { + color: $noaccent_dark_fg_color; + background-color: $noaccent_dark_bg_color; + } + } + + &-label { + &:hover, + &:checked, + .applet-box:hover &, + .applet-box:checked & { + color: $noaccent_dark_fg_color; + } + } + + &-icon { + color: $noaccent_dark_fg_color; + + &:hover, + &:checked, + .applet-box:hover > &, + .applet-box:checked > & { + color: $noaccent_dark_fg_color; + } + } +} diff --git a/meson_options.txt b/meson_options.txt index 387082aa61..775b1cae33 100644 --- a/meson_options.txt +++ b/meson_options.txt @@ -9,7 +9,7 @@ option('gtksourceview', type: 'boolean', value: true, description:'build gtksour option('metacity', type: 'boolean', value: true, description:'build metacity component') option('sounds', type: 'boolean', value: true, description:'build sounds component') option('sessions', type: 'boolean', value: true, description:'build sessions component') -option('cinnamon-shell', type: 'boolean', value: false, description:'build cinnamon component') +option('cinnamon-shell', type: 'boolean', value: true, description:'build cinnamon component') option('default', type: 'boolean', value: true, description:'build Yaru default flavour') option('dark', type: 'boolean', value: true, description:'build Yaru dark flavour') diff --git a/test-yaru b/test-yaru new file mode 100755 index 0000000000..21fa3f98d6 --- /dev/null +++ b/test-yaru @@ -0,0 +1,8 @@ +#!/bin/bash + +rm -rf ~/.local/share/themes/Yaru* +rm -rf builddir + +meson -Dprefix=$HOME/.local builddir +meson compile -C builddir +meson install -C builddir