This commit is contained in:
vinceliuice 2024-10-13 01:47:30 +08:00
parent 1b3b2b4cfa
commit 85d421879e
24 changed files with 153 additions and 158 deletions

View file

@ -7,6 +7,7 @@ $asset_suffix: if($variant == 'dark', '-dark', '');
// //
$base_padding: if($compact == 'false', 6px, 4px); $base_padding: if($compact == 'false', 6px, 4px);
$base_margin: if($compact == 'false', 4px, 3px);
$menu_margin: $base_padding; //margin around menuitems & sidebar items $menu_margin: $base_padding; //margin around menuitems & sidebar items
$menu_padding: $base_padding * 2; //inner menuitem padding $menu_padding: $base_padding * 2; //inner menuitem padding

View file

@ -1,5 +1,5 @@
avatar { avatar {
border-radius: 9999px; border-radius: $circular_radius;
font-weight: bold; font-weight: bold;
// The list of colors to generate avatars. // The list of colors to generate avatars.

View file

@ -296,8 +296,8 @@ button {
@at-root %circular_button, @at-root %circular_button,
&.circular { // force circular button shape &.circular { // force circular button shape
min-width: 34px; min-width: $medium_size - 2px;
min-height: 34px; min-height: $medium_size - 2px;
padding: 0; padding: 0;
border-radius: $circular_radius; border-radius: $circular_radius;
@ -355,7 +355,7 @@ button {
} }
button.color { button.color {
padding: 5px; padding: $base_padding;
> colorswatch:only-child { > colorswatch:only-child {
border-radius: 2.5px; border-radius: 2.5px;
@ -422,8 +422,8 @@ menubutton {
&.image-button > button { &.image-button > button {
min-width: 24px; min-width: 24px;
padding-left: 5px; padding-left: $base_padding;
padding-right: 5px; padding-right: $base_padding;
} }
&.card > button { &.card > button {
@ -460,31 +460,31 @@ splitbutton {
} }
> separator { > separator {
margin-top: 6px; margin-top: $base_padding;
margin-bottom: 6px; margin-bottom: $base_padding;
background: none; background: none;
} }
> menubutton > button { > menubutton > button {
padding-left: 4px; padding-left: $base_margin;
padding-right: 4px; padding-right: $base_margin;
} }
// Since the inner button doesn't have any style classes on it, // Since the inner button doesn't have any style classes on it,
// we have to add them manually // we have to add them manually
&.image-button > button { &.image-button > button {
min-width: 24px; min-width: 24px;
padding-left: 5px; padding-left: $base_padding;
padding-right: 5px; padding-right: $base_padding;
} }
&.text-button.image-button > button, &.text-button.image-button > button,
&.image-text-button > button { &.image-text-button > button {
padding-left: 9px; padding-left: $base_padding * 1.5;
padding-right: 9px; padding-right: $base_padding * 1.5;
> box { > box {
border-spacing: 6px; border-spacing: $base_padding;
} }
} }

View file

@ -14,8 +14,8 @@ calendar {
} }
> grid { > grid {
padding-left: 3px; padding-left: $base_padding / 2;
padding-bottom: 3px; padding-bottom: $base_padding / 2;
> label.today { > label.today {
box-shadow: inset 0px -2px $border_color; box-shadow: inset 0px -2px $border_color;
@ -27,11 +27,11 @@ calendar {
> label { > label {
@include focus-ring($focus-state: ':focus'); @include focus-ring($focus-state: ':focus');
margin-top: 3px; margin-top: $base_padding / 2;
margin-right: 3px; margin-right: $base_padding / 2;
&.day-number { &.day-number {
padding: 3px; padding: $base_padding / 2;
&:checked { &:checked {
border-radius: $button_radius; border-radius: $button_radius;

View file

@ -71,7 +71,7 @@ columnview {
// align horizontal sizing with header buttons // align horizontal sizing with header buttons
> cell { > cell {
padding: 8px 6px; padding: $base_padding + 2px $base_padding;
&:not(:first-child) { &:not(:first-child) {
border-left: 1px solid transparent; border-left: 1px solid transparent;

View file

@ -152,7 +152,7 @@ infobar {
.close { .close {
min-width: 18px; min-width: 18px;
min-height: 18px; min-height: 18px;
padding: 4px; padding: $base_margin;
border-radius: 50%; border-radius: 50%;
@extend %button_basic_flat; @extend %button_basic_flat;
} }
@ -163,7 +163,7 @@ infobar {
****************/ ****************/
statusbar { statusbar {
padding: 6px 10px 6px 10px; padding: $base_padding $base_padding + $base_margin;
} }
/*************** /***************

View file

@ -1,6 +1,6 @@
dropdown { dropdown {
> button > box { > button > box {
border-spacing: 6px; border-spacing: $base_padding;
> stack > row.activatable { > stack > row.activatable {
&:hover, &:active { background: none; } &:hover, &:active { background: none; }
@ -20,7 +20,7 @@ dropdown {
} }
popover.menu { popover.menu {
padding-top: 6px; padding-top: $base_padding;
listview > row { listview > row {
min-width: 0; min-width: 0;
@ -28,7 +28,7 @@ dropdown {
// dropdowns with searchboxes on top // dropdowns with searchboxes on top
.dropdown-searchbar { .dropdown-searchbar {
padding: 6px; padding: $base_padding;
+ scrolledwindow { + scrolledwindow {
@include undershoot(top, $popover_shade_color); @include undershoot(top, $popover_shade_color);

View file

@ -3,13 +3,13 @@ popover.emoji-picker > contents {
} }
.emoji-searchbar { .emoji-searchbar {
padding: 6px; padding: $base_padding;
} }
.emoji-toolbar { .emoji-toolbar {
// flowbox children already have 3px padding, so we only need 3px more to // flowbox children already have 3px padding, so we only need 3px more to
// get the regular 6px. We also don't need spacing, for the same reason. // get the regular 6px. We also don't need spacing, for the same reason.
padding: 3px; padding: $base_padding / 2;
} }
button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
@ -22,7 +22,7 @@ button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destr
popover.emoji-picker emoji { popover.emoji-picker emoji {
font-size: x-large; font-size: x-large;
padding: 6px; padding: $base_padding;
border-radius: $button_radius; border-radius: $button_radius;
&:focus, &:focus,

View file

@ -67,8 +67,8 @@ entry {
opacity: .8; opacity: .8;
} }
&.left { margin-right: 6px; } &.left { margin-right: $base_padding; }
&.right { margin-left: 6px; } &.right { margin-left: $base_padding; }
} }
&.password image.caps-lock-indicator { &.password image.caps-lock-indicator {
@ -84,7 +84,7 @@ entry {
} }
> progress { > progress {
margin-bottom: 3px; margin-bottom: $base_padding / 2;
> trough > progress { > trough > progress {
background-color: transparent; background-color: transparent;

View file

@ -5,11 +5,11 @@ placessidebar {
// Using margins/padding directly in the SidebarRow // Using margins/padding directly in the SidebarRow
// will make the animation of the new bookmark row jump // will make the animation of the new bookmark row jump
> revealer { padding: 0 14px; } > revealer { padding: 0 $base_padding * 2 + 2px; }
image.sidebar-icon { image.sidebar-icon {
&:dir(ltr) { padding-right: 8px; } &:dir(ltr) { padding-right: $base_padding + 2px; }
&:dir(rtl) { padding-left: 8px; } &:dir(rtl) { padding-left: $base_padding + 2px; }
} }
label.sidebar-label { label.sidebar-label {
@ -32,7 +32,7 @@ placessidebar {
&:selected:active { box-shadow: none; } &:selected:active { box-shadow: none; }
&.sidebar-placeholder-row { &.sidebar-placeholder-row {
padding: 0 8px; padding: 0 $base_padding + 2px;
min-height: 2px; min-height: 2px;
background-image: image($drop_target_color); background-image: image($drop_target_color);
background-clip: content-box; background-clip: content-box;
@ -102,7 +102,7 @@ filechooser {
// Icon + label buttons // Icon + label buttons
> box { > box {
border-spacing: 4px; border-spacing: $base_margin;
> label { > label {
padding-left: 2px; padding-left: 2px;

View file

@ -357,22 +357,22 @@ windowcontrols {
headerbar, headerbar,
windowtitle { windowtitle {
.title { .title {
padding-left: 12px; padding-left: $base_padding * 2;
padding-right: 12px; padding-right: $base_padding * 2;
font-weight: bold; font-weight: bold;
} }
.subtitle { .subtitle {
font-size: smaller; font-size: smaller;
padding-left: 12px; padding-left: $base_padding * 2;
padding-right: 12px; padding-right: $base_padding * 2;
@extend .dim-label; @extend .dim-label;
} }
} }
windowtitle { windowtitle {
margin-top: -6px; margin-top: -$base_padding;
margin-bottom: -6px; margin-bottom: -$base_padding;
min-height: 12px; min-height: 12px;
} }

View file

@ -43,34 +43,6 @@ listview > header {
row { row {
@include focus-ring(); @include focus-ring();
.osd & {
&:focus:focus-visible {
outline-color: $osd_focus_color;
}
&.activatable {
&:hover { background-color: $hover_color; }
&:active { background-color: $active_color; }
// this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&.has-open-popup { background-color: $hover_color; }
&:selected {
&:hover { background-color: $selected_hover_color; }
&:active { background-color: $selected_active_color; }
&.has-open-popup { background-color: $selected_hover_color; }
}
}
&:selected {
background-color: $selected_color;
}
}
background-clip: padding-box; background-clip: padding-box;
&.activatable { &.activatable {
@ -114,6 +86,33 @@ row {
&:selected { &:selected {
background-color: $view_selected_color; background-color: $view_selected_color;
} }
.osd & {
&:focus:focus-visible {
outline-color: $osd_focus_color;
}
&.activatable {
&:hover { background-color: $hover_color; }
&:active { background-color: $active_color; }
// this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&.has-open-popup { background-color: $hover_color; }
&:selected {
&:hover { background-color: $selected_hover_color; }
&:active { background-color: $selected_active_color; }
&.has-open-popup { background-color: $selected_hover_color; }
}
}
&:selected {
background-color: $selected_color;
}
}
} }
/******************************************************* /*******************************************************

View file

@ -125,7 +125,7 @@ popover.menu {
modelbutton { modelbutton {
min-height: $menuitem_size; min-height: $menuitem_size;
min-width: 40px; min-width: $medium_size + 4px;
padding: 2px $menu_padding; padding: 2px $menu_padding;
border-radius: $menuitem_radius; border-radius: $menuitem_radius;
@include button(flat-normal); @include button(flat-normal);
@ -234,7 +234,7 @@ menubar {
//nested submenus //nested submenus
popover.menu popover.menu { popover.menu popover.menu {
padding: 0 0 4px 0; padding: 0 0 $base_margin 0;
} }
popover.menu popover.menu > contents { popover.menu popover.menu > contents {

View file

@ -25,7 +25,7 @@ window.dialog.message {
background-clip: padding-box; background-clip: padding-box;
&.suggested-action { &.suggested-action {
color: $accent_color; color: $accent_bg_color;
} }
&.destructive-action { &.destructive-action {

View file

@ -37,9 +37,8 @@ separator {
.app-notification { .app-notification {
@extend %osd; @extend %osd;
padding: $base_padding + $base_margin;
padding: 10px; border-spacing: $base_padding + $base_margin;
border-spacing: 10px;
border-radius: 0 0 $card_radius $card_radius; border-radius: 0 0 $card_radius $card_radius;
background-color: $osd_bg_color; background-color: $osd_bg_color;
background-image: linear-gradient(to bottom, transparentize(black, 0.8), background-image: linear-gradient(to bottom, transparentize(black, 0.8),

View file

@ -72,8 +72,8 @@ notebook {
@at-root %notebook_vert_arrows { @at-root %notebook_vert_arrows {
margin-left: -5px; margin-left: -5px;
margin-right: -5px; margin-right: -5px;
padding-left: 4px; padding-left: $base_margin;
padding-right: 4px; padding-right: $base_margin;
&.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
@ -95,8 +95,8 @@ notebook {
@at-root %notebook_horz_arrows { @at-root %notebook_horz_arrows {
margin-top: -5px; margin-top: -5px;
margin-bottom: -5px; margin-bottom: -5px;
padding-top: 4px; padding-top: $base_margin;
padding-bottom: 4px; padding-bottom: $base_margin;
&.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
@ -120,7 +120,7 @@ notebook {
transition: $focus_transition; transition: $focus_transition;
min-height: 30px; min-height: 30px;
min-width: 30px; min-width: 30px;
padding: 3px 12px; padding: $base_padding / 2 $base_padding * 2;
font-weight: normal; font-weight: normal;
@ -146,20 +146,20 @@ notebook {
&:hover, &:active { color: currentColor; } &:hover, &:active { color: currentColor; }
padding: 0; padding: 0;
margin-top: 4px; margin-top: $base_margin;
margin-bottom: 4px; margin-bottom: $base_margin;
// FIXME: generalize .small-button? // FIXME: generalize .small-button?
min-width: 20px; min-width: 20px;
min-height: 20px; min-height: 20px;
&:last-child { &:last-child {
margin-left: 4px; margin-left: $base_margin;
margin-right: -4px; margin-right: -$base_margin;
} }
&:first-child { &:first-child {
margin-left: -4px; margin-left: -$base_margin;
margin-right: 4px; margin-right: $base_margin;
} }
} }
} }
@ -167,20 +167,20 @@ notebook {
&.top, &.top,
&.bottom { &.bottom {
> tabs { > tabs {
padding-left: 4px; padding-left: $base_margin;
padding-right: 4px; padding-right: $base_margin;
&:not(:only-child) { &:not(:only-child) {
margin-left: 3px; margin-left: $base_padding / 2;
margin-right: 3px; margin-right: $base_padding / 2;
&:first-child { margin-left: -1px; } &:first-child { margin-left: -1px; }
&:last-child { margin-right: -1px; } &:last-child { margin-right: -1px; }
} }
> tab { > tab {
margin-left: 4px; margin-left: $base_margin;
margin-right: 4px; margin-right: $base_margin;
} }
} }
} }
@ -188,26 +188,26 @@ notebook {
&.left, &.left,
&.right { &.right {
> tabs { > tabs {
padding-top: 4px; padding-top: $base_margin;
padding-bottom: 4px; padding-bottom: $base_margin;
&:not(:only-child) { &:not(:only-child) {
margin-top: 3px; margin-top: $base_padding / 2;
margin-bottom: 3px; margin-bottom: $base_padding / 2;
&:first-child { margin-top: -1px; } &:first-child { margin-top: -1px; }
&:last-child { margin-bottom: -1px; } &:last-child { margin-bottom: -1px; }
} }
> tab { > tab {
margin-top: 4px; margin-top: $base_margin;
margin-bottom: 4px; margin-bottom: $base_margin;
} }
} }
} }
&.top > tabs > tab { padding-bottom: 4px; } &.top > tabs > tab { padding-bottom: $base_margin; }
&.bottom > tabs > tab { padding-top: 4px; } &.bottom > tabs > tab { padding-top: $base_margin; }
} }
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks

View file

@ -6,8 +6,8 @@ paned {
background-size: 1px 1px; background-size: 1px 1px;
&.wide { &.wide {
min-width: 5px; min-width: $base_padding;
min-height: 5px; min-height: $base_padding;
} }
} }

View file

@ -9,14 +9,14 @@ shortcuts-section {
// shortcut window keys // shortcut window keys
shortcut { shortcut {
border-spacing: 6px; border-spacing: $base_padding;
border-radius: 6px; border-radius: $base_padding;
@include focus-ring($outer: true, $offset: 4px); @include focus-ring($outer: true, $offset: 4px);
> .keycap { > .keycap {
min-width: 20px; min-width: 20px;
min-height: 25px; min-height: 25px;
padding: 2px 6px; padding: 2px $base_padding;
@extend %card; @extend %card;
@ -26,7 +26,7 @@ shortcut {
} }
shortcuts-section stackswitcher.circular { shortcuts-section stackswitcher.circular {
border-spacing: 12px; border-spacing: $base_padding * 2;
> button.circular, > button.circular,
> button.text-button.circular { > button.text-button.circular {
@ -42,7 +42,7 @@ window.shortcuts {
@extend %headerbar-shrunk; @extend %headerbar-shrunk;
> windowhandle { > windowhandle {
padding-top: 3px; padding-top: $base_padding / 2;
} }
} }

View file

@ -294,6 +294,8 @@ stacksidebar row {
**********************/ **********************/
.navigation-sidebar { .navigation-sidebar {
padding: $base_padding 0; //only vertical padding. horizontal row size would clip
&, &.view, &.view:disabled { &, &.view, &.view:disabled {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
@ -306,6 +308,18 @@ stacksidebar row {
} }
} }
> row {
min-height: $medium_size;
padding: 0 $base_padding + 2px;
border-radius: $menuitem_radius;
margin: 0 $base_padding $base_padding / 2;
}
> separator {
margin: $base_padding;
background: none;
}
row { row {
&.activatable { &.activatable {
&:hover { background-color: $hover_color; } &:hover { background-color: $hover_color; }
@ -328,18 +342,4 @@ stacksidebar row {
background-color: $selected_color; background-color: $selected_color;
} }
} }
padding: $menu_margin 0; //only vertical padding. horizontal row size would clip
> separator {
margin: $menu_margin;
background: none;
}
> row {
min-height: $medium_size;
padding: 0 $base_padding + 2px;
border-radius: $menuitem_radius;
margin: 0 $menu_margin $base_padding / 2;
}
} }

View file

@ -1,7 +1,6 @@
spinbutton { spinbutton {
@extend %entry; @extend %entry;
@extend .numeric; @extend .numeric;
padding: 0; padding: 0;
border-spacing: 0; border-spacing: 0;
@ -9,12 +8,9 @@ spinbutton {
> button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
> button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
@extend %button_basic_flat; @extend %button_basic_flat;
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
border-style: solid; border-style: solid;
border-color: gtkalpha(currentColor, .1); border-color: gtkalpha(currentColor, .1);
} }
@ -22,7 +18,7 @@ spinbutton {
&:not(.vertical) { &:not(.vertical) {
> text { > text {
min-width: 28px; min-width: 28px;
padding: 6px; padding: $base_padding;
} }
/* :not here just to bump specificity above that of the list button styling */ /* :not here just to bump specificity above that of the list button styling */

View file

@ -22,7 +22,7 @@ tabbar {
tabbox { tabbox {
padding-bottom: $base_padding; padding-bottom: $base_padding;
padding-top: $base_padding; padding-top: $base_padding;
min-height: 34px; min-height: $medium_size;
> tabboxchild { > tabboxchild {
@include focus-ring($focus-state: ':focus-within:focus-visible'); @include focus-ring($focus-state: ':focus-within:focus-visible');
@ -42,7 +42,7 @@ tabbar {
> revealer > indicator { > revealer > indicator {
min-width: 2px; min-width: 2px;
border-radius: 2px; border-radius: 2px;
margin: 3px 6px; margin: $base_padding / 2 $base_padding;
background: gtkalpha($accent_color, 0.5); background: gtkalpha($accent_color, 0.5);
} }
} }
@ -130,15 +130,15 @@ dnd tab {
tabbar, tabbar,
dnd { dnd {
tab { tab {
min-height: 26px; min-height: 24px;
padding: 4px; padding: ($medium_size - 24px) / 2;
border-radius: $button_radius; border-radius: $button_radius;
button.image-button { button.image-button {
padding: 0; padding: 0;
margin: 0; margin: 0;
min-width: 24px; min-width: $small_size;
min-height: 24px; min-height: $small_size;
border-radius: $circular_radius; border-radius: $circular_radius;
} }

View file

@ -10,8 +10,8 @@ tooltip {
color: white; color: white;
} }
padding: 6px 10px; padding: $base_padding $base_padding + $base_margin;
border-radius: 9px; border-radius: $base_padding * 1.5;
box-shadow: none; // otherwise it gets inherited by windowframe.csd box-shadow: none; // otherwise it gets inherited by windowframe.csd
> box { > box {

View file

@ -1,10 +1,10 @@
viewswitcher { viewswitcher {
border-spacing: 3px; border-spacing: $base_padding / 2;
&.narrow { &.narrow {
margin-top: -3px; margin-top: -$base_padding / 2;
margin-bottom: -3px; margin-bottom: -$base_padding / 2;
min-height: 6px; min-height: $base_padding;
} }
button.toggle { button.toggle {
@ -13,19 +13,19 @@ viewswitcher {
> stack > box { > stack > box {
&.narrow { &.narrow {
font-size: 0.75rem; font-size: 0.75rem;
padding-top: 4px; padding-top: $base_margin;
> label { > label {
min-height: 18px; min-height: 18px;
padding-left: 3px; padding-left: $base_padding / 2;
padding-right: 3px; padding-right: $base_padding / 2;
padding-bottom: 2px; padding-bottom: 2px;
} }
} }
&.wide { &.wide {
padding: 2px 12px; padding: 2px $base_padding * 2;
border-spacing: 6px; border-spacing: $base_padding;
} }
} }
} }
@ -38,12 +38,12 @@ viewswitcher {
viewswitcherbar actionbar > revealer > box { viewswitcherbar actionbar > revealer > box {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
padding-top: 7px; padding-top: $base_padding;
} }
%viewswitcherbar-shrunk actionbar > revealer > box { %viewswitcherbar-shrunk actionbar > revealer > box {
// Not 0px because view switcher has negative margin // Not 0px because view switcher has negative margin
padding-top: 6px; padding-top: $base_padding;
} }
/************************ /************************
@ -51,21 +51,21 @@ viewswitcherbar actionbar > revealer > box {
************************/ ************************/
viewswitchertitle { viewswitchertitle {
margin-top: -6px; margin-top: -$base_padding;
margin-bottom: -6px; margin-bottom: -$base_padding;
viewswitcher { viewswitcher {
margin-left: 12px; margin-left: $base_padding * 2;
margin-right: 12px; margin-right: $base_padding 8 2;
&.narrow { &.narrow {
margin-top: 3px; margin-top: $base_padding / 2;
margin-bottom: 3px; margin-bottom: $base_padding / 2;
} }
&.wide { &.wide {
margin-top: 6px; margin-top: $base_padding;
margin-bottom: 6px; margin-bottom: $base_padding;
} }
} }
@ -109,8 +109,8 @@ indicatorbin {
> indicator > label { > indicator > label {
font-size: 0.6rem; font-size: 0.6rem;
font-weight: bold; font-weight: bold;
padding-left: 4px; padding-left: $base_margin;
padding-right: 4px; padding-right: $base_margin;
color: white; color: white;
} }

View file

@ -47,7 +47,7 @@ rubberband {
flowbox > flowboxchild, flowbox > flowboxchild,
gridview > child { gridview > child {
padding: 3px; padding: $base_padding / 2;
border-radius: $button_radius; border-radius: $button_radius;
@include focus-ring(); @include focus-ring();