diff options
Diffstat (limited to 'src/style.css')
-rw-r--r-- | src/style.css | 580 |
1 files changed, 580 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..b366208 --- /dev/null +++ b/src/style.css @@ -0,0 +1,580 @@ +.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; +} |