5dba928154
Now that the icons are correctly scaled down and don't cause overlaps with the spacing anymore, the spacing between icons causes them to be smaller than they were before. This only affects low resolutions, because the spacing property is used as a minimum spacing for the app grid. On higher resolutions the spacing is always larger than this minimum. https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1375
183 lines
3.4 KiB
SCSS
183 lines
3.4 KiB
SCSS
/* App Grid */
|
|
|
|
$app_icon_size: 96px;
|
|
$app_icon_padding: 24px;
|
|
|
|
// app icons
|
|
.icon-grid {
|
|
-shell-grid-horizontal-item-size: $app_icon_size + $app_icon_padding * 2;
|
|
-shell-grid-vertical-item-size: $app_icon_size + $app_icon_padding * 2;
|
|
spacing: $base_spacing * 4;
|
|
|
|
.overview-icon {
|
|
icon-size: $app_icon_size;
|
|
}
|
|
}
|
|
|
|
//.app-display { spacing: 20px; }
|
|
|
|
/* App Icons */
|
|
|
|
$app_grid_fg_color: #fff;
|
|
|
|
// Icon tiles in the app grid
|
|
.app-well-app,
|
|
%app-well-app {
|
|
@include overview-icon($app_grid_fg_color);
|
|
|
|
.overview-icon.overview-icon-with-label {
|
|
padding: 10px 8px 5px 8px;
|
|
|
|
> StBoxLayout {
|
|
spacing: $base_spacing;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* App Folders */
|
|
.app-well-app.app-folder {
|
|
background-color: transparentize($osd_bg_color, 0.8);
|
|
border-radius: $base_border_radius + 4px; // same as %icon_tile
|
|
}
|
|
|
|
// expanded folder
|
|
.app-folder-dialog {
|
|
border-radius: $modal_radius * 1.5;
|
|
border: 1px solid $osd_outer_borders_color;
|
|
spacing: 12px;
|
|
background-color: transparentize(darken($osd_bg_color,10%), 0.05);
|
|
|
|
& .folder-name-container {
|
|
padding: 24px 36px 0;
|
|
spacing: 12px;
|
|
|
|
& .folder-name-label,
|
|
& .folder-name-entry {
|
|
font-size: 18pt;
|
|
font-weight: bold;
|
|
}
|
|
|
|
& .folder-name-entry { width: 300px }
|
|
|
|
/* FIXME: this is to keep the label in sync with the entry */
|
|
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
|
|
|
|
& .edit-folder-button {
|
|
@extend %button;
|
|
|
|
padding: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 18px;
|
|
|
|
& > StIcon { icon-size: 16px }
|
|
}
|
|
}
|
|
}
|
|
.app-folder-dialog-container {
|
|
padding: 12px;
|
|
width: 800px;
|
|
height: 600px;
|
|
}
|
|
|
|
.app-folder-icon {
|
|
padding: $base_padding;
|
|
spacing-rows: $base_spacing;
|
|
spacing-columns: $base_spacing;
|
|
}
|
|
|
|
|
|
// Running app indicator (also shown in dash)
|
|
.app-well-app-running-dot {
|
|
height: 5px;
|
|
width: 5px;
|
|
border-radius:5px;
|
|
background-color: $osd_fg_color;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
// Rename popup for app folders
|
|
.rename-folder-popup {
|
|
.rename-folder-popup-item {
|
|
spacing: $base_spacing;
|
|
&:ltr, &:rtl { padding: 0 $base_padding * 2; }
|
|
}
|
|
}
|
|
|
|
// right-click app menu
|
|
.app-menu,
|
|
.app-well-menu {
|
|
max-width: 27.25em;
|
|
}
|
|
|
|
// App Grid pagination indicators
|
|
.page-indicator {
|
|
padding: 15px 20px;
|
|
|
|
.page-indicator-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 10px; // the same as height&width
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
// Some hacks I don't even know
|
|
.all-apps,
|
|
.frequent-apps > StBoxLayout {
|
|
// horizontal padding to make sure scrollbars or dash don't overlap content
|
|
padding: 0px 88px 10px 88px;
|
|
}
|
|
|
|
// Label when no frequent apps
|
|
.no-frequent-applications-label { @extend %status_text; }
|
|
|
|
// shutdown and other actions in the grid
|
|
.system-action-icon {
|
|
background-color: rgba(0,0,0,0.8);
|
|
color: #fff;
|
|
border-radius: 99px;
|
|
icon-size: $app_icon_size * 0.5;
|
|
}
|
|
|
|
/* Frequent | All toggle */
|
|
|
|
// container
|
|
.app-view-controls {
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
// buttons
|
|
.app-view-control {
|
|
padding: 4px 32px;
|
|
margin: 0 4px;
|
|
|
|
&, &:hover, &:checked {
|
|
@include button(undecorated);
|
|
color: darken($osd_fg_color, 25%);
|
|
}
|
|
|
|
&:hover {
|
|
color: $osd_fg_color;
|
|
box-shadow: inset 0 -2px darken($osd_fg_color, 25%);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: inset 0 -2px $osd_fg_color;
|
|
}
|
|
|
|
&:checked {
|
|
color: $osd_fg_color;
|
|
box-shadow: inset 0 -2px $selected_bg_color;
|
|
}
|
|
|
|
&:first-child {
|
|
border-right-width: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
border-radius: 0;
|
|
}
|
|
}
|