Some QR styling fixes. Holy shit I love flexboxes.

This commit is contained in:
Nicolas Stepien 2013-02-25 17:26:13 +01:00
parent 42598bbf90
commit 9212723113
3 changed files with 18 additions and 15 deletions

File diff suppressed because one or more lines are too long

View File

@ -511,6 +511,9 @@ a[href="javascript:;"] {
background: -webkit-linear-gradient(#CCC, #DDD); background: -webkit-linear-gradient(#CCC, #DDD);
background: linear-gradient(#CCC, #DDD); background: linear-gradient(#CCC, #DDD);
} }
.gecko #dump-button {
padding: 0;
}
#qr:not(.dump) #dump-list-container { #qr:not(.dump) #dump-list-container {
display: none; display: none;
} }
@ -633,23 +636,21 @@ a[href="javascript:;"] {
height: 57px; height: 57px;
width: 300px; width: 300px;
} }
#file-n-submit.has-file > #qr-no-file, #file-n-submit.has-file #qr-no-file {
#file-n-submit:not(.has-file) > #qr-filename-container, visibility: hidden;
#file-n-submit:not(.has-file) > #qr-file-spoiler,
#file-n-submit:not(.has-file) > #qr-filerm {
display: none;
} }
#qr-no-file, #file-n-submit:not(.has-file) #qr-filename,
#qr-filename-container, #file-n-submit:not(.has-file) #qr-file-spoiler,
#qr-file-spoiler, #file-n-submit:not(.has-file) #qr-filerm {
#qr-filerm { display: none;
line-height: 2;
} }
#file-n-submit { #file-n-submit {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; flex-direction: row;
-webkit-align-items: center;
align-items: center;
} }
#qr-no-file, #qr-filename-container { #qr-no-file, #qr-filename-container {
-webkit-flex: 1; -webkit-flex: 1;
@ -669,7 +670,7 @@ a[href="javascript:;"] {
padding: 0 2px; padding: 0 2px;
} }
#qr-file-spoiler { #qr-file-spoiler {
margin: 6px 1px; margin: 1px;
} }
#qr input[type='file'] { #qr input[type='file'] {
position: absolute; position: absolute;

View File

@ -630,8 +630,10 @@ QR =
</div> </div>
<div id=file-n-submit> <div id=file-n-submit>
<input id=qr-file-button type=button value='Choose files'> <input id=qr-file-button type=button value='Choose files'>
<span id=qr-no-file>No selected file</span> <span id=qr-filename-container>
<span id=qr-filename-container><span id=qr-filename></span></span> <span id=qr-no-file>No selected file</span>
<span id=qr-filename></span>
</span>
<a id=qr-filerm href=javascript:; title='Remove file' tabindex=-1>×</a> <a id=qr-filerm href=javascript:; title='Remove file' tabindex=-1>×</a>
<input type=checkbox id=qr-file-spoiler title='Spoiler image' tabindex=-1> <input type=checkbox id=qr-file-spoiler title='Spoiler image' tabindex=-1>
<input type=submit> <input type=submit>