aboutsummaryrefslogtreecommitdiff
path: root/ext/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-03-13 13:08:50 -0500
committerGitHub <noreply@github.com>2021-03-13 13:08:50 -0500
commit06b02c3cf2ce725383f9a0bae87d3ef084ed8809 (patch)
tree65a970b97a8019c714670d1ebc7b98dcb4537c00 /ext/css
parentf6b591fd1a6d833cfa45e314ac7b2dbb76009877 (diff)
Add css width var (#1523)
* Rename --main-content-size to --content-width * Add --content-width-search variable
Diffstat (limited to 'ext/css')
-rw-r--r--ext/css/display.css8
-rw-r--r--ext/css/search.css3
-rw-r--r--ext/css/settings.css16
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;