stylus/install-usercss/install-usercss.css
2017-11-24 13:19:13 +03:00

212 lines
2.9 KiB
CSS

body {
margin: 0;
font: 12px arial, sans-serif;
background: white;
}
a {
color: #000;
transition: color .5s;
text-decoration-skip: ink;
}
a:hover {
color: #666;
}
img.icon,
svg.icon {
height: 1.4em;
vertical-align: middle;
}
.container {
display: flex;
height: 100vh;
align-items: stretch;
}
.main {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.header,
.warnings {
flex: 0 0 280px;
box-sizing: border-box;
padding: 15px;
border-right: 1px dashed #aaa;
box-shadow: 0 0 50px -18px black;
overflow-wrap: break-word;
overflow-y: auto;
z-index: 100;
}
.header:not(.meta-init) {
visibility: hidden;
}
.header.meta-init-error {
display: none;
}
.warnings {
display: none;
padding-bottom: 0;
flex-basis: auto;
background: #ffe2e2;
border-right: none;
border-bottom: 1px dashed #aaa;
}
.has-warnings .warnings {
display: initial;
}
.warning {
font-weight: bold;
font-size: 125%;
margin-bottom: 1em;
}
.warning pre {
overflow-wrap: break-word;
white-space: pre-wrap;
margin: 1ex 0 0;
font-weight: normal;
font-size: 80%;
}
.header > :first-child {
margin-top: 0;
}
h1 small {
font-size: 0.6em;
}
.meta-version::before {
content: " v";
}
.actions {
margin-bottom: 1em;
}
.actions label {
max-width: -moz-fit-content;
max-width: fit-content;
display: flex;
align-items: center;
margin: 0.5em 0;
}
.install {
padding: 1ex 1em;
font-weight: bold;
margin-bottom: 1ex;
}
.actions label input {
margin: 0 0.5em 0 0;
flex: 0 0 auto;
}
.actions label span {
min-width: 0;
}
.external {
text-align: center;
}
.external > * {
margin: 0 7.5px;
}
li {
margin-left: -2em;
}
.main {
overflow: hidden;
}
.main .CodeMirror {
height: auto;
border: none;
}
/************ reponsive layouts ************/
@media (max-width:10in) {
.container {
flex-direction: column;
}
.header {
flex-basis: auto;
border-right: none;
border-bottom: 1px dashed #AAA;
max-height: 50%;
overflow-x: auto;
overflow-y: hidden;
}
.has-warnings .header {
min-height: 4em;
max-height: 20%;
}
.warnings {
max-height: 20%;
}
.warning:not(:last-child) {
border-bottom: 1px dashed #b57c7c;
padding-bottom: 1em;
}
.header,
.warning {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
h1 {
-webkit-column-span: all;
column-span: all;
margin-bottom: .5em;
}
.actions {
display: flex;
}
.install {
margin-right: 1em;
}
}
@media (max-width:7in) {
.header,
.warning {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (max-width:4in) {
.header {
overflow-x: hidden;
overflow-y: auto;
max-height: 100%;
}
.header,
.warning {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.warning {
border: none;
padding-bottom: unset;
}
}