206 lines
8.6 KiB
CSS
206 lines
8.6 KiB
CSS
/* variables */
|
|
:root {
|
|
--bg-main: #faf5e9;
|
|
--fg-main: #1f2528;
|
|
--bg-sharp: white;
|
|
--fg-sharp: black;
|
|
--fg-alt: #363636;
|
|
--bg-alt: #f9f9f9;
|
|
--bg-flash: #fff2b4;
|
|
--border: #ccc;
|
|
--border-sharp: #09f;
|
|
--border-flash: #ffe660;
|
|
--fg-error: #99081f;
|
|
--btn-error: #ff1800;
|
|
--btn-success: #37b92e;
|
|
--fg-link: #239b89;
|
|
--fg-link-visited: #2f6a5f;
|
|
--fg-link-hover: #0088ff;
|
|
--bg-link: aliceblue;
|
|
}
|
|
|
|
|
|
/* basic styles */
|
|
* {box-sizing: border-box;}
|
|
body{font-family:sans-serif;background-color:var(--bg-main); color: var(--fg-main);margin:0;position:relative}
|
|
.content{margin: 3em 1.3em}
|
|
.footer{text-align:center;}
|
|
|
|
/* header styles */
|
|
.header{padding:1em;display:flex;flex-direction:row;justify-content:space-between;position:sticky;top:0;background-color:var(--bg-alt); z-index: 99}
|
|
.header .header-blank {flex: 1; margin: 0 .5em}
|
|
.header ul{list-style:none;padding:0;margin:0;font-size:0.9em;border-left:var(--border) 1px solid}
|
|
.header ul > li{display:inline-block;padding-right:1em}
|
|
|
|
/* content styles */
|
|
#firstHeading {font-family:sans-serif; text-align: center;font-size:3em; font-weight: normal}
|
|
.inner-content{font-family:serif; margin: 1.7em auto; max-width: 1280px; line-height: 1.9; color: var(--fg-main)}
|
|
.inner-content em,.inner-content strong{color: var(--fg-sharp)}
|
|
.inner-content h1{color: var(--fg-error)}
|
|
.inner-content table {font-family: sans-serif}
|
|
.inner-content h2, .inner-content h3, .inner-content h4, .inner-content h5, .inner-content h6{font-family:sans-serif; color: var(--fg-sharp); font-weight: normal}
|
|
.inner-content h2{border-bottom: 1px solid var(--border)}
|
|
.inner-content h3{margin:0.8em 0}
|
|
.inner-content h4{margin:0.6em 0}
|
|
.inner-content h5{margin:0.5em 0}
|
|
.inner-content h6{margin:0.4em 0}
|
|
.inner-content p{text-indent: 1.9em; margin: 0}
|
|
.inner-content li{margin: .3em 0}
|
|
.inner-content blockquote{color:var(--fg-alt); border-left: 4px solid var(--bg-alt);margin-left:0;padding-left:12px}
|
|
.inner-content table{border:var(--bg-alt) 1px solid;border-collapse:collapse;line-height: 1.5;overflow-x:auto}
|
|
.inner-content table > * > tr > th, .inner-content table > tr > th {background-color:var(--bg-alt);border:var(--border) 1px solid;padding:2px}
|
|
.inner-content table > * > tr > td, .inner-content table > tr > td {border:var(--border) 1px solid;padding:2px}
|
|
|
|
/* spoiler styles */
|
|
.spoiler {color: var(--fg-sharp); background-color: var(--fg-sharp)}
|
|
.spoiler.revealed {color: inherit; background-color: transparent}
|
|
|
|
/* interface styles */
|
|
.nl-list{list-style:none}
|
|
.nl-list > li{margin-bottom: 1em}
|
|
.nl-title{font-size:1.2em; font-weight: 500}
|
|
.nl-desc{font-size:0.9em;opacity:.75;font-family:serif}
|
|
.nl-new{margin:6px 0 12px 0;display:flex;justify-content:start; float: right}
|
|
.nl-new > a{margin-right:12px}
|
|
.nl-prev,.nl-next{text-align:center}
|
|
input{border:0;border-bottom:3px solid var(--border);font:inherit;color:var(--fg-main);background-color:transparent}
|
|
input:focus{color:var(--fg-sharp);border-bottom-color:var(--border-sharp)}
|
|
input.error{border-bottom-color:var(--btn-error)}
|
|
input[type="submit"],input[type="reset"],input[type="button"],button{font-family:inherit;border-radius:12px;border:1px solid var(--border);display:inline-block}
|
|
.submit-primary{color:var(--bg-main);background-color:var(--btn-success);font-family:inherit;border:1px solid var(--btn-success);font-size:1.2em;height:2em;min-width:8em}
|
|
.submit-secondary{color:var(--fg-main);background-color:var(--bg-main);font-family:inherit;border:1px solid var(--btn-success);font-size:1.2em;height:2em;min-width:8em}
|
|
.submit-quick{color:var(--bg-main);background-color:var(--btn-success);font-family:inherit;border:1px solid var(--btn-success);font-size:inherit;border-radius:6px}
|
|
.flash{background-color:var(--bg-flash);padding:12px;border-radius:4px;border:1px var(--border-flash) solid}
|
|
.page-tags p{display:inline-block}
|
|
.page-tags ul{padding:0;margin:0;list-style:none;display:inline-block}
|
|
.page-tags ul > li{padding:6px 12px;display:inline-block;margin:0 4px;border-radius:4px;background-color:var(--bg-link)}
|
|
.page-tags .tag-count{color: var(--btn-success);font-size:smaller;font-weight:600}
|
|
.search-wrapper {display:flex;width:90%;margin:auto}
|
|
.search-wrapper > input {flex:1}
|
|
.calendar-subtitle {text-align: center; margin-top: -1em}
|
|
.preview-subtitle {text-align: center; margin-top: -1em}
|
|
textarea {background-color: var(--bg-sharp); color: var(--fg-sharp)}
|
|
ul.inline {margin:0; padding:0; display: inline}
|
|
ul.inline > li {display: inline-block;}
|
|
ul.inline > li::after {content: "·"}
|
|
ul.inline > li:last-child::after {content: ""}
|
|
|
|
/* Circles extension */
|
|
.circles-red{color: #e14}
|
|
.circles-orange{color: #f72}
|
|
.circles-green{color: #6e4}
|
|
.circles-yellow{color: #fc6}
|
|
.circles-list{list-style: none}
|
|
.circles-list > li{margin: .5em 0;}
|
|
.circles-list > li::before{font-size: 24px;transform:translatey(50%);font-weight:bold;margin-right:8px}
|
|
.circles-list > li.circles-red::before{color: #e14; content: '❌︎'}
|
|
.circles-list > li.circles-orange::before{color: #f72; content: '△'}
|
|
.circles-list > li.circles-yellow::before{color: #fc6; content: '◇'}
|
|
.circles-list > li.circles-green::before{color: #6e4; content: '○'}
|
|
.circles-add-form{display:table}
|
|
.circles-add-form > div{display:table-row}
|
|
.circles-add-form > div > *{display:table-cell}
|
|
.circles-add-form > div > label{text-align:right}
|
|
.circles-li-code {font-size: 120%}
|
|
|
|
/* ContactNova extension */
|
|
.contactnova-issues {padding-left: 12px; border-left: 4px solid #fc6}
|
|
.contactnova-col-code {font-size: 1.25em; font-weight: bold}
|
|
.contactnova-status_1 .material-icons {color: #6e4}
|
|
.contactnova-status_2 .material-icons {color: #fc6}
|
|
.contactnova-list td {vertical-align: middle}
|
|
|
|
|
|
/* floating elements */
|
|
.toc{float:right}
|
|
@media (max-width:639px){
|
|
.toc{display:none}
|
|
}
|
|
.backontop{position:fixed;bottom:0;right:0}
|
|
@media print{
|
|
.backontop {display:none}
|
|
.header{position:static}
|
|
}
|
|
#__top{position:absolute;top:0;left:0}
|
|
|
|
/* editor */
|
|
input.title-input{overflow:visible;font-weight:bold;font-size:2em;width:100%;margin-top:1em}
|
|
.text-input{font:inherit;border-top:0;border-bottom:4px solid #80e;border-left:0;border-right:0;margin-bottom:12px;width:100%;height:20em}
|
|
.over-text-input{color:white;background-color:#80e;margin-top:12px;padding:4px}
|
|
.over-text-input select{padding: 0;border: 0;margin: 0;background: inherit;color: inherit;font: inherit;}
|
|
.text-input.ti-font-sans{font-family: sans-serif}
|
|
.text-input.ti-font-serif{font-family: serif}
|
|
.text-input.ti-font-monospace{font-family:monospace}
|
|
|
|
/* images */
|
|
.fig-right{float:right;clear:right}
|
|
.fig-gallery{display:inline-block}
|
|
.fig-right img, .fig-gallery img{width:220px}
|
|
|
|
/* links */
|
|
a:link{color:var(--fg-link)}
|
|
a:visited{color:var(--fg-link-visited)}
|
|
a:hover{color:var(--fg-link-hover)}
|
|
.metro-links{padding:12px;color:white;background-color:#333}
|
|
.metro-links a{color:white}
|
|
.metro-prev{float:left}
|
|
.metro-next{float:right}
|
|
.metro-links.metro-1{background-color:red}
|
|
.metro-links.metro-2{background-color:blue}
|
|
.metro-links.metro-3{background-color:green}
|
|
.metro-links.metro-4{background-color:orange}
|
|
.metro-links.metro-5{background-color:teal}
|
|
.metro-links.metro-6{background-color:purple}
|
|
.metro-divider{height:1px;background-color:white;clear:both}
|
|
.metro-badge{background-color:#333;border-radius:4px;color:white;font-size:80%}
|
|
|
|
/* grids */
|
|
@media (min-width:800px) {
|
|
.nl-list {display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr; column-gap: 1.5em}
|
|
.nl-list > .nl-prev, .nl-list > .nl-next {grid-column-end: span 2}
|
|
}
|
|
|
|
|
|
/* dark theme */
|
|
|
|
.dark {
|
|
--bg-main: #1f1f1f;
|
|
--fg-main: #e5e5e5;
|
|
--bg-sharp: black;
|
|
--fg-sharp: white;
|
|
--fg-alt: #cecece;
|
|
--bg-alt: #333;
|
|
--bg-flash: #771;
|
|
--border: #555;
|
|
--border-sharp: #4bf;
|
|
--border-flash: #fd2;
|
|
--fg-error: #ff4860;
|
|
--btn-error: #e01400;
|
|
--btn-success: #5d3;
|
|
--fg-link: #99cadc;
|
|
--fg-link-visited: #a2e2de;
|
|
--fg-link-hover: #33ffaa;
|
|
--bg-link: #555;
|
|
}
|
|
|
|
.dark .text-input{border-bottom-color: #60a}
|
|
.dark .over-text-input{background-color: #60a}
|
|
a.dark-theme-toggle-off{display: none}
|
|
.dark a.dark-theme-toggle-off{display: inline}
|
|
.dark a.dark-theme-toggle-on{display: none}
|
|
|
|
/* ?????? */
|
|
.wrap_responsive_cells {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
/* This is better for small screens, once min() is better supported */
|
|
/* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
|
|
gap: 1rem;
|
|
}
|
|
.wrap_responsive_cells_narrow {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
/* This is better for small screens, once min() is better supported */
|
|
/* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
|
|
gap: 2px;
|
|
}
|