VesperOS/Colloid-gtk-theme
6
0
Fork 0
mirror of https://github.com/vinceliuice/Colloid-gtk-theme.git synced 2026-07-07 07:10:21 -07:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Vince
2022-11-01 22:04:16 +08:00
parent b93268c6fd
commit 68cb491705
3 changed files with 92 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sass/gtk/_common-4.0.scss
+16 -4
View File
@@ -3517,7 +3517,15 @@ row {
@at-root %row_activatable, &.activatable {
transition: $transition,
background-color $ripple-fade-in-duration $ease-out;
background-size $ripple-fade-out-duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
outline: none;
box-shadow: none;
background-color: transparent;
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
background-repeat: no-repeat;
background-position: center;
background-size: 1000% 1000%;
outline: none;
&:focus {
@@ -3528,15 +3536,19 @@ row {
&:hover, &.has-open-popup {
color: $text;
transition: $transition;
background-color: $overlay-hover;
box-shadow: none;
}
&:active {
transition: $transition,
background-size 0ms,
background-image 0ms;
animation: ripple $ripple-fade-in-duration $ease-out forwards;
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: 0% 0%;
background-color: $overlay-hover;
color: $text;
transition: $transition;
background-color: $overlay-active;
box-shadow: none;
}
src/sass/gtk/_drawing-4.0.scss
+66 -11
View File
@@ -1,5 +1,32 @@
// generic drawing of more complex things
//
// Ripple keyframes
//
@keyframes ripple {
to {
background-size: 1000% 1000%;
}
}
@keyframes ripple-on-slider {
to {
background-size: auto, 1000% 1000%;
}
}
@keyframes ripple-on-headerbar {
from {
background-image: radial-gradient(circle, $primary 0%, transparent 0%);
}
to {
background-image: radial-gradient(circle, $primary 100%, transparent 100%);
}
}
@mixin entry($t, $fc: $primary) {
//
// entry
@@ -9,32 +36,38 @@
//
@if $t == normal {
transition: $transition, box-shadow $ripple-fade-out-duration $ease-out;
transition: $transition,
outline $ripple-fade-out-duration $ease-out,
box-shadow $ripple-fade-out-duration $ease-out;
box-shadow: inset 0 0 0 2px transparent;
background-color: if($fc == $primary, $entry, rgba($fc, 0.1));
color: if($fc == $primary, $text-secondary, rgba($fc, 0.75));
outline: none;
outline: 0 solid transparent;
outline-offset: 4px;
}
@if $t == hover {
background-color: $overlay-hover;
box-shadow: inset 0 0 0 2px $overlay-hover;
color: if($fc == $primary, $text, $fc);
outline: none;
outline: 0 solid transparent;
outline-offset: 4px;
}
@if $t == focus {
background-color: $overlay-focus;
box-shadow: inset 0 0 0 2px if($fc == $primary, $track, $fc);
box-shadow: inset 0 0 0 2px transparent;
color: if($fc == $primary, $text, $fc);
outline: none;
outline: 2px solid if($fc == $primary, $track, $fc);
outline-offset: -2px;
}
@if $t == checked {
background-color: if($fc == $primary, $entry, rgba($fc, 0.1));
box-shadow: inset 0 0 0 2px if($fc == $primary, $primary, $fc);
box-shadow: inset 0 0 0 2px transparent;
color: if($fc == $primary, $text, $fc);
outline: none;
outline: 2px solid if($fc == $primary, $primary, $fc);
outline-offset: -2px;
}
@if $t == disabled {
@@ -78,9 +111,15 @@
@if $t == normal {
transition: $transition,
background-color $ripple-fade-in-duration $ease-out;
background-size $ripple-fade-out-duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
outline: none;
box-shadow: inset 0 0 0 9999px transparent;
background-color: $button;
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
background-repeat: no-repeat;
background-position: center;
background-size: 1000% 1000%;
color: $text;
}
@@ -95,7 +134,12 @@
@if $t == active {
transition: $transition,
background-color $ripple-fade-in-duration $ease-out;
background-size 0ms,
background-image 0ms,
border 0ms;
animation: ripple $ripple-fade-in-duration $ease-out forwards;
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: 0% 0%;
background-color: $overlay-active;
color: $text;
}
@@ -123,8 +167,14 @@
@if $t == flat-normal {
transition: $transition,
background-color $ripple-fade-in-duration $ease-out;
border-image $ripple-fade-in-duration $ease-out,
background-size $ripple-fade-out-duration $ease-out,
background-image $ripple-fade-out-opacity-duration $ease-out;
outline: none;
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
background-repeat: no-repeat;
background-position: center;
background-size: 1000% 1000%;
background-color: transparent;
color: $text-secondary;
}
@@ -142,7 +192,12 @@
@if $t == flat-active {
transition: $transition,
background-color $ripple-fade-in-duration $ease-out;
border-image $ripple-fade-in-duration $ease-out,
background-size 0ms,
background-image 0ms;
animation: ripple $ripple-fade-in-duration $ease-out forwards;
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
background-size: 0% 0%;
background-color: $overlay-active;
color: $text;
box-shadow: none;
src/sass/gtk/apps/_gnome-4.0.scss
+10 -10
View File
@@ -1088,11 +1088,11 @@ window > contents > leaflet { // Gnome control center
// Gnome Weather
//
$weather_temp_chart_fill_color: rgba(248, 228, 92, 0.5);
$weather_temp_chart_stroke_color: rgba(246, 211, 45, 1.0);
@define-color weather_temp_chart_fill_color: #{rgba(248, 228, 92, 0.5)};
@define-color weather_temp_chart_stroke_color: #{rgba(246, 211, 45, 1.0)};
$weather_thermometer_warm_color: if($variant == 'light', $yellow-dark, $yellow-light);
$weather_thermometer_cold_color: if($variant == 'light', $blue-dark, $blue-light);
@define-color weather_thermometer_warm_color: #{if($variant == 'light', $yellow-dark, $yellow-light)};
@define-color weather_thermometer_cold_color: #{if($variant == 'light', $blue-dark, $blue-light)};
$weather_thermometer_high_color: $yellow-light;
$weather_thermometer_low_color: $blue-light;
@@ -1208,12 +1208,12 @@ image.circular {
border-radius: $circular_radius;
}
WeatherThermometerScale {
border-radius: $circular_radius;
background-image: linear-gradient(to bottom, $weather_thermometer_warm_color, $weather_thermometer_cold_color);
margin: 0 36px;
padding: 0;
}
// WeatherThermometerScale {
// border-radius: $circular_radius;
// background-image: linear-gradient(to bottom, $weather_thermometer_warm_color, $weather_thermometer_cold_color);
// margin: 0 36px;
// padding: 0;
// }
//
// Gnome Clocks