From 25a42600965152f07aa26f33d4369b8c91c74b68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= Date: Sun, 27 Nov 2022 04:51:25 +0100 Subject: [PATCH] Small style improvements --- .gitignore | 1 + account/applications.ftl | 2 +- account/sessions.ftl | 3 +- account/totp.ftl | 2 +- common/resources/css/{.css => .gitkeep} | 0 common/resources/css/index.css | 56 +++++++++++++++++++------ common/resources/scss/button.scss | 2 +- common/resources/scss/index.scss | 8 ++-- common/resources/scss/input.scss | 6 +-- common/resources/scss/link.scss | 2 +- common/resources/scss/page.scss | 22 +++++++--- common/resources/scss/style.scss | 33 --------------- common/resources/scss/table.scss | 32 ++++++++++++++ 13 files changed, 106 insertions(+), 63 deletions(-) rename common/resources/css/{.css => .gitkeep} (100%) delete mode 100644 common/resources/scss/style.scss diff --git a/.gitignore b/.gitignore index e4eaed1..3c933ee 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ tags .direnv +common/resources/css/*.css diff --git a/account/applications.ftl b/account/applications.ftl index c9e7022..c083b9e 100755 --- a/account/applications.ftl +++ b/account/applications.ftl @@ -11,7 +11,7 @@ - +
diff --git a/account/sessions.ftl b/account/sessions.ftl index e4c29cb..89851a1 100755 --- a/account/sessions.ftl +++ b/account/sessions.ftl @@ -7,7 +7,7 @@ -
${msg("application")}
+
@@ -33,7 +33,6 @@ -
${msg("ip")}
diff --git a/account/totp.ftl b/account/totp.ftl index 10a9cd2..b5ff59b 100755 --- a/account/totp.ftl +++ b/account/totp.ftl @@ -65,7 +65,7 @@ <#if mode?? && mode = "manual">

  • ${msg("totpManualStep2")}

    -

    ${totp.totpSecretEncoded}

    + 
    ${totp.totpSecretEncoded}

    ${msg("totpScanBarcode")}

  • diff --git a/common/resources/css/.css b/common/resources/css/.gitkeep similarity index 100% rename from common/resources/css/.css rename to common/resources/css/.gitkeep diff --git a/common/resources/css/index.css b/common/resources/css/index.css index 451ba50..479d0eb 100644 --- a/common/resources/css/index.css +++ b/common/resources/css/index.css @@ -4,10 +4,11 @@ html { --accent: #ed1c24; --foreground: #000; - --foreground-light: rgba(0, 0, 0, 0.7); + --foreground-lighter-1: rgba(0, 0, 0, 0.7); + --foreground-lighter-2: rgba(0, 0, 0, 0.3); --background: #fff; - --background-alt-1: #f5f5f5; - --background-alt-2: #eeeeee; + --background-darker-1: #f5f5f5; + --background-darker-2: #eeeeee; font-family: 'Open Sans', Arial, sans-serif; font-weight: 800; background: var(--background); @@ -36,7 +37,7 @@ html { .ps-link { cursor: pointer; color: var(--accent); - border-bottom: 1px solid white; + border-bottom: 1px solid transparent; transition: border-bottom 0.1s ease; text-decoration: none; } .ps-link:hover { @@ -61,7 +62,7 @@ html { line-height: 1.2rem; border: 2px solid var(--foreground); border-radius: 1.5rem; - background-color: var(--background-alt-2); + background-color: var(--background-darker-2); cursor: pointer; } .ps-button:hover, .ps-button:focus { border-color: var(--accent); } @@ -76,7 +77,7 @@ html { .ps-input { padding: 0.5rem 0.5rem; - border: 2px solid var(--foreground-light); + border: 2px solid var(--foreground-lighter-1); font-size: 1.2rem; } .ps-input:hover, .ps-input:focus { border-color: var(--accent); } @@ -84,9 +85,32 @@ html { color: var(--background); background-color: var(--foreground); } .ps-input:disabled { - background-color: var(--background-alt-2); } + background-color: var(--background-darker-2); } .ps-input:disabled:hover { - border-color: var(--foreground-light); } + border-color: var(--foreground-lighter-1); } + +.ps-table { + overflow: auto; + border-collapse: collapse; + margin-left: -0.25rem; + width: calc(100% + 0.25rem); } + .ps-table td, .ps-table th { + padding: 0.1rem 0.25rem; } + .ps-table tr { + border: 0; + border-left: 0.25rem solid transparent; } + .ps-table tr:nth-child(2n) { + background-color: var(--background-darker-1); + border-left: 0.25rem solid var(--background-darker-1); } + .ps-table tr:hover { + background-color: var(--background-darker-2); + border-color: var(--accent); } + .ps-table thead tr { + border-bottom: 4px solid var(--foreground-lighter-1); + font-weight: bold; + text-align: center; } + .ps-table thead td, .ps-table th { + padding: 0.1rem 0.5rem; } .ps-form-group { display: flex; @@ -218,7 +242,7 @@ html { flex-shrink: 1; pointer-events: all; color: var(--foreground); - background: white; + background: var(--background); overflow-wrap: break-word; hyphens: auto; pointer-events: all; } @@ -235,7 +259,7 @@ html { overflow: auto; } .ps-page--section a { color: var(--accent); - border-bottom: 1px solid white; + border-bottom: 1px solid transparent; transition: border-bottom 0.1s ease; text-decoration: none; } .ps-page--section a:hover { @@ -268,14 +292,20 @@ html { margin-bottom: 5vw; } .ps-page--section-contents pre, .ps-page--section-contents code { - background-color: var(--background-alt); + background-color: var(--background-darker-2); border-radius: 4px; padding: 4px; } + .ps-page--section-contents pre { + border: 1px solid var(--foreground-lighter-2); } .ps-page--section-contents > * { margin-bottom: 0; - margin-top: 8px; } + margin-top: 0.5rem; } + .ps-page--section-contents > .ps-table { + margin-top: 1rem; } + .ps-page--section-contents > .ps-table + * { + margin-top: 1rem; } .ps-page--section-contents > h1, .ps-page--section-contents h2 { - margin-top: 32px; + margin-top: 2rem; line-height: 1.5; } .ps-section-nav { diff --git a/common/resources/scss/button.scss b/common/resources/scss/button.scss index 2e8410b..23ca2a6 100644 --- a/common/resources/scss/button.scss +++ b/common/resources/scss/button.scss @@ -4,7 +4,7 @@ line-height: 1.2rem; border: 2px solid var(--foreground); border-radius: 1.5rem; - background-color: var(--background-alt-2); + background-color: var(--background-darker-2); cursor: pointer; &:hover, diff --git a/common/resources/scss/index.scss b/common/resources/scss/index.scss index 200811f..281bb73 100644 --- a/common/resources/scss/index.scss +++ b/common/resources/scss/index.scss @@ -5,10 +5,11 @@ html { --accent: #ed1c24; --foreground: #000; - --foreground-light: rgba(0, 0, 0, 0.7); + --foreground-lighter-1: rgba(0, 0, 0, 0.7); + --foreground-lighter-2: rgba(0, 0, 0, 0.3); --background: #fff; - --background-alt-1: #f5f5f5; - --background-alt-2: #eeeeee; + --background-darker-1: #f5f5f5; + --background-darker-2: #eeeeee; font-family: 'Open Sans', Arial, sans-serif; font-weight: 800; @@ -34,6 +35,7 @@ html { @import './card'; @import './button'; @import './input'; +@import './table'; @import './form-group'; @import './homelink'; diff --git a/common/resources/scss/input.scss b/common/resources/scss/input.scss index 61f2e18..5dafa75 100644 --- a/common/resources/scss/input.scss +++ b/common/resources/scss/input.scss @@ -1,6 +1,6 @@ .ps-input { padding: 0.5rem 0.5rem; - border: 2px solid var(--foreground-light); + border: 2px solid var(--foreground-lighter-1); font-size: 1.2rem; &:hover, @@ -14,10 +14,10 @@ } &:disabled { - background-color: var(--background-alt-2); + background-color: var(--background-darker-2); &:hover { - border-color: var(--foreground-light); + border-color: var(--foreground-lighter-1); } } } diff --git a/common/resources/scss/link.scss b/common/resources/scss/link.scss index fd78663..b330599 100644 --- a/common/resources/scss/link.scss +++ b/common/resources/scss/link.scss @@ -1,7 +1,7 @@ .ps-link { cursor: pointer; color: var(--accent); - border-bottom: 1px solid white; + border-bottom: 1px solid transparent; transition: border-bottom 0.1s ease; text-decoration: none; diff --git a/common/resources/scss/page.scss b/common/resources/scss/page.scss index f8b424b..927f960 100644 --- a/common/resources/scss/page.scss +++ b/common/resources/scss/page.scss @@ -37,7 +37,7 @@ flex-shrink: 1; pointer-events: all; color: var(--foreground); - background: white; + background: var(--background); overflow-wrap: break-word; hyphens: auto; pointer-events: all; @@ -60,7 +60,7 @@ a { color: var(--accent); - border-bottom: 1px solid white; + border-bottom: 1px solid transparent; transition: border-bottom 0.1s ease; text-decoration: none; @@ -108,18 +108,30 @@ pre, code { - background-color: var(--background-alt); + background-color: var(--background-darker-2); border-radius: 4px; padding: 4px; } + pre { + border: 1px solid var(--foreground-lighter-2); + } + > * { margin-bottom: 0; - margin-top: 8px; + margin-top: 0.5rem; + } + + > .ps-table { + margin-top: 1rem; + + + * { + margin-top: 1rem; + } } > h1, h2 { - margin-top: 32px; + margin-top: 2rem; line-height: 1.5; } } diff --git a/common/resources/scss/style.scss b/common/resources/scss/style.scss deleted file mode 100644 index ed7df22..0000000 --- a/common/resources/scss/style.scss +++ /dev/null @@ -1,33 +0,0 @@ -* { - box-sizing: border-box; -} - -html { - --accent: #ed1c24; - --foreground: #000; - --background: #fff; - --background-alt: #f5f5f5; - - font-family: 'Open Sans', Arial, sans-serif; - font-weight: 800; - background: var(--background); - color: var(--foreground); - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - box-sizing: border-box; - width: 100vw; - height: 100vh; - margin: 0; - font-size: 1vw; -} - -@import './main'; -@import './page'; -@import './logo'; -@import './background'; -@import './footer'; -@import './homelink'; -@import './hakken-dates.scss'; - diff --git a/common/resources/scss/table.scss b/common/resources/scss/table.scss index 609a2dd..196a946 100644 --- a/common/resources/scss/table.scss +++ b/common/resources/scss/table.scss @@ -1,3 +1,35 @@ .ps-table { overflow: auto; + border-collapse: collapse; + margin-left: -0.25rem; + width: calc(100% + 0.25rem); + + td, th { + padding: 0.1rem 0.25rem; + } + + tr { + border: 0; + border-left: 0.25rem solid transparent; + + &:nth-child(2n) { + background-color: var(--background-darker-1); + border-left: 0.25rem solid var(--background-darker-1); + } + + &:hover { + background-color: var(--background-darker-2); + border-color: var(--accent); + } + } + + thead tr { + border-bottom: 4px solid var(--foreground-lighter-1); + font-weight: bold; + text-align: center; + } + + thead td, th { + padding: 0.1rem 0.5rem; + } }