mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2024-10-18 05:20:35 -04:00
update #201
This commit is contained in:
vinceliuice
parent
21b358c999
commit
1b3b2b4cfa
9 changed files with 265 additions and 221 deletions
|
|
@ -1,7 +1,11 @@
|
|||
@import 'apps/builder';
|
||||
@import 'apps/calculator';
|
||||
@import 'apps/calendar';
|
||||
@import 'apps/clocks';
|
||||
@import 'apps/console';
|
||||
@import 'apps/control-center';
|
||||
@import 'apps/editor';
|
||||
@import 'apps/nautilus';
|
||||
@import 'apps/software';
|
||||
@import 'apps/weather';
|
||||
@import 'apps/other';
|
||||
|
|
|
|||
|
|
@ -307,9 +307,9 @@
|
|||
}
|
||||
|
||||
#{$_selector} undershoot.#{$p} {
|
||||
@if $style==default {
|
||||
@if $style == 'default' {
|
||||
box-shadow: none;
|
||||
} @else if $style==frame {
|
||||
} @else if $style == 'frame' {
|
||||
box-shadow: inset $_border_pos $border_color;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@ label {
|
|||
&.primary-label, &.month-name, &.secondary-label {
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
padding: $space-size * 2;
|
||||
padding: $base_padding * 2;
|
||||
}
|
||||
|
||||
&.primary-label, &.month-name {
|
||||
color: $primary;
|
||||
color: $accent_color;
|
||||
}
|
||||
|
||||
&.secondary-label {
|
||||
color: $text-disabled;
|
||||
color: $disabled_text_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ calendar-view {
|
|||
font-size: 10pt;
|
||||
|
||||
&:selected {
|
||||
color: $primary;
|
||||
color: $accent_color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -32,26 +32,28 @@ calendar-view.header,
|
|||
label.header {
|
||||
font-size: 10pt;
|
||||
font-weight: bold;
|
||||
color: $text-disabled;
|
||||
color: $disabled_text_color;
|
||||
}
|
||||
|
||||
calendar-view.current,
|
||||
weekgrid.current {
|
||||
background-color: gtkalpha($primary, 0.3);
|
||||
background-color: gtkalpha($accent_color, 0.3);
|
||||
}
|
||||
|
||||
popover.events {
|
||||
background-color: $popover;
|
||||
background-color: $popover_bg_color;
|
||||
color: $popover_fg_color;
|
||||
padding: 0;
|
||||
|
||||
box {
|
||||
border-top-left-radius: $corner-radius;
|
||||
border-top-right-radius: $corner-radius;
|
||||
border-top-left-radius: $button_radius;
|
||||
border-top-right-radius: $button_radius;
|
||||
}
|
||||
|
||||
list {
|
||||
background-color: $base;
|
||||
border-radius: $corner-radius;
|
||||
color: $view_fg_color;
|
||||
background-color: $view_bg_color;
|
||||
border-radius: $button_radius;
|
||||
}
|
||||
|
||||
scrolledwindow {
|
||||
|
|
@ -59,7 +61,7 @@ popover.events {
|
|||
}
|
||||
|
||||
button {
|
||||
border-radius: $corner-radius;
|
||||
border-radius: $button_radius;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-style: solid none none;
|
||||
|
|
@ -78,37 +80,25 @@ event {
|
|||
|
||||
&.timed,
|
||||
&:not(.slanted):not(.slanted-start):not(.slanted-end) {
|
||||
border-radius: $corner-radius;
|
||||
border-radius: $button_radius;
|
||||
}
|
||||
|
||||
&.timed widget.edge {
|
||||
border-radius: $corner-radius / 2;
|
||||
border-radius: $button_radius / 2;
|
||||
min-width: 5px;
|
||||
}
|
||||
|
||||
&.slanted-start,
|
||||
&.slanted-end:dir(rtl) {
|
||||
padding-left: $space-size * 2 + 4px;
|
||||
border-radius: 0 $corner-radius / 2 $corner-radius / 2 0;
|
||||
padding-left: $base_padding * 2 + 4px;
|
||||
border-radius: 0 $button_radius / 2 $button_radius / 2 0;
|
||||
}
|
||||
|
||||
&.slanted-end,
|
||||
&.slanted-start:dir(rtl) {
|
||||
padding-right: $space-size * 2 + 4px;
|
||||
border-radius: $corner-radius / 2 0 0 $corner-radius / 2;
|
||||
padding-right: $base_padding * 2 + 4px;
|
||||
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
|
||||
|
|
@ -118,7 +108,7 @@ popover.event-popover > contents {
|
|||
}
|
||||
|
||||
.search-viewport {
|
||||
background-color: $base;
|
||||
background-color: $view_bg_color;
|
||||
}
|
||||
|
||||
// calendar popover
|
||||
|
|
@ -149,27 +139,29 @@ button:checked:not(:backdrop) .calendar-color-image,
|
|||
|
||||
// month/year controls
|
||||
datechooser {
|
||||
color: $sidebar_fg_color;
|
||||
|
||||
navigator { // add some space between the two controls
|
||||
margin-right: $space-size;
|
||||
margin-left: $space-size;
|
||||
margin-bottom: $space-size;
|
||||
margin-right: $base_padding;
|
||||
margin-left: $base_padding;
|
||||
margin-bottom: $base_padding;
|
||||
}
|
||||
|
||||
navigator {
|
||||
label { font-weight: bold; }
|
||||
|
||||
button.flat,
|
||||
button.toggle,
|
||||
button.pill,
|
||||
button.image-button {
|
||||
min-height: $medium-size;
|
||||
min-width: $medium-size;
|
||||
padding: 0;
|
||||
min-height: 24px;
|
||||
min-width: 24px;
|
||||
padding: $base_padding;
|
||||
}
|
||||
}
|
||||
|
||||
// day names and week numbers
|
||||
.weeknum, .weekday {
|
||||
color: $text-disabled;
|
||||
color: $disabled_text_color;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
|
|
@ -177,45 +169,45 @@ datechooser {
|
|||
button.day {
|
||||
font-size: 10pt;
|
||||
font-weight: normal;
|
||||
margin: $space-size / 2;
|
||||
padding: 0;
|
||||
min-height: $medium-size;
|
||||
min-width: $medium-size;
|
||||
margin: 2px;
|
||||
padding: $base_padding - 2px;
|
||||
min-height: 24px;
|
||||
min-width: 24px;
|
||||
transition: none;
|
||||
|
||||
dot {
|
||||
background-color: $text;
|
||||
background-color: $text_color;
|
||||
border-radius: 50%;
|
||||
min-height: $space-size / 2;
|
||||
min-width: $space-size / 2;
|
||||
min-height: $base_padding / 2;
|
||||
min-width: $base_padding / 2;
|
||||
}
|
||||
|
||||
&:selected, &.today:selected {
|
||||
background-color: $primary;
|
||||
color: on($primary);
|
||||
background-color: $accent_bg_color;
|
||||
color: $accent_fg_color;
|
||||
font-weight: bold;
|
||||
|
||||
dot { background-color: on($primary); }
|
||||
dot { background-color: $accent_fg_color; }
|
||||
}
|
||||
|
||||
&.today {
|
||||
color: $primary;
|
||||
color: $accent_bg_color;
|
||||
|
||||
dot { background-color: $primary; }
|
||||
dot { background-color: $accent_bg_color; }
|
||||
}
|
||||
|
||||
&.other-month {
|
||||
&:not(:hover),
|
||||
&: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) {
|
||||
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;
|
||||
|
||||
& > box:first-child {
|
||||
border-bottom: 1px solid $border;
|
||||
border-bottom: 1px solid $border_color
|
||||
}
|
||||
|
||||
.week-number {
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
padding: $space-size * 2 $space-size * 2 $space-size * 3 $space-size * 2;
|
||||
color: $track;
|
||||
padding: $base_padding * 2 $base_padding * 2 $base_padding * 3 $base_padding * 2;
|
||||
color: $secondary_disabled_text_color;
|
||||
}
|
||||
|
||||
&.week-temperature {
|
||||
font-size: 10pt;
|
||||
font-weight: bold;
|
||||
color: $text-disabled;
|
||||
color: $disabled_text_color;
|
||||
}
|
||||
|
||||
&.lines {
|
||||
color: $border;
|
||||
color: $border_color
|
||||
}
|
||||
}
|
||||
|
||||
weekhourbar > label {
|
||||
font-size: 10pt;
|
||||
padding: 4px $space-size;
|
||||
padding: 4px $base_padding;
|
||||
}
|
||||
|
||||
.week-view .lines {
|
||||
color: $border;
|
||||
color: $border_color
|
||||
}
|
||||
|
||||
weekgrid > widget.now-strip {
|
||||
background-color: gtkalpha($primary, 0.8);
|
||||
background-color: gtkalpha($accent_color, 0.8);
|
||||
margin: 0 0 0 1px;
|
||||
min-height: 3px;
|
||||
}
|
||||
|
|
@ -265,28 +257,28 @@ weekgrid > widget.now-strip {
|
|||
weekgrid,
|
||||
.week-header {
|
||||
&:selected, &.dnd {
|
||||
background-color: gtkalpha($primary, 0.25);
|
||||
background-color: gtkalpha($accent_color, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// Month cell
|
||||
monthcell {
|
||||
border: solid 1px $border;
|
||||
border: solid 1px $border_color;
|
||||
border-width: 1px 0 0 1px;
|
||||
background-color: transparent;
|
||||
transition: background-color 200ms;
|
||||
|
||||
&:hover:not(.out-of-month):not(.today) {
|
||||
background-color: $base-alt;
|
||||
background-color: $dialog_bg_color;
|
||||
transition: background-color 200ms;
|
||||
color: $text;
|
||||
color: $text_color;
|
||||
}
|
||||
|
||||
&:selected {
|
||||
background-color: gtkalpha($primary, 0.1);
|
||||
background-color: gtkalpha($accent_color, 0.1);
|
||||
|
||||
&:hover {
|
||||
background-color: gtkalpha($primary, 0.2);
|
||||
background-color: gtkalpha($accent_color, 0.2);
|
||||
}
|
||||
|
||||
label.day-label { font-weight: bold; }
|
||||
|
|
@ -295,24 +287,24 @@ monthcell {
|
|||
&:nth-child(7n + 1) { border-left-width: 0; }
|
||||
|
||||
&.today {
|
||||
background-color: gtkalpha($primary, 0.2);
|
||||
background-color: gtkalpha($accent_color, 0.2);
|
||||
|
||||
&:hover {
|
||||
background-color: gtkalpha($primary, 0.3);
|
||||
color: $primary;
|
||||
background-color: gtkalpha($accent_color, 0.3);
|
||||
color: $accent_color;
|
||||
}
|
||||
|
||||
&:selected {
|
||||
background-color: gtkalpha($primary, 0.25);
|
||||
background-color: gtkalpha($accent_color, 0.25);
|
||||
|
||||
&:hover {
|
||||
background-color: gtkalpha($primary, 0.35);
|
||||
background-color: gtkalpha($accent_color, 0.35);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $text;
|
||||
color: $text_color;
|
||||
font-size: 0.9rem;
|
||||
|
||||
&.day-label {
|
||||
|
|
@ -321,15 +313,15 @@ monthcell {
|
|||
}
|
||||
|
||||
&.out-of-month {
|
||||
background-color: $fill;
|
||||
background-color: $button_color;
|
||||
|
||||
label {
|
||||
color: $text-secondary;
|
||||
color: $secondary_text_color;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 $space-size;
|
||||
padding: 0 $base_padding;
|
||||
border-radius: 0;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
|
|
@ -344,8 +336,8 @@ monthpopover > box {
|
|||
}
|
||||
|
||||
.notes-section box > textview {
|
||||
border-radius: $corner-radius;
|
||||
padding: $space-size;
|
||||
border-radius: $button_radius;
|
||||
padding: $base_padding;
|
||||
|
||||
> text {
|
||||
background: none;
|
||||
|
|
@ -356,11 +348,11 @@ monthpopover > box {
|
|||
agenda-view {
|
||||
list {
|
||||
> row {
|
||||
padding: 2px $space-size * 2;
|
||||
padding: 2px $base_padding * 2;
|
||||
}
|
||||
|
||||
> label {
|
||||
padding: $space-size $space-size * 2;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -381,12 +373,12 @@ searchbutton > popover > arrow {
|
|||
|
||||
// Month selector
|
||||
datechooser {
|
||||
padding: $space-size;
|
||||
padding: $base_padding;
|
||||
|
||||
.current-week {
|
||||
background: gtkalpha($titlebar, 0.7);
|
||||
color: on($titlebar);
|
||||
border-radius: $corner-radius;
|
||||
background: $hover_color;
|
||||
color: $sidebar_fg_color;
|
||||
border-radius: $button_radius;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -394,7 +386,7 @@ menubutton {
|
|||
&.sources-button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
border-radius: $button_radius;
|
||||
border-top-style: none;
|
||||
border-bottom-style: none;
|
||||
|
||||
|
|
@ -404,17 +396,19 @@ menubutton {
|
|||
}
|
||||
|
||||
> button {
|
||||
border-radius: 0;
|
||||
border-radius: $button_radius;
|
||||
min-height: 0;
|
||||
padding: 0 $base_padding;
|
||||
|
||||
.title {
|
||||
font-size: 10pt;
|
||||
font-weight: normal;
|
||||
padding: 0 $space-size;
|
||||
padding: 0 $base_padding;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 8pt;
|
||||
padding: 0 $space-size;
|
||||
padding: 0 $base_padding;
|
||||
}
|
||||
|
||||
.calendar-color-image {
|
||||
|
|
@ -424,12 +418,6 @@ menubutton {
|
|||
}
|
||||
|
||||
stack > box {
|
||||
border-spacing: $space-size;
|
||||
}
|
||||
|
||||
.topbar headerbar &.sources-button {
|
||||
> button {
|
||||
border-radius: 0 0 $corner-radius $corner-radius;
|
||||
}
|
||||
border-spacing: $base_padding;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
//
|
||||
|
||||
.large-button {
|
||||
padding: $space-size;
|
||||
padding: $base_padding;
|
||||
}
|
||||
|
||||
// alarms
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
|
||||
.exit-info {
|
||||
padding: 6px;
|
||||
border-top: 2px solid $primary;
|
||||
background: rgba($primary, 0.9);
|
||||
color: on($primary);
|
||||
border-top: 2px solid $accent_color;
|
||||
background: gtkalpha($accent_color, 0.9);
|
||||
color: $accent_fg_color;
|
||||
}
|
||||
|
||||
.error .exit-info {
|
||||
border-top: 2px solid $error;
|
||||
background: rgba($error, 0.9);
|
||||
color: on($error);
|
||||
border-top: 2px solid $error_color;
|
||||
background: gtkalpha($error_color, 0.9);
|
||||
color: $error_fg_color;
|
||||
}
|
||||
|
|
@ -1,22 +1,64 @@
|
|||
//
|
||||
// Nautilus
|
||||
//
|
||||
.nautilus-window {
|
||||
.floating-bar {
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
margin: $base_padding;
|
||||
border-style: none;
|
||||
border-radius: $button_radius;
|
||||
background-color: $accent_color;
|
||||
.floating-bar {
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
margin: $base_padding / 2;
|
||||
border-style: none;
|
||||
border-radius: $button_radius;
|
||||
background-color: $accent_color;
|
||||
color: $accent_fg_color;
|
||||
box-shadow: $shadow-z3;
|
||||
|
||||
button {
|
||||
margin: (32px - $small_size) / 2;
|
||||
color: $accent_fg_color;
|
||||
box-shadow: $shadow-z3;
|
||||
|
||||
button {
|
||||
margin: (32px - $small_size) / 2;
|
||||
color: $accent_fg_color;
|
||||
@extend %small_button;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,15 +3,15 @@
|
|||
//
|
||||
|
||||
.details-page {
|
||||
margin: $space-size * 4 0px;
|
||||
margin: $base_padding * 4 0px;
|
||||
}
|
||||
|
||||
.installed-overlay-box {
|
||||
font-size: smaller;
|
||||
background-color: $primary;
|
||||
background-color: $accent_color;
|
||||
border-radius: 0;
|
||||
color: on($primary);
|
||||
text-shadow: 0 1px 0 rgba(black, 0.2);
|
||||
color: $accent_fg_color;
|
||||
text-shadow: 0 1px 0 gtkalpha(black, 0.2);
|
||||
}
|
||||
|
||||
screenshot-carousel box.frame {
|
||||
|
|
@ -21,15 +21,15 @@ screenshot-carousel box.frame {
|
|||
|
||||
screenshot-carousel button,
|
||||
.featured-carousel button {
|
||||
margin: $space-size * 2;
|
||||
margin: $base_padding * 2;
|
||||
}
|
||||
|
||||
.screenshot-image-main .image1,
|
||||
.screenshot-image-main .image2 {
|
||||
margin-top: $space-size;
|
||||
margin-bottom: $space-size * 2;
|
||||
margin-left: $space-size;
|
||||
margin-right: $space-size;
|
||||
margin-top: $base_padding;
|
||||
margin-bottom: $base_padding * 2;
|
||||
margin-left: $base_padding;
|
||||
margin-right: $base_padding;
|
||||
}
|
||||
|
||||
.app-tile-label {
|
||||
|
|
@ -37,13 +37,13 @@ screenshot-carousel button,
|
|||
}
|
||||
|
||||
.review-textbox {
|
||||
padding: $space-size;
|
||||
padding: $base_padding;
|
||||
}
|
||||
|
||||
.origin-rounded-box {
|
||||
background-color: $divider;
|
||||
border-radius: $circular-radius;
|
||||
padding: $space-size - 2px;
|
||||
background-color: $hover_color;
|
||||
border-radius: $circular_radius;
|
||||
padding: $base_padding - 2px;
|
||||
}
|
||||
|
||||
.origin-beta {
|
||||
|
|
@ -51,7 +51,7 @@ screenshot-carousel button,
|
|||
}
|
||||
|
||||
.origin-button > button {
|
||||
padding: $space-size / 2 $space-size * 1.5;
|
||||
padding: $base_padding / 2 $base_padding * 1.5;
|
||||
}
|
||||
|
||||
.card flowboxchild {
|
||||
|
|
@ -64,21 +64,21 @@ screenshot-carousel button,
|
|||
}
|
||||
|
||||
.category-tile.card {
|
||||
padding: $space-size * 3.5;
|
||||
padding: $base_padding * 3.5;
|
||||
border: none;
|
||||
border-radius: $corner-radius;
|
||||
border-radius: $button_radius;
|
||||
min-width: 140px;
|
||||
font-weight: 900;
|
||||
font-size: larger;
|
||||
box-shadow: $shadow-z3;
|
||||
|
||||
&.category-tile-iconless {
|
||||
padding: $space-size * 1.5 $space-size * 2.5;
|
||||
padding: $base_padding * 1.5 $base_padding * 2.5;
|
||||
min-width: 130px;
|
||||
font-size: 105%;
|
||||
font-weight: normal;
|
||||
box-shadow: none;
|
||||
background-color: $fill;
|
||||
background-color: $button_color;
|
||||
}
|
||||
|
||||
// Styling for specific category buttons.
|
||||
|
|
@ -144,7 +144,7 @@ screenshot-carousel button,
|
|||
|
||||
&.category-socialize {
|
||||
background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
|
||||
color: $text-secondary;
|
||||
color: $secondary_text_color;
|
||||
|
||||
&:hover {
|
||||
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 */
|
||||
color: #1c71d8;
|
||||
background-color:#fdf8d7;
|
||||
background-image: linear-gradient($border 1px, transparent 1px),
|
||||
linear-gradient(90deg, $border 1px, transparent 1px);
|
||||
background-image: linear-gradient($border_color 1px, transparent 1px),
|
||||
linear-gradient(90deg, $border_color 1px, transparent 1px);
|
||||
background-size: 10px 10px, 10px 10px;
|
||||
background-position: -1px -4px, center -1px;
|
||||
|
||||
&:hover {
|
||||
color: #1c71d8;
|
||||
background-color: lighten(#fdf8d7, 5%);
|
||||
background-image: linear-gradient($border 1px, transparent 1px),
|
||||
linear-gradient(90deg, $border 1px, transparent 1px);
|
||||
background-image: linear-gradient($border_color 1px, transparent 1px),
|
||||
linear-gradient(90deg, $border_color 1px, transparent 1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #1c71d8;
|
||||
background-color: darken(#fdf8d7, 5%);
|
||||
background-image: linear-gradient($border 1px, transparent 1px),
|
||||
linear-gradient(90deg, $border 1px, transparent 1px);
|
||||
background-image: linear-gradient($border_color 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 {
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
color: $text;
|
||||
color: $text_color;
|
||||
|
||||
label.title-1 {
|
||||
margin-top: $space-size;
|
||||
margin-bottom: $space-size;
|
||||
margin-top: $base_padding;
|
||||
margin-bottom: $base_padding;
|
||||
}
|
||||
|
||||
&.narrow label.title-1 {
|
||||
|
|
@ -203,15 +203,15 @@ clamp.large .category-tile:not(.category-tile-iconless) {
|
|||
|
||||
.application-details-infobar {
|
||||
&, &.info {
|
||||
background-color: $fill;
|
||||
color: $text;
|
||||
border: 1px solid $border;
|
||||
background-color: $button_color;
|
||||
color: $text_color;
|
||||
border: 1px solid $border_color;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: $warning;
|
||||
color: on($warning);
|
||||
border: 1px solid on($warning, divider);
|
||||
background-color: $warning_color;
|
||||
color: $warning_fg_color;
|
||||
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 {
|
||||
padding-left: $space-size * 4;
|
||||
padding-right: $space-size * 4;
|
||||
padding-left: $base_padding * 4;
|
||||
padding-right: $base_padding * 4;
|
||||
}
|
||||
|
||||
.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-position: 0 bottom;
|
||||
background-size: 0;
|
||||
|
|
@ -237,7 +237,7 @@ clamp.large .category-tile:not(.category-tile-iconless) {
|
|||
.install-progress:dir(rtl) { background-position: 100% bottom; }
|
||||
|
||||
.review-row > * {
|
||||
margin: $space-size * 2;
|
||||
margin: $base_padding * 2;
|
||||
}
|
||||
|
||||
.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
|
||||
.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,
|
||||
|
|
@ -259,13 +259,13 @@ clamp.large .category-tile:not(.category-tile-iconless) {
|
|||
}
|
||||
|
||||
review-bar {
|
||||
color: $text-disabled;
|
||||
color: $disabled_text_color;
|
||||
background-image: none;
|
||||
background-color: $track;
|
||||
background-color: $secondary_disabled_text_color;
|
||||
}
|
||||
|
||||
.review-histogram star-image {
|
||||
color: $text-disabled;
|
||||
color: $disabled_text_color;
|
||||
}
|
||||
|
||||
.version-arrow-label {
|
||||
|
|
@ -274,7 +274,7 @@ review-bar {
|
|||
|
||||
.overview-more-button {
|
||||
font-size: smaller;
|
||||
padding: 0 $space-size * 2 + 4px;
|
||||
padding: 0 $base_padding * 2 + 4px;
|
||||
}
|
||||
|
||||
.app-row-origin-text {
|
||||
|
|
@ -282,8 +282,8 @@ review-bar {
|
|||
}
|
||||
|
||||
.app-listbox-header {
|
||||
padding: $space-size;
|
||||
border-bottom: 1px solid $border;
|
||||
padding: $base_padding;
|
||||
border-bottom: 1px solid $border_color;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
|
|
@ -318,12 +318,12 @@ star-image {
|
|||
.update-failed-details {
|
||||
font-family: Monospace;
|
||||
font-size: smaller;
|
||||
padding: $space-size * 2 + 4px;
|
||||
padding: $base_padding * 2 + 4px;
|
||||
}
|
||||
|
||||
.upgrade-banner {
|
||||
padding: 0px;
|
||||
border-radius: $corner-radius;
|
||||
border-radius: $button_radius;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
|
@ -333,25 +333,25 @@ star-image {
|
|||
}
|
||||
|
||||
.upgrade-buttons #button_upgrades_install {
|
||||
padding-left: $space-size * 2 + 4px;
|
||||
padding-right: $space-size * 2 + 4px;
|
||||
padding-left: $base_padding * 2 + 4px;
|
||||
padding-right: $base_padding * 2 + 4px;
|
||||
}
|
||||
|
||||
scrolledwindow.list-page > viewport > clamp > box {
|
||||
margin: $space-size * 4 $space-size * 2;
|
||||
border-spacing: $space-size * 4;
|
||||
margin: $base_padding * 4 $base_padding * 2;
|
||||
border-spacing: $base_padding * 4;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin: $space-size * 6 $space-size * 2;
|
||||
margin: $base_padding * 6 $base_padding * 2;
|
||||
}
|
||||
|
||||
clamp.status-page .iconbox {
|
||||
|
|
@ -360,25 +360,25 @@ clamp.status-page .iconbox {
|
|||
}
|
||||
|
||||
clamp.status-page .icon {
|
||||
color: $text-disabled;
|
||||
color: $disabled_text_color;
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
clamp.status-page .icon:not(:last-child) {
|
||||
margin-bottom: $space-size * 6;
|
||||
margin-bottom: $base_padding * 6;
|
||||
}
|
||||
|
||||
clamp.status-page .title:not(:last-child) {
|
||||
margin-bottom: $space-size * 2;
|
||||
margin-bottom: $base_padding * 2;
|
||||
}
|
||||
|
||||
app-context-bar {
|
||||
.context-tile {
|
||||
border: 1px solid $border;
|
||||
border: 1px solid $border_color;
|
||||
background-color: transparent;
|
||||
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;
|
||||
transition-property: outline, outline-offset, background-image;
|
||||
border-bottom: none;
|
||||
|
|
@ -386,12 +386,12 @@ app-context-bar {
|
|||
|
||||
&:hover {
|
||||
background-image: none;
|
||||
background-color: $overlay-hover;
|
||||
background-color: $hover_color;
|
||||
}
|
||||
|
||||
&.keyboard-activating,
|
||||
&:active {
|
||||
background-color: $overlay-active;
|
||||
background-color: $active_color;
|
||||
}
|
||||
|
||||
&:focus:focus-visible {
|
||||
|
|
@ -413,7 +413,7 @@ app-context-bar {
|
|||
border-radius: 0;
|
||||
|
||||
&: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;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $corner-radius 0 0 $corner-radius;
|
||||
border-radius: $button_radius 0 0 $button_radius;
|
||||
}
|
||||
}
|
||||
|
||||
> box > button.flat {
|
||||
border-left-color: $border;
|
||||
border-left-color: $border_color;
|
||||
}
|
||||
}
|
||||
|
||||
carousel.card {
|
||||
border: none;
|
||||
background-color: $fill;
|
||||
background-color: $button_color;
|
||||
}
|
||||
|
||||
.context-tile-lozenge {
|
||||
min-height: 28px;
|
||||
min-width: 28px;
|
||||
padding: $space-size;
|
||||
padding: $base_padding;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-radius: $circular-radius;
|
||||
border-radius: $circular_radius;
|
||||
|
||||
&.large {
|
||||
font-size: 24px;
|
||||
|
|
@ -458,40 +458,40 @@ carousel.card {
|
|||
image { -gtk-icon-style: symbolic; }
|
||||
|
||||
&.grey {
|
||||
color: $text;
|
||||
background-color: $divider;
|
||||
color: $text_color;
|
||||
background-color: $hover_color;
|
||||
}
|
||||
|
||||
&.green, &.details-rating-0 {
|
||||
color: darken($success, 15%);
|
||||
background-color: rgba($success, 0.15);
|
||||
color: gtkmix(black, $success_color, 15%);
|
||||
background-color: gtkalpha($success_color, 0.15);
|
||||
}
|
||||
|
||||
&.blue,
|
||||
&.details-rating-5 {
|
||||
color: $blue-light;
|
||||
background-color: rgba($blue-light, 0.15);
|
||||
background-color: gtkalpha($blue-light, 0.15);
|
||||
}
|
||||
|
||||
&.yellow, &.details-rating-12 {
|
||||
color: darken($warning, 15%);
|
||||
background-color: rgba($warning, 0.15);
|
||||
color: gtkmix(black, $warning_color, 15%);
|
||||
background-color: gtkalpha($warning_color, 0.15);
|
||||
}
|
||||
|
||||
&.details-rating-15 {
|
||||
color: $orange-light;
|
||||
background-color: rgba($orange-light, .15);
|
||||
background-color: gtkalpha($orange-light, .15);
|
||||
}
|
||||
|
||||
&.red, &.details-rating-18 {
|
||||
color: darken($error, 15%);
|
||||
background-color: rgba($error, 0.15);
|
||||
color: gtkmix(black, $error_color, 15%);
|
||||
background-color: gtkalpha($error_color, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.eol-red {
|
||||
font-weight: bold;
|
||||
color: $error;
|
||||
color: $error_color;
|
||||
}
|
||||
|
||||
window.narrow .app-title {
|
||||
|
|
@ -507,10 +507,10 @@ window.narrow .app-developer {
|
|||
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 > clamp:not(:last-child) > box { margin-bottom: $space-size * 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 > .title:not(:last-child) { margin-bottom: $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: $base_padding * 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: $base_padding * 2; }
|
||||
|
||||
statuspage.icon-dropshadow image.icon {
|
||||
-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
|
||||
|
|
@ -532,17 +532,17 @@ window.info scrollbar.vertical trough {
|
|||
|
||||
// GsAppRow
|
||||
row.app > box.header {
|
||||
margin-left: $space-size * 2;
|
||||
margin-right: $space-size * 2;
|
||||
margin-left: $base_padding * 2;
|
||||
margin-right: $base_padding * 2;
|
||||
}
|
||||
|
||||
row.app > box.header {
|
||||
border-spacing: $space-size * 2;
|
||||
border-spacing: $base_padding * 2;
|
||||
}
|
||||
|
||||
row.app > box.header > image {
|
||||
margin-top: $space-size * 2;
|
||||
margin-bottom: $space-size * 2;
|
||||
margin-top: $base_padding * 2;
|
||||
margin-bottom: $base_padding * 2;
|
||||
}
|
||||
|
||||
row.app label.warning {
|
||||
|
|
@ -565,16 +565,4 @@ row.app label.warning {
|
|||
spinner.fade-in:checked {
|
||||
animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@ columnview {
|
|||
line-height: 100%;
|
||||
border-left: 1px solid $border_color;
|
||||
border-bottom: 1px solid $border_color;
|
||||
background-clip: padding-box;
|
||||
|
||||
&:first-child {
|
||||
border-left-width: 0;
|
||||
|
|
@ -97,7 +98,11 @@ columnview {
|
|||
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 {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
leaflet,
|
||||
navigation-view,
|
||||
|
|
@ -46,6 +59,10 @@
|
|||
.sidebar-pane, .content-pane {
|
||||
toolbarview.undershoot-top scrolledwindow {
|
||||
@include undershoot(top, $sidebar_shade_color, $style: frame);
|
||||
|
||||
columnview.view ~ undershoot.top {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
toolbarview.undershoot-bottom scrolledwindow {
|
||||
|
|
@ -104,7 +121,7 @@
|
|||
}
|
||||
|
||||
&.undershoot-bottom {
|
||||
@include undershoot(bottom, $secondary_sidebar_shade_color)
|
||||
@include undershoot(bottom, $secondary_sidebar_shade_color);
|
||||
}
|
||||
|
||||
&.undershoot-start {
|
||||
|
|
|
|||
Loading…
Reference in a new issue