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_margin: if($compact == 'false', 4px, 3px);
$menu_margin: $base_padding; //margin around menuitems & sidebar items
$menu_padding: $base_padding * 2; //inner menuitem padding

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -3,13 +3,13 @@ popover.emoji-picker > contents {
}
.emoji-searchbar {
padding: 6px;
padding: $base_padding;
}
.emoji-toolbar {
// 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.
padding: 3px;
padding: $base_padding / 2;
}
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 {
font-size: x-large;
padding: 6px;
padding: $base_padding;
border-radius: $button_radius;
&:focus,

View file

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

View file

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

View file

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

View file

@ -43,34 +43,6 @@ listview > header {
row {
@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;
&.activatable {
@ -114,6 +86,33 @@ row {
&:selected {
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 {
min-height: $menuitem_size;
min-width: 40px;
min-width: $medium_size + 4px;
padding: 2px $menu_padding;
border-radius: $menuitem_radius;
@include button(flat-normal);
@ -234,7 +234,7 @@ menubar {
//nested submenus
popover.menu popover.menu {
padding: 0 0 4px 0;
padding: 0 0 $base_margin 0;
}
popover.menu popover.menu > contents {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -294,6 +294,8 @@ stacksidebar row {
**********************/
.navigation-sidebar {
padding: $base_padding 0; //only vertical padding. horizontal row size would clip
&, &.view, &.view:disabled {
background-color: transparent;
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 {
&.activatable {
&:hover { background-color: $hover_color; }
@ -328,18 +342,4 @@ stacksidebar row {
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 {
@extend %entry;
@extend .numeric;
padding: 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.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
@extend %button_basic_flat;
margin: 0;
border-radius: 0;
box-shadow: none;
border-style: solid;
border-color: gtkalpha(currentColor, .1);
}
@ -22,7 +18,7 @@ spinbutton {
&:not(.vertical) {
> text {
min-width: 28px;
padding: 6px;
padding: $base_padding;
}
/* :not here just to bump specificity above that of the list button styling */

View file

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

View file

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

View file

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

View file

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