extra/webapps/wiki/wiki.css

   1 table {
   2     border-spacing: 0;
   3     border-collapse: collapse;
   4     table-layout: fixed;
   5 }
   6
   7 td {
   8     word-wrap: break-word;
   9 }
  10
  11 table.comparison {
  12     width: 100%;
  13 }
  14
  15 table.comparison th {
  16     width: 50%;
  17 }
  18
  19 table.comparison th, table.comparison td {
  20     border: 1px solid #ccc;
  21 }
  22
  23 .insert {
  24     background-color: #9f9;
  25     color: black;
  26 }
  27
  28 .delete {
  29     background-color: #f99;
  30     color: black;
  31 }
  32
  33 table.revisions {
  34     width: 100%;
  35 }
  36
  37 table.revisions td, table.revisions th {
  38     margin: 0;
  39     padding: 4px;
  40 }
  41
  42 table.revisions, table.revisions th, table.revisions td {
  43     border: 1px solid #ccc;
  44 }
  45
  46 /* Dark mode */
  47 @media (prefers-color-scheme: dark) {
  48     table.comparison, table.comparison th, table.comparison td {
  49         border-color: #666;
  50     }
  51
  52     table.revisions, table.revisions th, table.revisions td {
  53         border-color: #666;
  54     }
  55 }
  56
  57 .description {
  58     line-height: 150%;
  59 }
  60
  61 .description pre {
  62     padding: 5px;
  63     border: 1px dashed #ccc;
  64     background-color: #f5f5f5;
  65 }
  66
  67 .description h1 { font-size: 1.5em; }
  68 .description h2 { font-size: 1.17em; }
  69 .description h3 { font-size: 1.0em; }
  70 .description h4 { font-size: 0.83em; }
  71 .description h5 { font-size: 0.67em; }
  72
  73 .description p:first-child { margin-top: 0px; }
  74 .description p:last-child { margin-bottom: 0px; }
  75
  76 #left {
  77     position: absolute;
  78     top: 0;
  79     left: calc(min(100vw - 200px, 800px));
  80     width: 200px;
  81     z-index: 99;
  82     border: none;
  83     border-left: 1px dashed #ccc;
  84 }
  85
  86 #right {
  87     width: calc(100vw - 200px);
  88     max-width: calc(min(100vw - 230px, 770px));
  89 }
  90
  91 .contents {
  92     font-size: 90%;
  93     margin: 0;
  94     padding: 15px;
  95     padding-top: 0px;
  96     line-height: 130%;
  97 }
  98
  99 .contents ul {
 100     list-style-type: none;
 101     margin: 0;
 102     padding-left: 20px;
 103 }
 104
 105 .page nav {
 106     margin: -15px;
 107     margin-top: 0px;
 108     background: none;
 109 }
 110
 111 .page img {
 112     max-width: 100%;
 113 }
 114
 115 .page hr {
 116     height: 1px;
 117 }
 118
 119 nav img {
 120     margin-right: 5px;
 121     display: none;
 122 }
 123
 124 .page nav {
 125     width: calc(100vw - 200px);
 126     max-width: 800px;
 127     left: 0;
 128     border-top: 1px dashed #ccc;
 129     border-bottom: 1px dashed #ccc;
 130     margin-top: 15px;
 131 }
 132
 133 .page footer {
 134     padding: 15px;
 135     padding-left: 0;
 136     padding-right: 0;
 137     font-size: smaller;
 138 }
 139
 140 @media screen and (max-width: 600px) {
 141     #left {
 142         position: absolute;
 143         display: none;
 144         left: 0;
 145         top: 0;
 146         background: #f5f5f5;
 147         border: none;
 148         border-right: 1px solid #ccc;
 149         border-bottom: 1px solid #ccc;
 150         padding-top: 0px;
 151         box-shadow: 5px 5px 10px #aaa;
 152     }
 153
 154     #right {
 155         width: 100%;
 156         max-width: 100%;
 157     }
 158
 159     nav img {
 160         display: inline;
 161     }
 162
 163     .page {
 164         width: 100%;
 165     }
 166
 167     .page nav {
 168         width: 100vw;
 169     }
 170 }
 171
 172 /* Dark mode */
 173 @media (prefers-color-scheme: dark) {
 174     nav img {
 175         filter: invert(80%);
 176     }
 177
 178     #left {
 179         border: none;
 180         border-left: 1px dashed #666;
 181     }
 182
 183     .description pre {
 184         color: black;
 185     }
 186
 187     .page nav {
 188         border-top: 1px dashed #666;
 189         border-bottom: 1px dashed #666;
 190     }
 191 }
 192
 193 @media screen and (max-width: 600px) and (prefers-color-scheme: dark) {
 194
 195     #left {
 196         background-color: #373e48;
 197         border: none;
 198         border-right: 1px solid #666;
 199         border-bottom: 1px solid #666;
 200         box-shadow: 5px 5px 10px #333;
 201     }
 202 }