This commit is contained in:
vinceliuice
2024-10-12 23:37:43 +08:00
parent 21b358c999
commit 1b3b2b4cfa
9 changed files with 265 additions and 221 deletions

View File

@@ -1,7 +1,11 @@
@import 'apps/builder'; @import 'apps/builder';
@import 'apps/calculator'; @import 'apps/calculator';
@import 'apps/calendar';
@import 'apps/clocks';
@import 'apps/console';
@import 'apps/control-center'; @import 'apps/control-center';
@import 'apps/editor'; @import 'apps/editor';
@import 'apps/nautilus'; @import 'apps/nautilus';
@import 'apps/software';
@import 'apps/weather'; @import 'apps/weather';
@import 'apps/other'; @import 'apps/other';

View File

@@ -307,9 +307,9 @@
} }
#{$_selector} undershoot.#{$p} { #{$_selector} undershoot.#{$p} {
@if $style==default { @if $style == 'default' {
box-shadow: none; box-shadow: none;
} @else if $style==frame { } @else if $style == 'frame' {
box-shadow: inset $_border_pos $border_color; box-shadow: inset $_border_pos $border_color;
} }

View File

@@ -7,15 +7,15 @@ label {
&.primary-label, &.month-name, &.secondary-label { &.primary-label, &.month-name, &.secondary-label {
font-size: 16pt; font-size: 16pt;
font-weight: bold; font-weight: bold;
padding: $space-size * 2; padding: $base_padding * 2;
} }
&.primary-label, &.month-name { &.primary-label, &.month-name {
color: $primary; color: $accent_color;
} }
&.secondary-label { &.secondary-label {
color: $text-disabled; color: $disabled_text_color;
} }
} }
@@ -23,7 +23,7 @@ calendar-view {
font-size: 10pt; font-size: 10pt;
&:selected { &:selected {
color: $primary; color: $accent_color;
font-weight: bold; font-weight: bold;
} }
} }
@@ -32,26 +32,28 @@ calendar-view.header,
label.header { label.header {
font-size: 10pt; font-size: 10pt;
font-weight: bold; font-weight: bold;
color: $text-disabled; color: $disabled_text_color;
} }
calendar-view.current, calendar-view.current,
weekgrid.current { weekgrid.current {
background-color: gtkalpha($primary, 0.3); background-color: gtkalpha($accent_color, 0.3);
} }
popover.events { popover.events {
background-color: $popover; background-color: $popover_bg_color;
color: $popover_fg_color;
padding: 0; padding: 0;
box { box {
border-top-left-radius: $corner-radius; border-top-left-radius: $button_radius;
border-top-right-radius: $corner-radius; border-top-right-radius: $button_radius;
} }
list { list {
background-color: $base; color: $view_fg_color;
border-radius: $corner-radius; background-color: $view_bg_color;
border-radius: $button_radius;
} }
scrolledwindow { scrolledwindow {
@@ -59,7 +61,7 @@ popover.events {
} }
button { button {
border-radius: $corner-radius; border-radius: $button_radius;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-style: solid none none; border-style: solid none none;
@@ -78,37 +80,25 @@ event {
&.timed, &.timed,
&:not(.slanted):not(.slanted-start):not(.slanted-end) { &:not(.slanted):not(.slanted-start):not(.slanted-end) {
border-radius: $corner-radius; border-radius: $button_radius;
} }
&.timed widget.edge { &.timed widget.edge {
border-radius: $corner-radius / 2; border-radius: $button_radius / 2;
min-width: 5px; min-width: 5px;
} }
&.slanted-start, &.slanted-start,
&.slanted-end:dir(rtl) { &.slanted-end:dir(rtl) {
padding-left: $space-size * 2 + 4px; padding-left: $base_padding * 2 + 4px;
border-radius: 0 $corner-radius / 2 $corner-radius / 2 0; border-radius: 0 $button_radius / 2 $button_radius / 2 0;
} }
&.slanted-end, &.slanted-end,
&.slanted-start:dir(rtl) { &.slanted-start:dir(rtl) {
padding-right: $space-size * 2 + 4px; padding-right: $base_padding * 2 + 4px;
border-radius: $corner-radius / 2 0 0 $corner-radius / 2; border-radius: $button_radius / 2 0 0 $button_radius / 2;
} }
&:not(.timed).color-dark {
color: white;
outline-color: rgba(0, 0, 0, 0.3);
}
&.timed,
&:not(.timed).color-light {
color: gtkalpha(black, 0.75);
outline-color: rgba(255, 255, 255, 0.5);
}
} }
// Event Popover // Event Popover
@@ -118,7 +108,7 @@ popover.event-popover > contents {
} }
.search-viewport { .search-viewport {
background-color: $base; background-color: $view_bg_color;
} }
// calendar popover // calendar popover
@@ -149,27 +139,29 @@ button:checked:not(:backdrop) .calendar-color-image,
// month/year controls // month/year controls
datechooser { datechooser {
color: $sidebar_fg_color;
navigator { // add some space between the two controls navigator { // add some space between the two controls
margin-right: $space-size; margin-right: $base_padding;
margin-left: $space-size; margin-left: $base_padding;
margin-bottom: $space-size; margin-bottom: $base_padding;
} }
navigator { navigator {
label { font-weight: bold; } label { font-weight: bold; }
button.flat, button.flat,
button.toggle, button.pill,
button.image-button { button.image-button {
min-height: $medium-size; min-height: 24px;
min-width: $medium-size; min-width: 24px;
padding: 0; padding: $base_padding;
} }
} }
// day names and week numbers // day names and week numbers
.weeknum, .weekday { .weeknum, .weekday {
color: $text-disabled; color: $disabled_text_color;
font-size: smaller; font-size: smaller;
} }
@@ -177,45 +169,45 @@ datechooser {
button.day { button.day {
font-size: 10pt; font-size: 10pt;
font-weight: normal; font-weight: normal;
margin: $space-size / 2; margin: 2px;
padding: 0; padding: $base_padding - 2px;
min-height: $medium-size; min-height: 24px;
min-width: $medium-size; min-width: 24px;
transition: none; transition: none;
dot { dot {
background-color: $text; background-color: $text_color;
border-radius: 50%; border-radius: 50%;
min-height: $space-size / 2; min-height: $base_padding / 2;
min-width: $space-size / 2; min-width: $base_padding / 2;
} }
&:selected, &.today:selected { &:selected, &.today:selected {
background-color: $primary; background-color: $accent_bg_color;
color: on($primary); color: $accent_fg_color;
font-weight: bold; font-weight: bold;
dot { background-color: on($primary); } dot { background-color: $accent_fg_color; }
} }
&.today { &.today {
color: $primary; color: $accent_bg_color;
dot { background-color: $primary; } dot { background-color: $accent_bg_color; }
} }
&.other-month { &.other-month {
&:not(:hover), &:not(:hover),
&:backdrop { &:backdrop {
color: gtkalpha(currentColor, 0.1); color: $secondary_disabled_text_color;
dot { background-color: gtkalpha(currentColor, 0.1); } dot { background-color: $secondary_disabled_text_color; }
} }
&:hover:not(:backdrop) { &:hover:not(:backdrop) {
color: $text-disabled; color: $disabled_text_color;
dot { background-color: $text-disabled; } dot { background-color: $disabled_text_color; }
} }
} }
} }
@@ -226,38 +218,38 @@ datechooser {
padding: 0; padding: 0;
& > box:first-child { & > box:first-child {
border-bottom: 1px solid $border; border-bottom: 1px solid $border_color
} }
.week-number { .week-number {
font-size: 16pt; font-size: 16pt;
font-weight: bold; font-weight: bold;
padding: $space-size * 2 $space-size * 2 $space-size * 3 $space-size * 2; padding: $base_padding * 2 $base_padding * 2 $base_padding * 3 $base_padding * 2;
color: $track; color: $secondary_disabled_text_color;
} }
&.week-temperature { &.week-temperature {
font-size: 10pt; font-size: 10pt;
font-weight: bold; font-weight: bold;
color: $text-disabled; color: $disabled_text_color;
} }
&.lines { &.lines {
color: $border; color: $border_color
} }
} }
weekhourbar > label { weekhourbar > label {
font-size: 10pt; font-size: 10pt;
padding: 4px $space-size; padding: 4px $base_padding;
} }
.week-view .lines { .week-view .lines {
color: $border; color: $border_color
} }
weekgrid > widget.now-strip { weekgrid > widget.now-strip {
background-color: gtkalpha($primary, 0.8); background-color: gtkalpha($accent_color, 0.8);
margin: 0 0 0 1px; margin: 0 0 0 1px;
min-height: 3px; min-height: 3px;
} }
@@ -265,28 +257,28 @@ weekgrid > widget.now-strip {
weekgrid, weekgrid,
.week-header { .week-header {
&:selected, &.dnd { &:selected, &.dnd {
background-color: gtkalpha($primary, 0.25); background-color: gtkalpha($accent_color, 0.25);
} }
} }
// Month cell // Month cell
monthcell { monthcell {
border: solid 1px $border; border: solid 1px $border_color;
border-width: 1px 0 0 1px; border-width: 1px 0 0 1px;
background-color: transparent; background-color: transparent;
transition: background-color 200ms; transition: background-color 200ms;
&:hover:not(.out-of-month):not(.today) { &:hover:not(.out-of-month):not(.today) {
background-color: $base-alt; background-color: $dialog_bg_color;
transition: background-color 200ms; transition: background-color 200ms;
color: $text; color: $text_color;
} }
&:selected { &:selected {
background-color: gtkalpha($primary, 0.1); background-color: gtkalpha($accent_color, 0.1);
&:hover { &:hover {
background-color: gtkalpha($primary, 0.2); background-color: gtkalpha($accent_color, 0.2);
} }
label.day-label { font-weight: bold; } label.day-label { font-weight: bold; }
@@ -295,24 +287,24 @@ monthcell {
&:nth-child(7n + 1) { border-left-width: 0; } &:nth-child(7n + 1) { border-left-width: 0; }
&.today { &.today {
background-color: gtkalpha($primary, 0.2); background-color: gtkalpha($accent_color, 0.2);
&:hover { &:hover {
background-color: gtkalpha($primary, 0.3); background-color: gtkalpha($accent_color, 0.3);
color: $primary; color: $accent_color;
} }
&:selected { &:selected {
background-color: gtkalpha($primary, 0.25); background-color: gtkalpha($accent_color, 0.25);
&:hover { &:hover {
background-color: gtkalpha($primary, 0.35); background-color: gtkalpha($accent_color, 0.35);
} }
} }
} }
label { label {
color: $text; color: $text_color;
font-size: 0.9rem; font-size: 0.9rem;
&.day-label { &.day-label {
@@ -321,15 +313,15 @@ monthcell {
} }
&.out-of-month { &.out-of-month {
background-color: $fill; background-color: $button_color;
label { label {
color: $text-secondary; color: $secondary_text_color;
} }
} }
button { button {
padding: 0 $space-size; padding: 0 $base_padding;
border-radius: 0; border-radius: 0;
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
@@ -344,8 +336,8 @@ monthpopover > box {
} }
.notes-section box > textview { .notes-section box > textview {
border-radius: $corner-radius; border-radius: $button_radius;
padding: $space-size; padding: $base_padding;
> text { > text {
background: none; background: none;
@@ -356,11 +348,11 @@ monthpopover > box {
agenda-view { agenda-view {
list { list {
> row { > row {
padding: 2px $space-size * 2; padding: 2px $base_padding * 2;
} }
> label { > label {
padding: $space-size $space-size * 2; padding: $base_padding $base_padding * 2;
} }
} }
@@ -381,12 +373,12 @@ searchbutton > popover > arrow {
// Month selector // Month selector
datechooser { datechooser {
padding: $space-size; padding: $base_padding;
.current-week { .current-week {
background: gtkalpha($titlebar, 0.7); background: $hover_color;
color: on($titlebar); color: $sidebar_fg_color;
border-radius: $corner-radius; border-radius: $button_radius;
} }
} }
@@ -394,7 +386,7 @@ menubutton {
&.sources-button { &.sources-button {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
border-radius: 0; border-radius: $button_radius;
border-top-style: none; border-top-style: none;
border-bottom-style: none; border-bottom-style: none;
@@ -404,17 +396,19 @@ menubutton {
} }
> button { > button {
border-radius: 0; border-radius: $button_radius;
min-height: 0;
padding: 0 $base_padding;
.title { .title {
font-size: 10pt; font-size: 10pt;
font-weight: normal; font-weight: normal;
padding: 0 $space-size; padding: 0 $base_padding;
} }
.subtitle { .subtitle {
font-size: 8pt; font-size: 8pt;
padding: 0 $space-size; padding: 0 $base_padding;
} }
.calendar-color-image { .calendar-color-image {
@@ -424,12 +418,6 @@ menubutton {
} }
stack > box { stack > box {
border-spacing: $space-size; border-spacing: $base_padding;
}
.topbar headerbar &.sources-button {
> button {
border-radius: 0 0 $corner-radius $corner-radius;
}
} }
} }

View File

@@ -3,7 +3,7 @@
// //
.large-button { .large-button {
padding: $space-size; padding: $base_padding;
} }
// alarms // alarms

View File

@@ -4,13 +4,13 @@
.exit-info { .exit-info {
padding: 6px; padding: 6px;
border-top: 2px solid $primary; border-top: 2px solid $accent_color;
background: rgba($primary, 0.9); background: gtkalpha($accent_color, 0.9);
color: on($primary); color: $accent_fg_color;
} }
.error .exit-info { .error .exit-info {
border-top: 2px solid $error; border-top: 2px solid $error_color;
background: rgba($error, 0.9); background: gtkalpha($error_color, 0.9);
color: on($error); color: $error_fg_color;
} }

View File

@@ -1,22 +1,64 @@
// //
// Nautilus // Nautilus
// //
.nautilus-window { .floating-bar {
.floating-bar { min-height: 32px;
min-height: 32px; padding: 0;
padding: 0; margin: $base_padding / 2;
margin: $base_padding; border-style: none;
border-style: none; border-radius: $button_radius;
border-radius: $button_radius; background-color: $accent_color;
background-color: $accent_color; color: $accent_fg_color;
box-shadow: $shadow-z3;
button {
margin: (32px - $small_size) / 2;
color: $accent_fg_color; color: $accent_fg_color;
box-shadow: $shadow-z3;
button { @extend %small_button;
margin: (32px - $small_size) / 2; }
color: $accent_fg_color; }
@extend %small_button; .nautilus-list-view {
columnview.view {
padding: 0;
> header > button {
border-top: 1px solid $border_color;
&:last-child {
padding-right: 24px;
}
}
}
listview.view {
padding: $base_padding;
margin: 0;
border-spacing: $base_padding / 2;
> row {
margin: 0;
> cell {
padding: $base_padding - 2px;
&:last-child {
padding-right: 24px;
}
}
}
#NautilusViewCell {
padding: 0;
button.star.circular {
margin: 0;
min-height: 24px;
min-width: 24px;
padding: $base_padding / 2;
border-radius: $circular_radius;
}
} }
} }
} }

View File

@@ -3,15 +3,15 @@
// //
.details-page { .details-page {
margin: $space-size * 4 0px; margin: $base_padding * 4 0px;
} }
.installed-overlay-box { .installed-overlay-box {
font-size: smaller; font-size: smaller;
background-color: $primary; background-color: $accent_color;
border-radius: 0; border-radius: 0;
color: on($primary); color: $accent_fg_color;
text-shadow: 0 1px 0 rgba(black, 0.2); text-shadow: 0 1px 0 gtkalpha(black, 0.2);
} }
screenshot-carousel box.frame { screenshot-carousel box.frame {
@@ -21,15 +21,15 @@ screenshot-carousel box.frame {
screenshot-carousel button, screenshot-carousel button,
.featured-carousel button { .featured-carousel button {
margin: $space-size * 2; margin: $base_padding * 2;
} }
.screenshot-image-main .image1, .screenshot-image-main .image1,
.screenshot-image-main .image2 { .screenshot-image-main .image2 {
margin-top: $space-size; margin-top: $base_padding;
margin-bottom: $space-size * 2; margin-bottom: $base_padding * 2;
margin-left: $space-size; margin-left: $base_padding;
margin-right: $space-size; margin-right: $base_padding;
} }
.app-tile-label { .app-tile-label {
@@ -37,13 +37,13 @@ screenshot-carousel button,
} }
.review-textbox { .review-textbox {
padding: $space-size; padding: $base_padding;
} }
.origin-rounded-box { .origin-rounded-box {
background-color: $divider; background-color: $hover_color;
border-radius: $circular-radius; border-radius: $circular_radius;
padding: $space-size - 2px; padding: $base_padding - 2px;
} }
.origin-beta { .origin-beta {
@@ -51,7 +51,7 @@ screenshot-carousel button,
} }
.origin-button > button { .origin-button > button {
padding: $space-size / 2 $space-size * 1.5; padding: $base_padding / 2 $base_padding * 1.5;
} }
.card flowboxchild { .card flowboxchild {
@@ -64,21 +64,21 @@ screenshot-carousel button,
} }
.category-tile.card { .category-tile.card {
padding: $space-size * 3.5; padding: $base_padding * 3.5;
border: none; border: none;
border-radius: $corner-radius; border-radius: $button_radius;
min-width: 140px; min-width: 140px;
font-weight: 900; font-weight: 900;
font-size: larger; font-size: larger;
box-shadow: $shadow-z3; box-shadow: $shadow-z3;
&.category-tile-iconless { &.category-tile-iconless {
padding: $space-size * 1.5 $space-size * 2.5; padding: $base_padding * 1.5 $base_padding * 2.5;
min-width: 130px; min-width: 130px;
font-size: 105%; font-size: 105%;
font-weight: normal; font-weight: normal;
box-shadow: none; box-shadow: none;
background-color: $fill; background-color: $button_color;
} }
// Styling for specific category buttons. // Styling for specific category buttons.
@@ -144,7 +144,7 @@ screenshot-carousel button,
&.category-socialize { &.category-socialize {
background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%); background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
color: $text-secondary; color: $secondary_text_color;
&:hover { &:hover {
background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%); background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
@@ -159,23 +159,23 @@ screenshot-carousel button,
padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */ padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
color: #1c71d8; color: #1c71d8;
background-color:#fdf8d7; background-color:#fdf8d7;
background-image: linear-gradient($border 1px, transparent 1px), background-image: linear-gradient($border_color 1px, transparent 1px),
linear-gradient(90deg, $border 1px, transparent 1px); linear-gradient(90deg, $border_color 1px, transparent 1px);
background-size: 10px 10px, 10px 10px; background-size: 10px 10px, 10px 10px;
background-position: -1px -4px, center -1px; background-position: -1px -4px, center -1px;
&:hover { &:hover {
color: #1c71d8; color: #1c71d8;
background-color: lighten(#fdf8d7, 5%); background-color: lighten(#fdf8d7, 5%);
background-image: linear-gradient($border 1px, transparent 1px), background-image: linear-gradient($border_color 1px, transparent 1px),
linear-gradient(90deg, $border 1px, transparent 1px); linear-gradient(90deg, $border_color 1px, transparent 1px);
} }
&:active { &:active {
color: #1c71d8; color: #1c71d8;
background-color: darken(#fdf8d7, 5%); background-color: darken(#fdf8d7, 5%);
background-image: linear-gradient($border 1px, transparent 1px), background-image: linear-gradient($border_color 1px, transparent 1px),
linear-gradient(90deg, $border 1px, transparent 1px); linear-gradient(90deg, $border_color 1px, transparent 1px);
} }
} }
} }
@@ -189,11 +189,11 @@ clamp.large .category-tile:not(.category-tile-iconless) {
.featured-tile { .featured-tile {
padding: 0; padding: 0;
box-shadow: none; box-shadow: none;
color: $text; color: $text_color;
label.title-1 { label.title-1 {
margin-top: $space-size; margin-top: $base_padding;
margin-bottom: $space-size; margin-bottom: $base_padding;
} }
&.narrow label.title-1 { &.narrow label.title-1 {
@@ -203,15 +203,15 @@ clamp.large .category-tile:not(.category-tile-iconless) {
.application-details-infobar { .application-details-infobar {
&, &.info { &, &.info {
background-color: $fill; background-color: $button_color;
color: $text; color: $text_color;
border: 1px solid $border; border: 1px solid $border_color;
} }
&.warning { &.warning {
background-color: $warning; background-color: $warning_color;
color: on($warning); color: $warning_fg_color;
border: 1px solid on($warning, divider); border: 1px solid gtkalpha($warning_fg_color, 0.1);
} }
} }
@@ -222,12 +222,12 @@ clamp.large .category-tile:not(.category-tile-iconless) {
} }
.application-details-description .button { .application-details-description .button {
padding-left: $space-size * 4; padding-left: $base_padding * 4;
padding-right: $space-size * 4; padding-right: $base_padding * 4;
} }
.install-progress { .install-progress {
background-image: linear-gradient(to top, $primary 2px, gtkalpha($primary, 0) 2px); background-image: linear-gradient(to top, $accent_color 2px, gtkalpha($accent_color, 0) 2px);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 bottom; background-position: 0 bottom;
background-size: 0; background-size: 0;
@@ -237,7 +237,7 @@ clamp.large .category-tile:not(.category-tile-iconless) {
.install-progress:dir(rtl) { background-position: 100% bottom; } .install-progress:dir(rtl) { background-position: 100% bottom; }
.review-row > * { .review-row > * {
margin: $space-size * 2; margin: $base_padding * 2;
} }
.review-row button { font-size: smaller; } .review-row button { font-size: smaller; }
@@ -248,7 +248,7 @@ clamp.large .category-tile:not(.category-tile-iconless) {
// this is the separator between yes and no vote buttons, gtk+ 3.20 only // this is the separator between yes and no vote buttons, gtk+ 3.20 only
.review-row .vote-buttons button:not(:first-child) { .review-row .vote-buttons button:not(:first-child) {
border-image: linear-gradient(to top, $border, $border) 0 0 0 1 / 5px 0 5px 1px; border-image: linear-gradient(to top, $border_color, $border_color) 0 0 0 1 / 5px 0 5px 1px;
} }
.review-row .vote-buttons button:hover, .review-row .vote-buttons button:hover,
@@ -259,13 +259,13 @@ clamp.large .category-tile:not(.category-tile-iconless) {
} }
review-bar { review-bar {
color: $text-disabled; color: $disabled_text_color;
background-image: none; background-image: none;
background-color: $track; background-color: $secondary_disabled_text_color;
} }
.review-histogram star-image { .review-histogram star-image {
color: $text-disabled; color: $disabled_text_color;
} }
.version-arrow-label { .version-arrow-label {
@@ -274,7 +274,7 @@ review-bar {
.overview-more-button { .overview-more-button {
font-size: smaller; font-size: smaller;
padding: 0 $space-size * 2 + 4px; padding: 0 $base_padding * 2 + 4px;
} }
.app-row-origin-text { .app-row-origin-text {
@@ -282,8 +282,8 @@ review-bar {
} }
.app-listbox-header { .app-listbox-header {
padding: $space-size; padding: $base_padding;
border-bottom: 1px solid $border; border-bottom: 1px solid $border_color;
} }
.image-list { .image-list {
@@ -318,12 +318,12 @@ star-image {
.update-failed-details { .update-failed-details {
font-family: Monospace; font-family: Monospace;
font-size: smaller; font-size: smaller;
padding: $space-size * 2 + 4px; padding: $base_padding * 2 + 4px;
} }
.upgrade-banner { .upgrade-banner {
padding: 0px; padding: 0px;
border-radius: $corner-radius; border-radius: $button_radius;
border: none; border: none;
} }
@@ -333,25 +333,25 @@ star-image {
} }
.upgrade-buttons #button_upgrades_install { .upgrade-buttons #button_upgrades_install {
padding-left: $space-size * 2 + 4px; padding-left: $base_padding * 2 + 4px;
padding-right: $space-size * 2 + 4px; padding-right: $base_padding * 2 + 4px;
} }
scrolledwindow.list-page > viewport > clamp > box { scrolledwindow.list-page > viewport > clamp > box {
margin: $space-size * 4 $space-size * 2; margin: $base_padding * 4 $base_padding * 2;
border-spacing: $space-size * 4; border-spacing: $base_padding * 4;
} }
.update-preferences preferencesgroup > box > box { .update-preferences preferencesgroup > box > box {
margin-top: $space-size * 3; margin-top: $base_padding * 3;
} }
.section > label:not(:first-child) { margin-top: $space-size; } .section > label:not(:first-child) { margin-top: $base_padding; }
.section > box:not(:first-child) { margin-top: $space-size * 2; } .section > box:not(:first-child) { margin-top: $base_padding * 2; }
clamp.status-page { clamp.status-page {
margin: $space-size * 6 $space-size * 2; margin: $base_padding * 6 $base_padding * 2;
} }
clamp.status-page .iconbox { clamp.status-page .iconbox {
@@ -360,25 +360,25 @@ clamp.status-page .iconbox {
} }
clamp.status-page .icon { clamp.status-page .icon {
color: $text-disabled; color: $disabled_text_color;
min-height: 32px; min-height: 32px;
min-width: 32px; min-width: 32px;
} }
clamp.status-page .icon:not(:last-child) { clamp.status-page .icon:not(:last-child) {
margin-bottom: $space-size * 6; margin-bottom: $base_padding * 6;
} }
clamp.status-page .title:not(:last-child) { clamp.status-page .title:not(:last-child) {
margin-bottom: $space-size * 2; margin-bottom: $base_padding * 2;
} }
app-context-bar { app-context-bar {
.context-tile { .context-tile {
border: 1px solid $border; border: 1px solid $border_color;
background-color: transparent; background-color: transparent;
border-radius: 0; border-radius: 0;
padding: $space-size * 4 $space-size * 2 $space-size * 3.5 $space-size * 2; padding: $base_padding * 4 $base_padding * 2 $base_padding * 3.5 $base_padding * 2;
outline-offset: 5px; outline-offset: 5px;
transition-property: outline, outline-offset, background-image; transition-property: outline, outline-offset, background-image;
border-bottom: none; border-bottom: none;
@@ -386,12 +386,12 @@ app-context-bar {
&:hover { &:hover {
background-image: none; background-image: none;
background-color: $overlay-hover; background-color: $hover_color;
} }
&.keyboard-activating, &.keyboard-activating,
&:active { &:active {
background-color: $overlay-active; background-color: $active_color;
} }
&:focus:focus-visible { &:focus:focus-visible {
@@ -413,7 +413,7 @@ app-context-bar {
border-radius: 0; border-radius: 0;
&:last-child { &:last-child {
border-radius: 0 $corner-radius $corner-radius 0; border-radius: 0 $button_radius $button_radius 0;
} }
} }
@@ -421,27 +421,27 @@ app-context-bar {
border-radius: 0; border-radius: 0;
&:first-child { &:first-child {
border-radius: $corner-radius 0 0 $corner-radius; border-radius: $button_radius 0 0 $button_radius;
} }
} }
> box > button.flat { > box > button.flat {
border-left-color: $border; border-left-color: $border_color;
} }
} }
carousel.card { carousel.card {
border: none; border: none;
background-color: $fill; background-color: $button_color;
} }
.context-tile-lozenge { .context-tile-lozenge {
min-height: 28px; min-height: 28px;
min-width: 28px; min-width: 28px;
padding: $space-size; padding: $base_padding;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
border-radius: $circular-radius; border-radius: $circular_radius;
&.large { &.large {
font-size: 24px; font-size: 24px;
@@ -458,40 +458,40 @@ carousel.card {
image { -gtk-icon-style: symbolic; } image { -gtk-icon-style: symbolic; }
&.grey { &.grey {
color: $text; color: $text_color;
background-color: $divider; background-color: $hover_color;
} }
&.green, &.details-rating-0 { &.green, &.details-rating-0 {
color: darken($success, 15%); color: gtkmix(black, $success_color, 15%);
background-color: rgba($success, 0.15); background-color: gtkalpha($success_color, 0.15);
} }
&.blue, &.blue,
&.details-rating-5 { &.details-rating-5 {
color: $blue-light; color: $blue-light;
background-color: rgba($blue-light, 0.15); background-color: gtkalpha($blue-light, 0.15);
} }
&.yellow, &.details-rating-12 { &.yellow, &.details-rating-12 {
color: darken($warning, 15%); color: gtkmix(black, $warning_color, 15%);
background-color: rgba($warning, 0.15); background-color: gtkalpha($warning_color, 0.15);
} }
&.details-rating-15 { &.details-rating-15 {
color: $orange-light; color: $orange-light;
background-color: rgba($orange-light, .15); background-color: gtkalpha($orange-light, .15);
} }
&.red, &.details-rating-18 { &.red, &.details-rating-18 {
color: darken($error, 15%); color: gtkmix(black, $error_color, 15%);
background-color: rgba($error, 0.15); background-color: gtkalpha($error_color, 0.15);
} }
} }
.eol-red { .eol-red {
font-weight: bold; font-weight: bold;
color: $error; color: $error_color;
} }
window.narrow .app-title { window.narrow .app-title {
@@ -507,10 +507,10 @@ window.narrow .app-developer {
font-feature-settings: "tnum"; font-feature-settings: "tnum";
} }
scrolledwindow.fake-adw-status-page > viewport > box { margin: $space-size * 6 $space-size * 2; } scrolledwindow.fake-adw-status-page > viewport > box { margin: $base_padding * 6 $base_padding * 2; }
scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $space-size * 6; } scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $base_padding * 6; }
scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $space-size * 6; } scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $base_padding * 6; }
scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $space-size * 2; } scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $base_padding * 2; }
statuspage.icon-dropshadow image.icon { statuspage.icon-dropshadow image.icon {
-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05), -gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
@@ -532,17 +532,17 @@ window.info scrollbar.vertical trough {
// GsAppRow // GsAppRow
row.app > box.header { row.app > box.header {
margin-left: $space-size * 2; margin-left: $base_padding * 2;
margin-right: $space-size * 2; margin-right: $base_padding * 2;
} }
row.app > box.header { row.app > box.header {
border-spacing: $space-size * 2; border-spacing: $base_padding * 2;
} }
row.app > box.header > image { row.app > box.header > image {
margin-top: $space-size * 2; margin-top: $base_padding * 2;
margin-bottom: $space-size * 2; margin-bottom: $base_padding * 2;
} }
row.app label.warning { row.app label.warning {
@@ -565,16 +565,4 @@ row.app label.warning {
spinner.fade-in:checked { spinner.fade-in:checked {
animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite; animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite;
animation-delay: 0s, 0.5s, 0.5s; animation-delay: 0s, 0.5s, 0.5s;
}
// Leaflets
window > contents > leaflet { // Gnome control center
> box > stack.background {
background-color: transparent;
background-image: linear-gradient(to bottom,
transparent,
transparent $large-size,
$background $large-size,
$background);
}
} }

View File

@@ -13,6 +13,7 @@ columnview {
line-height: 100%; line-height: 100%;
border-left: 1px solid $border_color; border-left: 1px solid $border_color;
border-bottom: 1px solid $border_color; border-bottom: 1px solid $border_color;
background-clip: padding-box;
&:first-child { &:first-child {
border-left-width: 0; border-left-width: 0;
@@ -97,7 +98,11 @@ columnview {
padding-bottom: $base_padding / 2; padding-bottom: $base_padding / 2;
} }
@include undershoot(top, $shade_color, true); @include undershoot(top, $shade_color, $neighbor: true, $style: default);
~ undershoot.top {
box-shadow: none;
}
} }
columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {

View File

@@ -14,6 +14,19 @@
} }
} }
@if $colorscheme != 'default' or $blackness == 'true' or $colortype == 'fixed' {
listview,
list,
list.boxed-list {
background-color: gtkmix(white, $sidebar_bg_color, 5%);
color: $sidebar_fg_color;
}
list.boxed-list-separate {
color: $sidebar_fg_color;
}
}
flap, flap,
leaflet, leaflet,
navigation-view, navigation-view,
@@ -46,6 +59,10 @@
.sidebar-pane, .content-pane { .sidebar-pane, .content-pane {
toolbarview.undershoot-top scrolledwindow { toolbarview.undershoot-top scrolledwindow {
@include undershoot(top, $sidebar_shade_color, $style: frame); @include undershoot(top, $sidebar_shade_color, $style: frame);
columnview.view ~ undershoot.top {
box-shadow: none;
}
} }
toolbarview.undershoot-bottom scrolledwindow { toolbarview.undershoot-bottom scrolledwindow {
@@ -104,7 +121,7 @@
} }
&.undershoot-bottom { &.undershoot-bottom {
@include undershoot(bottom, $secondary_sidebar_shade_color) @include undershoot(bottom, $secondary_sidebar_shade_color);
} }
&.undershoot-start { &.undershoot-start {