alex/yomichan
1
Fork 0
Code Releases Activity

Settings page mobile layout updates (#2102)

Browse Source 
* Remove use of --settings-group-inner-vertical-margin

* Update alignment
This commit is contained in:
toasted-nutbread 2022-04-02 14:48:57 -04:00 committed by GitHub
parent 6b88501afd
commit ea1d64c9dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 1 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ext/css/settings.css
View File

@ -28,7 +28,6 @@
--shadow-left: -1px 0 4px 0 var(--shadow-color), -2px 0 2px 0 var(--shadow-color); --shadow-left: -1px 0 4px 0 var(--shadow-color), -2px 0 2px 0 var(--shadow-color);
--shadow-right: 1px 0 4px 0 var(--shadow-color), 2px 0 2px 0 var(--shadow-color); --shadow-right: 1px 0 4px 0 var(--shadow-color), 2px 0 2px 0 var(--shadow-color);
--settings-group-horizontal-margin: 0; --settings-group-horizontal-margin: 0;
--settings-group-inner-vertical-margin: 0.75em;
--settings-group-inner-vertical-padding: 0.85em; --settings-group-inner-vertical-padding: 0.85em;
--settings-group-inner-horizontal-padding: 1.5em; --settings-group-inner-horizontal-padding: 1.5em;
--settings-group-inner-horizontal-padding-half: calc(var(--settings-group-inner-horizontal-padding) * 0.5); --settings-group-inner-horizontal-padding-half: calc(var(--settings-group-inner-horizontal-padding) * 0.5);
@ -505,10 +504,9 @@ a.heading-link-light {
width: 100%; width: 100%;
} }
.settings-item-inner { .settings-item-inner {
margin-top: var(--settings-group-inner-vertical-margin);
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: flex-end;
align-content: stretch; align-content: stretch;
width: 100%; width: 100%;
} }
@ -516,7 +514,6 @@ a.heading-link-light {
flex-wrap: var(--settings-group-wrap); flex-wrap: var(--settings-group-wrap);
} }
.settings-item-left { .settings-item-left {
margin-top: calc(var(--settings-group-inner-vertical-margin) * -1);
padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding-half) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding); padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding-half) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding);
flex: 1 1 auto; flex: 1 1 auto;
align-self: center; align-self: center;
@ -526,7 +523,6 @@ a.heading-link-light {
padding-right: var(--settings-group-inner-horizontal-padding); padding-right: var(--settings-group-inner-horizontal-padding);
} }
.settings-item-right { .settings-item-right {
margin-top: calc(var(--settings-group-inner-vertical-margin) * -1);
padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding-half); padding: var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding) var(--settings-group-inner-vertical-padding) var(--settings-group-inner-horizontal-padding-half);
flex: 0 1 auto; flex: 0 1 auto;
align-self: stretch; align-self: stretch;