seppo/res/static/themes/current/style.css

/*
      _  _   ____                         _  
    _| || |_/ ___|  ___ _ __  _ __   ___ | | 
   |_  ..  _\___ \ / _ \ '_ \| '_ \ / _ \| | 
   |_      _|___) |  __/ |_) | |_) | (_) |_| 
     |_||_| |____/ \___| .__/| .__/ \___/(_) 
                       |_|   |_|             

  Personal Social Web.

  Copyright (C) The #Seppo contributors. All rights reserved.

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

/* maybe mitigate the white flash via https://www.w3.org/Style/styling-XML.en.html */
:root {
  color-scheme: light dark;

  --bgRough: hsl(30,0%,93%);
  --bgFairway: hsl(30, 45%, 91%);
  --bg-color-entry: hsl(30, 45%, 88%);
  --btn-color: var(--bgRough);
  --text-color: hsl(30, 50%, 44%);
  --link-color: hsl(200, 50%, 44%);
  --link-color: hsl(206, 62%, 48%); /* https://css.land/lch/ from text-color -> blue*/
  --GW-dotted-underline-background-image: url('data:image/gif;base64,R0lGODlhBAACAPAAMYiIiP///ywAAAAABAACAAACBAQShgUAOw==');
  --GW-link-underline-gradient-line-color: var(--link-color);
 }
@media (prefers-color-scheme: dark) {
  :root {
    --bgRough: #111;
    --bgFairway: #111;
    --bg-color-entry: #222;
    --btn-color: var(--bg-color-entry);
    --text-color: hsl(30, 35%, 59%);
  }
}

.script-active .noscript {
  display: none;
}

html {
  font-family: sans-serif;
  line-height: 1.5;
  font-size:   1rem;
}
html, input, textarea, .awesomplete > ul, .awesomplete > ul > li {
  background: var(--bgRough);
  color: var(--text-color);
}
body, .awesomplete > ul > li:hover {
  background: var(--bgFairway);
}
h1, .h1 {
  font-size:   2rem;
  font-weight: bold;
  line-height: 4rem;
}
h2, .h2 {
  font-size:   1.8rem;
  font-weight: bold;
  margin:      0;
}
body {
  margin:     auto;
  max-width:  704px;
  min-height: 500px;
  padding:    8px;
}
#header {
}
div#banner {
  /* background-size: 100% 100%; */
  background-color: darkgrey;
  border-radius: 1ex;
  height: 240px;
  margin: -8px -8px 0px -8px;
  max-width:  720px;
}
#banner #banner-img {
  height: 240px;
  position: relative;
}
/* img rather than background because 3rd paty actors bring the url late */
#banner #banner-img img {
  border-radius: 8px;
  height: 240px;
  position: absolute;
  width: 720px;
}
div#title {
}
div#avatar {
  position: relative;
  top: -.5em;
}
#avatar img {
  background-color: darkgrey;
  border-radius: 48px;
  border:        3px solid var(--bgRough);
  float:         right;
  height:        96px;
  position:      relative;
  width:         96px;
}
form {
  /* margin: .5rem 0; */
}
#footer {
  margin-top: 2rem;
}
#footer, .footer {
  margin-bottom: 0;
}
#footer > a > img {
  border: none;
  height: 27px;
  opacity: 0.6;
}
.manytags body {
  max-width: initial;
}
a:any-link {
  /* gentle underlines https://www.gwern.net/Design */
  /* background-image: linear-gradient(var(--GW-link-underline-gradient-line-color), var(--GW-link-underline-gradient-line-color)); */
  /* background-image: var(--GW-dotted-underline-background-image); */
  /* background-position: 0% 100%;
  background-repeat: repeat-x;
  background-size: 1px 0.1ex; */
  border-bottom: 0.125em dotted var(--GW-link-underline-gradient-line-color);
  text-decoration: none;
}
a:any-link, label, button, input[type="checkbox"], input[type="submit"] {
  color:   var(--link-color);
  cursor:  pointer;
}
button, input, textarea, a[role="button"], label[role="button"] {
  background:    var(--btn-color);
  border-radius: .6em;
  border:        1px solid darkgrey;
  display:       inline-block;
  font:          inherit;
  margin:        .25em;
  opacity:       99%;   /* workaround disappering in dark mode */
  padding:       .4em .6em;
}
button {
  min-width: 10em;
}
input, textarea {
  width: calc(100% - 2 * .5em - .75em); /* also makes the subscribe button line wrap */
}
textarea {
  height: initial;
}
button[name='delete_edit'] {
  background: hsla(0, 99%, 50%, 0.75);
}
form[name=loginform] > a, #link_login, #link_logout {
  float: right;
}
#link_logout > span {
  display: inline-block;
  text-align: center;
  width: calc(7.5em - 2.5em);
}
form.combined input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  float: left;
  margin-right: 0;
  position: relative;
  width: calc(100% - 2 * .5em - .75em - 2px - 7.5em);
  z-index: 1; /* focussed border above the button */
}
form.combined > button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left: none;
  float: left;
  margin-left: 0;
  width: 7.5em;
  min-width: initial;
}
input.is-invalid {
  border: 3px solid red;
}

