mirror of
https://github.com/vinceliuice/WhiteSur-gtk-theme.git
synced 2025-06-06 15:33:02 +00:00
Fixed #1035 GNOME 46 support
This commit is contained in:
vinceliuice
parent
9739d7c083
commit
5d6eadca2b
@ -1,6 +1,13 @@
|
||||
@import 'theme-options-temp';
|
||||
@import 'gtk-base-temp';
|
||||
|
||||
// Function to convert px values to em
|
||||
@function to_em($input, $base: 16px) {
|
||||
// multiplied and divided by 1000 to make up for round() shortcoming
|
||||
$em_value: ($input / $base) * 1.091 * 1000;
|
||||
@return round($em_value) / 1000 * 1em;
|
||||
}
|
||||
|
||||
$asset_suffix: if($variant == 'dark', '-dark', '');
|
||||
$con_asset_suffix: if($variant=='dark', '', '-dark');
|
||||
$extra_background_clip: if($variant == 'light', padding-box, border-box);
|
||||
@ -57,6 +64,17 @@ $maximized_radius: 0;
|
||||
// icons
|
||||
// $base_icon_size: 1.09em;
|
||||
$base_icon_size: 16px;
|
||||
$medium_icon_size: $base_icon_size * 1.5; // 24px
|
||||
$large_icon_size: $base_icon_size * 2; // 32px
|
||||
|
||||
// Scaled values
|
||||
// Used in elements that follow text scaling factors
|
||||
$scaled_padding: to_em(6px); // same as $base_padding
|
||||
|
||||
// Used for symbolic icons that scale
|
||||
$scalable_icon_size: to_em(16px);
|
||||
$medium_scalable_icon_size: $scalable_icon_size * 1.5;
|
||||
$large_scalable_icon_size: $scalable_icon_size * 2;
|
||||
|
||||
// durations
|
||||
$shorter_duration: 100ms;
|
||||
|
||||
@ -24,10 +24,10 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
|
||||
*/
|
||||
|
||||
// Stage
|
||||
// stage {
|
||||
// @include font(body-1);
|
||||
// color: $fg_color;
|
||||
// }
|
||||
stage {
|
||||
@include fontsize($base_font_size);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
/* General Typography */
|
||||
|
||||
|
||||
@ -10,6 +10,13 @@
|
||||
@return ($size / $root-font-size) + em;
|
||||
}
|
||||
|
||||
// Function to convert px values to em
|
||||
@function to_em($input, $base: 16px) {
|
||||
// multiplied and divided by 1000 to make up for round() shortcoming
|
||||
$em_value: ($input / $base) * 1.091 * 1000;
|
||||
@return round($em_value) / 1000 * 1em;
|
||||
}
|
||||
|
||||
// provide font size in rem, with px fallback
|
||||
@mixin fontsize($size: 24, $base: 16) {
|
||||
font-size: round($size) + pt;
|
||||
@ -225,13 +232,20 @@
|
||||
|
||||
@if $t == active {
|
||||
color: $tc;
|
||||
background-color: transparent;
|
||||
background-image: if($variant=='light', darken($c, 5%), lighten($c, 5%));
|
||||
background-color: if($variant=='light', darken($c, 5%), lighten($c, 5%));
|
||||
border: 1px solid $button_borders;
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
}
|
||||
|
||||
@if $t == checked {
|
||||
color: $tc;
|
||||
background-color: $selected_bg_color;
|
||||
border: 1px solid $selected_bg_color;
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
}
|
||||
|
||||
@if $t == insensitive {
|
||||
color: if($tc == $fg_color, $disabled_fg_color, $tc);
|
||||
background-color: if($c == $base_color, $divider_color, $c);
|
||||
@ -277,6 +291,15 @@
|
||||
icon-shadow: none;
|
||||
}
|
||||
|
||||
@if $t == flat-checked {
|
||||
color: $tc;
|
||||
background-color: $divider_color;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
}
|
||||
|
||||
@if $t == flat-insensitive {
|
||||
color: if($tc == $fg_color, $disabled_fg_color, $tc);
|
||||
background-color: transparent;
|
||||
|
||||
@ -13,10 +13,8 @@
|
||||
@import 'common/keyboard';
|
||||
@import 'common/login-dialog';
|
||||
@import 'common/looking-glass';
|
||||
@import 'common/message-list';
|
||||
@import 'common/misc';
|
||||
@import 'common/network-dialog';
|
||||
@import 'common/notifications';
|
||||
@import 'common/osd';
|
||||
@import 'common/overview';
|
||||
@import 'common/panel';
|
||||
@ -33,6 +31,8 @@
|
||||
@import 'widgets-46-0/app-grid';
|
||||
@import 'widgets-46-0/dash';
|
||||
@import 'widgets-40-0/misc';
|
||||
@import 'widgets-46-0/message-list';
|
||||
@import 'widgets-46-0/notifications';
|
||||
@import 'widgets-40-0/overview';
|
||||
@import 'widgets-42-0/osd';
|
||||
@import 'widgets-40-0/panel';
|
||||
|
||||
@ -1,6 +1,24 @@
|
||||
/* Buttons */
|
||||
|
||||
%button {
|
||||
@include button(flat-normal);
|
||||
&:hover { @include button(flat-hover); }
|
||||
&:selected, &:active { @include button(flat-active); }
|
||||
&:checked { @include button(checked); }
|
||||
&:insensitive { @include button(flat-insensitive); }
|
||||
&:focus { @include button(flat-focus); }
|
||||
}
|
||||
|
||||
%flat_button {
|
||||
@include button(flat-normal);
|
||||
&:hover { @include button(flat-hover); }
|
||||
&:selected, &:active { @include button(flat-active); }
|
||||
&:checked { @include button(flat-checked); }
|
||||
&:insensitive { @include button(flat-insensitive); }
|
||||
&:focus { @include button(flat-focus); }
|
||||
}
|
||||
|
||||
%default_button {
|
||||
@include button(flat-normal);
|
||||
&:hover { @include button(flat-hover); }
|
||||
&:active { @include button(flat-active); }
|
||||
@ -9,19 +27,43 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
min-height: $small_size;
|
||||
min-height: to_em(22px);
|
||||
padding: $container_padding $container_padding * 2;
|
||||
border-radius: $bt_radius;
|
||||
border: none;
|
||||
@extend %button;
|
||||
|
||||
// default style
|
||||
&.default {
|
||||
@extend %default_button;
|
||||
}
|
||||
|
||||
// flat style
|
||||
&.flat {
|
||||
@extend %flat_button;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
min-height: $small_size;
|
||||
min-width: $small_size;
|
||||
padding: $container_padding;
|
||||
min-height: $scalable_icon_size;
|
||||
padding: $scaled_padding * 2;
|
||||
border-radius: $circular_radius;
|
||||
@extend %button;
|
||||
|
||||
StIcon {
|
||||
icon-size: $scalable_icon_size;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
// default style
|
||||
&.default {
|
||||
@extend %default_button;
|
||||
}
|
||||
|
||||
// flat style
|
||||
&.flat {
|
||||
@extend %flat_button;
|
||||
}
|
||||
}
|
||||
|
||||
%osd_button {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// a.k.a. notifications in the menu
|
||||
|
||||
.message-list {
|
||||
width: 31.5em;
|
||||
width: 30em;
|
||||
padding: 0 $base_margin;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
|
||||
@ -8,11 +8,14 @@
|
||||
// switcher onscreen panel
|
||||
.switcher-list {
|
||||
@extend %osd_panel;
|
||||
border-radius: $bt_radius * 2 + $base_padding * 2;
|
||||
|
||||
.item-box {
|
||||
padding: 8px;
|
||||
border-radius: $bt_radius;
|
||||
border-radius: $bt_radius * 2;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
color: $fg_color;
|
||||
|
||||
&:outlined {
|
||||
background-color: $divider_color;
|
||||
|
||||
253
src/sass/gnome-shell/widgets-46-0/_message-list.scss
Normal file
253
src/sass/gnome-shell/widgets-46-0/_message-list.scss
Normal file
@ -0,0 +1,253 @@
|
||||
/* Message List */
|
||||
// a.k.a. notifications in the menu
|
||||
|
||||
.message-list {
|
||||
width: 29em;
|
||||
padding: 0 $base_margin;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
|
||||
// padding and margins to account for scrollbar
|
||||
&:ltr {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
&:rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.message-list-placeholder {
|
||||
@extend %title_2;
|
||||
color: $disabled_fg_color;
|
||||
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: 96px; // 48px
|
||||
margin-bottom: $base_margin * 3;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-list-sections {
|
||||
spacing: $base_padding * 2;
|
||||
|
||||
// to account for scrollbar
|
||||
&:ltr { margin-right: $base_margin * 3; }
|
||||
&:rtl { margin-left: $base_margin * 3; }
|
||||
}
|
||||
|
||||
.message-list-section,
|
||||
.message-list-section-list {
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
|
||||
// do-not-disturb + clear button
|
||||
.message-list-controls {
|
||||
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
|
||||
padding: $base_padding * 2;
|
||||
padding-bottom: $base_padding;
|
||||
spacing: $base_padding;
|
||||
@extend %heading;
|
||||
|
||||
.dnd-button {
|
||||
// We need this because the focus outline isn't inset like for the buttons
|
||||
// so the dnd button would grow when it gets focus if we didn't change only
|
||||
// its color when focusing.
|
||||
border-width: 2px;
|
||||
border-color: transparent;
|
||||
border-radius: 32px;
|
||||
border-style: solid;
|
||||
|
||||
&:focus {
|
||||
border-color: transparentize($selected_bg_color, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$card_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($base_color, 8%), 0.95));
|
||||
|
||||
%card {
|
||||
border-radius: $base_border_radius;
|
||||
padding: $scaled_padding;
|
||||
margin: $base_margin;
|
||||
background-color: $card_bg;
|
||||
box-shadow: 0 1px 2px 0 rgba(black, 0.02);
|
||||
// bit of a hack here with border since we can't have double box-shadow
|
||||
border: 1px solid transparent;
|
||||
color: $alt_fg_color;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $fg_color;
|
||||
background-color: if($variant == 'light', rgba($popover_bubble_bg, 1), rgba(lighten($popover_bubble_bg, 5%), 1));
|
||||
box-shadow: 0 1px 3px rgba(black, 0.05) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $fg_color;
|
||||
background-color: if($variant == 'light', darken($popover_bubble_bg, 1%), lighten($popover_bubble_bg, 3%));
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
color: $alt_disabled_fg_color;
|
||||
background-color: rgba($card_bg, 0.5);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// message bubbles
|
||||
.message {
|
||||
@extend %card;
|
||||
|
||||
// subtract side padding to accommodate the close button's border
|
||||
&:ltr { padding-right:-2px; }
|
||||
&:rtl { padding-left:-2px; }
|
||||
|
||||
// message header
|
||||
.message-header {
|
||||
padding: 0 $scaled_padding;
|
||||
margin: $base_padding;
|
||||
margin-bottom: 0;
|
||||
spacing: $base_padding;
|
||||
color: $disabled_fg_color;
|
||||
|
||||
// header source icon
|
||||
.message-source-icon {
|
||||
icon-size: $scalable_icon_size; // 16px
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
// box that contains the source icon, source name and timestamp of the message
|
||||
.message-header-content {
|
||||
spacing: $base_padding;
|
||||
min-height: to_em(24px);
|
||||
padding-bottom: $base_padding;
|
||||
|
||||
// header source title
|
||||
.message-source-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Time label
|
||||
.event-time {
|
||||
@extend %caption;
|
||||
color: $disabled_fg_color;
|
||||
// Add bottom padding to align the app name with the time horizontally
|
||||
padding-bottom: to_em(1px);
|
||||
|
||||
&:ltr { text-align: right; }
|
||||
&:rtl { text-align: left; }
|
||||
}
|
||||
}
|
||||
|
||||
// buttons in the message header
|
||||
.message-expand-button,
|
||||
.message-close-button {
|
||||
@extend .icon-button;
|
||||
color: $fg_color;
|
||||
background-color: transparentize($fg_color, .9);
|
||||
padding: 4px;
|
||||
border: none;
|
||||
&:hover { background-color: transparentize($fg_color, .81); }
|
||||
&:active,
|
||||
&:active:hover { background-color: transparentize($fg_color, .76); }
|
||||
&:insensitive { background-color: transparentize($fg_color, .93); }
|
||||
}
|
||||
|
||||
.message-expand-button {
|
||||
padding: 6px;
|
||||
&:ltr { margin-right: $base_padding; }
|
||||
&:rtl { margin-left: $base_padding; }
|
||||
}
|
||||
}
|
||||
|
||||
// container for message contents
|
||||
.message-box {
|
||||
padding: $base_padding;
|
||||
margin: $base_padding;
|
||||
margin-top: 0;
|
||||
spacing: $base_padding;
|
||||
|
||||
// icon of the message
|
||||
.message-icon {
|
||||
&:ltr { margin-right:$base_padding; }
|
||||
&:rtl { margin-left:$base_padding; }
|
||||
|
||||
// icon size and color
|
||||
icon-size: $base_icon_size * 3; // 48px
|
||||
-st-icon-style: symbolic;
|
||||
|
||||
&.message-themed-icon {
|
||||
border-radius: $circular_radius; // is circular
|
||||
background-color: transparentize($fg_color, 0.8);
|
||||
icon-size: $base_icon_size;
|
||||
min-width: $base_icon_size * 3;
|
||||
min-height: $base_icon_size * 3;
|
||||
}
|
||||
}
|
||||
|
||||
// If the header isn't displayed we need more top margin
|
||||
&:first-child {
|
||||
margin-top: $base_padding * 2;
|
||||
}
|
||||
|
||||
// text of the message
|
||||
.message-content {
|
||||
spacing: $base_margin;
|
||||
|
||||
// message title
|
||||
.message-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-secondary-bin {
|
||||
padding: 0 $base_margin * 2;
|
||||
|
||||
> .event-time {
|
||||
color: $hint_fg_color;
|
||||
font-size: 1em;
|
||||
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
|
||||
padding-bottom: 0.13em;
|
||||
|
||||
&:ltr { text-align: right; }
|
||||
&:rtl { text-align: left; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// URLs in messages
|
||||
.url-highlighter {
|
||||
link-color: $link_color;
|
||||
}
|
||||
|
||||
.message-media-control {
|
||||
margin: 7px 4px !important;
|
||||
padding: 8px !important;
|
||||
border-radius: $circular_radius;
|
||||
color: $alt_fg_color;
|
||||
&:hover, &:focus { color: $fg_color; background-color: $divider_color; }
|
||||
&:active { color: $fg_color; background-color: $track_color; }
|
||||
&:insensitive { color: $disabled_fg_color; }
|
||||
|
||||
StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.media-message {
|
||||
// album-art
|
||||
.message-icon {
|
||||
border-radius: $bt_radius !important;
|
||||
|
||||
&.message-themed-icon {
|
||||
icon-size: $large_icon_size !important; // 32px
|
||||
}
|
||||
}
|
||||
}
|
||||
74
src/sass/gnome-shell/widgets-46-0/_notifications.scss
Normal file
74
src/sass/gnome-shell/widgets-46-0/_notifications.scss
Normal file
@ -0,0 +1,74 @@
|
||||
/* Notifications & Message Tray */
|
||||
|
||||
$notification_banner_height: 64px;
|
||||
$notification_banner_width: 34em;
|
||||
|
||||
// Banner notifications
|
||||
.notification-banner {
|
||||
min-height: $notification_banner_height;
|
||||
width: $notification_banner_width;
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
|
||||
border-radius: $wm_radius;
|
||||
margin: $base_padding;
|
||||
padding: $scaled_padding;
|
||||
}
|
||||
|
||||
.notification-buttons-bin {
|
||||
spacing: 0;
|
||||
}
|
||||
|
||||
.notification-button {
|
||||
min-height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: $base_color;
|
||||
color: $alt_fg_color;
|
||||
font-weight: 500;
|
||||
border-width: 0;
|
||||
margin-right: $scaled_padding !important;
|
||||
|
||||
&:focus {
|
||||
background-color: $base_color;
|
||||
color: $fg_color;
|
||||
box-shadow: inset 0 0 0 2px $divider_color !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $divider_color;
|
||||
color: $fg_color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
background-color: $track_color;
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
background-color: transparent;
|
||||
color: $alt_disabled_fg_color;
|
||||
}
|
||||
|
||||
&:first-child:ltr {
|
||||
border-radius: $bt_radius;
|
||||
}
|
||||
|
||||
&:last-child:ltr {
|
||||
border-radius: $bt_radius;
|
||||
margin-right: $scaled_padding !important;
|
||||
}
|
||||
|
||||
&:first-child:rtl {
|
||||
border-radius: $bt_radius;
|
||||
}
|
||||
|
||||
&:last-child:rtl {
|
||||
border-radius: $bt_radius;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: $bt_radius;
|
||||
margin-left: 0 !important;
|
||||
margin-right: $scaled_padding !important;
|
||||
}
|
||||
}
|
||||
@ -1898,6 +1898,10 @@ headerbar {
|
||||
stack.titlebar { box-shadow: none; }
|
||||
}
|
||||
|
||||
label.titlebar {
|
||||
background-color: $header_bg;
|
||||
}
|
||||
|
||||
window.background.csd.unified {
|
||||
> deck > box.vertical > stack > headerbar.titlebar.windowhandle {
|
||||
> box > separator { background: none; }
|
||||
|
||||
@ -2568,7 +2568,7 @@ popover {
|
||||
}
|
||||
|
||||
listview {
|
||||
padding: $container_padding;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
> row {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user