Fixed libadwaita issues
This commit is contained in:
vinceliuice
parent
53278a6b78
commit
448062b716
@ -25,6 +25,7 @@
|
||||
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
|
||||
padding: $base_margin;
|
||||
spacing: $base_spacing * 2;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// .message-list-clear-button.button {
|
||||
|
||||
@ -106,48 +106,50 @@ $popop_menuitem_radius: $wm_radius - 4px;
|
||||
font-weight: normal;
|
||||
transition: none;
|
||||
|
||||
&:ltr { padding-right: 2em; padding-left: 0; }
|
||||
&:rtl { padding-right: 0; padding-left: 2em; }
|
||||
&:ltr { padding-right: 1.5em; padding-left: 0; }
|
||||
&:rtl { padding-right: 0; padding-left: 1.5em; }
|
||||
// &:ltr { padding-right: $base_padding * 2 !important; padding-left: 0 !important; }
|
||||
// &:rtl { padding-left: $base_padding * 2 !important; padding-right: 0 !important; }
|
||||
|
||||
&:checked {
|
||||
font-weight: normal;
|
||||
border-radius: $popop_menuitem_radius $popop_menuitem_radius 0 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $alt_fg_color;
|
||||
background-color: $submenu_bg_color;
|
||||
color: $alt_fg_color !important;
|
||||
background-color: $submenu_bg_color !important;
|
||||
background-gradient-direction: none !important;
|
||||
|
||||
&:hover, &.selected {
|
||||
color: $selected_fg_color;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color !important;
|
||||
background-color: $selected_bg_color !important;
|
||||
background-gradient-direction: none !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $selected_fg_color;
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%);
|
||||
color: $selected_fg_color !important;
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
}
|
||||
|
||||
&:insensitive { color: $disabled_fg_color; }
|
||||
&:insensitive { color: $disabled_fg_color !important; }
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $selected_fg_color;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color !important;
|
||||
background-color: $selected_bg_color !important;
|
||||
transition-duration: 0ms !important;
|
||||
}
|
||||
|
||||
&:active, &.selected:active {
|
||||
color: $selected_fg_color;
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%);
|
||||
color: $selected_fg_color !important;
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
}
|
||||
|
||||
&:insensitive { color: $disabled_fg_color; }
|
||||
&:insensitive { color: $disabled_fg_color !important; }
|
||||
}
|
||||
|
||||
.popup-sub-menu {
|
||||
background-color: $submenu_bg_color;
|
||||
background-color: $submenu_bg_color !important;
|
||||
border-radius: 0 0 $popop_menuitem_radius $popop_menuitem_radius;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
@ -157,14 +159,14 @@ $popop_menuitem_radius: $wm_radius - 4px;
|
||||
margin: 0;
|
||||
border-radius: $popop_menuitem_radius;
|
||||
|
||||
&:hover {
|
||||
color: $selected_fg_color;
|
||||
background-color: $selected_bg_color;
|
||||
&:focus, &:hover {
|
||||
color: $selected_fg_color !important;
|
||||
background-color: $selected_bg_color !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $selected_fg_color;
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%);
|
||||
color: $selected_fg_color !important;
|
||||
background-color: mix($fg_color, $selected_bg_color, 5%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -183,14 +185,17 @@ $popop_menuitem_radius: $wm_radius - 4px;
|
||||
.popup-menu-ornament {
|
||||
width: 1.2em;
|
||||
|
||||
&:ltr { text-align: right };
|
||||
&:rtl { text-align: left };
|
||||
&:ltr { text-align: right; }
|
||||
&:rtl { text-align: left; }
|
||||
}
|
||||
|
||||
// separator
|
||||
.popup-separator-menu-item {
|
||||
background: none;
|
||||
border: none;
|
||||
// margin: 6px 32px;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.popup-separator-menu-item-separator {
|
||||
height: 1px; //not really the whole box
|
||||
@ -222,6 +227,9 @@ $popop_menuitem_radius: $wm_radius - 4px;
|
||||
}
|
||||
|
||||
.popup-sub-menu .popup-menu-item > :first-child {
|
||||
// &:ltr { padding-left: $base_padding * 2 !important; margin-left: $base_padding / 2 !important; }
|
||||
// &:rtl { padding-right: $base_padding * 2 !important; margin-right: $base_padding / 2 !important; }
|
||||
|
||||
&:ltr { /* 12px spacing + 2*4px padding */
|
||||
padding-left: $base_padding * 2 + 4px; margin-left: 1em; }
|
||||
&:rtl { /* 12px spacing + 2*4px padding */
|
||||
|
||||
@ -1,48 +1,2 @@
|
||||
//
|
||||
// Extensions
|
||||
//
|
||||
window.background.csd {
|
||||
> stack, // GameMode setting
|
||||
> stack > scrolledwindow > viewport > box, // User Themes (Workspace) setting
|
||||
> box > stack > scrolledwindow > viewport > box {
|
||||
> list {
|
||||
@extend %circular_list;
|
||||
|
||||
row.activatable { @extend %circular_row; }
|
||||
}
|
||||
}
|
||||
|
||||
stack stack stack frame, // ArcMenu setting
|
||||
> stack > stack > box > frame, // Night Theme Switcher setting
|
||||
> stack > stack > box > box > frame, // Night Theme Switcher setting bottom lists
|
||||
> stack > box > stack > box > frame, // ArcMenu setting
|
||||
> stack > box > stack > scrolledwindow > viewport frame, // ArcMenu setting
|
||||
> stack > box > stack > box > scrolledwindow > viewport > frame, // ArcMenu setting
|
||||
> stack > grid > scrolledwindow > viewport > box > frame { // GSConnect setting
|
||||
> border { border: none; }
|
||||
border: none;
|
||||
|
||||
> list {
|
||||
@extend %circular_list;
|
||||
|
||||
row.activatable { @extend %circular_row; }
|
||||
}
|
||||
}
|
||||
|
||||
> stack > box > box > list,
|
||||
> stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar
|
||||
border-bottom-left-radius: $wm_radius;
|
||||
}
|
||||
|
||||
&.maximized, &.tiled, &.fullscreen {
|
||||
> stack > box > box > list,
|
||||
> stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar
|
||||
border-bottom-left-radius: $maximized_radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.nightthemeswitcher headerbar {
|
||||
background: $header_bg;
|
||||
color: $header_fg;
|
||||
}
|
||||
@import 'apps/gnome-40.0';
|
||||
@import 'apps/libadwaita';
|
||||
|
||||
@ -1967,12 +1967,12 @@ $pathbar_button_checked_bg: if($variant == 'light', #808080, #b8b8b8);
|
||||
}
|
||||
|
||||
.background .path-bar button {
|
||||
min-width: 12px;
|
||||
min-width: $container_padding * 2;
|
||||
min-height: if($variant == 'light', 24px, 26px);
|
||||
|
||||
&.text-button, &.image-button, & {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-left: $container_padding;
|
||||
padding-right: $container_padding;
|
||||
}
|
||||
|
||||
&:hover { box-shadow: none; }
|
||||
|
||||
@ -347,6 +347,22 @@ label {
|
||||
}
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: $selected_bg_color;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: $success_color;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: $warning_color;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $error_color;
|
||||
}
|
||||
|
||||
window.assistant {
|
||||
// min-height: 38px;
|
||||
.sidebar {
|
||||
@ -451,6 +467,14 @@ spinner {
|
||||
}
|
||||
}
|
||||
|
||||
.monospace {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.numeric {
|
||||
font-feature-settings: "tnum";
|
||||
}
|
||||
|
||||
//
|
||||
// Text Entries
|
||||
//
|
||||
@ -706,6 +730,37 @@ $_dot_color: if($variant=='light', $selected_bg_color,
|
||||
&:disabled { @include button(flat-insensitive); }
|
||||
}
|
||||
|
||||
%opaque_button {
|
||||
box-shadow: none;
|
||||
transition: $button_transition;
|
||||
|
||||
.osd &:focus:focus-visible {
|
||||
outline-color: rgba(white, 0.15)
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: image(gtkalpha(currentColor, .1));
|
||||
}
|
||||
|
||||
&.keyboard-activating,
|
||||
&:active {
|
||||
background-image: image(transparentize(black, .8));
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-image: image(transparentize(black, .85));
|
||||
|
||||
&:hover {
|
||||
background-image: image(transparentize(black, .95));
|
||||
}
|
||||
|
||||
&.keyboard-activating,
|
||||
&:active {
|
||||
background-image: image(transparentize(black, .7));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%button,
|
||||
button {
|
||||
min-height: $menuitem_size - 4px;
|
||||
@ -738,13 +793,20 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
&.opaque {
|
||||
@extend %opaque_button;
|
||||
|
||||
background-color: mix($bg_color, $fg_color, 80%);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include button(hover);
|
||||
background-clip: if($variant=='light', border-box, padding-box);
|
||||
-gtk-icon-filter: brightness(1.2);
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
&.keyboard-activating, &:active, &:checked {
|
||||
@include button(active);
|
||||
|
||||
background-clip: if($variant=='light', border-box, padding-box);
|
||||
@ -775,11 +837,22 @@ button {
|
||||
padding-right: $container_padding * 2;
|
||||
}
|
||||
|
||||
&.text-button.image-button {
|
||||
&.text-button.image-button,
|
||||
&.image-text-button {
|
||||
min-height: $menuitem_size - 4px;
|
||||
padding-left: $container_padding;
|
||||
padding-right: $container_padding;
|
||||
|
||||
> box,
|
||||
> box > box {
|
||||
border-spacing: $container_padding - 2px;
|
||||
|
||||
> label {
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
&:first-child {
|
||||
padding-left: $container_padding + 2;
|
||||
@ -800,12 +873,32 @@ button {
|
||||
&.popup { padding-right: $container_padding; padding-left: $container_padding; }
|
||||
}
|
||||
|
||||
@at-root %circular_button, &.close { // The Bloody Circul Button
|
||||
&.arrow-button {
|
||||
padding-left: $container_padding * 1.5;
|
||||
padding-right: $container_padding * 1.5;
|
||||
|
||||
> box { border-spacing: $container_padding - 2px; }
|
||||
|
||||
&.text-button {
|
||||
> box { border-spacing: $container_padding - 2px; }
|
||||
}
|
||||
}
|
||||
|
||||
// hide separators
|
||||
&.font {
|
||||
separator { background-color: transparent; background-image: none; }
|
||||
> box { border-spacing: $container_padding; }
|
||||
> box > box > label { font-weight: bold; }
|
||||
}
|
||||
|
||||
@at-root %circular_button, &.circular, &.close { // The Bloody Circul Button
|
||||
border-radius: $circular_radius;
|
||||
padding: 0 0 0 0;
|
||||
padding: 0;
|
||||
min-height: $menuitem_size;
|
||||
min-width: $menuitem_size;
|
||||
|
||||
label { padding: 0; }
|
||||
|
||||
&:active, &:checked {
|
||||
@if $variant=='light' {
|
||||
@include button(flat-active);
|
||||
@ -814,6 +907,46 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
@at-root %pill_button,
|
||||
&.pill {
|
||||
padding: $container_padding * 1.5 $container_padding * 5;
|
||||
border-radius: $circular_radius;
|
||||
}
|
||||
|
||||
&.card {
|
||||
background-color: $fill_color;
|
||||
background-clip: padding-box;
|
||||
font-weight: inherit;
|
||||
padding: 0;
|
||||
transition: $button_transition;
|
||||
|
||||
&:hover {
|
||||
background-image: image(gtkalpha(currentColor, 0.03));
|
||||
}
|
||||
|
||||
&.keyboard-activating,
|
||||
&:active {
|
||||
background-image: image(gtkalpha(currentColor, 0.08));
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $fill_color;
|
||||
background-image: image(gtkalpha(currentColor, 0.1));
|
||||
|
||||
&:hover { background-image: image(gtkalpha(currentColor, 0.13)); }
|
||||
|
||||
&.keyboard-activating,
|
||||
&:active { background-image: image(gtkalpha(currentColor, 0.19)); }
|
||||
|
||||
&.has-open-popup { background-image: image(gtkalpha(currentColor, 0.13)); }
|
||||
}
|
||||
|
||||
&:drop(active) {
|
||||
color: $drop_target_color;
|
||||
box-shadow: inset 0 0 0 1px $drop_target_color;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root %button_basic_drop_active,
|
||||
&:drop(active) {
|
||||
color: $drop_target_color;
|
||||
@ -839,7 +972,7 @@ button {
|
||||
background-color: $osd_button_bg;
|
||||
}
|
||||
|
||||
&:active, &:checked {@include button(osd-active); }
|
||||
&.keyboard-activating, &:active, &:checked {@include button(osd-active); }
|
||||
&:disabled { @include button(osd-insensitive); }
|
||||
}
|
||||
|
||||
@ -849,7 +982,7 @@ button {
|
||||
@include button(osd);
|
||||
|
||||
&:hover { @include button(osd-hover); }
|
||||
&:active, &:checked { @include button(osd-active); }
|
||||
&.keyboard-activating, &:active, &:checked { @include button(osd-active); }
|
||||
&:disabled { @include button(osd-insensitive); }
|
||||
|
||||
&.flat {
|
||||
@ -944,6 +1077,216 @@ button {
|
||||
.linked.vertical > & { @extend %linked_vertical; }
|
||||
}
|
||||
|
||||
menubutton {
|
||||
&.osd {
|
||||
background: none;
|
||||
color: inherit;
|
||||
|
||||
> button { @extend %osd_button; }
|
||||
}
|
||||
|
||||
&.circular > button { @extend %circular_button; }
|
||||
&.flat > button { @extend %flat_button; }
|
||||
&.pill > button { @extend %pill_button; }
|
||||
|
||||
&.suggested-action {
|
||||
background-color: $suggested_color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.destructive-action {
|
||||
background-color: $destructive_color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.opaque {
|
||||
background-color: mix($bg_color, $fg_color, 80%);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&.suggested-action,
|
||||
&.destructive-action,
|
||||
&.opaque {
|
||||
border-radius: $bt_radius;
|
||||
|
||||
&.circular, &.pill {
|
||||
border-radius: $circular_radius;
|
||||
}
|
||||
|
||||
> button {
|
||||
@extend %flat_button;
|
||||
|
||||
&, &:checked {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.image-button > button {
|
||||
min-width: 24px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
&.none {
|
||||
-gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
|
||||
}
|
||||
&.down {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
}
|
||||
&.up {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
||||
}
|
||||
&.left {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
|
||||
}
|
||||
&.right {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
splitbutton {
|
||||
border-radius: $bt_radius;
|
||||
|
||||
&, & > separator {
|
||||
transition: $button_transition;
|
||||
transition-property: background;
|
||||
}
|
||||
|
||||
> separator {
|
||||
margin-top: $container_padding;
|
||||
margin-bottom: $container_padding;
|
||||
background: none;
|
||||
}
|
||||
|
||||
> menubutton > button {
|
||||
padding-left: $container_padding - 2px;
|
||||
padding-right: $container_padding - 2px;
|
||||
}
|
||||
|
||||
// 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: $container_padding;
|
||||
padding-right: $container_padding;
|
||||
}
|
||||
|
||||
&.text-button.image-button > button,
|
||||
&.image-text-button > button {
|
||||
padding-left: $container_padding * 1.5;
|
||||
padding-right: $container_padding * 1.5;
|
||||
|
||||
> box {
|
||||
border-spacing: $container_padding;
|
||||
}
|
||||
}
|
||||
|
||||
// Reimplementing linked so we don't blow up css
|
||||
> button:dir(ltr),
|
||||
> menubutton > button:dir(rtl) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
> button:dir(rtl),
|
||||
> menubutton > button:dir(ltr) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
@at-root %flat_split_button,
|
||||
&.flat {
|
||||
> separator {
|
||||
background: $borders_color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:checked {
|
||||
background: gtkalpha(currentColor, 0.07);
|
||||
|
||||
> separator {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within:focus-visible > separator {
|
||||
background: none;
|
||||
}
|
||||
|
||||
> button,
|
||||
> menubutton > button {
|
||||
@extend %flat_button;
|
||||
|
||||
border-radius: $bt_radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.suggested-action {
|
||||
background-color: $suggested_color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.destructive-action {
|
||||
background-color: $destructive_color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.opaque {
|
||||
background-color: mix($bg_color, $fg_color, 80%);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&.suggested-action,
|
||||
&.destructive-action,
|
||||
&.opaque {
|
||||
> button, > menubutton > button {
|
||||
@extend %flat_button;
|
||||
|
||||
&, &:checked {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
> menubutton > button {
|
||||
&:dir(ltr) { box-shadow: inset 1px 0 $borders_color; }
|
||||
&:dir(rtl) { box-shadow: inset -1px 0 $borders_color; }
|
||||
}
|
||||
}
|
||||
|
||||
> menubutton > button > arrow.none {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
}
|
||||
}
|
||||
|
||||
buttoncontent {
|
||||
border-spacing: $container_padding;
|
||||
|
||||
> label {
|
||||
font-weight: bold;
|
||||
|
||||
&:dir(ltr) { padding-right: 2px; }
|
||||
&:dir(rtl) { padding-left: 2px; }
|
||||
}
|
||||
|
||||
.arrow-button > box > &,
|
||||
splitbutton > button > & {
|
||||
> label {
|
||||
&:dir(ltr) { padding-right: 0; }
|
||||
&:dir(rtl) { padding-left: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Some crazy linking stuff
|
||||
@mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true',
|
||||
$e_border:$entry_border, $b_border:$button_border) {
|
||||
@ -1241,7 +1584,7 @@ spinbutton {
|
||||
dropdown > popover.menu.background > contents { padding: 0; }
|
||||
|
||||
dropdown > button > box {
|
||||
border-spacing: 6px;
|
||||
border-spacing: $container_padding;
|
||||
}
|
||||
|
||||
dropdown,
|
||||
@ -1863,19 +2206,23 @@ headerbar {
|
||||
//
|
||||
// Pathbars
|
||||
//
|
||||
.path-bar > button {
|
||||
min-width: 12px;
|
||||
|
||||
$pathbar_button_checked_bg: if($variant == 'light', #808080, #b8b8b8);
|
||||
|
||||
pathbar > button {
|
||||
min-width: $container_padding * 2;
|
||||
min-height: if($variant == 'light', 24px, 26px);
|
||||
|
||||
&.text-button, &.image-button, & {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-left: $container_padding;
|
||||
padding-right: $container_padding;
|
||||
}
|
||||
|
||||
&:hover { box-shadow: none; }
|
||||
|
||||
&:active, &:checked {
|
||||
@include button(header-checked);
|
||||
background-color: $pathbar_button_checked_bg;
|
||||
color: if($variant == 'light', rgba(white, 1), rgba(black, 0.75));
|
||||
border-color: $button_borders;
|
||||
}
|
||||
|
||||
@ -1886,8 +2233,8 @@ headerbar {
|
||||
&.text-button.image-button label { padding-left: 0; padding-right: 0; }
|
||||
|
||||
&.text-button.image-button, & {
|
||||
label:last-child { padding-right: 10px; }
|
||||
label:first-child { padding-left: 10px; }
|
||||
label:last-child { padding-right: $container_padding + 4px; }
|
||||
label:first-child { padding-left: $container_padding + 4px; }
|
||||
}
|
||||
|
||||
&.slider-button,
|
||||
@ -3462,13 +3809,29 @@ separator {
|
||||
//
|
||||
// Lists
|
||||
//
|
||||
listview,
|
||||
list {
|
||||
background-color: $base_color;
|
||||
border-color: $borders_color;
|
||||
background-clip: padding-box;
|
||||
color: $fg_color;
|
||||
|
||||
> row {
|
||||
padding: 2px;
|
||||
background-clip: padding-box;
|
||||
|
||||
&.expander { padding: 0; }
|
||||
&.expander .row-header { padding: 2px; }
|
||||
}
|
||||
|
||||
&.horizontal row.separator,
|
||||
&.separators.horizontal > row:not(.separator) {
|
||||
border-left: 1px solid $borders_color;
|
||||
}
|
||||
|
||||
&:not(.horizontal) row.separator,
|
||||
&.separators:not(.horizontal) > row:not(.separator) {
|
||||
border-bottom: 1px solid $borders_color;
|
||||
}
|
||||
|
||||
&.content:not(.conversation-listbox) {
|
||||
@ -3498,9 +3861,6 @@ list {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> row.expander { padding: 0px; }
|
||||
> row.expander .row-header { padding: 2px; }
|
||||
}
|
||||
|
||||
listview.view {
|
||||
@ -3539,6 +3899,29 @@ listview.view {
|
||||
}
|
||||
|
||||
row {
|
||||
background-clip: padding-box;
|
||||
|
||||
label.subtitle {
|
||||
font-size: smaller;
|
||||
@extend .dim-label;
|
||||
}
|
||||
|
||||
> box.header {
|
||||
margin-left: $container_padding * 2;
|
||||
margin-right: $container_padding * 2;
|
||||
min-height: $large_size;
|
||||
|
||||
> .icon:disabled {
|
||||
filter: opacity($disabled_opacity);
|
||||
}
|
||||
|
||||
> box.title {
|
||||
margin-top: $container_padding;
|
||||
margin-bottom: $container_padding;
|
||||
border-spacing: $container_padding / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:hover) { transition: all 300ms $ease-out-quad; }
|
||||
|
||||
button.circular { @extend %circular_button; }
|
||||
@ -3555,6 +3938,28 @@ row {
|
||||
&.activatable {
|
||||
@extend %row_activatable;
|
||||
}
|
||||
|
||||
&.combo {
|
||||
image.dropdown-arrow:disabled {
|
||||
filter: opacity($disabled_opacity);
|
||||
}
|
||||
|
||||
listview.inline {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
|
||||
&, &:disabled {
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
popover > contents {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
columnview {
|
||||
@ -3648,21 +4053,26 @@ columnview row:not(:selected) cell editablelabel.editing text selection {
|
||||
// Expanders
|
||||
//
|
||||
expander {
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
|
||||
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
||||
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
|
||||
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
||||
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
|
||||
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||
&:disabled { filter: opacity($disabled_opacity); }
|
||||
}
|
||||
|
||||
expander-widget {
|
||||
> box > title {
|
||||
border-radius: $bt_radius;
|
||||
|
||||
> expander {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
&:hover > expander {
|
||||
color: lighten($fg_color, 30%); //only lightens the icon
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3802,6 +4212,10 @@ window.dialog.message { // Message Dialog styling
|
||||
}
|
||||
}
|
||||
|
||||
window.aboutdialog image.large-icons {
|
||||
-gtk-icon-size: 128px;
|
||||
}
|
||||
|
||||
//
|
||||
// Filechooser
|
||||
//
|
||||
@ -4322,10 +4736,27 @@ colorswatch {
|
||||
button.color {
|
||||
padding: 0;
|
||||
|
||||
> colorswatch:only-child {
|
||||
border-radius: 3px;
|
||||
|
||||
> overlay {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
&.light > overlay {
|
||||
border-color: $borders_color;
|
||||
}
|
||||
}
|
||||
|
||||
colorswatch:first-child:last-child {
|
||||
&, overlay {
|
||||
margin: 4px;
|
||||
border-radius: 0;
|
||||
margin: $container_padding / 2;
|
||||
|
||||
&, > overlay {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4376,11 +4807,6 @@ colorchooser .popover.osd { border-radius: $bt_radius; }
|
||||
//
|
||||
// Shortcuts Help
|
||||
//
|
||||
button.circular {
|
||||
@extend %circular_button;
|
||||
|
||||
// label { padding: 0; }
|
||||
}
|
||||
|
||||
.keycap {
|
||||
min-width: $small_size - 4px;
|
||||
|
||||
48
src/sass/gtk/apps/_gnome-40.0.scss
Normal file
48
src/sass/gtk/apps/_gnome-40.0.scss
Normal file
@ -0,0 +1,48 @@
|
||||
//
|
||||
// Extensions
|
||||
//
|
||||
window.background.csd {
|
||||
> stack, // GameMode setting
|
||||
> stack > scrolledwindow > viewport > box, // User Themes (Workspace) setting
|
||||
> box > stack > scrolledwindow > viewport > box {
|
||||
> list {
|
||||
@extend %circular_list;
|
||||
|
||||
row.activatable { @extend %circular_row; }
|
||||
}
|
||||
}
|
||||
|
||||
stack stack stack frame, // ArcMenu setting
|
||||
> stack > stack > box > frame, // Night Theme Switcher setting
|
||||
> stack > stack > box > box > frame, // Night Theme Switcher setting bottom lists
|
||||
> stack > box > stack > box > frame, // ArcMenu setting
|
||||
> stack > box > stack > scrolledwindow > viewport frame, // ArcMenu setting
|
||||
> stack > box > stack > box > scrolledwindow > viewport > frame, // ArcMenu setting
|
||||
> stack > grid > scrolledwindow > viewport > box > frame { // GSConnect setting
|
||||
> border { border: none; }
|
||||
border: none;
|
||||
|
||||
> list {
|
||||
@extend %circular_list;
|
||||
|
||||
row.activatable { @extend %circular_row; }
|
||||
}
|
||||
}
|
||||
|
||||
> stack > box > box > list,
|
||||
> stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar
|
||||
border-bottom-left-radius: $wm_radius;
|
||||
}
|
||||
|
||||
&.maximized, &.tiled, &.fullscreen {
|
||||
> stack > box > box > list,
|
||||
> stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar
|
||||
border-bottom-left-radius: $maximized_radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.nightthemeswitcher headerbar {
|
||||
background: $header_bg;
|
||||
color: $header_fg;
|
||||
}
|
||||
114
src/sass/gtk/apps/_libadwaita.scss
Normal file
114
src/sass/gtk/apps/_libadwaita.scss
Normal file
@ -0,0 +1,114 @@
|
||||
|
||||
//
|
||||
// avatar
|
||||
//
|
||||
|
||||
avatar {
|
||||
border-radius: $circular_radius;
|
||||
font-weight: bold;
|
||||
|
||||
// The list of colors to generate avatars.
|
||||
// Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
|
||||
// There are 8 different colors for avtars in the list if you change the number of them you
|
||||
// need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
|
||||
// The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
|
||||
$avatarcolorlist: (
|
||||
(#cfe1f5, #83b6ec, #337fdc), // blue
|
||||
(#caeaf2, #7ad9f1, #0f9ac8), // cyan
|
||||
(#cef8d8, #8de6b1, #29ae74), // green
|
||||
(#e6f9d7, #b5e98a, #6ab85b), // lime
|
||||
(#f9f4e1, #f8e359, #d29d09), // yellow
|
||||
(#ffead1, #ffcb62, #d68400), // gold
|
||||
(#ffe5c5, #ffa95a, #ed5b00), // orange
|
||||
(#f8d2ce, #f78773, #e62d42), // raspberry
|
||||
(#fac7de, #e973ab, #e33b6a), // magenta
|
||||
(#e7c2e8, #cb78d4, #9945b5), // purple
|
||||
(#d5d2f5, #9e91e8, #7a59ca), // violet
|
||||
(#f2eade, #e3cf9c, #b08952), // beige
|
||||
(#e5d6ca, #be916d, #785336), // brown
|
||||
(#d8d7d3, #c0bfbc, #6e6d71), // gray
|
||||
);
|
||||
|
||||
@for $i from 1 through length($avatarcolorlist) {
|
||||
&.color#{$i} {
|
||||
$avatarcolor: nth($avatarcolorlist, $i);
|
||||
background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
|
||||
color: nth($avatarcolor, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.contrasted { color: white; }
|
||||
|
||||
&.image { background: none; }
|
||||
}
|
||||
|
||||
//
|
||||
// preferencespage
|
||||
//
|
||||
|
||||
preferencespage > scrolledwindow > viewport > clamp > box {
|
||||
margin: 24px 12px;
|
||||
border-spacing: 24px;
|
||||
}
|
||||
|
||||
preferencesgroup > box {
|
||||
&, .labels {
|
||||
border-spacing: $container_padding;
|
||||
}
|
||||
|
||||
> box.header:not(.single-line) {
|
||||
margin-bottom: $container_padding;
|
||||
}
|
||||
|
||||
> box.single-line {
|
||||
min-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// AdwStatusPage
|
||||
//
|
||||
|
||||
statuspage {
|
||||
> scrolledwindow > viewport > box {
|
||||
margin: 36px $container_padding * 2;
|
||||
border-spacing: 36px;
|
||||
|
||||
> clamp > box {
|
||||
border-spacing: $container_padding * 2;
|
||||
|
||||
> .icon {
|
||||
-gtk-icon-size: 128px;
|
||||
|
||||
color: gtkalpha(currentColor, 0.55);
|
||||
|
||||
&:disabled {
|
||||
opacity: $disabled_opacity;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.compact > scrolledwindow > viewport > box {
|
||||
margin: 24px 12px;
|
||||
border-spacing: 24px;
|
||||
|
||||
> clamp > box {
|
||||
> .icon {
|
||||
-gtk-icon-size: 96px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $container_padding * 2;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
font-size: 18pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user