Zettelstore Base CSS
/*-----------------------------------------------------------------------------
* Copyright (c) 2020-present Detlef Stern
*
* This file is part of Zettelstore.
*
* Zettelstore is licensed under the latest version of the EUPL (European Union
* Public License). Please see file LICENSE.txt for your rights and obligations
* under this license.
*
* SPDX-License-Identifier: EUPL-1.2
* SPDX-FileCopyrightText: 2020-present Detlef Stern
*-----------------------------------------------------------------------------
*/
*,*::before,*::after {
box-sizing: border-box;
}
html {
font-family: serif;
scroll-behavior: smooth;
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
line-height: 1.4;
background-color: #f8f8f8 ;
height: 100%;
}
nav.zs-menu {
background-color: hsl(210, 28%, 90%);
overflow: auto;
white-space: nowrap;
font-family: sans-serif;
padding-left: .5rem;
}
nav.zs-menu > a {
float:left;
display: block;
text-align: center;
padding:.41rem .5rem;
text-decoration: none;
color:black;
}
nav.zs-menu > a:hover, .zs-dropdown:hover button { background-color: hsl(210, 28%, 80%) }
nav.zs-menu form { float: right }
nav.zs-menu form input[type=text] {
padding: .12rem;
border: none;
margin-top: .25rem;
margin-right: .5rem;
}
.zs-dropdown {
float: left;
overflow: hidden;
}
.zs-dropdown > button {
font-size: 16px;
border: none;
outline: none;
color: black;
padding:.41rem .5rem;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.zs-dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.zs-dropdown-content > a {
float: none;
color: black;
padding:.41rem .5rem;
text-decoration: none;
display: block;
text-align: left;
}
.zs-dropdown-content > a:hover { background-color: hsl(210, 28%, 75%) }
.zs-dropdown:hover > .zs-dropdown-content { display: block }
main { padding: 0 1rem }
article > * + * { margin-top: .5rem }
article header {
padding: 0;
margin: 0;
}
h1,h2,h3,h4,h5,h6 { font-family:sans-serif; font-weight:normal; margin:.4em 0 }
h1 { font-size:1.5em }
h2 { font-size:1.25em }
h3 { font-size:1.15em }
h4 { font-size:1.05em; font-weight: bold }
h5 { font-size:1.05em }
h6 { font-size:1.05em; font-weight: lighter }
p { margin: .5em 0 0 0 }
p.zs-meta-zettel { margin-top: .5em; margin-left: .5em }
li,figure,figcaption,dl { margin: 0 }
dt { margin: .5em 0 0 0 }
dt+dd { margin-top: 0 }
dd { margin: .5em 0 0 2em }
dd > p:first-child { margin: 0 0 0 0 }
blockquote {
border-left: .5em solid lightgray;
padding-left: 1em;
margin-left: 1em;
margin-right: 2em;
}
blockquote p { margin-bottom: .5em }
table {
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
}
td, th {text-align: left; padding: .25em .5em;}
th { border-bottom: 2px solid hsl(0, 0%, 70%); font-weight: bold }
td { border-bottom: 1px solid hsl(0, 0%, 85%) }
main form {
padding: 0 .5em;
margin: .5em 0 0 0;
}
main form:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
main form div { margin: .5em 0 0 0 }
input { font-family: monospace }
input[type="submit"],button,select { font: inherit }
label { font-family: sans-serif; font-size:.9rem }
textarea {
font-family: monospace;
resize: vertical;
width: 100%;
}
.zs-input {
padding: .5em;
display:block;
border:none;
border-bottom:1px solid #ccc;
width:100%;
}
input.zs-primary { float:right }
input.zs-secondary { float:left }
input.zs-upload {
padding-left: 1em;
padding-right: 1em;
}
a:not([class]) { text-decoration-skip-ink: auto }
a.broken { text-decoration: line-through }
a[rel~="external"]::after { content: "➚"; display: inline-block }
img { max-width: 100% }
img.right { float: right }
ol.zs-endnotes {
padding-top: .5em;
border-top: 1px solid;
}
kbd { font-family:monospace }
code,pre {
font-family: monospace;
font-size: 85%;
}
code {
padding: .1em .2em;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: .25em;
}
pre {
padding: .5em .7em;
max-width: 100%;
overflow: auto;
border: 1px solid #ccc;
border-radius: .5em;
background: #f0f0f0;
}
pre code {
font-size: 95%;
position: relative;
padding: 0;
border: none;
}
div.zs-indication {
padding: .5em .7em;
max-width: 100%;
border-radius: .5em;
border: 1px solid black;
}
div.zs-indication p:first-child { margin-top: 0 }
span.zs-indication {
border: 1px solid black;
border-radius: .25em;
padding: .1rem .2em;
font-size: 95%;
}
.zs-info {
background-color: lightblue;
padding: .5em 1em;
}
.zs-warning {
background-color: lightyellow;
padding: .5em 1em;
}
.zs-error {
background-color: lightpink;
border-style: none !important;
font-weight: bold;
}
td.left, th.left { text-align:left }
td.center, th.center { text-align:center }
td.right, th.right { text-align:right }
.zs-font-size-0 { font-size:75% }
.zs-font-size-1 { font-size:83% }
.zs-font-size-2 { font-size:100% }
.zs-font-size-3 { font-size:117% }
.zs-font-size-4 { font-size:150% }
.zs-font-size-5 { font-size:200% }
.zs-deprecated { border-style: dashed; padding: .2em }
.zs-meta {
font-size:.75rem;
color:#444;
margin-bottom:1em;
}
.zs-meta a { color:#444 }
h1+.zs-meta { margin-top:-1em }
nav > details { margin-top:1em }
details > summary {
width: 100%;
background-color: #eee;
font-family:sans-serif;
}
details > ul {
margin-top:0;
padding-left:2em;
background-color: #eee;
}
footer { padding: 0 1em }
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}