From 06b02c3cf2ce725383f9a0bae87d3ef084ed8809 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 13 Mar 2021 13:08:50 -0500 Subject: Add css width var (#1523) * Rename --main-content-size to --content-width * Add --content-width-search variable --- ext/css/display.css | 8 ++++---- ext/css/search.css | 3 ++- ext/css/settings.css | 16 ++++++++-------- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/ext/css/display.css b/ext/css/display.css index efb934b9..ca63ad97 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -55,7 +55,7 @@ --action-button-padding: 0.3em; --list-margin: 0.72em; - --main-content-size: 100%; + --content-width: 100%; --main-content-vertical-padding: 0em; --main-content-horizontal-padding: 0em; --entry-horizontal-padding: 0.72em; @@ -397,7 +397,7 @@ a { position: relative; } .content-body-inner { - width: var(--main-content-size); + width: var(--content-width); max-width: 100%; box-sizing: border-box; margin: 0 auto; @@ -422,7 +422,7 @@ a { max-width: 100%; } .content-footer { - width: var(--main-content-size); + width: var(--content-width); max-width: 100%; } @@ -1843,7 +1843,7 @@ button.footer-notification-close-button { left: 0; top: 0; bottom: 0; - width: var(--main-content-size); + width: var(--content-width); max-width: 100%; box-sizing: border-box; margin: 0 auto; diff --git a/ext/css/search.css b/ext/css/search.css index b5643ebb..47a1c4c8 100644 --- a/ext/css/search.css +++ b/ext/css/search.css @@ -21,7 +21,8 @@ --entry-horizontal-padding: 0; --padding: calc(10em / var(--font-size-no-units)); - --main-content-size: calc(700em / var(--font-size-no-units)); + --content-width-search: 700; + --content-width: calc(1em * var(--content-width-search) / var(--font-size-no-units)); --background-color: #ffffff; --separator-color1: #cccccc; diff --git a/ext/css/settings.css b/ext/css/settings.css index 3ee8b6a4..cd90b7d3 100644 --- a/ext/css/settings.css +++ b/ext/css/settings.css @@ -19,7 +19,7 @@ :root { --padding: 10px; --padding-negative: calc(var(--padding) * -1); - --main-content-size: 700px; + --content-width: 700px; --main-content-padding: 10px; --sidebar-size: 200px; --preview-sidebar-expanded-width: 400px; @@ -263,9 +263,9 @@ a.heading-link-light { } .content-center { flex: 1 1 auto; - width: var(--main-content-size); + width: var(--content-width); padding: 0 var(--main-content-padding); - max-width: var(--main-content-size); + max-width: var(--content-width); box-sizing: border-box; } .content-right { @@ -750,7 +750,7 @@ select.short-height { max-height: 100%; } .modal-content.modal-content-full { - width: var(--main-content-size); + width: var(--content-width); height: 100%; transform: translate(0, 0); border-radius: 0; @@ -845,7 +845,7 @@ select.short-height { width: 100%; height: 100%; display: grid; - grid-template-columns: 1fr minmax(auto, var(--main-content-size)) 1fr; + grid-template-columns: 1fr minmax(auto, var(--content-width)) 1fr; grid-template-rows: auto; align-items: stretch; } @@ -963,7 +963,7 @@ button.icon-button.modal-header-button>.icon-button-inner>.icon { visibility: hidden; } .status-footer { - max-width: var(--main-content-size); + max-width: var(--content-width); max-height: 100%; width: 100%; pointer-events: auto; @@ -1032,9 +1032,9 @@ button.icon-button.modal-header-button>.icon-button-inner>.icon { } .fab-container-center { flex: 1 1 auto; - width: var(--main-content-size); + width: var(--content-width); padding: 0 var(--main-content-padding); - max-width: var(--main-content-size); + max-width: var(--content-width); box-sizing: border-box; display: flex; justify-content: flex-end; -- cgit v1.2.3