This commit is contained in:
Vince 2024-05-20 12:06:29 +08:00
parent d84b269e76
commit 4899be27a7
18 changed files with 87 additions and 75 deletions

View File

@ -21,7 +21,7 @@ $large-font-family: Roboto, "M+ 1c", Cantarell, Sans-Serif;
// font sizes
$root-font-size: if($laptop == 'false', 15px, 13px);
$subheading-size: if($laptop == 'false', 17px, 15px);
$base_font_size: if($laptop == 'false', 11, 10);
$base_font_size: 11pt;
// opacities
$higher_opacity: 0.9;

View File

@ -33,47 +33,47 @@ stage {
%large_title {
font-weight: 300;
@include fontsize(24);
@include fontsize(24pt);
}
%title_1 {
font-weight: 800;
@include fontsize(20);
@include fontsize(20pt);
}
%title_2 {
font-weight: 800;
@include fontsize(15);
@include fontsize(15pt);
}
%title_3 {
font-weight: 700;
@include fontsize(15);
@include fontsize(15pt);
}
%title_4 {
font-weight: 700;
@include fontsize(13);
@include fontsize(13pt);
}
%heading {
font-weight: 700;
@include fontsize(11);
@include fontsize(11pt);
}
%caption_heading {
font-weight: 700;
@include fontsize(9);
@include fontsize(9pt);
}
%caption {
font-weight: 400;
@include fontsize(9);
@include fontsize(9pt);
}
%smaller {
font-weight: 400;
@include fontsize(8);
@include fontsize(8pt);
}
%monospace { font-family: monospace; }

View File

@ -17,10 +17,13 @@
@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;
//font-size: ($size / $base) * 1rem;
// Mixin to convert provided font size in pt to em units
@mixin fontsize($size, $base: 16px, $unit: pt) {
// if pt, convert into unitless value with the assumption: 1pt = 1.091px
$adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
$rounded_size: round($adjusted_size / $base) / 1000;
font-size: $rounded_size * 1em;
// font-size: round($size) + pt;
}
// Typography

View File

@ -33,7 +33,6 @@
@import 'common/workspace-switcher';
@import 'widgets-40-0/app-grid';
@import 'widgets-40-0/dash';
@import 'widgets-40-0/misc';
@import 'widgets-40-0/overview';
@import 'widgets-40-0/osd';
@import 'widgets-40-0/panel';

View File

@ -33,7 +33,6 @@
@import 'common/workspace-switcher';
@import 'widgets-42-0/app-grid';
@import 'widgets-40-0/dash';
@import 'widgets-40-0/misc';
@import 'widgets-40-0/overview';
@import 'widgets-42-0/osd';
@import 'widgets-40-0/panel';

View File

@ -33,7 +33,6 @@
@import 'common/workspace-switcher';
@import 'widgets-44-0/app-grid';
@import 'widgets-40-0/dash';
@import 'widgets-40-0/misc';
@import 'widgets-40-0/overview';
@import 'widgets-42-0/osd';
@import 'widgets-40-0/panel';

View File

@ -31,7 +31,6 @@
@import 'common/workspace-switcher';
@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';

View File

@ -102,13 +102,12 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
// weekday label
.day-label {
@include font(title);
font-weight: bold;
}
// date label
.date-label {
@include font(headline);
@extend %title_2;
}
}
@ -124,12 +123,11 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
// month
.calendar-month-label {
@extend %heading;
margin: 0;
padding: $base_padding 0;
color: $fg_color !important;
background-color: transparent !important;
font-weight: bold;
font-size: 1em !important;
text-align: center;
text-shadow: none;
@ -160,10 +158,11 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
.calendar-day,
.calendar-day-base {
@include font(caption);
@extend %numeric;
@extend %smaller;
text-align: center;
width: $menuitem_size !important;
height: $menuitem_size !important;
width: 3em !important;
height: 3em !important;
padding: 2px !important;
margin: 2px !important;
border-radius: $circular_radius;
@ -261,6 +260,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
}
.calendar-week-number {
@extend %smaller;
width: 22px;
height: 16px;
margin: 6px 6px 6px 4px;
@ -268,12 +268,14 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
border-radius: $bt_radius;
background-color: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05));
color: $hint_fg_color;
font-size: inherit;
font-weight: bold;
text-align: center;
font-feature-settings: "tnum";
}
.calendar-day-heading { //day of week heading
@extend %numeric;
@extend %smaller;
width: $menuitem_size !important;
height: $menuitem_size - 6px !important;
margin: $base_margin;
@ -281,7 +283,6 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
// border-radius: $circular_radius;
background-color: transparent !important;
color: $hint_fg_color !important;
@include font(caption);
font-weight: bold;
text-align: center;
}
@ -309,30 +310,49 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
}
.events-title {
@extend %heading;
color: $hint_fg_color;
font-weight: bold;
text-shadow: none;
}
.event-summary {
@extend %heading;
}
.event-time {
color: $hint_fg_color;
font-feature-settings: "tnum";
@include fontsize($base_font_size - 2);
@extend %numeric;
@extend %caption;
}
.event-placeholder {
color: $disabled_fg_color;
font-style: italic;
}
}
// World Clock
.world-clocks-button {
// title
.world-clocks-header {
@extend %heading;
color: $disabled_fg_color;
// change style when no world clocks are configured
&.no-world-clocks {
color: $fg_color;
}
}
.world-clocks-city {
color: $hint_fg_color;
font-weight: bold;
@include fontsize($base_font_size - 1);
}
.world-clocks-time {
@extend %numeric;
font-weight: bold;
color: $hint_fg_color;
font-feature-settings: "tnum";
@include fontsize($base_font_size - 1);
&:ltr { text-align: right; }
&:rtl { text-align: left; }
@ -340,8 +360,8 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
.world-clocks-timezone {
color: $hint_fg_color;
font-feature-settings: "tnum";
@include fontsize($base_font_size - 2);
@extend %numeric;
@extend %caption;;
}
}
@ -362,13 +382,12 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
}
.weather-header {
@extend %heading;
color: $alt_fg_color;
font-weight: bold;
&.location {
font-weight: normal;
color: $hint_fg_color;
@include fontsize($base_font_size - 2);
}
}
@ -378,9 +397,9 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
}
.weather-forecast-time {
@extend %numeric;
@include fontsize(10pt);
color: $alt_fg_color;
font-feature-settings: "tnum";
@include fontsize($base_font_size - 3);
font-weight: normal;
padding-top: 0.2em;
padding-bottom: 0.4em;
@ -391,6 +410,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
}
.weather-forecast-temp {
@extend %numeric;
font-weight: bold;
}
}

