alex/yomichan
1
Fork 0
Code Releases Activity

Add css width var (#1523)

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

* Add --content-width-search variable
This commit is contained in:
toasted-nutbread 2021-03-13 13:08:50 -05:00 committed by GitHub
parent f6b591fd1a
commit 06b02c3cf2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ext/css/display.css
View File

@ -55,7 +55,7 @@
--action-button-padding: 0.3em; --action-button-padding: 0.3em;
--list-margin: 0.72em; --list-margin: 0.72em;
--main-content-size: 100%; --content-width: 100%;
--main-content-vertical-padding: 0em; --main-content-vertical-padding: 0em;
--main-content-horizontal-padding: 0em; --main-content-horizontal-padding: 0em;
--entry-horizontal-padding: 0.72em; --entry-horizontal-padding: 0.72em;
@ -397,7 +397,7 @@ a {
position: relative; position: relative;
} }
.content-body-inner { .content-body-inner {
width: var(--main-content-size); width: var(--content-width);
max-width: 100%; max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 0 auto;
@ -422,7 +422,7 @@ a {
max-width: 100%; max-width: 100%;
} }
.content-footer { .content-footer {
width: var(--main-content-size); width: var(--content-width);
max-width: 100%; max-width: 100%;
} }
@ -1843,7 +1843,7 @@ button.footer-notification-close-button {
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: var(--main-content-size); width: var(--content-width);
max-width: 100%; max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 0 auto;

3
ext/css/search.css
View File

@ -21,7 +21,8 @@
--entry-horizontal-padding: 0; --entry-horizontal-padding: 0;
--padding: calc(10em / var(--font-size-no-units)); --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; --background-color: #ffffff;
--separator-color1: #cccccc; --separator-color1: #cccccc;

16
ext/css/settings.css
View File

@ -19,7 +19,7 @@
:root { :root {
--padding: 10px; --padding: 10px;
--padding-negative: calc(var(--padding) * -1); --padding-negative: calc(var(--padding) * -1);
--main-content-size: 700px; --content-width: 700px;
--main-content-padding: 10px; --main-content-padding: 10px;
--sidebar-size: 200px; --sidebar-size: 200px;
--preview-sidebar-expanded-width: 400px; --preview-sidebar-expanded-width: 400px;
@ -263,9 +263,9 @@ a.heading-link-light {
} }
.content-center { .content-center {
flex: 1 1 auto; flex: 1 1 auto;
width: var(--main-content-size); width: var(--content-width);
padding: 0 var(--main-content-padding); padding: 0 var(--main-content-padding);
max-width: var(--main-content-size); max-width: var(--content-width);
box-sizing: border-box; box-sizing: border-box;
} }
.content-right { .content-right {
@ -750,7 +750,7 @@ select.short-height {
max-height: 100%; max-height: 100%;
} }
.modal-content.modal-content-full { .modal-content.modal-content-full {
width: var(--main-content-size); width: var(--content-width);
height: 100%; height: 100%;
transform: translate(0, 0); transform: translate(0, 0);
border-radius: 0; border-radius: 0;
@ -845,7 +845,7 @@ select.short-height {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; 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; grid-template-rows: auto;
align-items: stretch; align-items: stretch;
} }
@ -963,7 +963,7 @@ button.icon-button.modal-header-button>.icon-button-inner>.icon {
visibility: hidden; visibility: hidden;
} }
.status-footer { .status-footer {
max-width: var(--main-content-size); max-width: var(--content-width);
max-height: 100%; max-height: 100%;
width: 100%; width: 100%;
pointer-events: auto; pointer-events: auto;
@ -1032,9 +1032,9 @@ button.icon-button.modal-header-button>.icon-button-inner>.icon {
} }
.fab-container-center { .fab-container-center {
flex: 1 1 auto; flex: 1 1 auto;
width: var(--main-content-size); width: var(--content-width);
padding: 0 var(--main-content-padding); padding: 0 var(--main-content-padding);
max-width: var(--main-content-size); max-width: var(--content-width);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;