gnome-shell/data/theme/gnome-shell-sass/widgets/_app-grid.scss
Carlos Garnacho c15dce242e theme: Improve look of FolderDialog wrt page previews
Remove padding on left and right of the contained widgetry, so
there's no seams animating things from the border. Also, remove
the padding between IconGrid pages, so the nest/prev pages are
visible given the dialog width.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1630>
2021-03-02 22:02:56 +00:00

159 lines
3.2 KiB
SCSS

/* App Grid */
$app_icon_size: 96px;
// app icons
.icon-grid {
row-spacing: $base_spacing * 2;
column-spacing: $base_spacing * 2;
max-row-spacing: $base_spacing * 12;
max-column-spacing: $base_spacing * 12;
page-padding-top: $base_padding * 4;
page-padding-bottom: $base_padding * 4;
page-padding-left: $base_padding * 2;
page-padding-right: $base_padding * 2;
}
/* 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: darken($system_bg_color, 3%);
border-radius: $base_border_radius + 4px; // same as %icon_tile
}
// expanded folder
.app-folder-dialog { //style like the dash
border-radius: $modal_radius * 1.5;
background-color: $dash_background_color;
padding: 12px 0px 12px 0px;
& .folder-name-container {
padding: 24px 36px 0;
spacing: 12px;
& .folder-name-label,
& .folder-name-entry {
font-size: 18pt;
font-weight: 800;
}
& .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 }
}
}
& .icon-grid {
row-spacing: $base_spacing * 2;
column-spacing: $base_spacing * 5;
page-padding-top: 0;
page-padding-bottom: 0;
page-padding-left: 0;
page-padding-right: 0;
}
& .page-indicators {
margin-bottom: 18px;
}
}
.app-folder-dialog-container {
padding: 12px;
width: 620px;
height: 620px;
}
// 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: $base_padding $base_padding * 2 0;
.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
.apps-scroll-view {
// horizontal padding to make sure scrollbars or dash don't overlap content
padding: 0 88px;
}
// 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;
}
.page-navigation-hint {
background: rgba(255, 255, 255, 0.05);
width: 88px;
&.dnd {
background: rgba(255, 255, 255, 0.1);
}
&.next {
&:ltr { border-radius: 15px 0px 0px 15px; }
&:rtl { border-radius: 0px 15px 15px 0px; }
}
&.previous {
&:ltr { border-radius: 0px 15px 15px 0px; }
&:rtl { border-radius: 15px 0px 0px 15px; }
}
}