From 7f2231d86bb72c83f50693ec96526e7d9f47dfb8 Mon Sep 17 00:00:00 2001 From: zeroinformatique Date: Sun, 18 Oct 2020 01:12:07 +0200 Subject: viewer: fix sort order button hitbox (#272) * viewer: fix sort order button hitbox github: resolves #266 * viewer: fix sort order button hover color That was a conflict between the tag's color and the .link color. I enforced .link priority over * viewer: fix sort order button hover color TODO comment about Buefy issues--- viewer/src/assets/scss/global.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'viewer/src/assets/scss/global.scss') diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index c82e1bc..06d975f 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -80,7 +80,7 @@ button svg + span { color: $link; cursor: pointer; text-decoration: none; - &:hover { + &:hover, &:hover a { color: $link-hover; } } -- cgit v1.2.3 From 00510820a2794efcadbc83f7f8b54318fe198ecb Mon Sep 17 00:00:00 2001 From: Zéro~Informatique Date: Tue, 26 Jul 2022 08:44:34 +0200 Subject: viewer: migrate to vue 3, general refactoring and cleanup Non-exhaustive list of fixes and improvements done at the same time: - html default background to grey (avoids white flash during init) - unified links behavior - added more theme variables - removed the flex-expand transition (it wasn't working) and replaced it with a slide - fixed LdLoading not centered on the content - title on removable tags - fixed an issue with encoded URI from vue-router - unified Item resource URLs - removed the iframe for PlainTextViewer (it wasn't working properly) and replaced it with a pre - fixed clear and search buttons tabindex - fixed the information panel bumping up during the fade animation of tag's dropdown - fixed some focus outlines not appearing correctly - moved CSS variables to the :root context - Code cleaning GitHub: closes #217 GitHub: closes #300 GitHub: closes #297 GitHub: closes #105 GitHub: closes #267 GitHub: closes #275 GitHub: closes #228 GitHub: closes #215 GitHub: closes #112 --- viewer/src/assets/scss/global.scss | 53 ++++++++++++++++++++------------------ 1 file changed, 28 insertions(+), 25 deletions(-) (limited to 'viewer/src/assets/scss/global.scss') diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 06d975f..0a2f8f0 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -1,7 +1,7 @@ /* ldgallery - A static generator which turns a collection of tagged -- pictures into a searchable web gallery. -- --- Copyright (C) 2019-2020 Guillaume FOUET +-- Copyright (C) 2019-2022 Guillaume FOUET -- -- This program is free software: you can redistribute it and/or modify -- it under the terms of the GNU Affero General Public License as @@ -18,24 +18,37 @@ */ // Global CSS -@import "~@/assets/scss/theme.scss"; +@import "theme"; -// === Forms - -.required label::after { - content: "*"; - color: red; +h1 { + font-size: $size-5; + font-weight: $weight-semibold; + line-height: 1.125; +} +h2 { + font-size: $size-6; + font-weight: $weight-normal; } -button svg + span { - margin-left: 7px; +// === Forms + +button { + cursor: pointer; + color: $button-color; + background-color: $button-background-color; + border: 1px solid $button-border-color; + padding: calc(0.375em - 1px) 0.75em; + font-family: inherit; + line-height: 1.5; + font-size: $size-6; + &:hover,&:focus { + border-color: $button-active-color; + outline: none; + } } // === Tools -.nowrap { - white-space: nowrap; -} .no-scroll { overflow: hidden; } @@ -53,16 +66,15 @@ button svg + span { .flex-center { align-items: center; } +.flex-grow-1 { + flex-grow: 1; +} .fill { width: 100%; height: 100%; } -.flex-grow-1 { - flex-grow: 1; -} - /** * Class for containers that centers its content vertically and horizontally, * preferably sticking to the container start if the container is smaller than the content. @@ -76,15 +88,6 @@ button svg + span { // === Links -.link { - color: $link; - cursor: pointer; - text-decoration: none; - &:hover, &:hover a { - color: $link-hover; - } -} - .disabled { color: $disabled-color !important; cursor: initial; -- cgit v1.2.3