75 lines
4.7 KiB
CSS
75 lines
4.7 KiB
CSS
body { background-color: #EDF2F5; font-family: Roboto, 'Segoe UI', Arial, 'Helvetica Neue'; margin: 0px; padding: 0px; backface-visibility: hidden; }
|
|
h1, h2, h3, h4 { font-family: 'Roboto', Arial, sans-serif; font-weight: 200; font-size: 30px; margin: 0px; padding: 0px }
|
|
h1 { background: linear-gradient(33deg,#af3bff,#0d99c9); color: white; padding: 16px 30px; }
|
|
h2 { margin-top: 10px; }
|
|
h3 { font-weight: normal }
|
|
h4 { font-size: 19px; font-weight: lighter; margin-right: 100px; margin-top: 30px; }
|
|
a { color: #9760F9 }
|
|
a:hover { text-decoration: none }
|
|
|
|
.link { background-color: transparent; outline: 5px solid transparent; transition: all 0.3s }
|
|
.link:active { background-color: #EFEFEF; outline: 5px solid #EFEFEF; transition: none }
|
|
|
|
.content { max-width: 800px; margin: auto; background-color: white; padding: 60px 20px; box-sizing: border-box; padding-bottom: 150px; }
|
|
.section { margin: 0px 10%; }
|
|
.plugins { font-size: 19px; margin-top: 25px; margin-bottom: 75px; }
|
|
.plugin { transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1); position: relative; padding-bottom: 20px; padding-top: 10px; }
|
|
.plugin.hidden { opacity: 0; height: 0px; padding: 0px; }
|
|
.plugin .title { display: inline-block; line-height: 36px; }
|
|
.plugin .title h3 { font-size: 20px; font-weight: lighter; margin-right: 100px; }
|
|
.plugin .title .version { font-size: 70%; margin-left: 5px; }
|
|
.plugin .title .version .version-latest { color: #2ecc71; font-weight: normal; }
|
|
.plugin .title .version .version-missing { color: #ffa200; font-weight: normal; }
|
|
.plugin .title .version .version-update { padding: 0px 15px; margin-left: 5px; line-height: 28px; }
|
|
.plugin .description { font-size: 14px; color: #666; line-height: 24px; }
|
|
.plugin .description .source { color: #999; font-size: 90%; }
|
|
.plugin .description .source a { color: #666; }
|
|
.plugin .value { display: inline-block; white-space: nowrap; }
|
|
.plugin .value-right { right: 0px; position: absolute; }
|
|
.plugin .value-fullwidth { width: 100% }
|
|
.plugin .marker {
|
|
font-weight: bold; text-decoration: none; font-size: 25px; position: absolute; padding: 2px 15px; line-height: 32px;
|
|
opacity: 0; pointer-events: none; transition: all 0.6s; transform: scale(2); color: #9760F9;
|
|
}
|
|
.plugin .marker.visible { opacity: 1; pointer-events: all; transform: scale(1); }
|
|
.plugin .marker.changed { color: #2ecc71; }
|
|
.plugin .marker.pending { color: #ffa200; }
|
|
|
|
|
|
.input-text, .input-select { padding: 8px 18px; border: 1px solid #CCC; border-radius: 3px; font-size: 17px; box-sizing: border-box; }
|
|
.input-text:focus, .input-select:focus { border: 1px solid #3396ff; outline: none; }
|
|
.input-textarea { overflow-x: auto; overflow-y: hidden; white-space: pre; line-height: 22px; }
|
|
|
|
.input-select { width: initial; font-size: 14px; padding-right: 10px; padding-left: 10px; }
|
|
|
|
.value-right .input-text { text-align: right; width: 100px; }
|
|
.value-fullwidth .input-text { width: 100%; font-size: 14px; font-family: 'Segoe UI', Arial, 'Helvetica Neue'; }
|
|
.value-fullwidth { margin-top: 10px; }
|
|
|
|
/* Checkbox */
|
|
.checkbox-skin { background-color: #CCC; width: 50px; height: 24px; border-radius: 15px; transition: all 0.3s ease-in-out; display: inline-block; }
|
|
.checkbox-skin:before {
|
|
content: ""; position: relative; width: 20px; background-color: white; height: 20px; display: block; border-radius: 100%; margin-top: 2px; margin-left: 2px;
|
|
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|
}
|
|
.checkbox { font-size: 14px; font-weight: normal; display: inline-block; cursor: pointer; margin-top: 5px; }
|
|
.checkbox .title { display: inline; line-height: 30px; vertical-align: 4px; margin-left: 11px }
|
|
.checkbox.checked .checkbox-skin:before { margin-left: 27px; }
|
|
.checkbox.checked .checkbox-skin { background-color: #2ECC71 }
|
|
|
|
/* Bottom */
|
|
|
|
.bottom {
|
|
width: 100%; text-align: center; background-color: #ffffffde; padding: 25px; bottom: -120px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
|
|
transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1); position: fixed; backface-visibility: hidden; box-sizing: border-box;
|
|
}
|
|
.bottom-content { max-width: 750px; width: 100%; margin: 0px auto; }
|
|
.bottom .button { float: right; }
|
|
.bottom.visible { bottom: 0px; box-shadow: 0px 0px 35px #dcdcdc; }
|
|
.bottom .title { padding: 10px 10px; color: #363636; float: left; text-transform: uppercase; letter-spacing: 1px; }
|
|
.bottom .title:before { content: "•"; display: inline-block; color: #2ecc71; font-size: 31px; vertical-align: -7px; margin-right: 8px; line-height: 25px; }
|
|
.bottom-restart .title:before { color: #ffa200; }
|
|
|
|
.animate { transition: all 0.3s ease-out !important; }
|
|
.animate-back { transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
|
|
.animate-inout { transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) !important; } |