mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2024-10-18 05:20:35 -04:00
Fixed issues
This commit is contained in:
vinceliuice
parent
d269edf9af
commit
72a05a46f0
11 changed files with 305 additions and 113 deletions
10
README.md
10
README.md
|
|
@ -71,6 +71,14 @@ Default ColorSchemes themes will follow the system style now ! (switch [light/da
|
|||
|
||||
https://github.com/vinceliuice/Colloid-gtk-theme/assets/7604295/d5c24086-08bc-45a4-b4d9-124c02249216
|
||||
|
||||
### Fix for Flatpak
|
||||
|
||||
```sh
|
||||
sudo flatpak override --filesystem=xdg-config/gtk-3.0 && sudo flatpak override --filesystem=xdg-config/gtk-4.0
|
||||
```
|
||||
|
||||
If you use flatpak apps, you can run this to fix theme issue
|
||||
|
||||
### ColorSchemes
|
||||
|
||||
|
||||
|
|
@ -79,7 +87,7 @@ https://github.com/vinceliuice/Colloid-gtk-theme/assets/7604295/d5c24086-08bc-45
|
|||
|
||||
|
||||
|
||||
### Flatpak Installation
|
||||
### Flatpak Installation (gtk-3.0)
|
||||
|
||||
Automatically install your host GTK+ theme as a Flatpak. Use this:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import 'apps/builder';
|
||||
@import 'apps/calculator';
|
||||
@import 'apps/control-center';
|
||||
@import 'apps/editor';
|
||||
@import 'apps/nautilus';
|
||||
@import 'apps/weather';
|
||||
|
|
|
|||
|
|
@ -131,3 +131,72 @@ $dim_label_opacity: 0.55;
|
|||
$dimmer_opacity: 0.3;
|
||||
$disabled_opacity: 0.45;
|
||||
$strong_disabled_opacity: 0.3;
|
||||
|
||||
:root {
|
||||
--accent-blue: #3584e4;
|
||||
--accent-teal: #2190a4;
|
||||
--accent-green: #3a944a;
|
||||
--accent-yellow: #c88800;
|
||||
--accent-orange: #ed5b00;
|
||||
--accent-red: #e62d42;
|
||||
--accent-pink: #d56199;
|
||||
--accent-purple: #9141ac;
|
||||
--accent-slate: #6f8396;
|
||||
|
||||
--accent-bg-color: @accent_bg_color;
|
||||
--accent-fg-color: @accent_fg_color;
|
||||
|
||||
--destructive-bg-color: @destructive_bg_color;
|
||||
--destructive-fg-color: @destructive_fg_color;
|
||||
|
||||
--success-bg-color: @success_bg_color;
|
||||
--success-fg-color: @success_fg_color;
|
||||
|
||||
--warning-bg-color: @warning_bg_color;
|
||||
--warning-fg-color: @warning_fg_color;
|
||||
|
||||
--error-bg-color: @error_bg_color;
|
||||
--error-fg-color: @error_fg_color;
|
||||
|
||||
--window-bg-color: @window_bg_color;
|
||||
--window-fg-color: @window_fg_color;
|
||||
|
||||
--view-bg-color: @view_bg_color;
|
||||
--view-fg-color: @view_fg_color;
|
||||
|
||||
--headerbar-bg-color: @headerbar_bg_color;
|
||||
--headerbar-fg-color: @headerbar_fg_color;
|
||||
--headerbar-border-color: @headerbar_border_color;
|
||||
--headerbar-backdrop-color: @headerbar_backdrop_color;
|
||||
--headerbar-shade-color: @headerbar_shade_color;
|
||||
--headerbar-darker-shade-color: @headerbar_darker_shade_color;
|
||||
|
||||
--sidebar-bg-color: @sidebar_bg_color;
|
||||
--sidebar-fg-color: @sidebar_fg_color;
|
||||
--sidebar-backdrop-color: @sidebar_backdrop_color;
|
||||
--sidebar-border-color: @sidebar_border_color;
|
||||
--sidebar-shade-color: @sidebar_shade_color;
|
||||
|
||||
--secondary-sidebar-bg-color: @secondary_sidebar_bg_color;
|
||||
--secondary-sidebar-fg-color: @secondary_sidebar_fg_color;
|
||||
--secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color;
|
||||
--secondary-sidebar-border-color: @secondary_sidebar_border_color;
|
||||
--secondary-sidebar-shade-color: @secondary_sidebar_shade_color;
|
||||
|
||||
--card-bg-color: @card_bg_color;
|
||||
--card-fg-color: @card_fg_color;
|
||||
--card-shade-color: @card_shade_color;
|
||||
|
||||
--dialog-bg-color: @dialog_bg_color;
|
||||
--dialog-fg-color: @dialog_fg_color;
|
||||
|
||||
--popover-bg-color: @popover_bg_color;
|
||||
--popover-fg-color: @popover_fg_color;
|
||||
--popover-shade-color: @popover_shade_color;
|
||||
|
||||
--thumbnail-bg-color: @thumbnail_bg_color;
|
||||
--thumbnail-fg-color: @thumbnail_fg_color;
|
||||
|
||||
--shade-color: @shade_color;
|
||||
--scrollbar-outline-color: @scrollbar_outline_color;
|
||||
}
|
||||
84
src/sass/libadwaita/apps/_control-center.scss
Normal file
84
src/sass/libadwaita/apps/_control-center.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
preferencesgroup > box {
|
||||
button.background-preview-button.toggle {
|
||||
padding: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
outline-color: transparent;
|
||||
outline-width: 3px;
|
||||
outline-offset: $base_padding / 2;
|
||||
outline-style: solid;
|
||||
|
||||
&, > background-preview {
|
||||
border-radius: $button_radius;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline-color: $hover_color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline-color: $active_color;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
outline-color: $accent_color;
|
||||
}
|
||||
}
|
||||
|
||||
.cutout-button { background-color: $dialog_bg_color; }
|
||||
|
||||
button.accent-button {
|
||||
min-height: 24px;
|
||||
min-width: 24px;
|
||||
padding: $base_padding / 2;
|
||||
border-radius: $circular_radius;
|
||||
background: var(--accent-bg-color);
|
||||
outline: none;
|
||||
background-clip: content-box;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover { box-shadow: 0 0 0 3px $hover_color; }
|
||||
|
||||
&:checked { box-shadow: 0 0 0 3px $accent_color; }
|
||||
|
||||
&.blue, &.teal, &.green, &.yellow, &.orange, &.red, &.pink, &.purple, &.slate {
|
||||
--accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
|
||||
}
|
||||
|
||||
&.blue {
|
||||
--accent-bg-color: var(--accent-blue);
|
||||
}
|
||||
|
||||
&.teal {
|
||||
--accent-bg-color: var(--accent-teal);
|
||||
}
|
||||
|
||||
&.green {
|
||||
--accent-bg-color: var(--accent-green);
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
--accent-bg-color: var(--accent-yellow);
|
||||
}
|
||||
|
||||
&.orange {
|
||||
--accent-bg-color: var(--accent-orange);
|
||||
}
|
||||
|
||||
&.red {
|
||||
--accent-bg-color: var(--accent-red);
|
||||
}
|
||||
|
||||
&.pink {
|
||||
--accent-bg-color: var(--accent-pink);
|
||||
}
|
||||
|
||||
&.purple {
|
||||
--accent-bg-color: var(--accent-purple);
|
||||
}
|
||||
|
||||
&.slate {
|
||||
--accent-bg-color: var(--accent-slate);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -44,3 +44,15 @@
|
|||
border-radius: $button_radius;
|
||||
@extend %button_basic_flat;
|
||||
}
|
||||
|
||||
list.operations-list {
|
||||
background: none;
|
||||
|
||||
> row {
|
||||
&, &:hover, &:active, &:focus, &:selected {
|
||||
background: none;
|
||||
transition: none;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -306,7 +306,7 @@ button {
|
|||
|
||||
@at-root %pill_button,
|
||||
&.pill {
|
||||
padding: 10px 32px;
|
||||
padding: $base_padding * 1.5 $medium_size - 4px;
|
||||
border-radius: $circular_radius;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -231,3 +231,19 @@ window.filechooser headerbar box.start + box.vertical {
|
|||
margin-bottom: -$base_padding;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
|
||||
.fr-sidebar {
|
||||
> row {
|
||||
padding: $base_padding $base_padding * 1.5;
|
||||
|
||||
&:not(.fr-sidebar-row) {
|
||||
&, &:hover, &:active, &:focus, &:selected,
|
||||
&:active:hover, &:focus:hover, &:selected:hover {
|
||||
background: none;
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -28,6 +28,10 @@ list {
|
|||
}
|
||||
}
|
||||
|
||||
button listview.view {
|
||||
background: none;
|
||||
}
|
||||
|
||||
list.frame { border-radius: $button_radius; }
|
||||
|
||||
listview > header {
|
||||
|
|
|
|||
|
|
@ -7,47 +7,22 @@ window.dialog.message {
|
|||
min-height: 20px;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-style: none;
|
||||
border-top-left-radius: 7px;
|
||||
border-top-right-radius: 7px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
box.dialog-vbox.vertical {
|
||||
margin-top: 6px;
|
||||
border-spacing: 24px;
|
||||
|
||||
> box > box > box > label.title {
|
||||
font-weight: 800;
|
||||
font-size: 15pt;
|
||||
}
|
||||
}
|
||||
|
||||
&.csd {
|
||||
// bigger radius for better antialiasing
|
||||
border-bottom-left-radius: $window_radius+1;
|
||||
border-bottom-right-radius: $window_radius+1;
|
||||
|
||||
.dialog-action-area {
|
||||
border-top: 1px solid $border_color;
|
||||
border: none;
|
||||
box-shadow: inset 0 1px $border_color;
|
||||
margin: 0;
|
||||
border-spacing: 0;
|
||||
border-spacing: $base_padding;
|
||||
padding: $base_padding;
|
||||
|
||||
> button {
|
||||
@extend %button_basic_flat;
|
||||
padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
|
||||
border-radius: 0;
|
||||
padding: $base_padding + 4px $base_padding + 8px; // labels are not vertically centered on message dialog, this is a workaround
|
||||
border-radius: $button_radius;
|
||||
border: none;
|
||||
background-clip: padding-box;
|
||||
border-left: 1px solid $border_color;
|
||||
|
||||
&:first-child {
|
||||
border-bottom-left-radius: $window_radius+1;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: $window_radius+1;
|
||||
}
|
||||
|
||||
&.suggested-action {
|
||||
color: $accent_color;
|
||||
|
|
@ -56,9 +31,22 @@ window.dialog.message {
|
|||
&.destructive-action {
|
||||
color: $destructive_color;
|
||||
}
|
||||
|
||||
&.default {
|
||||
&, &:focus:not(:hover):not(:active) { color: $success_color; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
box.dialog-vbox.vertical {
|
||||
margin-top: $base_padding;
|
||||
border-spacing: $small_size;
|
||||
|
||||
> box > box > box > label.title {
|
||||
font-weight: 800;
|
||||
font-size: 15pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************
|
||||
|
|
@ -74,24 +62,53 @@ window.dialog-window.alert {
|
|||
|
||||
dialog-host > dialog.alert.floating sheet,
|
||||
window.dialog-window.alert {
|
||||
border-radius: $window_radius+1;
|
||||
outline: none;
|
||||
border-radius: $window_radius + $base_padding;
|
||||
|
||||
@if $rimless == 'true' {
|
||||
outline: 0 none transparent;
|
||||
box-shadow: $shadow-z16,
|
||||
0 0 36px transparent;
|
||||
} @else {
|
||||
outline-offset: -1px;
|
||||
outline: 1px solid $window_outline_color;
|
||||
box-shadow: $shadow-z16,
|
||||
0 0 36px transparent,
|
||||
0 0 0 1px $headerbar_darker_shade_color;
|
||||
}
|
||||
}
|
||||
|
||||
window.messagedialog,
|
||||
dialog.alert {
|
||||
dialog.alert.floating {
|
||||
.message-area {
|
||||
padding: 24px 30px;
|
||||
border-spacing: 24px;
|
||||
padding-top: $medium_size - 4px;
|
||||
padding-bottom: $base_padding * 2;
|
||||
border-spacing: $small_size;
|
||||
|
||||
&.has-heading.has-body {
|
||||
border-spacing: 10px;
|
||||
border-spacing: $base_padding + 4px;
|
||||
|
||||
> .child {
|
||||
margin-top: $base_padding + 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.response-area > button {
|
||||
padding: 10px 14px;
|
||||
border-radius: 0;
|
||||
> .heading-bin, > .body, > .child {
|
||||
padding-left: $small_size;
|
||||
padding-right: $small_size;
|
||||
}
|
||||
}
|
||||
|
||||
.response-area {
|
||||
padding: $base_padding * 2;
|
||||
padding-top: $base_padding * 3;
|
||||
border-spacing: $base_padding * 2;
|
||||
|
||||
> button {
|
||||
min-height: $small_size;
|
||||
min-width: $large_size + 12px;
|
||||
padding: $base_padding + 4px $base_padding + 8px;
|
||||
border-radius: $button_radius;
|
||||
margin: 0;
|
||||
|
||||
&.suggested {
|
||||
color: $accent_color;
|
||||
|
|
@ -101,54 +118,30 @@ dialog.alert {
|
|||
color: $destructive_color;
|
||||
}
|
||||
}
|
||||
|
||||
.response-area {
|
||||
&:not(.compact) > button {
|
||||
margin-top: -1px;
|
||||
margin-right: -1px;
|
||||
margin-left: -1px;
|
||||
|
||||
&:first-child:dir(ltr),
|
||||
&:last-child:dir(rtl) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child:dir(ltr),
|
||||
&:first-child:dir(rtl) {
|
||||
margin-right: 0;
|
||||
&.short {
|
||||
.message-area {
|
||||
padding-top: $small_size;
|
||||
border-spacing: $base_padding * 2 + 6px;
|
||||
|
||||
> .heading-bin, > .body, > .child {
|
||||
padding-left: $base_padding * 2 + 6px;
|
||||
padding-right: $base_padding * 2 + 6px;
|
||||
}
|
||||
|
||||
&.has-heading.has-body {
|
||||
border-spacing: $base_padding;
|
||||
}
|
||||
}
|
||||
|
||||
&.compact > button {
|
||||
margin-top: -1px;
|
||||
margin-bottom: -1px;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.messagedialog,
|
||||
dialog.alert.floating {
|
||||
.response-area {
|
||||
&:not(.compact) > button {
|
||||
&:first-child:dir(ltr),
|
||||
&:last-child:dir(rtl) {
|
||||
border-bottom-left-radius: $window_radius+1;
|
||||
}
|
||||
padding: $base_padding * 2 + 6px;
|
||||
padding-top: $base_padding * 1.5;
|
||||
|
||||
&:last-child:dir(ltr),
|
||||
&:first-child:dir(rtl) {
|
||||
border-bottom-right-radius: $window_radius+1;
|
||||
}
|
||||
}
|
||||
|
||||
&.compact > button {
|
||||
&:first-child {
|
||||
border-bottom-left-radius: $window_radius+1;
|
||||
border-bottom-right-radius: $window_radius+1;
|
||||
> button {
|
||||
min-width: 0;
|
||||
padding: $base_padding + 2px $base_padding * 2 + 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,8 +34,9 @@ popover {
|
|||
|
||||
> list,
|
||||
> .view,
|
||||
> toolbar {
|
||||
border-style: none;
|
||||
> toolbar,
|
||||
> scrolledwindow > viewport > list {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -291,6 +291,10 @@ toolbarview {
|
|||
transition: filter $backdrop_transition;
|
||||
}
|
||||
}
|
||||
|
||||
button.pill {
|
||||
padding: ($medium_size - 24px) / 2 $small_size;
|
||||
}
|
||||
}
|
||||
|
||||
> .top-bar {
|
||||
|
|
|
|||
Loading…
Reference in a new issue