git.squeep.com Git - webmention-receiver/blob - static/theme.css

   1 html {
   2         height: 100vh;
   3 }
   4 body {
   5         background-color: #fff;
   6         font-family: Helvetica, Verdana, sans-serif;
   7         margin: 0 1em 0 1em;
   8         min-height: 100vh;
   9         display: flex;
  10         flex-direction: column;
  11 }
  12 header {}
  13 header nav {
  14         margin-bottom: 1em;
  15 }
  16 header nav ol {
  17         list-style-type: none;
  18         margin: 0;
  19         padding: 0;
  20 }
  21 header nav ol li {
  22         display: inline;
  23         text-align: center;
  24         border-top: 2px solid #666;
  25         border-bottom: 2px solid #666;
  26         border-left: 1px solid #666;
  27         border-right: 1px solid #666;
  28         padding: .3em .5em .2em .5em;
  29 }
  30 header nav ol li:hover {
  31         background-color: #ddd;
  32 }
  33 header nav ol > li:first-child {
  34         border-left: 2px solid #666;
  35 }
  36 header nav ol > li:last-child {
  37         border-right: 2px solid #666;
  38 }
  39 header nav ol a {
  40         font-variant-caps: small-caps;
  41         text-decoration: none;
  42         font-weight: bold;
  43 }
  44 h1 {
  45         margin-top: 1em;
  46         margin-bottom: 1.25em;
  47         text-align: center;
  48 }
  49 h2 {
  50         background-color: #ddd;
  51         padding: .25em 0 .1em 0.25em;
  52 }
  53 main {
  54         flex-grow: 1;
  55 }
  56 section {}
  57 .logo {
  58         vertical-align: middle;
  59         height: 2em;
  60 }
  61 .about {}
  62 .usage {}
  63 .copyright {
  64         font-size: small;
  65 }
  66 .error ul {
  67         font-weight: bolder;
  68         border: 2px solid red;
  69         padding: 1em;
  70         background-color: lightsalmon;
  71 }
  72 .notification ul {
  73         background-color: aliceblue;
  74         border: 1px solid slateblue;
  75         padding: 1em;
  76 }
  77 .external {
  78         background-image: url("external-link.svg");
  79         background-position: right center;
  80         background-repeat: no-repeat;
  81         padding-right: 13px;
  82 }
  83 .information img {
  84         max-width: 4em;
  85         max-height: 4em;
  86         width: 100%;
  87         height: auto;
  88         vertical-align: middle;
  89 }
  90 .uri {
  91         font-family: Courier, monospace, serif;
  92         font-size: 1em;
  93         background-color: lavender;
  94         padding: .16em;
  95 }
  96 .code {
  97         font-family: Courier, monospace, serif;
  98         font-size: .75em;
  99         white-space: nowrap;
 100         overflow-x: hidden;
 101 }
 102 .client-identifier {
 103         display: inline-block;
 104         height: max-content;
 105         padding: .5em;
 106         border: 1px dotted #999;
 107         margin-bottom: .5em;
 108 }
 109 .scope {
 110         list-style-type: none;
 111 }
 112 .scope label {
 113         font-variant: small-caps;
 114         font-weight: bold;
 115 }
 116 .scope .description {
 117         font-size: smaller;
 118         font-style: italic;
 119 }
 120 .scope .disabled {
 121         color: grey;
 122         background-color: #eee;
 123 }
 124 .form-consent button {
 125         border-width: thick;
 126         font-size: x-large;
 127         padding: .5em;
 128         margin-left: .75em;
 129         margin-right: .75em;
 130 }
 131 .button-accept {
 132         background-color: lightgreen;
 133         border-color: lightgreen;
 134 }
 135 .button-decline {
 136         background-color: salmon;
 137         border-color: salmon;
 138 }
 139 .vertical {
 140         writing-mode: vertical-lr;
 141         vertical-align: bottom;
 142 }
 143 table {
 144         border: 0;
 145         width: 100%;
 146 }
 147 thead tr th {
 148         background-color: #ddd;
 149         vertical-align: bottom;
 150         text-align: start;
 151 }
 152 tbody tr th {
 153         text-align: start;
 154 }
 155 tbody tr:nth-child(even) td, tbody tr:nth-child(even) th {
 156         background-color: #eee;
 157 }
 158 tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th {}
 159 footer {
 160         text-align: center;
 161         width: 100%;
 162         border-top: .33em dotted #666;
 163         margin-top: 1em;
 164 }
 165 footer ol {
 166         list-style-type: none;
 167         margin: .5em;
 168         padding: 0;
 169 }
 170 .centered {
 171         text-align: center;
 172 }