This commit is contained in:
Vince
2021-12-11 15:59:29 +08:00
parent ef42f972d5
commit 3dd968726d
9 changed files with 30 additions and 25 deletions

View File

@@ -51,7 +51,7 @@ stage {
.app-well-app .overview-icon, .app-well-app .overview-icon,
.grid-search-result .overview-icon { .grid-search-result .overview-icon {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
border-radius: 9px; border-radius: 16px;
padding: 6px; padding: 6px;
border: none; border: none;
transition-duration: 100ms; transition-duration: 100ms;
@@ -80,7 +80,7 @@ stage {
} }
.app-well-app.app-folder { .app-well-app.app-folder {
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active { .app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active {
@@ -89,7 +89,7 @@ stage {
.app-well-app.app-folder .overview-icon { .app-well-app.app-folder .overview-icon {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder:hover .overview-icon { .app-well-app.app-folder:hover .overview-icon {

View File

@@ -51,7 +51,7 @@ stage {
.app-well-app .overview-icon, .app-well-app .overview-icon,
.grid-search-result .overview-icon { .grid-search-result .overview-icon {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
border-radius: 9px; border-radius: 16px;
padding: 6px; padding: 6px;
border: none; border: none;
transition-duration: 100ms; transition-duration: 100ms;
@@ -80,7 +80,7 @@ stage {
} }
.app-well-app.app-folder { .app-well-app.app-folder {
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active { .app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active {
@@ -89,7 +89,7 @@ stage {
.app-well-app.app-folder .overview-icon { .app-well-app.app-folder .overview-icon {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder:hover .overview-icon { .app-well-app.app-folder:hover .overview-icon {

View File

@@ -51,7 +51,7 @@ stage {
.app-well-app .overview-icon, .app-well-app .overview-icon,
.grid-search-result .overview-icon { .grid-search-result .overview-icon {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
border-radius: 9px; border-radius: 16px;
padding: 6px; padding: 6px;
border: none; border: none;
transition-duration: 100ms; transition-duration: 100ms;
@@ -80,7 +80,7 @@ stage {
} }
.app-well-app.app-folder { .app-well-app.app-folder {
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active { .app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active {
@@ -89,7 +89,7 @@ stage {
.app-well-app.app-folder .overview-icon { .app-well-app.app-folder .overview-icon {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder:hover .overview-icon { .app-well-app.app-folder:hover .overview-icon {

View File

@@ -51,7 +51,7 @@ stage {
.app-well-app .overview-icon, .app-well-app .overview-icon,
.grid-search-result .overview-icon { .grid-search-result .overview-icon {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
border-radius: 9px; border-radius: 16px;
padding: 6px; padding: 6px;
border: none; border: none;
transition-duration: 100ms; transition-duration: 100ms;
@@ -80,7 +80,7 @@ stage {
} }
.app-well-app.app-folder { .app-well-app.app-folder {
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active { .app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active {
@@ -89,7 +89,7 @@ stage {
.app-well-app.app-folder .overview-icon { .app-well-app.app-folder .overview-icon {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder:hover .overview-icon { .app-well-app.app-folder:hover .overview-icon {
@@ -2991,7 +2991,8 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
margin-bottom: 16px; margin-bottom: 16px;
padding: 10px; padding: 10px;
border-radius: 16px; border-radius: 24px;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
} }
.dash-item-container .app-well-app, .show-apps { .dash-item-container .app-well-app, .show-apps {

View File

@@ -51,7 +51,7 @@ stage {
.app-well-app .overview-icon, .app-well-app .overview-icon,
.grid-search-result .overview-icon { .grid-search-result .overview-icon {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
border-radius: 9px; border-radius: 16px;
padding: 6px; padding: 6px;
border: none; border: none;
transition-duration: 100ms; transition-duration: 100ms;
@@ -80,7 +80,7 @@ stage {
} }
.app-well-app.app-folder { .app-well-app.app-folder {
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active { .app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active {
@@ -89,7 +89,7 @@ stage {
.app-well-app.app-folder .overview-icon { .app-well-app.app-folder .overview-icon {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder:hover .overview-icon { .app-well-app.app-folder:hover .overview-icon {
@@ -2991,7 +2991,8 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: rgba(0, 0, 0, 0.26); background-color: rgba(0, 0, 0, 0.26);
margin-bottom: 16px; margin-bottom: 16px;
padding: 10px; padding: 10px;
border-radius: 16px; border-radius: 24px;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
} }
.dash-item-container .app-well-app, .show-apps { .dash-item-container .app-well-app, .show-apps {

View File

@@ -51,7 +51,7 @@ stage {
.app-well-app .overview-icon, .app-well-app .overview-icon,
.grid-search-result .overview-icon { .grid-search-result .overview-icon {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
border-radius: 9px; border-radius: 16px;
padding: 6px; padding: 6px;
border: none; border: none;
transition-duration: 100ms; transition-duration: 100ms;
@@ -80,7 +80,7 @@ stage {
} }
.app-well-app.app-folder { .app-well-app.app-folder {
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active { .app-well-app.app-folder, .app-well-app.app-folder:hover, .app-well-app.app-folder:active {
@@ -89,7 +89,7 @@ stage {
.app-well-app.app-folder .overview-icon { .app-well-app.app-folder .overview-icon {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
border-radius: 12px; border-radius: 16px;
} }
.app-well-app.app-folder:hover .overview-icon { .app-well-app.app-folder:hover .overview-icon {
@@ -2991,7 +2991,8 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
margin-bottom: 16px; margin-bottom: 16px;
padding: 10px; padding: 10px;
border-radius: 16px; border-radius: 24px;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
} }
.dash-item-container .app-well-app, .show-apps { .dash-item-container .app-well-app, .show-apps {

View File

@@ -15,6 +15,7 @@ $base_spacing: if($compact == 'false', 6px, 4px);
// radiuses // radiuses
$circular_radius: 9999px; $circular_radius: 9999px;
$base_radius: 6px; $base_radius: 6px;
$icon_radius: 16px;
$window_radius: 12px; $window_radius: 12px;
$menu_radius: $base_radius + $base_padding; $menu_radius: $base_radius + $base_padding;
$modal_radius: $menu_radius; $modal_radius: $menu_radius;

View File

@@ -6,7 +6,7 @@
%app-well-app { %app-well-app {
& .overview-icon { & .overview-icon {
color: on($osd, secondary); color: on($osd, secondary);
border-radius: $base_radius * 1.5; border-radius: $icon_radius;
padding: $base_padding; padding: $base_padding;
border: none; border: none;
transition-duration: 100ms; transition-duration: 100ms;
@@ -30,7 +30,7 @@
// App Folders // App Folders
.app-well-app.app-folder { .app-well-app.app-folder {
border-radius: $base_radius * 2; border-radius: $icon_radius;
&, &:hover, &:active { &, &:hover, &:active {
background-color: transparent; background-color: transparent;
@@ -38,7 +38,7 @@
.overview-icon { .overview-icon {
background-color: on(black, divider); background-color: on(black, divider);
border-radius: $base_radius * 2; border-radius: $icon_radius;
} }
&:hover .overview-icon { &:hover .overview-icon {

View File

@@ -3,7 +3,7 @@ $dash_placeholder_size: 32px;
$dash_padding: 10px; // 10px $dash_padding: 10px; // 10px
$dash_spacing: 2px; $dash_spacing: 2px;
$dash_bottom_margin: 16px; $dash_bottom_margin: 16px;
$dash_border_radius: $base_radius + $dash_padding; $dash_border_radius: $icon_radius + $dash_padding - $dash_spacing;
#dash { #dash {
margin-top: $base_spacing * 2; margin-top: $base_spacing * 2;
@@ -25,6 +25,7 @@ $dash_border_radius: $base_radius + $dash_padding;
margin-bottom: $dash_bottom_margin; margin-bottom: $dash_bottom_margin;
padding: $dash_padding; padding: $dash_padding;
border-radius: $dash_border_radius; border-radius: $dash_border_radius;
box-shadow: inset 0 1px rgba(white, 0.08);
} }
// Dash Items // Dash Items