diff --git a/README.md b/README.md index ebf34fc..7e679db 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ OPTIONS: -l, --libadwaita Link installed Orchis gtk-4.0 theme to config folder for all libadwaita app use Orchis theme - --round Change button's round corner border-radius [Input the px value you want] (Suggest: 2px < value < 16px) + --round Change theme round corner border-radius [Input the px value you want] (Suggested: 2px < value < 16px) -r, --remove, -u, --uninstall Uninstall/Remove installed themes diff --git a/core.sh b/core.sh index 1255de2..5e1522c 100755 --- a/core.sh +++ b/core.sh @@ -187,9 +187,8 @@ clean() { } uninstall_link() { - [[ -L "${HOME}/.config/gtk-4.0/assets" ]] && rm -rf "${HOME}/.config/gtk-4.0/assets" && echo -e "Removing ${HOME}/.config/gtk-4.0/assets" - [[ -L "${HOME}/.config/gtk-4.0/gtk.css" ]] && rm -rf "${HOME}/.config/gtk-4.0/gtk.css" && echo -e "Removing ${HOME}/.config/gtk-4.0/gtk.css" - [[ -L "${HOME}/.config/gtk-4.0/gtk-dark.css" ]] && rm -rf "${HOME}/.config/gtk-4.0/gtk-dark.css" && echo -e "Removing ${HOME}/.config/gtk-4.0/gtk-dark.css" + rm -rf "${HOME}/.config/gtk-4.0/"{assets,gtk.css,gtk-dark.css} + echo -e "\nRemoving ${HOME}/.config/gtk-4.0 links..." } link_libadwaita() { diff --git a/install.sh b/install.sh index 973f056..135a9e7 100755 --- a/install.sh +++ b/install.sh @@ -17,7 +17,7 @@ OPTIONS: -l, --libadwaita Link installed Orchis gtk-4.0 theme to config folder for all libadwaita app use Orchis theme - --round Change button's round corner border-radius [Input the px value you want] (Suggest: 2px < value < 16px) + --round Change theme round corner border-radius [Input the px value you want] (Suggested: 2px < value < 16px) -r, --remove, -u, --uninstall Uninstall/Remove installed themes diff --git a/src/_sass/_colors.scss b/src/_sass/_colors.scss index bf7933f..ca158cd 100644 --- a/src/_sass/_colors.scss +++ b/src/_sass/_colors.scss @@ -131,7 +131,7 @@ $destructive: $error; $check_radio_primary: if($check_radio == 'default', $success, $primary); $frame: if($variant == 'light', rgba(black, 0.08), rgba(black, 0.16)); // instead of shadows -$border: if($variant == 'light', rgba(black, 0.12), rgba(black, 0.12)); +$border: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12)); $solid-border: if($variant == 'light', darken($background, 8%), lighten($background, 12%)); $border-alt: rgba(black, 0.16); // darker border color for Chrome and Firefox $titlebar-indicator: if($topbar == 'dark', currentColor, $primary); diff --git a/src/_sass/gtk/_colors-libadwaita.scss b/src/_sass/gtk/_colors-libadwaita.scss new file mode 100644 index 0000000..a30cf05 --- /dev/null +++ b/src/_sass/gtk/_colors-libadwaita.scss @@ -0,0 +1,159 @@ +$blue_1: #99c1f1; +$blue_2: #62a0ea; +$blue_3: #3584e4; +$blue_4: #1c71d8; +$blue_5: #1a5fb4; +$green_1: #8ff0a4; +$green_2: #57e389; +$green_3: #33d17a; +$green_4: #2ec27e; +$green_5: #26a269; +$yellow_1: #f9f06b; +$yellow_2: #f8e45c; +$yellow_3: #f6d32d; +$yellow_4: #f5c211; +$yellow_5: #e5a50a; +$orange_1: #ffbe6f; +$orange_2: #ffa348; +$orange_3: #ff7800; +$orange_4: #e66100; +$orange_5: #c64600; +$red_1: #f66151; +$red_2: #ed333b; +$red_3: #e01b24; +$red_4: #c01c28; +$red_5: #a51d2d; +$purple_1: #dc8add; +$purple_2: #c061cb; +$purple_3: #9141ac; +$purple_4: #813d9c; +$purple_5: #613583; +$brown_1: #cdab8f; +$brown_2: #b5835a; +$brown_3: #986a44; +$brown_4: #865e3c; +$brown_5: #63452c; +$light_1: #ffffff; +$light_2: #f6f5f4; +$light_3: #deddda; +$light_4: #c0bfbc; +$light_5: #9a9996; +$dark_1: #77767b; +$dark_2: #5e5c64; +$dark_3: #3d3846; +$dark_4: #241f31; +$dark_5: #000000; + +// Sass thinks we're using the colors in the variables as strings and may shoot +// warning, it's innocuous and can be defeated by using #{$var}. + +@define-color blue_1 #{$blue_1}; +@define-color blue_2 #{$blue_2}; +@define-color blue_3 #{$blue_3}; +@define-color blue_4 #{$blue_4}; +@define-color blue_5 #{$blue_5}; +@define-color green_1 #{$green_1}; +@define-color green_2 #{$green_2}; +@define-color green_3 #{$green_3}; +@define-color green_4 #{$green_4}; +@define-color green_5 #{$green_5}; +@define-color yellow_1 #{$yellow_1}; +@define-color yellow_2 #{$yellow_2}; +@define-color yellow_3 #{$yellow_3}; +@define-color yellow_4 #{$yellow_4}; +@define-color yellow_5 #{$yellow_5}; +@define-color orange_1 #{$orange_1}; +@define-color orange_2 #{$orange_2}; +@define-color orange_3 #{$orange_3}; +@define-color orange_4 #{$orange_4}; +@define-color orange_5 #{$orange_5}; +@define-color red_1 #{$red_1}; +@define-color red_2 #{$red_2}; +@define-color red_3 #{$red_3}; +@define-color red_4 #{$red_4}; +@define-color red_5 #{$red_5}; +@define-color purple_1 #{$purple_1}; +@define-color purple_2 #{$purple_2}; +@define-color purple_3 #{$purple_3}; +@define-color purple_4 #{$purple_4}; +@define-color purple_5 #{$purple_5}; +@define-color brown_1 #{$brown_1}; +@define-color brown_2 #{$brown_2}; +@define-color brown_3 #{$brown_3}; +@define-color brown_4 #{$brown_4}; +@define-color brown_5 #{$brown_5}; +@define-color light_1 #{$light_1}; +@define-color light_2 #{$light_2}; +@define-color light_3 #{$light_3}; +@define-color light_4 #{$light_4}; +@define-color light_5 #{$light_5}; +@define-color dark_1 #{$dark_1}; +@define-color dark_2 #{$dark_2}; +@define-color dark_3 #{$dark_3}; +@define-color dark_4 #{$dark_4}; +@define-color dark_5 #{$dark_5}; + +/* GTK NAMED COLORS + ---------------- + use responsibly! */ + +// Sass thinks we're using the colors in the variables as strings and may shoot +// warning, it's innocuous and can be defeated by using #{$var}. + +// These are the colors apps are can override. We define the defaults here and +// define variables for them in _colors.scss + +// The main accent color and the matching text value +@define-color accent_bg_color #{$primary}; +@define-color accent_fg_color #{on($primary)}; +@define-color accent_color #{$primary}; + +// destructive-action buttons +@define-color destructive_bg_color #{$destructive}; +@define-color destructive_fg_color #{on($destructive)}; +@define-color destructive_color #{$destructive}; + +// Levelbars, entries, labels and infobars. These don't need text colors +@define-color success_bg_color #{$success}; +@define-color success_fg_color #{on($success)}; +@define-color success_color #{$success}; + +@define-color warning_bg_color #{$warning}; +@define-color warning_fg_color #{on($warning)}; +@define-color warning_color #{$warning}; + +@define-color error_bg_color #{$error}; +@define-color error_fg_color #{on($error)}; +@define-color error_color #{$error}; + +// Window +@define-color window_bg_color #{$background}; +@define-color window_fg_color #{$text}; + +// Views - e.g. text view or tree view +@define-color view_bg_color #{$base}; +@define-color view_fg_color #{$text}; + +// Header bar, search bar, tab bar +@define-color headerbar_bg_color #{$titlebar}; +@define-color headerbar_fg_color #{$titlebar-text}; +@define-color headerbar_border_color #{$border}; +@define-color headerbar_backdrop_color #{$titlebar-backdrop}; +@define-color headerbar_shade_color #{$border}; + +// Cards, boxed lists +@define-color card_bg_color #{$base}; +@define-color card_fg_color #{$text}; +@define-color card_shade_color #{$border}; + +// Dialogs +@define-color dialog_bg_color #{$base-alt}; +@define-color dialog_fg_color #{$text}; + +// Popovers +@define-color popover_bg_color #{$surface}; +@define-color popover_fg_color #{$text}; + +// Miscellaneous +@define-color shade_color #{$border}; +@define-color scrollbar_outline_color #{$border}; diff --git a/src/_sass/gtk/_common-4.0.scss b/src/_sass/gtk/_common-4.0.scss index f9aff2d..59b1012 100644 --- a/src/_sass/gtk/_common-4.0.scss +++ b/src/_sass/gtk/_common-4.0.scss @@ -271,76 +271,77 @@ spinner { /**************** * Text Entries * ****************/ -%entry, -entry { - %entry_basic, & { - min-height: $medium-size; - padding: 0 8px; - border-spacing: $space-size; - border-radius: $corner-radius; - caret-color: currentColor; // this shouldn't be needed. - - @include entry(normal); - &:focus-within { @include entry(checked); } - - &:drop(active) { @include entry(hover); } +%entry-basic { + caret-color: currentColor; // this shouldn't be needed. - &:disabled { @include entry(disabled); } + @include entry(normal); + &:focus-within { @include entry(checked); } + &:drop(active) { @include entry(hover); } + &:disabled { @include entry(disabled); } - // &.search { border-radius: $circular-radius; } + image { + color: $text-secondary; - &.flat { - min-height: 0; - padding: 2px; - border-radius: 0; - background-color: transparent; - } + &:hover, &:active { color: $text; } - image { // icons inside the entry - color: $text-secondary; + &:disabled { color: $text-disabled; } + } +} - &:hover, &:active { color: $text; } +entry { + min-height: $medium-size; + padding: 0 8px; + border-spacing: $space-size; + border-radius: $corner-radius; + @extend %entry-basic; - &:disabled { color: $text-disabled; } + // &.search { border-radius: $circular-radius; } - &.left { - margin-left: ($medium-size - 16px) / 2 - 8px; - margin-right: 6px; - } + &.flat { + min-height: 0; + padding: 2px; + border-radius: 0; + background-color: transparent; + } - &.right { - margin-left: 6px; - margin-right: ($medium-size - 16px) / 2 - 8px; - } + image { // icons inside the entry + &.left { + margin-left: ($medium-size - 16px) / 2 - 8px; + margin-right: 6px; } - undershoot { - &.left { @include undershoot(left); } - - &.right { @include undershoot(right); } + &.right { + margin-left: 6px; + margin-right: ($medium-size - 16px) / 2 - 8px; } + } - > text > selection { @extend %selected_items_primary; } + undershoot { + &.left { @include undershoot(left); } - // entry error and warning style - @each $e_type, $e_color in (error, $error), - (success, $success), - (warning, $warning) { - &.#{$e_type} { - @include entry(normal, $e_color); + &.right { @include undershoot(right); } + } - image { color: $e_color; } + > text > selection { @extend %selected_items_primary; } - selection { - color: on($e_color); - background-color: $e_color; - } + // entry error and warning style + @each $e_type, $e_color in (error, $error), + (success, $success), + (warning, $warning) { + &.#{$e_type} { + @include entry(normal, $e_color); - &:focus-within { @include entry(checked, $e_color); } + image { color: $e_color; } - &:disabled { @include entry(disabled, $e_color); } + selection { + color: on($e_color); + background-color: $e_color; } + + &:focus-within { @include entry(checked, $e_color); } + + &:disabled { @include entry(disabled, $e_color); } } } @@ -750,20 +751,17 @@ button.link { * GtkSpinButton * *****************/ spinbutton { - &:not(.vertical) { - // in this horizontal configuration, the whole spinbutton - // behaves as the entry, so we extend the entry styling - // and nuke the style on the internal entry - @extend %entry; - + &:not(.vertical), + &.vertical { + @include entry(normal); + &:focus-within { @include entry(checked); } + &:disabled { @include entry(disabled); } + border-radius: $corner-radius; padding: 0; border-spacing: 0; > text { - min-width: $large-size - 8px * 2; - // reset all the other props since the spinbutton node is styled here margin: 0; - padding-left: $space-size * 2; border-image: none; border-radius: 0; box-shadow: none; @@ -773,17 +771,29 @@ spinbutton { > button { @extend %button-flat-simple; @extend %small-button; - margin: 0; - - // margin: $space-size; - border: solid $space-size transparent; + padding: 0; + border: $space-size solid transparent; // Remove unwanted focus indicator &:focus:not(:hover):not(:active):not(:disabled) { box-shadow: inset 0 0 0 9999px transparent; color: $text-secondary; } + } + } + + &:not(.vertical) { + // in this horizontal configuration, the whole spinbutton + // behaves as the entry, so we extend the entry styling + // and nuke the style on the internal entry + + > text { + min-width: $large-size - 8px * 2; + // reset all the other props since the spinbutton node is styled here + padding-left: $space-size * 2; + } + > button { &.up:dir(ltr), &.down:dir(rtl) { margin-left: -$space-size / 2; } @@ -794,38 +804,16 @@ spinbutton { // Vertical &.vertical { - @extend %entry; - - padding: 0; - &:disabled { color: $text-disabled; } > text { - margin: 0; - border-image: none; - border-radius: 0; - box-shadow: none; - background-color: transparent; - min-height: $medium-size; min-width: $large-size - $space-size; padding: 0; } > button { - @extend %button-flat-simple; - @extend %small-button; - padding: 0; - border: solid $space-size transparent; - - // Remove unwanted focus indicator - &:focus:not(:hover):not(:active) { - box-shadow: inset 0 0 0 9999px transparent; - color: $text-secondary; - } - &.up { margin: 0 $space-size / 2; } - &.down { margin: 0 $space-size / 2; } } } @@ -864,16 +852,8 @@ combobox { // align menu labels with the button label > popover.menu { - margin-top: $space-size - 2px; - - > contents { - padding: $space-size; - - modelbutton { - padding-left: $space-size * 1.5; - padding-right: $space-size * 1.5; - } - } + margin-top: $space-size; + padding: 0; } button.combo cellview { @@ -1053,7 +1033,10 @@ searchbar > revealer > box { background-clip: border-box; box-shadow: none; - entry { margin: 0; } + entry, + button, + menubutton, + splitbutton { margin: 0; } } /*************** @@ -1095,8 +1078,15 @@ searchbar > revealer > box { } %titlebar-entry { - background-color: $titlebar-fill; - color: $titlebar-text; + caret-color: $titlebar-text; + + &, &:focus-within { + background-color: $titlebar-fill; + + &, & > text { + color: $titlebar-text; + } + } &:disabled { background-color: $titlebar-fill; @@ -1114,20 +1104,29 @@ searchbar > revealer > box { headerbar { transition: background-color $duration $ease-out, color $duration $ease-out; - box-shadow: inset 0 -1px $divider, inset 0 1px highlight($titlebar); - background-color: $titlebar; + box-shadow: inset 0 -1px $divider; color: $titlebar-text; min-height: $large-size; padding: 0; margin: 0; - border-radius: $window-radius $window-radius 0 0; + + @if $topbar == 'dark' { + background-color: transparent; + } @else { + background-color: $titlebar; + } &:disabled { color: $titlebar-text-disabled; } &:backdrop { - background-color: $titlebar-backdrop; color: $titlebar-text-secondary; + @if $topbar == 'dark' { + background-color: transparent; + } @else { + background-color: $titlebar-backdrop; + } + &:disabled { color: $titlebar-text-secondary-disabled; } } @@ -1186,7 +1185,8 @@ headerbar { @extend %titlebar-button; } - button.suggested-action, button.destructive-action { + button.suggested-action, + button.destructive-action { &:disabled { background-color: $titlebar-fill; color: $titlebar-text-disabled; @@ -1195,15 +1195,29 @@ headerbar { button.toggle { border-radius: $circular-radius; } - popover.background { + popover.background { // reset + > contents { + color: $text; + + .dim-label { color: $text-secondary; } + } + button, entry, spinbutton { border-radius: $menuitem-radius; } - button:not(.suggested-action):not(.destructive-action):not(.flat) { + button:not(.suggested-action):not(.destructive-action) { @extend %button-basic; + + &.flat { + @extend %button-flat; + } + + image { color: $text; } } + entry { @extend %entry-basic; } + .linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) { border-radius: 0; @@ -1219,11 +1233,34 @@ headerbar { &.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action).text-button { border-radius: $circular-radius; - } - } + color: $titlebar-text-secondary; - box.vertical & { - background-color: $titlebar; + &:focus, &:hover, &:active { color: $titlebar-text; } + + &:disabled { color: $titlebar-text-secondary-disabled; } + + &:checked { + color: on($primary); + + &:disabled { + color: on($primary, disabled); + } + } + + &:backdrop { + color: $titlebar-text-disabled; + + &:focus, &:hover, &:active { color: $titlebar-text-secondary; } + + &:disabled { color: $titlebar-text-secondary-disabled; } + + &:checked { + color: on($primary, disabled); + + &:disabled { color: on($primary, secondary-disabled); } + } + } + } } > windowhandle > box { @@ -1303,6 +1340,8 @@ headerbar { &.default-decoration { min-height: $small-size; padding: $space-size; + background-image: none; + background-color: $titlebar; box-shadow: inset 0 -1px $divider, inset 0 1px highlight($titlebar); windowcontrols { @@ -1375,6 +1414,34 @@ pathbar > button { } } +.pathbar { + background-color: $fill; + color: $text-secondary; + border: none; + border-radius: $corner-radius; + padding: 2px; + + headerbar & { + margin-top: $space-size; + margin-bottom: $space-size; + background-color: on($titlebar, fill); + color: $titlebar-text-secondary; + } + + > button { + margin-top: 0; + margin-bottom: 0; + min-height: 20px; + border-radius: $corner-radius - 2px; + border: none; + box-shadow: none; + + &:last-child { + @include button(flat-checked); + } + } +} + /************** * Tree Views * @@ -1560,7 +1627,7 @@ menubar { popover.menu { box.inline-buttons { - padding: 0 $space-size; + padding: 0 $space-size + 8px; button.image-button.model { min-height: $menuitem-size; @@ -1615,6 +1682,7 @@ popover.menu { margin-right: 0; } +<<<<<<< HEAD modelbutton { transition: background-color $duration $ease-out; min-height: $menuitem-size - $space-size; @@ -1642,9 +1710,11 @@ popover.menu { } } +======= +>>>>>>> fdefaf61499c971da070212bd68fd775b6cc1393 label.title { font-weight: bold; - padding: 4px ($space-size + 20px); //this will fall apart with font sizing + padding: $space-size / 2 ($space-size + 6px) * 2 + $space-size + 2px; //this will fall apart with font sizing } } @@ -1655,6 +1725,7 @@ popover.menu { popover.background { font: initial; + padding: 0; &, &:backdrop { background-color: transparent; @@ -1696,7 +1767,13 @@ popover.background { margin: $space-size / 2 0; } - list separator { margin: 0; } + list { + > row { + padding: $space-size $space-size * 2; + } + + separator { margin: 0; } + } } // FIXME: Use the popover color instead of transparent as a workaround for .view @@ -1709,6 +1786,33 @@ popover.background { &:only-child { border-radius: $menuitem-radius; } } + modelbutton { + transition: background-color $duration $ease-out; + min-height: $menuitem-size - $space-size; + min-width: $menuitem-size * 2; + padding: $space-size / 2 $space-size * 1.5; + border-radius: $menuitem-radius; + color: $text; + font: initial; + text-shadow: none; + border-spacing: $space-size; + @extend %button-flat-simple; + + accelerator { + color: $text-disabled; + margin-left: $space-size * 5; + + &:disabled { + color: $divider; + } + } + + arrow { + &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); } + &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); } + } + } + &.menu button, button.model { min-height: 32px; @@ -2257,7 +2361,7 @@ radio { &:not(:hover):focus { box-shadow: inset 0 0 0 9999px transparent; } - popover modelbutton.flat & { + popover modelbutton & { margin: 0; // this is a workaround for a menu check/radio size allocation issue padding: 0; @@ -2675,6 +2779,9 @@ progressbar { min-width: $bar-size; min-height: $bar-size; background-color: transparent; + box-shadow: none; + margin: 0; + padding: 0; trough { background-color: transparent; } @@ -2787,6 +2894,11 @@ actionbar > revealer > box { background-color: $base; background-clip: border-box; box-shadow: none; + + entry, + button, + menubutton, + splitbutton { margin: 0; } } statusbar { @@ -2865,7 +2977,6 @@ list { color: $text-secondary; > row { - padding: 2px; background-clip: padding-box; } @@ -2927,8 +3038,14 @@ row { @extend %button-flat-simple; } - button:hover &, button:active &, button:checked & { - background-color: transparent; + button &.activatable { + &, &:hover, &.has-open-popup, &:active, &:active:hover { + background-color: transparent; + box-shadow: none; + background-image: none; + transition: none; + animation: none; + } } button:checked & { @@ -3131,7 +3248,6 @@ row.expander { } // AdwExpanderRow arrow rotation - image.expander-row-arrow { transition: 200ms $ease-out; @include margin-start(6px); @@ -3145,11 +3261,11 @@ row.expander { @extend .dim-label; &:dir(ltr) { - -gtk-icon-transform: rotate(-0.25turn); + -gtk-icon-transform: rotate(0.5turn); } &:dir(rtl) { - -gtk-icon-transform: rotate(0.25turn); + -gtk-icon-transform: rotate(-0.5turn); } } @@ -3936,8 +4052,6 @@ colorchooser .popover.osd { **********************/ window { outline: none; - transition: $transition-shadow; - box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent; &.csd { border-radius: $window-radius; @@ -3951,8 +4065,12 @@ window { &.tiled-left { border-radius: 0; } } - @if $variant == 'light' and $topbar == 'dark' { + @if $topbar == 'dark' { &.background { + box-shadow: $shadow-z16, + 0 16px (24px * .6) 2px transparent, + 0 6px (30px * .6) 5px transparent, + inset 0 1px highlight($titlebar); background-color: transparent; background-image: linear-gradient(to bottom, $titlebar, @@ -3960,6 +4078,10 @@ window { $background $large-size, $background); } + } @else { + box-shadow: $shadow-z16, + 0 16px (24px * .6) 2px transparent, + 0 6px (30px * .6) 5px transparent; } &:backdrop { @@ -3967,7 +4089,26 @@ window { // change when we go to backdrop, to prevent jumping windows. // The biggest shadow should be in the same order then in the active state // or the jumping will happen during the transition. - box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent; + transition: $transition-shadow; + + @if $topbar == 'dark' { + &.background { + box-shadow: $shadow-z4, + 0 16px (24px * .6) 2px transparent, + 0 6px (30px * .6) 5px transparent, + inset 0 1px highlight($titlebar); + background-color: transparent; + background-image: linear-gradient(to bottom, + $titlebar-backdrop, + $titlebar-backdrop $large-size, + $background $large-size, + $background); + } + } @else { + box-shadow: $shadow-z4, + 0 16px (24px * .6) 2px transparent, + 0 6px (30px * .6) 5px transparent; + } } &.ssd { diff --git a/src/_sass/gtk/_drawing-4.0.scss b/src/_sass/gtk/_drawing-4.0.scss index 9c9f882..e4f7fa8 100644 --- a/src/_sass/gtk/_drawing-4.0.scss +++ b/src/_sass/gtk/_drawing-4.0.scss @@ -135,8 +135,6 @@ color: $text-disabled; filter: none; opacity: 1; - - > label { color: $text-disabled; } } @if $t == checked { diff --git a/src/_sass/gtk/apps/_gnome-4.0.scss b/src/_sass/gtk/apps/_gnome-4.0.scss index b8aa2f5..c100e7d 100644 --- a/src/_sass/gtk/apps/_gnome-4.0.scss +++ b/src/_sass/gtk/apps/_gnome-4.0.scss @@ -284,11 +284,17 @@ #NautilusQueryEditor { // search entry border-radius: $circular-radius; + color: $titlebar-text-secondary; - > menubutton > button { - min-width: 16px; - min-height: 16px; + &:focus-within { color: $titlebar-text; } + + &:disabled { color: $titlebar-text-secondary-disabled; } + + > menubutton > button.image-button { + min-width: $menuitem-size; + min-height: $menuitem-size; margin: 0; + padding: 0; } > text { margin: 0; } @@ -334,6 +340,7 @@ // // Gnome Control Center // + window.dialog { > box > stack > box > box { > notebook.frame { @@ -343,6 +350,19 @@ window.dialog { } } +// leaflet +leaflet { + background-color: transparent; + + stack.background { + background-color: transparent; + } + + > box > scrolledwindow > viewport > widget > stack { + background-color: $base; + } +} + // // Calculator // @@ -605,13 +625,7 @@ screenshot-carousel box.frame.view { window.org-gnome-Builder { headerbar { - box-shadow: inset 0 -1px $border; - splitbutton { - button { - border-radius: $corner-radius; - } - notification button { margin: 0; min-height: $small-size; @@ -619,26 +633,21 @@ window.org-gnome-Builder { padding: 0; } } - - menubutton > button { - border-radius: $corner-radius; - padding: $space-size $space-size * 1.5; - } - - paneltogglebutton { - button { - border-radius: $corner-radius; - } - } } } popover.background.global-search { - > arrow, > contents { padding: 0; } + > arrow, + > contents { padding: 0; } } panelframeswitcher { padding: $space-size; + border-bottom: 1px solid $border; +} + +panelframetabbar { + border-bottom: none; } .frameheader.header { @@ -665,10 +674,10 @@ panelframeswitcher { border-left: 1px solid $border; menubutton > button { - margin: $space-size; + margin: $space-size / 2; min-height: $small-size; min-width: $small-size; - padding: $space-size / 2; + padding: $space-size; border-radius: $corner-radius; } } @@ -681,6 +690,16 @@ panelframeswitcher { } } +// panelframe { +// tabview > stack { +// background-color: $fill; +// +// textview.sourceview.view { +// background-color: $fill; +// } +// } +// } + panelstatusbar { background-color: $background; diff --git a/src/_sass/gtk/apps/_libadwaita.scss b/src/_sass/gtk/apps/_libadwaita.scss index f7bbcf4..ca0076f 100644 --- a/src/_sass/gtk/apps/_libadwaita.scss +++ b/src/_sass/gtk/apps/_libadwaita.scss @@ -707,41 +707,3 @@ tabbox:drop(active) { // Sidebar .unfolded stacksidebar.sidebar { border: none; } - - -// -// leaflet -// - -leaflet { - outline-color: highlight($titlebar); - outline-width: 1px; - outline-style: solid; - outline-offset: -1px; - border-radius: $window-radius; - - headerbar { - border-radius: 0; - box-shadow: inset 0 -1px $divider; - } - - leaflet { - border-radius: 0; - outline: none; - } - - > box > scrolledwindow > viewport > widget > stack { - background-color: $base; - } - - .maximized &, - .fullscreen &, - .tiled &, - .tiled-top &, - .tiled-right &, - .tiled-bottom &, - .tiled-left & { - border-radius: 0; - outline: none; - } -} diff --git a/src/gnome-shell/sass/widgets/_popovers-42.scss b/src/gnome-shell/sass/widgets/_popovers-42.scss index c17a87a..277a6dc 100644 --- a/src/gnome-shell/sass/widgets/_popovers-42.scss +++ b/src/gnome-shell/sass/widgets/_popovers-42.scss @@ -2,7 +2,7 @@ //.the popover itself .popup-menu-boxpointer { - // -arrow-border-radius: $popup_radius; + -arrow-border-radius: $container_padding; -arrow-background-color: transparent; -arrow-border-width: 0; -arrow-border-color: transparent; @@ -23,7 +23,7 @@ .popup-menu-content { padding: $container_padding; - margin: 0 6px 14px; + margin: 0 3px 14px; background-color: $menu_bg_color; border-radius: $popup_radius; border: none; diff --git a/src/gnome-shell/sass/widgets/_scrollbars.scss b/src/gnome-shell/sass/widgets/_scrollbars.scss index 6049b76..35da966 100644 --- a/src/gnome-shell/sass/widgets/_scrollbars.scss +++ b/src/gnome-shell/sass/widgets/_scrollbars.scss @@ -7,6 +7,7 @@ StScrollView { StScrollBar { padding: 0; + margin: 6px; StScrollView & { min-width: 8px; diff --git a/src/gnome-shell/shell-40-0/gnome-shell-Compact.css b/src/gnome-shell/shell-40-0/gnome-shell-Compact.css index 999922d..7d6e3f8 100644 --- a/src/gnome-shell/shell-40-0/gnome-shell-Compact.css +++ b/src/gnome-shell/shell-40-0/gnome-shell-Compact.css @@ -376,6 +376,7 @@ StScrollView.hfade { StScrollBar { padding: 0; + margin: 6px; } StScrollView StScrollBar { diff --git a/src/gnome-shell/shell-40-0/gnome-shell-Dark-Compact.css b/src/gnome-shell/shell-40-0/gnome-shell-Dark-Compact.css index 785f9f4..a0d1825 100644 --- a/src/gnome-shell/shell-40-0/gnome-shell-Dark-Compact.css +++ b/src/gnome-shell/shell-40-0/gnome-shell-Dark-Compact.css @@ -376,6 +376,7 @@ StScrollView.hfade { StScrollBar { padding: 0; + margin: 6px; } StScrollView StScrollBar { diff --git a/src/gnome-shell/shell-40-0/gnome-shell-Dark.css b/src/gnome-shell/shell-40-0/gnome-shell-Dark.css index 215906f..fb79ccd 100644 --- a/src/gnome-shell/shell-40-0/gnome-shell-Dark.css +++ b/src/gnome-shell/shell-40-0/gnome-shell-Dark.css @@ -376,6 +376,7 @@ StScrollView.hfade { StScrollBar { padding: 0; + margin: 6px; } StScrollView StScrollBar { diff --git a/src/gnome-shell/shell-40-0/gnome-shell.css b/src/gnome-shell/shell-40-0/gnome-shell.css index fe3da65..ecfe74b 100644 --- a/src/gnome-shell/shell-40-0/gnome-shell.css +++ b/src/gnome-shell/shell-40-0/gnome-shell.css @@ -376,6 +376,7 @@ StScrollView.hfade { StScrollBar { padding: 0; + margin: 6px; } StScrollView StScrollBar { diff --git a/src/gnome-shell/shell-42-0/gnome-shell-Compact.css b/src/gnome-shell/shell-42-0/gnome-shell-Compact.css index 0ff5488..d87a462 100644 --- a/src/gnome-shell/shell-42-0/gnome-shell-Compact.css +++ b/src/gnome-shell/shell-42-0/gnome-shell-Compact.css @@ -430,6 +430,7 @@ StScrollView.hfade { StScrollBar { padding: 0; + margin: 6px; } StScrollView StScrollBar { @@ -491,6 +492,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { /* Popovers/Menus */ .popup-menu-boxpointer { + -arrow-border-radius: 4px; -arrow-background-color: transparent; -arrow-border-width: 0; -arrow-border-color: transparent; @@ -511,7 +513,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu .popup-menu-content { padding: 4px; - margin: 0 6px 14px; + margin: 0 3px 14px; background-color: rgba(255, 255, 255, 0.97); border-radius: 18px; border: none; diff --git a/src/gnome-shell/shell-42-0/gnome-shell-Dark-Compact.css b/src/gnome-shell/shell-42-0/gnome-shell-Dark-Compact.css index 587110c..55cae7b 100644 --- a/src/gnome-shell/shell-42-0/gnome-shell-Dark-Compact.css +++ b/src/gnome-shell/shell-42-0/gnome-shell-Dark-Compact.css @@ -430,6 +430,7 @@ StScrollView.hfade { StScrollBar { padding: 0; + margin: 6px; } StScrollView StScrollBar { @@ -491,6 +492,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { /* Popovers/Menus */ .popup-menu-boxpointer { + -arrow-border-radius: 4px; -arrow-background-color: transparent; -arrow-border-width: 0; -arrow-border-color: transparent; @@ -511,7 +513,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu .popup-menu-content { padding: 4px; - margin: 0 6px 14px; + margin: 0 3px 14px; background-color: rgba(32, 32, 32, 0.97); border-radius: 18px; border: none; diff --git a/src/gnome-shell/shell-42-0/gnome-shell-Dark.css b/src/gnome-shell/shell-42-0/gnome-shell-Dark.css index b2e8470..028cf89 100644 --- a/src/gnome-shell/shell-42-0/gnome-shell-Dark.css +++ b/src/gnome-shell/shell-42-0/gnome-shell-Dark.css @@ -430,6 +430,7 @@ StScrollView.hfade { StScrollBar { padding: 0; + margin: 6px; } StScrollView StScrollBar { @@ -491,6 +492,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { /* Popovers/Menus */ .popup-menu-boxpointer { + -arrow-border-radius: 6px; -arrow-background-color: transparent; -arrow-border-width: 0; -arrow-border-color: transparent; @@ -511,7 +513,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu .popup-menu-content { padding: 6px; - margin: 0 6px 14px; + margin: 0 3px 14px; background-color: rgba(32, 32, 32, 0.97); border-radius: 20px; border: none; diff --git a/src/gnome-shell/shell-42-0/gnome-shell.css b/src/gnome-shell/shell-42-0/gnome-shell.css index 02a87f5..eb99911 100644 --- a/src/gnome-shell/shell-42-0/gnome-shell.css +++ b/src/gnome-shell/shell-42-0/gnome-shell.css @@ -430,6 +430,7 @@ StScrollView.hfade { StScrollBar { padding: 0; + margin: 6px; } StScrollView StScrollBar { @@ -491,6 +492,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { /* Popovers/Menus */ .popup-menu-boxpointer { + -arrow-border-radius: 6px; -arrow-background-color: transparent; -arrow-border-width: 0; -arrow-border-color: transparent; @@ -511,7 +513,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .popup-menu .popup-menu-content { padding: 6px; - margin: 0 6px 14px; + margin: 0 3px 14px; background-color: rgba(255, 255, 255, 0.97); border-radius: 20px; border: none; diff --git a/src/gtk/4.0/gtk-Compact.scss b/src/gtk/4.0/gtk-Compact.scss index 912e7cf..0e37fc7 100644 --- a/src/gtk/4.0/gtk-Compact.scss +++ b/src/gtk/4.0/gtk-Compact.scss @@ -8,3 +8,4 @@ $compact: 'true'; @import '../../_sass/gtk/common-4.0'; @import '../../_sass/gtk/apps-4.0'; @import '../../_sass/gtk/colors-public'; +@import '../../_sass/gtk/colors-libadwaita'; diff --git a/src/gtk/4.0/gtk-Dark-Compact.scss b/src/gtk/4.0/gtk-Dark-Compact.scss index 3adce11..122d1df 100644 --- a/src/gtk/4.0/gtk-Dark-Compact.scss +++ b/src/gtk/4.0/gtk-Dark-Compact.scss @@ -8,3 +8,4 @@ $compact: 'true'; @import '../../_sass/gtk/common-4.0'; @import '../../_sass/gtk/apps-4.0'; @import '../../_sass/gtk/colors-public'; +@import '../../_sass/gtk/colors-libadwaita'; diff --git a/src/gtk/4.0/gtk-Dark.scss b/src/gtk/4.0/gtk-Dark.scss index 8afdf44..d2c9d44 100644 --- a/src/gtk/4.0/gtk-Dark.scss +++ b/src/gtk/4.0/gtk-Dark.scss @@ -8,3 +8,4 @@ $compact: 'false'; @import '../../_sass/gtk/common-4.0'; @import '../../_sass/gtk/apps-4.0'; @import '../../_sass/gtk/colors-public'; +@import '../../_sass/gtk/colors-libadwaita'; diff --git a/src/gtk/4.0/gtk-Light-Compact.scss b/src/gtk/4.0/gtk-Light-Compact.scss index 7d9fc90..c8e57a3 100644 --- a/src/gtk/4.0/gtk-Light-Compact.scss +++ b/src/gtk/4.0/gtk-Light-Compact.scss @@ -8,3 +8,4 @@ $compact: 'true'; @import '../../_sass/gtk/common-4.0'; @import '../../_sass/gtk/apps-4.0'; @import '../../_sass/gtk/colors-public'; +@import '../../_sass/gtk/colors-libadwaita'; diff --git a/src/gtk/4.0/gtk-Light.scss b/src/gtk/4.0/gtk-Light.scss index 43b24f3..a7a0858 100644 --- a/src/gtk/4.0/gtk-Light.scss +++ b/src/gtk/4.0/gtk-Light.scss @@ -8,3 +8,4 @@ $compact: 'false'; @import '../../_sass/gtk/common-4.0'; @import '../../_sass/gtk/apps-4.0'; @import '../../_sass/gtk/colors-public'; +@import '../../_sass/gtk/colors-libadwaita'; diff --git a/src/gtk/4.0/gtk.scss b/src/gtk/4.0/gtk.scss index cbfceba..41441e2 100644 --- a/src/gtk/4.0/gtk.scss +++ b/src/gtk/4.0/gtk.scss @@ -8,3 +8,4 @@ $compact: 'false'; @import '../../_sass/gtk/common-4.0'; @import '../../_sass/gtk/apps-4.0'; @import '../../_sass/gtk/colors-public'; +@import '../../_sass/gtk/colors-libadwaita';