:root { --hc-border: color(srgb 0 0 0.023 / 50%); } @media (prefers-color-scheme: dark) { :root { --hc-border: color(srgb 1 1 1 / 50%); } } .bz-monospace { font-size: smaller; font-family: monospace; } .bz-small-button { padding: 1px; margin: 0; } .bz-small-button > * { margin: 0; padding: 0; } .bz-debug { background: linear-gradient(to top, #ffaf4c, #ffc04c); border-color: black; border-radius: 6px; border-style: solid; border-width: 1px; color: black; padding: 3px; } .bz-debug button { border-color: black; border-style: dashed; border-width: 1px; border-radius: 3px; padding-top: 0px; padding-bottom: 0px; padding-left: 2px; padding-right: 2px; } .bz-donations-dialog { background: linear-gradient(to bottom left, #1f2d8f, #159eff); color: white; } .bz-donations-dialog button:focus { outline-color: white; } .bz-donations-banner { --banner-color: var(--accent-bg-color); } .search-box { outline: 0 solid transparent; outline-offset: 6px; transition-property: outline, outline-offset; transition-duration: 200ms; padding: 0px 12px; border-radius: 9999px; background-color: var(--card-bg-color); } .search-box:focus-within { outline-color: color-mix(in srgb, var(--accent-color), transparent); outline-offset: 0; outline-width: 2px; } .search-box.hide-focus:focus-within { outline-color: transparent; } @media (prefers-color-scheme: light) { .search-box { background-color: var(--shade-color); } } @media (prefers-contrast: more) { .search-box { box-shadow: inset 0 0 0 1px var(--hc-border); } .search-box:focus-within { box-shadow: none; outline-color: var(--accent-color); } } .search-box > text placeholder { opacity: 0.55; } .searchbar-button, .searchbar-button > button { min-height: 24px; min-width: 24px; } .search-pill { font-weight: 450; } .search-grid { background-color: var(--window-bg-color); } .search-grid > child { padding: 0; margin: 6px 6px; border-radius: 12px; transition: background-color 200ms; } .narrow .search-grid > child { margin: 6px 12px; } .card-row-btn { border-radius: 0; } .screenshot { border-radius: 20px; } .installed-size { font-weight: 500; } .verified { color: @blue_2; } .app-developer link{ color: @blue_2; text-decoration: none; } .support { --accent-fg-color : #f06292; --accent-bg-color : alpha(#f06292, 0.25); --accent-color : #f06292; } .favorite { --accent-fg-color: @accent_bg_color; --accent-bg-color : alpha(@accent_bg_color, 0.25); --accent-color: @accent_color; } .favorite * { --accent-fg-color: @accent_fg_color; --accent-bg-color: @accent_bg_color; --accent-color: @accent_color; } .orange { --accent-fg-color: @orange_5; --accent-color: alpha(@orange_5, 0.25); --accent-bg-color: @orange_5; } .green { --accent-fg-color : #8ff0a4; --accent-bg-color : alpha(#2ec27e, 0.25); --accent-color : #8ff0a4; } .blue { --accent-fg-color : #99c1f1; --accent-bg-color : alpha(#1a5fb4, 0.25); --accent-color : #99c1f1; } .dark-blue { --accent-fg-color : #99c1f1; --accent-bg-color : #1a5fb4; --accent-color : #99c1f1; } @media (prefers-color-scheme: light) { .green { --accent-fg-color : #2ec27e; --accent-bg-color : alpha(#8ff0a4, 0.25); --accent-color : #2ec27e; } .blue { --accent-fg-color : #1a5fb4; --accent-bg-color : alpha(#99c1f1, 0.25); --accent-color : #1a5fb4; } .dark-blue { --accent-fg-color : #1C71D8; --accent-bg-color : #1C71D8; --accent-color : #1C71D8; } } .grey { --accent-color: alpha(@window_fg_color,0.75); --accent-bg-color: @window_fg_color; } .grey.colored { --accent-fg-color : @window_fg_color; --accent-bg-color : alpha(@window_fg_color,0.05); --accent-color : alpha(@window_fg_color,0.75); } @media (prefers-contrast: more) { .circular-lozenge { box-shadow: inset 0 0 0 1px; } } .circular-lozenge.green, .lozenge.green { color: @green_5; background-color: alpha(@green_3, .25); } .circular-lozenge.yellow, .lozenge.yellow { color: #ae7b03; background: alpha(@yellow_5, .25); } .circular-lozenge.orange, .lozenge.orange { color: @orange_5; background-color: alpha(@orange_4, .25); } .circular-lozenge.red, .lozenge.red { color: @red_4; background-color: alpha(@red_2, .25); } .circular-lozenge.grey, .lozenge.grey { color: #323237; background-color: color-mix(in srgb, var(--window-fg-color) 10%, transparent); } @media (prefers-color-scheme: dark) { .circular-lozenge.green, .lozenge.green { color: @green_1; background-color: alpha(@green_4, .25); } .circular-lozenge.yellow, .lozenge.yellow { color: @yellow_2; background: alpha(#cd9309, .25); } .circular-lozenge.orange, .lozenge.orange { color: @orange_1; } .circular-lozenge.red, .lozenge.red { color: #ff7b63; } .circular-lozenge.grey, .lozenge.grey { color: @window_fg_color; } } .floating-tooltip { background-color: var(--dialog-bg-color); } .floating-tooltip .monospace { font-size: 1em; } .flathub { --accent-color: alpha(@window_fg_color,0.75); --accent-bg-color: @window_fg_color; } .flathub-lotion { color: #fafafa; } .flathub-gunmetal { color: #251f32; } @media (prefers-color-scheme: dark) { .flathub { --accent-color: alpha(#fafafa,0.75); --accent-bg-color: #7847b8; } } .lozenge { font-size: 18px; font-weight: bold; border-radius: 99999px; padding: 5px 11px; min-width: 18px; min-height: 22px; color: var(--accent-color); background-color: alpha(var(--accent-bg-color),0.15); transition: background-color 150ms ease; } .lozenge.small { padding: 1px 9px; font-size: 12px; font-weight: bold; } .lozenge-ring-button { padding: 0; border-radius: 999999px; background: transparent; } .circular-lozenge { font-weight: bold; border-radius: 99999px; padding: 9px 11px; min-width: 18px; min-height: 22px; color: var(--accent-color); background-color: alpha(var(--accent-bg-color),0.15); } .circular-lozenge.large { font-size: 24px; padding: 15px 18px; min-width: 24px; min-height: 30px; } button.context-tile:hover .lozenge { background-color: alpha(var(--accent-bg-color),0.25); } button.context-tile:active .lozenge { background-color: alpha(var(--accent-bg-color),0.35); } .small-pill { padding: 2px 12px; border-radius: 99999px; } @media (prefers-contrast: more) { .small-pill { box-shadow: inset 0 0 0 1px; } .small-pill:focus-within { box-shadow: none; } } .medium-pill { border-radius: 99999px; } .colored { background-color: var(--accent-bg-color); color: var(--accent-color); } .card.colored { background-color: alpha(var(--accent-bg-color),0.15); color: var(--accent-color); } .small-pill.dimmed { background-color: alpha(@theme_fg_color, 0.15); } .small-pill.error { background-color: alpha(@error_bg_color, 0.15); } .installed-pill { background-color: alpha(@success_bg_color, 0.15); color: @success_color; font-weight: 500; font-size: 0.9em; padding: 2px 7px 2px 4.5px; } .circular-download-pill { padding: 5px; } .sp-section .installed-pill { background-color: alpha(@window_fg_color, 0.10); color: alpha(@window_fg_color, 0.75); } .download-size-pill{ padding: 2px 8px; } .flathub-page-section { border-radius: 10px; } .transaction-list-view row { margin: 0; padding: 0; } window.narrow .app-title { font-size: 16pt; } .developer-badge > button { padding: 0; background-color: transparent; } .developer-badge:focus > button { border-radius: 5px; } window.narrow .app-developer { font-size: small; } .context-tile { box-shadow: none; padding: 4px; } button.context-tile { background-color: transparent; } .context-tile-text { font-size: 10pt; font-weight: 500; } .wide-image { margin-top: -28px; margin-bottom: -28px; } .featured-carousel { outline-offset: 2px; } .screenshot-carousel.frame { border-width: 1px 0; } .screenshot-carousel button{ margin: 12px; } .carousel-box { background-color: var(--view-bg-color); } toggle-group.huge, toggle-group.huge * { border-radius: 9999px; } .huge > toggle { padding: 3px 12px; } .otg { background: linear-gradient(to right, #2f3d9f, #682889); } .wlg { background: linear-gradient(to right, #821756, #136673); } .after-hero { background: linear-gradient(to right, #11243a, #28215e, #4a2735); } .after-top-apps { background: linear-gradient(to right, #263914, #123d31, #11324c); } .after-first-category-block { background: linear-gradient(to right, #4a2f10, #4d1832, #2d2863); } .sp-section .card:not(:hover):not(:active) { background: transparent; } .sp-section .card { box-shadow: none; } @media (prefers-color-scheme: light) { .otg { background: linear-gradient(to right, #c6eaf8, #c4f3c9); } .wlg { background: linear-gradient(to right, #fdcde0, #b0e5f0); } .after-hero { background: linear-gradient(to right, #d7f7ff, #eee1ff, #ffe2c8); } .after-top-apps { background: linear-gradient(to right, #f4ffb8, #cdf7dc, #bfe9ff); } .after-first-category-block { background: linear-gradient(to right, #ffe3a3, #ffc3d8, #d8d2ff); } .sp-section .card:hover { background: rgba(255, 255, 255, 0.50); } .sp-section .card:active { background: rgba(255, 255, 255, 0.75); } } @media (prefers-contrast: more) { .card.category-tile, .card.app-tile { box-shadow: inset 0 0 0 1px var(--hc-border); } .card.category-tile:focus-within, .card.app-tile :focus-within { box-shadow: none; outline-color: var(--accent-color); } } .sp-section-image { margin-top: -95px; margin-bottom: -95px; } .sp-section-title { font-size: 3.5em; } .decorated-screenshot { margin: 0; padding: 0; background-color: transparent; } .indicator-box button { margin: 0 4px 4px 0; } .pip-button.osd-box { padding: 0; } .pip-button > button { margin: 5px; } .header-osd windowcontrols button image { background-color: rgba(0, 0, 0, 0.65); color: white; background-image: none; } .osd-box { border-radius: 12px; background-color: rgba(0, 0, 0, 0.65); padding: 6px; color: white; } .view-dark { background-color: black; color: white; } .header-osd box.horizontal:not(.end) { background-color: rgba(0, 0, 0, 0.65); border-radius: 10px; } .accent-button { border-radius: 9999px; padding: 3px; background: var(--flag-gradient, var(--accent-bg-color)); min-width: 32px; min-height: 32px; outline: none; background-clip: content-box; background-origin: content-box; box-shadow: none; transition: transform 0.3s ease; } .accent-button.horizontal { transform: rotate(-90deg); } .accent-button-box > flowboxchild { padding: 0; background-color: transparent; } .accent-button:checked { box-shadow: 0 0 0 3px var(--accent-bg-color); } .accent-button:focus:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent); } .accent-button:checked:focus:focus-visible { box-shadow: 0 0 0 3px var(--accent-bg-color), 0 0 0 6px color-mix(in srgb, var(--accent-color) 30%, transparent); } /* Category buttons styling modified from GNOME Software*/ .category-tile { font-weight: 700; font-size: 13pt; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); padding-left: 32px; padding-right: 32px; outline-offset: 2px; } @media (prefers-contrast: more) { .category-tile { box-shadow: none; } } window.narrow .category-tile { font-size: 14pt; padding-left: 24px; padding-right: 24px; } /* All background gradients are at 135deg for consistency */ .category-tile.category-recently-updated { background: linear-gradient(135deg, #f9ef69, #26a269); color: #0c3020; text-shadow: 0 1px rgba(255, 255, 255, 0.35); } .category-tile.category-recently-updated:hover { background: linear-gradient(135deg, shade(#f9ef69, 1.1), shade(#26a269, 1.1)); } .category-tile.category-recently-updated:active { background: linear-gradient(135deg, shade(#f9ef69, 0.95), shade(#26a269, 0.95)); } .category-tile.category-recently-added { background: linear-gradient(135deg, #99a3eb, #495ade); } .category-tile.category-recently-added:hover { background: linear-gradient(135deg, shade(#99a3eb, 1.1), shade(#495ade, 1.1)); } .category-tile.category-recently-added:active { background: linear-gradient(135deg, shade(#99a3eb, .95), shade(#495ade, .95)); } .category-tile.category-trending { background: linear-gradient(135deg, #99c1f1, #3584e4); } .category-tile.category-trending:hover { background: linear-gradient(135deg, shade(#99c1f1, 1.1), shade(#3584e4, 1.1)); } .category-tile.category-trending:active { background: linear-gradient(135deg, shade(#99c1f1, .95), shade(#3584e4, .95)); } .category-tile.category-popular { background: linear-gradient(135deg, #f7ef74, #ffbf6f); color: rgba(0, 0, 0, 0.8); text-shadow: 0 1px rgba(255, 255, 255, 0.35); } .category-tile.category-popular:hover { background: linear-gradient(135deg, shade(#f7ef74, 1.1), shade(#ffbf6f, 1.1)); } .category-tile.category-popular:active { background: linear-gradient(135deg, shade(#f7ef74, .95), shade(#ffbf6f, .95)); } .category-tile.category-mobile { background: linear-gradient(135deg, #c6eaf8, #c4f3c9); color: rgba(0, 0, 0, 0.8); text-shadow: 0 1px rgba(255, 255, 255, 0.35); } .category-tile.category-mobile:hover { background: linear-gradient(135deg, shade(#c6eaf8, 1.05), shade(#c4f3c9, 1.05)); } .category-tile.category-mobile:active { background: linear-gradient(135deg, shade(#c6eaf8, .95), shade(#c4f3c9, .95)); } .category-tile.category-graphics { background: linear-gradient(135deg, #ce8cd7 0%, #2861c6 100%); } .category-tile.category-graphics:hover { background: linear-gradient(135deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%); } .category-tile.category-graphics:active { background: linear-gradient(135deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%); } .category-tile.category-development { background: linear-gradient(135deg, #444449 30%, #333337 100%); } .category-tile.category-development:hover { background: linear-gradient(135deg, shade(#444449, 1.13) 30%, shade(#333337, 1.13) 100%); } .category-tile.category-development:active { background: linear-gradient(135deg, shade(#444449, .95) 30%, shade(#333337, .95) 100%); } .category-tile.category-education { background: linear-gradient(135deg, #2ec27e 30%, #27a66c 100%); } .category-tile.category-education:hover { background: linear-gradient(135deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%); } .category-tile.category-education:active { background: linear-gradient(135deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%); } .category-tile.category-game { background: linear-gradient(135deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%); color: #393484; text-shadow: 0 1px rgba(255, 255, 255, 0.35); } .category-tile.category-game:hover { background: linear-gradient(135deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%); } .category-tile.category-game:active { background: linear-gradient(135deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%); } .category-tile.category-network { background: linear-gradient(135deg, #ff6b35, #ed333b); } .category-tile.category-network:hover { background: linear-gradient(135deg, shade(#ff6b35, 1.1), shade(#ed333b, 1.1)); } .category-tile.category-network:active { background: linear-gradient(135deg, shade(#ff6b35, .95), shade(#ed333b, .95)); } .category-tile.category-office { padding: 1px; color: #1c71d8; text-shadow: 0 1px rgba(255, 255, 255, 0.35); 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-office:hover { background-color: shade(#fdf8d7, 1.05); background-image: linear-gradient(shade(#deddda, 1.04) 1px, transparent 1px), linear-gradient(90deg, shade(#deddda, 1.04) 1px, transparent 1px); } .category-tile.category-office: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); } .category-tile.category-audiovideo { background: linear-gradient(135deg, #ffcd3c 0%, #ff6b35 100%); } .category-tile.category-audiovideo:hover { background: linear-gradient(135deg, shade(#ffcd3c, 1.08) 0%, shade(#ff6b35, 1.08) 100%); } .category-tile.category-audiovideo:active { background: linear-gradient(135deg, shade(#ffcd3c, .95) 0%, shade(#ff6b35, .95) 100%); } .category-tile.category-science { background: linear-gradient(135deg, #8ff0a4 0%, #1c71d8 100%); } .category-tile.category-science:hover { background: linear-gradient(135deg, shade(#8ff0a4, 1.1) 0%, shade(#1c71d8, 1.1) 100%); } .category-tile.category-science:active { background: linear-gradient(135deg, shade(#8ff0a4, .95) 0%, shade(#1c71d8, .95) 100%); } .category-tile.category-system { background: linear-gradient(135deg, #6c757d 0%, #495057 100%); } .category-tile.category-system:hover { background: linear-gradient(135deg, shade(#6c757d, 1.15) 0%, shade(#495057, 1.15) 100%); } .category-tile.category-system:active { background: linear-gradient(135deg, shade(#6c757d, .95) 0%, shade(#495057, .95) 100%); } .category-tile.category-utility { color: #ee5f50; text-shadow: 0 1px rgba(255, 255, 255, 0.35); background: linear-gradient(135deg, #f6f5f4 0%, #deddda 100%); } .category-tile.category-utility:hover { background: linear-gradient(135deg, shade(#f6f5f4, 1.05) 0%, shade(#deddda, 1.05) 100%); } .category-tile.category-utility:active { background: linear-gradient(135deg, shade(#f6f5f4, .95) 0%, shade(#deddda, .95) 100%); } .category-tile.category-adwaita { text-shadow: 0 1px rgba(255, 255, 255, 0.35); background: linear-gradient(45deg, #1c71d8 0%, #57e289 100%); } .category-tile.category-adwaita:hover { background: linear-gradient(45deg, shade(#1c71d8, 1.15) 0%, shade(#57e289, 1.15) 100%); } .category-tile.category-adwaita:active { background: linear-gradient(45deg, shade(#1c71d8, .95) 0%, shade(#57e289, .95) 100%); } .category-tile.category-kde { text-shadow: 0 1px rgba(255, 255, 255, 0.35); background: linear-gradient(135deg, #3584e4 0%, #704dac 100%); } .category-tile.category-kde:hover { background: linear-gradient(135deg, shade(#3584e4, 1.08) 0%, shade(#704dac, 1.08) 100%); } .category-tile.category-kde:active { background: linear-gradient(135deg, shade(#3584e4, .95) 0%, shade(#704dac, .95) 100%); } .category-tile.category-cosmic { background: #2e2e2e; } @media (prefers-color-scheme: light) { .category-tile.category-cosmic { background: #232323; } } .category-tile.category-cosmic:hover { background: shade(#232323, 1.30); } .category-tile.category-cosmic:active { background: shade(#232323, 1.20); } .category-tile.category-adwaita image, .category-tile.category-kde image { -gtk-icon-shadow: none; } .installed-list-view > * { padding: 0; transition: background-color 200ms; min-height: 0; margin: 5px 4.5px; } .installed-section { padding-top: 0; } .narrow .installed-list-view > * { margin: 4px 4.5px; } .narrow .full-view-addons > * { margin: 5px 0px; } .full-view-addons > * { margin: 5px 0px; } .full-view-addons { margin: 0px; } .no-vertical-margin > row.hidden { margin-top: 0px; margin-bottom: 0px; } .no-vertical-margin > row:not(.hidden) { margin-bottom: 6px; } .user-data-list-view > * { margin: 0; } .user-data-list-view row { min-height: 0; } .no-min-height { min-height: 0; } .transaction-tile-title { font-size: 1.05em; font-weight: 450; } .operations { background-color: rgba(255, 255, 255, 0.040); border-radius: 0px 0px 12px 12px; } @media (prefers-color-scheme: light) { .operations { background-color: rgba(0, 0, 0, 0.050); } } .ops-toggle { transition: transform 200ms ease; transform: rotate(90deg); } .ops-toggle:checked, .ops-toggle.rotated { transform: rotate(270deg); } .disable-adw-flow-box-styling { background-color: transparent; box-shadow: none; padding: 0; } curated-list-view list { background: var(--bg-color); } .article-image-button { padding: 10px; background-color: transparent; transition: transform 350ms ease; } .article-image-button:hover { transform: scale(1.03); } .code-block { border-color: alpha(currentColor, 0.05); } .article .title-2 { font-size: 1.50em; } .markdown-table { border-top: 1px solid alpha(currentColor, 0.15); border-left: 1px solid alpha(currentColor, 0.15); } .markdown-table > label { padding: 8px 14px; border-right: 1px solid alpha(currentColor, 0.15); border-bottom: 1px solid alpha(currentColor, 0.15); } .markdown-table > label.row-odd { background-color: alpha(currentColor, 0.08); } .install-button-indicator { background: var(--flag-gradient, var(--accent-bg-color)); border-radius: 9999px; } .transact-icon-flag { background: var(--flag-gradient, var(--accent-bg-color)); } .origin-rounded-box { background-color: alpha(currentColor, .15); border-radius: 999px; padding: 2px 6px; } .origin-title { text-transform: capitalize; } .origin-rounded-box label { text-transform: uppercase; }