From 1b2ff082f0c7b5a07c2460a27b0e6f54ebdf41e3 Mon Sep 17 00:00:00 2001 From: hackademix Date: Tue, 15 Mar 2022 23:55:26 +0100 Subject: [PATCH] Optimized visual layout responsiveness. --- src/ui/common.css | 3 ++- src/ui/options.css | 48 ++++++++++++++++++++++++++++++++------------- src/ui/options.html | 8 +++++--- src/ui/prompt.css | 2 +- src/ui/ui.css | 10 +--------- 5 files changed, 43 insertions(+), 28 deletions(-) diff --git a/src/ui/common.css b/src/ui/common.css index 8138c27..fb61ec5 100644 --- a/src/ui/common.css +++ b/src/ui/common.css @@ -34,7 +34,7 @@ a, a:visited { color: var(--accent-color); } -button { +button, .button { appearance: none; background: var(--form-color1); border: 1px solid var(--fg-color1); @@ -43,6 +43,7 @@ button { font-weight: bold; padding: .6em; cursor: pointer; + text-decoration: none; } input[type="text"], textarea, select { diff --git a/src/ui/options.css b/src/ui/options.css index 1ea0a99..13511d1 100644 --- a/src/ui/options.css +++ b/src/ui/options.css @@ -6,22 +6,18 @@ body { background: url("/img/noscript-options.png") no-repeat fixed top right; - background-size: 8em; + background-size: 7em; padding: 0 2em 0 0; margin: 0.5em 0.5em 0.5em 0.5em; } -.mobile body { - background-size: 4em; - padding-right: 0; -} - #header { display: flex; - flex-flow: column; + flex-flow: row wrap; padding: 0; margin: 0 6em 0 0; - text-align: right; + align-items: center; + justify-content: space-between; } #header h1 { color: var(--accent-color); @@ -44,12 +40,11 @@ body { display: flex; flex-flow: row wrap; justify-content: flex-end; - width: 100%; - margin: 0 0 2px 0; + margin: 0 0 1em 0; } -.buttons button { - margin: .5em 0 .5em 1em; +.buttons :is(button, .button) { + margin: .5em; } #sect-general { @@ -123,6 +118,7 @@ button.add { #import-container { position: relative; + display: flex; } #file-import { position: absolute; @@ -138,7 +134,7 @@ button.add { } #xssFaq { - padding: 0.5em 1em; + white-space: nowrap; } #clearclick-options { @@ -177,13 +173,37 @@ button.add { padding: .4em .8em; } -@media (max-width: 550px) { +@media (max-width: 630px) { + body { + background-size: 8em ; + padding: 0; + margin: 0; + } + #header { + margin: .5em 8em 0 .5em; + } +} + +@media (max-width: 440px) { .flextabs__toggle { border-radius: 1em; + margin: -1em 0 0 0; } .flextabs__toggle[aria-expanded="true"] { font-weight: bold; box-shadow: 1px 1px 1px inset; + z-index: 1; + position: relative; + } + + body { + background-size: 6em; + } + #header { + margin: 0; + } + #header > .title { + margin-right: 6em; } } diff --git a/src/ui/options.html b/src/ui/options.html index fb5e0cd..36dca87 100644 --- a/src/ui/options.html +++ b/src/ui/options.html @@ -26,8 +26,8 @@ SPDX-License-Identifier: GPL-3.0-or-later