: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-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;
}
.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;
}