View File

@ -3,8 +3,6 @@
$dash_placeholder_size: 32px;
#dash {
@include fontsize($base_font_size - 2);
.empty-dash-drop-target {
width: $dash_placeholder_size;
height: $dash_placeholder_size;

View File

@ -34,7 +34,7 @@
}
.headline {
@include font(title);
@extend %title_4;
}
// modal dialog
@ -92,12 +92,10 @@
.message-dialog-title {
text-align: center;
font-size: 18pt;
font-weight: 800;
@extend %title_2;
&.lightweight {
font-size: 13pt;
font-weight: 800;
@extend %title_4;
}
}
@ -110,7 +108,7 @@
.dialog-list-title {
text-align: center;
font-weight: bold;
@extend %heading;
}
.dialog-list-scrollview { max-height: 200px; }
@ -123,7 +121,7 @@
.dialog-list-item-title { font-weight: bold; }
.dialog-list-item-description {
color: $alt_fg_color;
@include font(title);
@extend %caption;
}
}
}
@ -140,7 +138,7 @@
.run-dialog-description {
text-align: center;
color: $alt_fg_color;
@include font(title);
@extend %caption;
}
}
@ -193,8 +191,7 @@
.prompt-dialog-info-label,
.prompt-dialog-null-label {
text-align: center;
@include font(title);
margin: 6px;
@extend %caption;
}
.prompt-dialog-error-label {
@ -249,3 +246,8 @@
height: 300px;
width: 300px;
}
/* Access portal dialog */
.access-dialog {
text-align: center;
}

View File

@ -23,8 +23,7 @@
}
.message-list-placeholder {
font-weight: 800;
@include fontsize(15);
@extend %title_2;
color: $disabled_fg_color;
// icon size and color
@ -99,7 +98,7 @@
> .event-time {
color: $hint_fg_color;
font-size: 1em;
@extend %caption;
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-bottom: 0.13em;

View File

@ -30,6 +30,14 @@
border: none;
box-shadow: inset 0 0 0 1px transparentize($light_alt_fg_color, 0.9);
}
.popup-menu & {
color: $alt_fg_color;
StIcon {
background-color: $track_color;
}
}
}
.user-widget.vertical .user-icon {
@ -53,6 +61,12 @@
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
@include font(body-1);
color: $warning_color;
@extend %caption;
}
/* Workspace animation */
.workspace-animation {
background-color: rgba($osd_bg_color, 1);
}

View File

@ -12,7 +12,6 @@
border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
text-shadow: none;
box-shadow: 0 3px 5px rgba(black, 0.15);
@include font(body-1);
&:hover { background-color: rgba($menu_bg, 1); }

View File

@ -69,7 +69,6 @@ $popop_menuitem_radius: $po_radius - $base_padding;
.popup-menu {
min-width: 12em;
color: $alt_fg_color;
@include font(body-1);
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
&.panel-menu {
@ -98,7 +97,6 @@ $popop_menuitem_radius: $po_radius - $base_padding;
border-radius: $po_radius;
border: solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
border-width: if($variant=='light', 0, 1px);
@include font(body-1);
}
.popup-menu-item {

View File

@ -25,7 +25,6 @@
#searchResultsContent {
max-width: 1024px;
spacing: $base_margin * 2;
@include font(body-1);
}
// search results sections "the boxes"

View File

@ -14,8 +14,6 @@
/* App Icons */
.show-apps,
.app-well-app {
@include font(body-1);
.overview-icon.overview-icon-with-label {
padding: 10px 12px 14px;

View File

@ -1,12 +0,0 @@
// Workspace animation
.workspace-animation {
background-color: rgba($osd_bg_color, 1);
}
// reset prev/next month icons
.calendar {
.calendar-change-month-back,
.calendar-change-month-forward {
padding: 0 2px;
}
}

View File

@ -14,8 +14,6 @@
/* App Icons */
.show-apps,
.app-well-app {
@include font(body-1);
.overview-icon.overview-icon-with-label {
padding: 10px 12px 14px;