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

install-usercss: css tweaks

Browse Source 
* pad the Install button
* remove global * selector
* add narrow @media query
* simplify css
This commit is contained in:
tophf 2017-11-22 03:50:19 +03:00
parent d767ad7a8c
commit e9abcc8031
1 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
install-usercss/install-usercss.css
View File

@ -4,10 +4,6 @@ body {
background: white; background: white;
} }
* {
box-sizing: border-box;
}
a { a {
color: #000; color: #000;
transition: color .5s; transition: color .5s;
@ -32,6 +28,7 @@ svg.icon {
.header { .header {
flex: 0 0 280px; flex: 0 0 280px;
box-sizing: border-box;
padding: 15px; padding: 15px;
border-right: 1px dashed #aaa; border-right: 1px dashed #aaa;
box-shadow: 0 0 50px -18px black; box-shadow: 0 0 50px -18px black;
@ -53,9 +50,7 @@ h1 small {
.warning { .warning {
padding: 3px 6px; padding: 3px 6px;
border: 1px dashed black; border: 1px dashed #ef6969;
border-color: #ef6969;
background: #ffe2e2; background: #ffe2e2;
} }
@ -68,13 +63,19 @@ h1 small {
} }
.actions label { .actions label {
max-width: fit-content;
max-width: -moz-fit-content; max-width: -moz-fit-content;
max-width: fit-content;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0.5em 0; margin: 0.5em 0;
} }
.install {
padding: 1ex 1em;
font-weight: bold;
margin-bottom: 1ex;
}
.actions label input { .actions label input {
margin: 0 0.5em 0 0; margin: 0 0.5em 0 0;
flex: 0 0 auto; flex: 0 0 auto;
@ -92,6 +93,10 @@ h1 small {
margin: 0 7.5px; margin: 0 7.5px;
} }
li {
margin-left: -2em;
}
.code { .code {
padding: 2em; padding: 2em;
} }
@ -101,9 +106,7 @@ h1 small {
overflow: hidden; overflow: hidden;
overflow-wrap: break-word; overflow-wrap: break-word;
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column;
} }
.main > :first-child { .main > :first-child {
@ -119,3 +122,25 @@ h1 small {
.main .CodeMirror { .main .CodeMirror {
height: 100%; height: 100%;
} }
/************ reponsive layouts ************/
@media (max-width:7.5in) {
.container {
flex-direction: column;
}
.header {
flex-basis: auto;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
border-right: none;
border-bottom: 1px dashed #AAA;
z-index: 2;
}
.main {
padding-left: 0;
}
.code {
padding: 0;
}
}