Chillcraft/Colloid-gtk-theme
3
0
Fork 0
mirror of https://github.com/vinceliuice/Colloid-gtk-theme.git synced 2025-09-16 05:18:38 -07:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
vinceliuice
2023-10-19 22:57:20 +08:00
parent 20bae3c82e
commit 1f0de8ca0a
5 changed files with 630 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/sass/_colors.scss
View File

@@ -147,8 +147,9 @@ $assets-color: $primary;
$assets-color: if($variant == 'light', $green-dark, $green-light);
}
$frame: if($variant == 'light', rgba($black, 0.12), rgba($black, 0.20));
$frame: if($variant == 'light', rgba($black, 0.12), rgba($black, 0.25));
$border: if($variant == 'light', rgba($black, 0.12), rgba($white, 0.12));
$shade: if($variant == 'light', rgba($black, 0.08), rgba($white, 0.08));
$window-border: if($variant == 'light', rgba($black, 0.12), rgba($black, 0.75));
$solid-border: if($variant == 'light', mix(black, $base, 12%), mix(white, $base, 12%));
$border-alt: rgba($black, 0.16); // darker border color for Chrome and Firefox

227
src/sass/gtk/_common-4.0.scss
View File

@@ -290,6 +290,19 @@ entry {
// &.search { border-radius: $circular-radius; }
> text {
> placeholder {
color: $text-disabled;
}
> block-cursor {
color: $fill;
background-color: $text;
}
> selection { @extend %selected_items_primary; }
}
&.flat {
&:focus-within, &:disabled, &:hover, & {
min-height: 0;
@@ -301,7 +314,7 @@ entry {
}
}
image { // icons inside the entry
> image { // icons inside the entry
color: $text-secondary;
&:hover, &:active { color: $text; }
@@ -317,14 +330,10 @@ entry {
}
}
undershoot {
&.left { @include undershoot(left); }
&.right { @include undershoot(right); }
&.password image.caps-lock-indicator {
opacity: 0.35;
}
> text > selection { @extend %selected_items_primary; }
// entry error and warning style
@each $e_type, $e_color in (error, $error),
(warning, $warning),
@@ -348,12 +357,16 @@ entry {
outline: none;
}
> text > selection {
> text {
> selection {
background-color: rgba($e_color, 0.25);
color: $e_color;
}
image {
> cursor-handle > contents { background-color: currentColor; }
}
> image {
color: rgba($e_color, 0.75);
&:hover, &:active { color: $e_color; }
@@ -371,6 +384,10 @@ entry {
background-color: transparent;
}
.osd & > progress > trough > progress {
border-color: on($osd, fill);
}
button.image-button {
min-height: 24px;
min-width: 24px;
@@ -1464,7 +1481,7 @@ searchbar > revealer > box {
color: $titlebar-text-secondary;
border: none;
&:hover, &:active, &:checked { color: $titlebar-text; }
&:hover, &:focus:not(:hover):not(:active), &:active, &:checked { color: $titlebar-text; }
&:disabled { color: $titlebar-text-secondary-disabled; }
@@ -1492,14 +1509,29 @@ searchbar > revealer > box {
%titlebar-entry {
background-color: $titlebar-fill;
color: $titlebar-text-secondary;
&:hover, &:focus-within {
color: $titlebar-text;
}
&:disabled {
background-color: $titlebar-fill;
color: $titlebar-text-disabled;
}
image {
> text {
> placeholder {
color: $titlebar-text-disabled;
}
> block-cursor {
color: $titlebar-fill;
background-color: $titlebar-text;
}
}
> image {
color: $titlebar-text-secondary;
&:hover, &:active { color: $titlebar-text; }
@@ -1510,7 +1542,7 @@ searchbar > revealer > box {
headerbar {
transition: background-color $duration $ease-out, color $duration $ease-out;
box-shadow: inset 0 -1px $divider;
box-shadow: inset 0 -1px $border;
background-color: $titlebar;
color: $titlebar-text;
min-height: $large-size;
@@ -1522,6 +1554,7 @@ headerbar {
&:backdrop {
background-color: $titlebar-backdrop;
color: $titlebar-text-secondary;
box-shadow: inset 0 -1px $border;
&:disabled { color: $titlebar-text-secondary-disabled; }
}
@@ -1574,6 +1607,7 @@ headerbar {
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
entry,
spinbutton,
splitbutton,
button,
menubutton,
stackswitcher,
@@ -2199,7 +2233,7 @@ magnifier {
box-shadow: none;
}
&:checked:not(:active), &:selected:not(:active) {
&:selected:not(:active) {
transition: $transition,
border-image $ripple-fade-in-duration $ease-out,
background-size 0ms,
@@ -2440,13 +2474,55 @@ $tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
gtkalpha($primary, 0) 20px);
}
%tabbar_tab {
min-height: $small-size;
min-width: $small-size;
padding: $space-size / 2 $space-size;
border: none;
background-clip: padding-box;
font-weight: 500;
border-radius: $modal-radius;
@include button(flat-normal);
color: $titlebar-text-secondary;
&:hover:not(:selected) {
@include button(flat-hover);
box-shadow: none;
color: $titlebar-text;
}
&:disabled {
@include button(flat-disabled);
color: $titlebar-text-secondary-disabled;
}
&:active {
@include button(flat-active);
box-shadow: none;
color: $titlebar-text;
}
&:selected:not(:active) {
transition: $transition,
border-image $ripple-fade-in-duration $ease-out,
background-size 0ms,
background-image 0ms,
background-color 0ms;
background-color: if($topbar == 'light', $base, rgba(white, 0.15));
color: $titlebar-text;
box-shadow: 0 1px 3px rgba(black, 0.1);
&:disabled { color: $titlebar-text-disabled; }
}
}
tabbar {
> revealer > box {
box-shadow: none;
}
.box {
background-color: transparent;
background-color: $titlebar;
background-image: none;
padding: 0;
margin: 0;
@@ -2456,8 +2532,8 @@ tabbar {
box-shadow: none;
&:backdrop {
background-color: transparent;
transition: none;
background-color: $titlebar-backdrop;
transition: background-color $duration $ease-out;
> scrolledwindow,
> .start-action,
@@ -2470,6 +2546,7 @@ tabbar {
tabbox {
padding: 0;
margin: 0;
min-height: $medium-size;
> background {
@@ -2487,11 +2564,12 @@ tabbar {
> tabboxchild {
padding: 0;
margin: 0;
}
}
tab {
@extend %tabs_tab;
@extend %tabbar_tab;
padding: $space-size;
margin: $space-size 2px;
@@ -2608,6 +2686,15 @@ dnd {
min-width: $small-size;
min-height: $small-size;
border-radius: $circular-radius;
color: $titlebar-text-secondary;
&:hover, &:active {
color: $titlebar-text;
}
&:disabled {
color: $titlebar-text-secondary-disabled;
}
}
indicator {
@@ -3514,6 +3601,12 @@ scrolledwindow {
&:dir(ltr) { @include undershoot(right); }
&:dir(rtl) { @include undershoot(left); }
}
> undershoot {
background-image: none;
box-shadow: none;
border: none;
}
}
// vbox and hbox separators
@@ -3701,7 +3794,7 @@ row {
&:selected {
background-color: $overlay-selected;
color: inherit; // for overlays
color: $text;
box-shadow: none;
&:hover {
@@ -3716,15 +3809,11 @@ row {
&:hover { background-color: $overlay-focus-hover; }
}
image,
label { color: $text; }
button image,
button label { color: inherit; }
&:disabled {
image,
label { color: $text-disabled; }
color: $text-disabled;
}
}
}
@@ -3789,11 +3878,6 @@ row {
// AdwEntryRow
row.entry {
&:not(:selected).activatable.focused:hover,
&:not(:selected).activatable.focused:active {
background-color: transparent;
}
.edit-icon, .indicator {
min-width: 24px;
min-height: 24px;
@@ -3815,6 +3899,49 @@ row.entry {
font-family: monospace;
}
}
}
row.spin {
spinbutton {
background: none;
border-spacing: $space-size;
box-shadow: none;
&, &:focus {
outline: none;
}
> button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
> button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
&, &:dir(ltr):last-child, &:dir(rtl):first-child {
@extend %button-basic;
@extend %circular-button;
min-width: 30px;
min-height: 30px;
margin: 10px 2px;
border: none;
}
}
}
&:disabled spinbutton {
> button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
> button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
&, &:dir(ltr):last-child, &:dir(rtl):first-child {
&:disabled {
filter: none;
}
}
}
}
}
row.entry,
row.spin {
&:not(:selected).activatable.focused:hover,
&:not(:selected).activatable.focused:active {
background-color: transparent;
}
@each $e_type, $e_color in (error, $error),
(warning, $warning),
@@ -3827,6 +3954,15 @@ row.entry {
> cursor-handle > contents { background-color: currentColor; }
}
.dim-label, .subtitle {
opacity: 1;
}
.suggested-action {
background-color: $e_color;
color: on($e_color);
}
}
}
}
@@ -4308,21 +4444,6 @@ filechooserbutton:drop(active) {
border-style: none;
background-color: $base-alt;
// &:not(separator) {
// &:dir(ltr),
// &.left,
// &.left:dir(rtl) {
// border-right: 1px solid $border;
// border-left-style: none;
// }
// &:dir(rtl),
// &.right {
// border-left: 1px solid $border;
// border-right-style: none;
// }
// }
listview.view,
list {
background-color: transparent;
@@ -4333,11 +4454,26 @@ filechooserbutton:drop(active) {
}
stacksidebar {
&.sidebar {
&:dir(ltr),
&.left,
&.left:dir(rtl) {
box-shadow: inset -1px 0 $border;
}
&:dir(rtl),
&.right,
&.right:dir(ltr) {
box-shadow: inset 1px 0 $border;
}
}
+ separator.vertical,
separator.horizontal { @extend %hide_separators; }
.sidebar-pane &.sidebar,
leaflet.unfolded > box > &.sidebar {
border: none;
box-shadow: none;
}
list {
@@ -4431,6 +4567,9 @@ placessidebar {
}
image.sidebar-icon {
color: inherit;
opacity: 0.75;
&:dir(ltr) { padding-right: 8px; }
&:dir(rtl) { padding-left: 8px; }
}

11
src/sass/gtk/_drawing-4.0.scss
View File

@@ -273,7 +273,7 @@
}
@mixin undershoot($p, $c: $frame, $neighbor: false) {
@mixin undershoot($p, $c: $frame, $neighbor: false, $style: 'compact') {
//
// undershoot
//
@@ -306,8 +306,13 @@
}
#{$_selector} undershoot.#{$p} {
box-shadow: inset $_border_pos $border;
background: linear-gradient(to $_direction, gtkalpha($c, .75), transparent 4px);
@if $style == 'compact' {
box-shadow: none;
} @else {
box-shadow: inset $_border_pos $shade;
}
background: linear-gradient(to $_direction, gtkalpha($c, .75), transparent $space-size);
}
}

38
src/sass/gtk/apps/_gnome-4.0.scss
View File

@@ -56,6 +56,10 @@
background-color: $titlebar-fill;
border-radius: $corner-radius;
margin: $space-size 0;
.content-pane & {
background-color: $fill;
}
}
#NautilusPathButton {
@@ -71,6 +75,10 @@
}
}
.content-pane &.current-dir {
color: $text;
}
&:first-child { margin-left: 0; }
}
@@ -1437,12 +1445,17 @@ popover.background.global-search {
}
panelframeswitcher {
padding: $space-size / 2;
padding: $space-size;
min-height: $medium-size;
}
.frameheader.header {
min-height: $small-size;
background-color: $base-alt;
// min-height: $small-size;
background-color: $titlebar;
&:backdrop {
background-color: $titlebar-backdrop;
}
> button {
border: none;
@@ -1462,6 +1475,8 @@ panelframeswitcher {
.end-action {
padding: 0;
border-left: 1px solid $border;
button { margin: $space-size; }
}
tabbox {
@@ -1532,6 +1547,23 @@ playlistview {
}
}
//
// Console
//
.exit-info {
padding: 6px;
border-top: 2px solid $primary;
background: rgba($primary, 0.9);
color: on($primary);
}
.error .exit-info {
border-top: 2px solid $error;
background: rgba($error, 0.9);
color: on($error);
}
//
// dialogs
//

443
src/sass/gtk/apps/_libadwaita.scss
View File

@@ -380,12 +380,16 @@ toolbarview.undershoot-bottom scrolledwindow {
// Sidebar
.unfolded stacksidebar.sidebar { border: none; }
$sidebar: if($topbar == 'dark' and $variant == 'light', $titlebar, $base-alt);
$sidebar-backdrop: if($topbar == 'dark' and $variant == 'light', $titlebar-backdrop, $background);
.sidebar-pane {
background-color: $base-alt;
color: $text;
background-color: $sidebar;
color: on($sidebar);
&:backdrop {
background-color: $background;
color: on($sidebar, disabled);
background-color: $sidebar-backdrop;
transition: background-color $duration $ease-out;
}
@@ -395,6 +399,7 @@ toolbarview.undershoot-bottom scrolledwindow {
}
.toolbar,
.sidebar,
.navigation-sidebar,
searchbar > revealer > box {
background-color: transparent;
@@ -402,23 +407,199 @@ toolbarview.undershoot-bottom scrolledwindow {
border: none;
}
@if $topbar == 'dark' and $variant == 'light' {
button:not(.suggested-action):not(.destructive-action) { @extend %titlebar-button; }
entry { @extend %titlebar-entry; }
.dim-label { color: on($sidebar, disabled); }
.navigation-sidebar {
> row {
color: on($sidebar, secondary);
&:hover, &:active, &:focus, &:selected {
color: on($sidebar);
}
&:disabled {
color: on($sidebar, secondary-disabled);
}
button { @extend %titlebar-button; }
}
}
placessidebar {
background-color: transparent;
.navigation-sidebar {
> row {
color: on($sidebar, secondary);
image.sidebar-icon,
label.sidebar-label {
color: on($sidebar, secondary);
}
&:hover, &:active, &:focus, &:selected {
color: on($sidebar);
image.sidebar-icon,
label.sidebar-label {
color: on($sidebar);
}
}
&:disabled {
color: on($sidebar, secondary-disabled);
image.sidebar-icon,
label.sidebar-label {
color: on($sidebar, secondary-disabled);
}
}
button { @extend %titlebar-button; }
}
}
}
scrollbar {
background-color: transparent;
> range > trough {
> slider {
background-color: on($sidebar, disabled);
&:hover { background-color: on($sidebar, secondary); }
&:active { background-color: on($sidebar); }
&:disabled { background-color: on($sidebar, secondary-disabled); }
}
}
&.overlay-indicator {
&:not(.dragging):not(.hovering) {
> range > trough > slider {
border: none;
}
}
&.dragging,
&.hovering {
background-color: transparent;
}
}
}
}
banner > revealer > widget {
background-color: gtkmix($primary, $base-alt, 30%);
background-color: gtkmix($primary, $sidebar, 30%);
color: $text;
&:backdrop {
background-color: gtkmix($primary, $base-alt, 30%);
background-color: gtkmix($primary, $sidebar, 30%);
}
}
}
%content-button-reset {
color: $text-secondary;
&:hover, &:focus:not(:hover):not(:active), &:active, &:checked { color: $text; }
&:disabled { color: $text-secondary-disabled; }
&:checked {
&:disabled {
color: $text-disabled;
}
}
&:backdrop {
color: $text-disabled;
&:focus, &:hover, &:active { color: $text-secondary; }
&:disabled { color: $text-secondary-disabled; }
&:checked {
color: $text-secondary;
&:disabled { color: $text-secondary-disabled; }
}
}
}
.content-pane {
tabbar {
tab {
&:checked:not(:active), &:selected:not(:active) {
background-color: $overlay-selected;
@if $topbar == 'dark' and $variant == 'light' {
headerbar {
color: $text;
box-shadow: none;
.subtitle,
.dim-label {
color: $text-secondary;
&:backdrop { color: $text-disabled; }
}
@if $window_button == 'mac' {
button:not(.suggested-action):not(.destructive-action):not(.close):not(.minimize):not(.maximize) {
@extend %content-button-reset;
}
windowcontrols {
> button:not(.suggested-action):not(.destructive-action) {
&.minimize, &.maximize, &.close {
&:backdrop {
> image { background-color: $track; }
&:hover, &:active {
color: $text-disabled;
}
}
}
}
}
} @else {
button:not(.suggested-action):not(.destructive-action) {
@extend %content-button-reset;
}
}
entry {
background-color: $fill;
color: $text-secondary;
&:hover, &:focus-within {
color: $text;
}
&:disabled {
background-color: $fill;
color: $text-disabled;
}
> text {
> placeholder {
color: $text-disabled;
}
> block-cursor {
color: $fill;
background-color: $text;
}
}
> image {
color: $text-secondary;
&:hover, &:active { color: $text; }
&:disabled { color: $text-disabled; }
}
}
}
}
@@ -448,41 +629,6 @@ toolbarview.undershoot-bottom scrolledwindow {
.sidebar-pane,
.content-pane .sidebar-pane,
.sidebar-pane .content-pane {
toolbarview.undershoot-top scrolledwindow {
@include undershoot(top);
}
toolbarview.undershoot-bottom scrolledwindow {
@include undershoot(bottom);
}
scrolledwindow {
&.undershoot-top {
@include undershoot(top);
}
&.undershoot-bottom {
@include undershoot(bottom)
}
&.undershoot-start {
&:dir(ltr) { @include undershoot(left); }
&:dir(rtl) { @include undershoot(right); }
}
&.undershoot-end {
&:dir(ltr) { @include undershoot(right); }
&:dir(rtl) { @include undershoot(left); }
}
}
flap,
leaflet,
navigation-view,
overlay-split-view {
@include transition-shadows($frame);
}
&:dir(ltr), &.end:dir(rtl) {
&, banner > revealer > widget {
box-shadow: none;
@@ -498,19 +644,224 @@ toolbarview.undershoot-bottom scrolledwindow {
}
}
.sidebar-pane,
.content-pane,
.content-pane .sidebar-pane,
.sidebar-pane .content-pane {
toolbarview.undershoot-top scrolledwindow {
@include undershoot(top, $style: 'border');
}
toolbarview.undershoot-bottom scrolledwindow {
@include undershoot(bottom, $style: 'border');
}
scrolledwindow {
&.undershoot-top {
@include undershoot(top, $style: 'border');
}
&.undershoot-bottom {
@include undershoot(bottom, $style: 'border');
}
&.undershoot-start {
&:dir(ltr) { @include undershoot(left, $style: 'border'); }
&:dir(rtl) { @include undershoot(right, $style: 'border'); }
}
&.undershoot-end {
&:dir(ltr) { @include undershoot(right, $style: 'border'); }
&:dir(rtl) { @include undershoot(left, $style: 'border'); }
}
}
flap,
leaflet,
navigation-view,
overlay-split-view {
@include transition-shadows($frame);
}
}
.sidebar-pane,
.content-pane {
headerbar {
headerbar, .top-bar {
&, &:backdrop {
background-color: transparent;
box-shadow: none;
}
}
tabbar {
.box {
&, &:backdrop {
background-color: transparent;
box-shadow: none;
}
}
tab {
color: $text-secondary;
&:hover:not(:selected), &:active {
color: $text;
}
&:selected:not(:active) {
background-color: $overlay-selected;
color: $text;
box-shadow: none;
}
&:disabled {
color: $text-secondary-disabled;
}
}
button.image-button {
color: $text-secondary;
&:hover, &:active {
color: $text;
}
&:disabled {
color: $text-secondary-disabled;
}
}
}
}
// Gnome >= 45.0
.top-bar {
box-shadow: inset 0 -1px $border;
background-color: $titlebar;
&:backdrop {
background-color: $titlebar-backdrop;
}
.collapse-spacing {
padding: 0;
}
}
// ThemeSelector
themeselector, // Gnome text editor
panelthemeselector { // Gnome builder
margin: $space-size * 1.5;
checkbutton {
padding: 0;
min-height: 44px;
min-width: 44px;
padding: 1px;
background-clip: content-box;
border-radius: $circular-radius;
box-shadow: inset 0 0 0 1px $border;
&.follow:checked,
&.light:checked,
&.dark:checked {
box-shadow: inset 0 0 0 2px $primary;
}
&.follow {
background-image: linear-gradient(to bottom right, #ffffff 50%, #202020 50%);
}
&.light {
background-color: #ffffff;
}
&.dark {
background-color: #202020;
}
&.theme-selector radio {
-gtk-icon-source: none;
border: none;
background: none;
box-shadow: none;
min-height: 20px;
min-width: 20px;
padding: 0;
&:hover, &:active, &:checked {
background-color: transparent;
}
&:checked {
-gtk-icon-size: 20px;
-gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic@2.svg")));
color: on($primary);
background-color: $primary;
&, &:hover, &:active {
box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
}
}
}
}
}
themeswitcher { // Gnome console
padding: $space-size;
.check {
min-height: 20px;
min-width: 20px;
background: none;
padding: 0;
margin: 0;
border-radius: $circular-radius;
color: on($primary);
background-color: $primary;
&, &:hover, &:active {
box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
}
}
checkbutton {
padding: 0;
min-height: 44px;
min-width: 44px;
padding: 1px;
background-clip: content-box;
border-radius: $circular-radius;
box-shadow: inset 0 0 0 1px $border;
&:checked {
box-shadow: inset 0 0 0 2px $primary;
}
radio {
&, &:hover, &:active, &:checked, &:checked:hover, &:checked:active {
background-color: transparent;
border: none;
background: none;
box-shadow: none;
color: transparent;
-gtk-icon-source: none;
-gtk-icon-size: 0;
}
}
&.system {
background: linear-gradient(-45deg, #1e1e1e 50%, white 50%);
}
&.light {
color: gtkalpha(black, .8);
background-color: white;
}
&.dark {
color: white;
background-color: #1e1e1e;
}
}
}