path: root/src/style.css

.details-page {
	margin: 24px 0px;
}

.installed-overlay-box {
	font-size: smaller;
	background-color: @accent_bg_color;
	border-radius: 0;
	color: @accent_fg_color;
	text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

screenshot-carousel box.frame {
	border-width: 1px 0;
}

screenshot-carousel button,
.featured-carousel button {
	margin: 12px;
}

.screenshot-image-main .image1, .screenshot-image-main .image2 {
	margin-top: 6px;
	margin-bottom: 12px;
	margin-left: 6px;
	margin-right: 6px;
}

.app-tile-label {
	font-size: 105%;
}

.review-textbox {
	padding: 6px;
}

.origin-rounded-box {
	background-color: alpha(currentColor, .15);
	border-radius: 999px;
	padding: 4px;
}

.origin-beta {
	color: @warning_color;
}

.origin-button > button {
	padding: 2px 8px;
}

/* This mimicks the style of list and row from Adwaita, and of list.content from
 * Libhandy. */

.category-tile {
	/* We have to remove the padding: 160px - 2*10px = 140px */
	min-width: 140px;
	padding: 20px 10px;
	font-weight: 900;
	font-size: larger;
}

clamp.medium .category-tile:not(.category-tile-iconless) {
	font-size: large;
}

clamp.large .category-tile:not(.category-tile-iconless) {
	font-size: larger;
}

.category-tile.category-tile-iconless {
	/* We have to remove the padding: 160px - 2*15px = 130px */
	min-width: 130px;
	padding: 10px 15px;
	font-size: 105%;
	font-weight: normal;
}

/* Styling for specific category buttons. */
.category-tile.category-create {
	background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
	color: white;
}
.category-tile.category-create:hover {
	background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
}
.category-tile.category-create:active {
	background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
}

.category-tile.category-develop {
	background: #5e5c64;
	color: white;
}
.category-tile.category-develop:hover {
	background: shade(#5e5c64, 1.2);
}
.category-tile.category-develop:active {
	background-color: shade(#5e5c64, .95);
}

.category-tile.category-learn {
	background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%);
	color: white;
}
.category-tile.category-learn:hover {
	background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
}
.category-tile.category-learn:active {
	background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
}

.category-tile.category-play {
	background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
	color: #393484;
}
.category-tile.category-play:hover {
	background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%);
}
.category-tile.category-play:active {
	background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%);
}

.category-tile.category-socialize {
	background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
	color: alpha(black, 0.7);
}
.category-tile.category-socialize:hover {
	background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
}
.category-tile.category-socialize:active {
	background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
}

