gnome-shell/data/theme/gnome-shell-sass/widgets/_app-grid.scss

/* App Grid */

$app_icon_size: 96px;
$app_icon_padding: 20px;

// app icons
.icon-grid {
	spacing: 30px;
	-shell-grid-horizontal-item-size: $app_icon_size + $app_icon_padding * 2;
	-shell-grid-vertical-item-size: $app_icon_size + $app_icon_padding * 2;

	.overview-icon {
		icon-size: $app_icon_size;
	}
}

//.app-display { spacing: 20px; }

/* App Icons */

$app_grid_fg_color: #fff;

// Outline for low res icons
.lowres-icon {
	icon-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

// Dropshadow for large icons
.icon-dropshadow {
	icon-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

// Icon tiles in the app grid
.app-well-app,
.app-folder {

	.overview-icon {
		@extend %icon_tile;
		color: $app_grid_fg_color !important;
	}

	&:hover,
	&:selected {
		.overview-icon {
			background-color: transparentize($osd_bg_color,0.7);
			color: $app_grid_fg_color;
		}
	}

	&:hover .overview-icon,
	&:focus .overview-icon,
	&:selected .overview-icon {
		background-color: transparentize($osd_fg_color,0.9);
		color: $osd_fg_color;
	}

	&:focus {
		.overview-icon {
			background-color: transparentize($osd_fg_color,0.7	);
			// border-color: $selected_bg_color;
			color: $app_grid_fg_color;
		}
	}

	&:drop {
		.overview-icon {
			background-color: transparentize($selected_bg_color,.15);
		}
	}

	&:active,
	&:checked {
		.overview-icon {
			background-color: transparentize(darken($osd_bg_color,10%), 0.5);
		}
	}
}

/* App Folders */
.app-folder {
	.overview-icon {
		@extend %icon_tile;
	}
}

//expanded folder
.app-folder-popup {
	-arrow-border-radius: 8px;
	-arrow-background-color: transparentize(darken($osd_bg_color,10%), 0.5);
	-arrow-base: 24px;
	-arrow-rise: 11px;
}

.app-folder-popup-bin { padding: 5px; }
.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: 12px;
		height: 12px;
		background-color: transparent;
		border: 2px solid rgba(255, 255, 255, 0.4);
		border-radius: 12px;
	}

	&:hover .page-indicator-icon { border-color: white; }
	&:active .page-indicator-icon { border: none; margin: 2px; background-color: white; }
	&:checked .page-indicator-icon,
	&:checked:active .page-indicator-icon { 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;
}

.app-well-app > .overview-icon.overview-icon-with-label {
	padding: 10px 8px 5px 8px;
	spacing: $base_spacing;
}

// 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: 50%;
	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;
	background-color: transparentize($osd_bg_color, 0.5);
	border-width: 1px;
	color: darken($osd_fg_color, 25%);

	&:hover {
		background-color: transparentize($osd_bg_color, 0.5) !important;
		box-shadow:none !important;
		color: darken($osd_fg_color, 25%);
	}

	&:active {
		box-shadow: inset 0 -2px 0 0 $osd_fg_color;
		background-color: transparentize($selected_bg_color, 0.5) !important;
		font-weight: bold;
	}

	&:checked {
		background-color: transparentize(lighten($osd_bg_color, 20%), 0.5);
		color: $osd_fg_color;
		box-shadow: none;
		font-weight: bold;
	}

	&:first-child {
		border-right-width: 0 !important;
		border-radius: $base_border_radius 0 0 $base_border_radius;
	}

	&:last-child {
		border-radius: 0 $base_border_radius $base_border_radius 0;
	}
}