Add css width var (#1523)

* Rename --main-content-size to --content-width

* Add --content-width-search variable

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;