.category-tile.category-work {
	padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
	color: #1c71d8;
	background-color:#fdf8d7;
	background-image: linear-gradient(#deddda 1px, transparent 1px),
	                  linear-gradient(90deg, #deddda 1px, transparent 1px);
	background-size: 10px 10px, 10px 10px;
	background-position: -1px -4px, center -1px;
}
.category-tile.category-work:hover {
	background-color: shade(#fdf8d7, 1.03);
	background-image: linear-gradient(shade(#deddda, 1.04) 1px, transparent 1px),
	                  linear-gradient(90deg, shade(#deddda, 1.04) 1px, transparent 1px);
}
.category-tile.category-work:active {
	background-color: shade(#fdf8d7, .93);
	background-image: linear-gradient(shade(#deddda, .97) 1px, transparent 1px),
	                  linear-gradient(90deg, shade(#deddda, .97) 1px, transparent 1px);
}

/* The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c */
.featured-tile {
	all: unset;
	padding: 0;
	box-shadow: none;
	color: @theme_fg_color;
}

.featured-tile label.title-1 {
	margin-top: 6px;
	margin-bottom: 6px;
}

.featured-tile.narrow label.title-1 {
	font-size: 16pt;  /* 80% of .title-1 */
}

.application-details-infobar.info {
	background-color: shade(@theme_bg_color, 0.9);
	color: @theme_fg_color;
	border-color: darker(shade(@theme_bg_color, 0.9));
	border-style: solid;
	border-width: 1px;
}

.application-details-infobar {
	background-color: shade(@theme_bg_color, 0.9);
	color: @theme_fg_color;
	border-color: darker(shade(@theme_bg_color, 0.9));
	border-style: solid;
	border-width: 1px;
}

.application-details-infobar.warning {
	background-color: #fcaf3e;
	color: #2e3436;
	border-color: darker(#fcaf3e);
	border-style: solid;
	border-width: 1px;
}

@keyframes install-progress-unknown-move {
	0% { background-position: 0%; }
	50% { background-position: 100%; }
	100% { background-position: 0%; }
}

.application-details-description .button {
	padding-left:24px;
	padding-right:24px;
}

.install-progress {
	background-image: linear-gradient(to top, @accent_bg_color 2px, alpha(@accent_bg_color, 0) 2px);
	background-repeat: no-repeat;
	background-position: 0 bottom;
	background-size: 0;
	transition: none;
}

.install-progress:dir(rtl) { background-position: 100% bottom; }

.review-row > * {
  margin: 12px;
}

.review-row button { font-size: smaller; }

.review-row .vote-buttons button {
	margin-right: -1px;
}

/* this is the separator between yes and no vote buttons, gtk+ 3.20 only */
.review-row .vote-buttons button:not(:first-child) {
	border-image: linear-gradient(to top, @borders, @borders) 0 0 0 1 / 5px 0 5px 1px;
}

.review-row .vote-buttons button:hover,
.review-row .vote-buttons button:active,
.review-row .vote-buttons button:hover + button,
.review-row .vote-buttons button:active + button {
	border-image: none;
}

review-bar {
	color: alpha(@theme_fg_color, .4);
	background-image: none;
	background-color: alpha(currentColor, .5);
}

.review-histogram star-image {
	color: alpha(@theme_fg_color, .4);
}

.version-arrow-label {
	font-size: x-small;
}

.overview-more-button {
	font-size: smaller;
	padding: 0px 15px;
}

.app-row-origin-text {
	font-size: smaller;
}

.app-listbox-header {
	padding: 6px;
	border-bottom: 1px solid @borders;
}

.image-list {
	background-color: transparent;
}

box.star {
	background-color: transparent;
	background-image: none;
}

button.star {
	outline-offset: 0;
	background-color: transparent;
	background-image: none;
	border-image: none;
	border-radius: 0;
	border-width: 0px;
	padding: 0;
	box-shadow: none;
	outline-offset: -1px;
}

/* i have no idea why GTK adds padding here */
flowboxchild {
	padding: 0px;
}

star-image {
	color: @yellow_5;
}

.dimmer-label {
	opacity: 0.25;
}

.update-failed-details {
	font-family: Monospace;
	font-size: smaller;
	padding: 16px;
}

.upgrade-banner {
	padding: 0px;
	border-radius: 8px;
	border: none;
}

.upgrade-banner-background {
	background: linear-gradient(to bottom, @green_3, @blue_3);
	color: white;
}

.upgrade-buttons #button_upgrades_install {
	padding-left: 16px;
	padding-right: 16px;
}

/* The following style are taken from libhandy's AdwPreferencesPage style, which
 * implements the style for titled lists of lists.
 * FIXME: Drop these styles if the pages using it are ported to
 * AdwPreferencesPage or its successor in Libadwaita, if their clamp size can be
 * set as a property. */

scrolledwindow.list-page > viewport > clamp > box {
	margin: 24px 12px;
	border-spacing: 24px;
}

/* Increase the spacing in the Update Preferences window between the label and
 * the listbox. */

.update-preferences preferencesgroup > box > box {
	margin-top: 18px;
}

/* The following style is taken from libhandy's AdwPreferencesGroup style, which
 * implements the style for titled and described sections with a list box.
 * FIXME: Drop this style if we use the successor of AdwPreferencesGroup in
 * Libadwaita when porting to GTK 4. */

.section > label:not(:first-child) { margin-top: 6px; }

.section > box:not(:first-child) { margin-top: 12px; }

/* The following style is taken from libhandy's AdwStatusPage style.
 * FIXME: Drop this style if AdwStatusPage or its GTK 4 successor allows setting
 * a spinner and the updates spinner page can be ported to it. */

clamp.status-page {
	margin: 36px 12px;
}

clamp.status-page .iconbox {
	min-height: 128px;
	min-width: 128px;
}

clamp.status-page .icon {
	color: alpha(@theme_fg_color, 0.5);
	min-height: 32px;
	min-width: 32px;
}

clamp.status-page .icon:not(:last-child) {
	margin-bottom: 36px;
}

clamp.status-page .title:not(:last-child) {
	margin-bottom: 12px;
}

app-context-bar .context-tile {
	border: 1px solid @card_shade_color;
	background-color: transparent;
	border-radius: 0;
	padding: 24px 12px 21px 12px;
	outline-offset: 5px;
	transition-property: outline, outline-offset, background-image;
	border-bottom: none;
	border-right: none;
}

app-context-bar .context-tile:hover {
	background-image: image(alpha(currentColor, .03));
}

app-context-bar .context-tile.keyboard-activating,
app-context-bar .context-tile:active {
	background-image: image(alpha(currentColor, .08));
}

app-context-bar .context-tile:focus:focus-visible {
	outline-offset: -1px;
}

app-context-bar box:first-child .context-tile:first-child {
	border-top-left-radius: 12px;
}

app-context-bar.horizontal box:last-child .context-tile:last-child,
app-context-bar.vertical box:first-child .context-tile:last-child {
	border-top-right-radius: 12px;
}

app-context-bar.horizontal box:first-child .context-tile:first-child,
app-context-bar.vertical box:last-child .context-tile:first-child {
	border-bottom-left-radius: 12px;
}

app-context-bar box:last-child .context-tile:last-child {
	border-bottom-right-radius: 12px;
}

app-context-bar.horizontal box:first-child .context-tile:first-child,
app-context-bar.vertical .context-tile:first-child {
	border-left: none;
}

app-context-bar.horizontal .context-tile,
app-context-bar.vertical box:first-child .context-tile {
	border-top: none;
}

.context-tile-lozenge {
	font-size: 18px;
	font-weight: bold;
	border-radius: 99999px;
	padding: 9px 11px;
	min-width: 18px;  /* 40px minus the left and right padding */
	min-height: 22px;  /* 40px minus the top and bottom padding */
}

.context-tile-lozenge.large {
	font-size: 24px;
	padding: 15px 18px;
	min-width: 24px;  /* 60px minus the left and right padding */
	min-height: 30px;  /* 60px minus the top and bottom padding */
}

.context-tile-lozenge.wide-image image {
	/* GtkImage always renders image square, so if we want an image which
	 * is wide, but still the same height as all the others, we have to
	 * use this hack to make it zero-height and vertically centred. The
	 * vertical size group ensures that it does still actually have a
	 * height. */
	margin-top: -28px;
	margin-bottom: -28px;
}

.context-tile-lozenge image { -gtk-icon-style: symbolic; }

.context-tile-lozenge.grey {
	color: alpha(@window_fg_color, .75);
	background-color: alpha(@window_fg_color, .15);
}

.context-tile-lozenge.green,
.context-tile-lozenge.details-rating-0 {
	color: @green_5;
	background-color: alpha(@green_3, .25);
}

.context-tile-lozenge.blue,
.context-tile-lozenge.details-rating-5 {
	color: @blue_4;
	background-color: alpha(@blue_3, .25);
}

.context-tile-lozenge.yellow,
.context-tile-lozenge.details-rating-12 {
	color: #ae7b03;
	background: alpha(@yellow_5, .25);
}

.context-tile-lozenge.details-rating-15 {
	color: @orange_5;
	background-color: alpha(@orange_4, .25);
}

.context-tile-lozenge.red,
.context-tile-lozenge.details-rating-18 {
	color: @red_4;
	background-color: alpha(@red_2, .25);
}

.eol-red {
	font-weight: bold;
	color: #ab3342;
}

window.narrow .app-title {
	font-size: 16pt;
}

window.narrow .app-developer {
	font-size: small;
}

.install-progress-label {
	font-size: smaller;
	font-feature-settings: "tnum";
}

/* FIXME: These are needed in the updates page until we can use AdwStatusPage
 * again. See the note in gs-updates-page.ui. */
scrolledwindow.fake-adw-status-page > viewport > box { margin: 36px 12px; }
scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: 36px; }
scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: 36px; }
scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: 12px; }

statuspage.icon-dropshadow image.icon {
	/* This copies the style of .icon-dropshadow from Adwaita. */
	-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
	                  0 -1px rgba(0,0,0,0.05),
	                  1px 0 rgba(0,0,0,0.1),
	                  0 1px rgba(0,0,0,0.3),
	                  -1px 0 rgba(0,0,0,0.1);
}

window.info scrollbar.vertical {
  /* The size a typical headerbar takes: 46px + 1px for the bottom border. */
  margin-top: 47px;

  /* Revelant for scrollbars without .overlay-indicator. */
  background: none;
  box-shadow: none;
}

window.info scrollbar.vertical trough {
  /* The size a typical headerbar takes: 46px + 1px for the bottom border. */
  margin-top: 0;
}

/************
 * GsAppRow *
 ************/

row.app > box.header {
  margin-left: 12px;
  margin-right: 12px;
}

row.app > box.header {
  border-spacing: 12px;
}

row.app > box.header > image {
  margin-top: 12px;
  margin-bottom: 12px;
}

row.app label.warning {
  color: @error_color;
}

/**************
 * GtkSpinner *
 **************/

/* Ensure the spinner is hidden before the animation is triggered. */
@keyframes pre-delay {
  from { opacity: 0; }
  to { opacity: 0; }
}

/* We don't use the opacity CSS property because it's used by the spinner and we
 * want to leave it untouched. */
@keyframes fade-in {
  from { filter: opacity(0%); }
}

/* Give a fade-in animation to spinners. */
spinner.fade-in:checked {
  animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite;
  animation-delay: 0s, 0.5s, 0.5s;
}