open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optionsUI: more flexboxes and relative widths

Browse Source 
* also center the UI vertically in Opera
* allow body width to grow up to 800px in FF/Opera/etc
* use :: in pseudo selectors
This commit is contained in:
tophf 2017-06-19 16:00:45 +03:00
parent 2240a0895e
commit 5485fbf8b3
1 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
options/index.css
View File

@ -1,10 +1,12 @@
html.opera { html.opera {
text-align: center; display: flex;
align-items: center;
justify-content: center;
height: 100%;
} }
html.opera body { html.opera body {
display: inline-block; width: auto;
text-align: initial;
} }
html.firefox .block { html.firefox .block {
@ -19,7 +21,15 @@ body {
margin: 0; margin: 0;
font-family: "Helvetica Neue", Helvetica, sans-serif; font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
width: calc(16px + 100px + 8px + 260px + 8px + 60px + 4px + 16px); width: 480px;
min-width: 400px;
max-width: 800px;
}
@media (min-width: 401px) {
.firefox body {
width: calc(100% - 6px); /* TODO: rework to avoid compensating padding of 'html.firefox .block' */
}
} }
.firefox .chromium-only { .firefox .chromium-only {
@ -31,7 +41,7 @@ body {
align-items: center; align-items: center;
margin: 1em 0; margin: 1em 0;
border-bottom: 1px dotted #ccc; border-bottom: 1px dotted #ccc;
padding: 0 0 1em 16px; padding: 0 16px 1em;
position: relative; position: relative;
} }
@ -41,29 +51,31 @@ body {
} }
h1 { h1 {
width: 100px; width: 30%;
margin: 0; margin: 0;
font-size: 120%; font-size: 120%;
font-weight: bold; font-weight: bold;
padding-right: 8px; padding-right: 8px;
box-sizing: border-box;
word-wrap: break-word; word-wrap: break-word;
} }
.items {
width: 70%;
}
label { label {
display: block; display: flex;
white-space: nowrap;
margin: .25ex 0; margin: .25ex 0;
} }
label > * { label > * {
display: inline-block; /*vertical-align: middle;*/
vertical-align: middle;
} }
label > :first-child { label > :first-child {
width: 260px;
white-space: normal;
margin-right: 8px; margin-right: 8px;
flex-grow: 1;
} }
label:not([disabled]) > :first-child { label:not([disabled]) > :first-child {
@ -80,6 +92,7 @@ input[type="color"],
.onoffswitch { .onoffswitch {
width: 60px; width: 60px;
box-sizing: border-box; box-sizing: border-box;
flex-shrink: 0;
} }
a { a {
@ -140,7 +153,7 @@ input[type="color"] {
margin-top: 1px; margin-top: 1px;
} }
#updates-installed:after { #updates-installed::after {
content: attr(data-value); content: attr(data-value);
margin-left: .5ex; margin-left: .5ex;
font-weight: bold; font-weight: bold;
@ -221,10 +234,11 @@ sup {
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1); box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
} }
.onoffswitch span:before { .onoffswitch span::before {
content: ""; content: "";
display: block; display: block;
width: 18px; width: 18px;
height: 18px;
margin: -3px; margin: -3px;
background: #efefef; background: #efefef;
position: absolute; position: absolute;
@ -239,7 +253,7 @@ sup {
background-color: #CAEBE3; background-color: #CAEBE3;
} }
.onoffswitch input:checked + span, .onoffswitch input:checked + span:before { .onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
border-color: #CAEBE3; border-color: #CAEBE3;
} }
@ -247,7 +261,7 @@ sup {
margin-left: 0; margin-left: 0;
} }
.onoffswitch input:checked + span:before { .onoffswitch input:checked + span::before {
right: 0; right: 0;
background-color: #04BA9F; background-color: #04BA9F;
box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2); box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);