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