p#tags.categories > a.tag[data-count="1"] {
  display:none;
}
p#tags {
  display:none;
}
#do-post {
  margin-top: -1rem;
}
#notifyme {
  padding: .25rem;
}
#entries, .nobullet {
  list-style: none;
  padding: 0;
}
#entries > li {
  clear: both;
  background: var(--bg-color-entry);
  border-radius:    0.5em;
  margin:           1.5em 0;
  padding:          0.35em;
}
#entries > li > h3 {
  margin: 0;
}
#entries > li > h3 img {
  display: none;
  border: 1px dotted black;
  float: right;
  max-height: 120px;
  max-width: 120px;
}
p {
  hyphens: auto;
  -moz-hyphens: auto;
  overflow: hidden;
  overflow-wrap: break-word;
  padding: 0.1em;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
}
p#tags {
  line-height: 1;
}
#snippets button {
  border:     none;
  min-width:  1.5em;
  padding:    .2em;
  margin:     .05em;
  background: initial;
}
#snippets button:hover {
  background: rgba(255,255,255,0.5);
}
#snippets button.border {
  border: thin solid lightgrey;
}
/* a[data-count="1"] { display: none } */
img.qrcode {
  background: hsl(115, 100%, 35%);
  height: 27px;
  width: 27px;
}
#banner form {
  padding: .25em;
  margin-top: -240px;
}
label {
  text-transform: capitalize;
}
ol[aria-label="pagination"] {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding-left: 0;
  width: 100%;
}

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


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) {
  .awesomplete > ul > li[aria-selected="true"] {
    background: hsl(30, 60%, 23%);
  }
  img {
    filter: grayscale(20%);
  }
}

[aria-disabled="true"], a[role="button"][aria-disabled="true"], [disabled], a[role="button"][disabled] {
  filter: grayscale(100%);
  opacity: 60%;
  pointer-events: none;
}

#head-grid {
  margin-bottom: calc(8.5rem - 4px);
  margin-top: calc(-15.5rem + 4px);
  padding: .5rem .25rem;
}
#head-grid a {
  height: 1.6em;
}
#form_notifyme {
  display: inline;
}
.logged-in #form_notifyme {
  display: none;
}
#form_notifyme input {
  width: initial;
}

#subscribers ol {
  list-style: none;
  padding: 0;
}
#subscribers li {
  padding: .25em;
}
#subscribers input {
  /* display:    inline; */
  height:     initial;
  min-height: initial;
  width:      initial;
}
#subscribers input[type="submit"] {
}
#subscribers li img {
  border-radius: 1rem;
  height:        2rem;
  margin-bottom: -.5rem;
  margin-left:   .5rem;
  margin-right:  .5rem;
  width:         2rem;
}

*.shaded *.noshade {
  display: none;
}
*.shaded *.noshade.highlight {
  display: initial;
}

li iframe {
  display: none;
  width:   calc(100% - 2px);
}
li.highlight iframe {
  display: initial;
}

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

.hidden-logged-out { display:initial; }
.visible-logged-out { display:none; }
.logged-out .hidden-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; }