summaryrefslogtreecommitdiffstats
path: root/src/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/style.css')
-rw-r--r--src/style.css580
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;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-05 21:05:25 +0000