ShaarliGo/static/themes/current/style.css

@font-face {
 font-family:B612;
 font-style:normal;
 src:url(./B612-Regular.woff2) format("woff2"),url(./B612-Regular.woff) format("woff")
}
@font-face {
 font-family:B612;
 font-style:italic;
 src:url(./B612-Italic.woff2) format("woff2"),url(./B612-Italic.woff) format("woff")
}
@font-face {
 font-family:B612;
 font-style:normal;
 font-weight:700;
 src:url(./B612-Bold.woff2) format("woff2"),url(./B612-Bold.woff) format("woff")
}
@font-face {
 font-family:B612;
 font-style:italic;
 font-weight:700;
 src:url(./B612-BoldItalic.woff2) format("woff2"),url(./B612-BoldItalic.woff) format("woff")
}

:root {
  color-scheme: light dark;

  --bgRough: hsl(30,0%,93%);
  --bgFairway: hsl(30, 45%, 90%);
  --text-color: hsl(30, 50%, 44%);
  --link-color: hsl(115, 100%, 25%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bgRough: #111;
    --bgFairway: #111;
    --text-color: hsl(30, 35%, 59%);
    --link-color: hsl(115, 50%, 43%);
  }
}

html {
  font-family: B612, sans-serif, Optima, Candara, Calibri, Arial, sans-serif;
  line-height: 1.5;
  font-size: 12pt;
}
html, input, textarea, .awesomplete > ul, .awesomplete > ul > li {
  background: var(--bgRough);
  color: var(--text-color);
}
body, .awesomplete > ul > li:hover {
  background: var(--bgFairway);
}
h2 {
  font-size: 2.5em;
  margin: 0;
}
h3 {
  font-size: 1.2em;
  margin: .1ex 0 .1ex 0;
}
body {
  margin: auto;
  max-width: 45rem;
  min-height: 500px;
  padding: 1ex;
}
#footer {
  margin-top: 2.5ex;
}
.manytags body {
  max-width: initial;
}
button, .btn, a:any-link {
  color: var(--link-color);
  text-decoration: none;
}
#do-post {
  margin-top: -1rem;
}
form, table {
  margin: 1ex 0;
}
table {
  margin-top: 2ex;
}
ol {
  list-style: none;
  padding: 0;
}
ol > li {
  clear: both;
  margin: 3ex 0;
  padding: 1.0ex 0;
}
ol > li > h3 img {
  display: none;
  border: 1px dotted black;
  float: right;
  max-height: 120px;
  max-width: 120px;
}
p {
  hyphens: auto;
  margin: .2ex 0;
  -moz-hyphens: auto;
  overflow: hidden;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
}
p#tags {
  line-height: 1;
}
/* a[data-count="1"] { display: none } */
img.qrcode {
  background: hsl(115, 100%, 35%);
  height: 27px;
  width: 27px;
}
.btn, button, input, textarea {
  border: 1px solid darkgrey;
  border-radius: 4px;
  min-height: 3.5ex;
}
input, textarea {
  font: inherit;
  margin: .5ex 0;
  padding: 0 1ex;
  width: 97%;
}
button, .btn {
  background: hsl(30, 80%, 80%);
  padding: 1ex;
}
button {
  font: inherit;
  min-width: 14ex;
  padding: .5ex;
}
button[name='delete_edit'] {
  background: hsla(0, 99%, 50%, 0.75);
}
table {
  width: 100%;
}
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

/* https://www.w3schools.com/Css/css_float.asp */
.clearfix::after {
  clear: both;
  content: "";
  display: table;
}
@media only screen and (max-width: 600px) {
  .hidden-xs { display: none; }
}


.hidden-logged-in { display:initial; }
.logged-in .hidden-logged-in { display:none; }
.visible-logged-in { display:none; }
.logged-in .visible-logged-in { display:initial; }

.hidden-logged-out { display:initial; }
.logged-out .hidden-logged-out { display:none; }
.visible-logged-out { display:none; }
.logged-out .visible-logged-out { display:initial; }

/* This is a workaround for Browsers that insert additional br tags.
 * See http://purl.mro.name/safari-xslt-br-bug */
.rendered.type-text br { display:none; }
.rendered.type-text br.br { display:inline; }


div.awesomplete {
  display: block;
}
.awesomplete > ul > li[aria-selected="true"] {
  background: hsl(30, 60%, 83%);
}
.awesomplete mark, .awesomplete li:hover mark, .awesomplete li[aria-selected="true"] mark {
  background: inherit;
  color: inherit;
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  .btn, button {
    background: hsla(30, 60%, 60%, 0.40);
  }
  .btn, button, input, textarea {
    border-color: #777;
  }
  .awesomplete > ul > li[aria-selected="true"] {
    background: hsl(30, 60%, 23%);
  }
  img {
    filter: grayscale(30%);
  }
}

.disabled {
  opacity: 40%;
  pointer-events: none;
}