papyrus.css

   1 /*      Papyrus skin for PmWiki
   2         Copyright 2017-2021 Said Achmiz
   3
   4         https://www.pmwiki.org/wiki/Skins/Papyrus
   5
   6         Version: 2021-12-12
   7         */
   8
   9 /*************/
  10 /* VARIABLES */
  11 /*************/
  12
  13 :root {
  14         --papyrus-sidebar-width: 200px;
  15         --papyrus-sidebar-padding: 10px;
  16         --papyrus-content-padding: 20px;
  17         --papyrus-page-header-height: 50px;
  18 }
  19
  20 /***********/
  21 /* GENERAL */
  22 /***********/
  23
  24 html {
  25         font-size: 16px;
  26
  27         box-sizing: border-box;
  28 }
  29 *, *::before, *::after {
  30         box-sizing: inherit;
  31 }
  32
  33 /*==========*/
  34 /*= Layout =*/
  35 /*==========*/
  36
  37 body {
  38         margin: 0;
  39         padding: 0;
  40         display: grid;
  41         grid-template:
  42                 var(--papyrus-page-header-height) 1fr /
  43                 1fr var(--papyrus-sidebar-width);
  44         grid-template-areas:
  45                 "header header"
  46                 "main sidebar";
  47 }
  48
  49 @media only screen and (max-width: 900px) {
  50         :root {
  51                 --papyrus-content-padding: 10px;
  52         }
  53         body {
  54                 grid-template:
  55                         auto 1fr auto /
  56                         100%;
  57                 grid-template-areas:
  58                         "header"
  59                         "main"
  60                         "sidebar";
  61         }
  62 }
  63
  64 /*===========*/
  65 /*= Styling =*/
  66 /*===========*/
  67
  68 body {
  69         font-family: Verdana, Arial, sans-serif;
  70         background-color: Beige;
  71         background-image: url('papyrus.jpg');
  72         tab-size: 4;
  73 }
  74
  75 #main,
  76 #sidebar,
  77 #header {
  78         font-size: 0.75rem;
  79 }
  80
  81 /****************/
  82 /* MAIN CONTENT */
  83 /****************/
  84
  85 #main {
  86         grid-area: main;
  87
  88         padding: var(--papyrus-content-padding);
  89         display: flex;
  90         flex-flow: column;
  91         min-width: 0;
  92 }
  93
  94 /*======================*/
  95 /*= Page title & group =*/
  96 /*======================*/
  97
  98 #pageTitle {
  99         overflow: auto;
 100         position: relative;
 101         z-index: 1;
 102         margin-bottom: 20px;
 103         font-weight: bold;
 104 }
 105 #pageTitle a {
 106         font-weight: bold;
 107 }
 108
 109 /*===============*/
 110 /*= Page footer =*/
 111 /*===============*/
 112
 113 #footer {
 114         margin: 30px 0 0 0;
 115         border-color: #ccc;
 116         border-style: dotted;
 117         border-width: 1px 0 0 0;
 118         padding: 1px 12px 0 0;
 119         display: flex;
 120         flex-flow: row wrap;
 121 }
 122
 123 #footer .page-actions {
 124         margin: 0 12px 0 1px;
 125 }
 126
 127 @media only screen and (max-width: 900px) {
 128         #footer {
 129                 border-width: 1px 0;
 130                 padding: 2px 0;
 131                 justify-content: space-around;
 132                 align-items: center;
 133                 font-size: 0.875rem;
 134         }
 135         #footer .page-actions {
 136                 text-align: center;
 137                 margin: 2px;
 138         }
 139         #footer a {
 140                 display: inline-block;
 141                 padding: 5px 3px;
 142         }
 143         #footer a::before {
 144                 content: "[ ";
 145         }
 146         #footer a::after {
 147                 content: " ]";
 148         }
 149 }
 150
 151 /*==================*/
 152 /*= Wiki page text =*/
 153 /*==================*/
 154
 155 #wikitext {
 156         line-height: 1.5;
 157         hyphens: auto;
 158 }
 159
 160 #wikitext p {
 161         margin: 1em 0;
 162 }
 163
 164 /**********/
 165 /* HEADER */
 166 /**********/
 167
 168 #header {
 169         grid-area: header;
 170
 171         display: flex;
 172 }
 173
 174 /*=============*/
 175 /*= Page logo =*/
 176 /*=============*/
 177
 178 #pageLogo {
 179         padding: 10px;
 180 }
 181 #pageLogo img {
 182         max-width: 100%;
 183         max-height: 100%;
 184 }
 185
 186 /*================*/
 187 /*= Page actions =*/
 188 /*================*/
 189
 190 #pageActions {
 191         padding: 5px 10px 0 0;
 192         flex: 1 1 auto;
 193 }
 194 #pageActions ul {
 195         display: flex;
 196         list-style-type: none;
 197         list-style-image: none;
 198         margin: 0;
 199         padding: 0;
 200         justify-content: flex-end;
 201 }
 202 #pageActions li {
 203         margin: 0 0 0 10px;
 204 }
 205
 206 @media only screen and (max-width: 900px) {
 207         #header {
 208                 border-bottom: 1px solid #ccc;
 209                 flex-flow: row wrap;
 210         }
 211         #pageLogo {
 212                 flex-basis: calc(var(--papyrus-page-header-height) + var(--papyrus-sidebar-width) + 10px);
 213                 height: var(--papyrus-page-header-height);
 214         }
 215         #pageActions {
 216                 align-self: center;
 217                 padding: 10px;
 218         }
 219         #pageActions li {
 220                 margin: 2px;
 221         }
 222         #pageActions a {
 223                 display: inline-block;
 224                 border: 1px solid #ccc;
 225                 padding: 3px 6px;
 226         }
 227 }
 228
 229 /***********/
 230 /* SIDEBAR */
 231 /***********/
 232
 233 #sidebar {
 234         grid-area: sidebar;
 235
 236         padding: var(--papyrus-sidebar-padding);
 237         line-height: 1.5;
 238 }
 239
 240 .sidehead,
 241 .sidehead a {
 242         font-weight: bold;
 243 }
 244
 245 #sidebar p {
 246         margin: 20px 2px 2px 2px;
 247         font-size: 1.1em;
 248 }
 249 #sidebar ul {
 250         list-style-type: none;
 251         padding: 0px;
 252         margin: 0px;
 253 }
 254 #sidebar li {
 255         padding-left: 6px;
 256 }
 257
 258 @media only screen and (max-width: 900px) {
 259         #sidebar ul {
 260                 font-size: 0.875rem;
 261                 line-height: 1.8;
 262                 display: flex;
 263                 flex-flow: row wrap;
 264                 justify-content: center;
 265         }
 266         #sidebar li {
 267                 flex: 1 1 auto;
 268                 text-align: center;
 269                 padding: 0;
 270         }
 271         #sidebar li a {
 272                 display: block;
 273                 background-color: #c3571b;
 274                 color: Beige;
 275                 padding: 5px 8px;
 276                 margin: 3px;
 277         }
 278         #sidebar ul li:only-child a {
 279                 max-width: 50%;
 280                 margin: 3px auto;
 281         }
 282 }
 283
 284 /*======================*/
 285 /*= Sidebar search box =*/
 286 /*======================*/
 287
 288 #sideSearch {
 289         margin: 20px 0 0 0;
 290         display: flex;
 291         align-items: stretch;
 292 }
 293 #sideSearch .searchbox {
 294         flex: 1 1 auto;
 295 }
 296 #sideSearch .searchbutton {
 297         color: transparent;
 298         width: 2.5em;
 299         padding: 0;
 300         margin: 0 0 0 2px;
 301         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAAAAAC4QtCeAAAAAnRSTlMA/1uRIrUAAABpSURBVHgBY/j//+7c2tq5d/8DAcP//TlgsB/EuZuXv+fjxz35efeBnElgMaD8FCCnLOcLiPMlpwyZU4yiDGLAwU+fDoIMQBidswvIAVlaXT23GsgDciDgfSeQB+P8/zkzZxWc8//vtc8AJiB5qbEm4UgAAAAASUVORK5CYII=');
 302         background-position: center center;
 303         background-repeat: no-repeat;
 304         font-size: inherit;
 305         cursor: pointer;
 306 }
 307
 308 @media only screen and (max-width: 900px) {
 309         #sideSearch {
 310                 position: absolute;
 311                 top: 0;
 312                 left: var(--papyrus-page-header-height);
 313                 height: var(--papyrus-page-header-height);
 314                 padding: calc((var(--papyrus-page-header-height) - 1.5rem) / 2);
 315                 margin: 0 20px;
 316         }
 317 }
 318
 319 /*************/
 320 /* EDIT VIEW */
 321 /*************/
 322
 323 #wikiedit textarea {
 324         font-size: inherit;
 325         width: 100%;
 326         min-height: calc(100vh - 360px);
 327 }
 328
 329 #wikiedit input[type='text'],
 330 #wikiedit input[type='submit'] {
 331         -webkit-appearance: none;
 332         -moz-appearance: none;
 333 }
 334 #wikiedit .edit-summary input[type='text'] {
 335         width: 100%;
 336 }
 337
 338 .preview-warning {
 339         color: #c00;
 340         font-weight: bold;
 341         font-size: 1.25em;
 342 }
 343 #wikitext .preview-begin,
 344 #wikitext .preview-end {
 345         text-align: center;
 346         text-transform: uppercase;
 347         font-weight: bold;
 348         color: #c00;
 349 }
 350 #wikitext .preview-begin {
 351         border-bottom: 2px solid #c00;
 352 }
 353 #wikitext .preview-end {
 354         border-top: 2px solid #c00;
 355 }
 356
 357 #wikiedit .edit-action-buttons {
 358         display: flex;
 359         justify-content: center;
 360 }
 361 #wikiedit .edit-action-buttons input {
 362         margin: 0 4px;
 363 }
 364
 365 #wikiedit input {
 366         font-size: 1.125rem;
 367 }
 368
 369 @media only screen and (max-width: 900px) {
 370         #wikiedit input {
 371                 font-size: 1.25rem;
 372         }
 373 }
 374
 375 /*===================*/
 376 /*= GUIEdit buttons =*/
 377 /*===================*/
 378
 379 @media only screen and (max-width: 900px) {
 380         #wikiedit .guibuttons {
 381                 margin: 0 0 4px 0;
 382         }
 383         #wikiedit .guibuttons a,
 384         #wikiedit .guibuttons > img {
 385                 margin: 2px;
 386                 padding: 6px;
 387                 display: inline-block;
 388                 vertical-align: text-bottom;
 389                 border: 1px solid #ddd;
 390                 background-color: #fff;
 391         }
 392 }
 393
 394 /*========================*/
 395 /*= Edit quick reference =*/
 396 /*========================*/
 397
 398 #wikitext .quickref {
 399         display: flex;
 400         flex-flow: row wrap;
 401         margin: 1em 0;
 402         color: #444;
 403         border-style: solid;
 404         border-color: #bbb;
 405         border-width: 1px 0;
 406         hyphens: none;
 407 }
 408
 409 #wikitext .quickref p {
 410         flex: 1 1 50%;
 411         padding: 0.5em 0.25em;
 412         margin: 0;
 413 }
 414 #wikitext .quickref p:nth-last-of-type(n+2) {
 415         border-bottom: 1px solid #ddd;
 416 }
 417 #wikitext .quickref p:nth-of-type(2n) {
 418         text-align: right;
 419 }
 420
 421 #wikitext .quickref strong {
 422         color: #000;
 423 }
 424 #wikitext .quickref code.escaped {
 425         font-weight: bold;
 426         color: #b00;
 427         padding: 0 1px;
 428         text-shadow: 0.5px 0.5px 0.5px #f88;
 429         font-size: 1.1em;
 430 }
 431 #wikitext .quickref code.escaped + code.escaped {
 432         margin: 0 0 0 -2px;
 433 }
 434
 435 /**********/
 436 /* FRAMES */
 437 /**********/
 438
 439 .frame {
 440         border: 1px solid #cccccc;
 441         padding: 4px;
 442         background-color: #f9f9f9;
 443         max-width: 50%;
 444 }
 445
 446 .lfloat {
 447         float: left;
 448         margin-right: 0.5em;
 449 }
 450
 451 .rfloat {
 452         float: right;
 453         margin-left: 0.5em;
 454 }
 455
 456 /*********/
 457 /* LINKS */
 458 /*********/
 459
 460 a {
 461         text-decoration: none;
 462         font-weight: normal;
 463         color: #a74000;
 464 }
 465 #wikitext a {
 466         overflow-wrap: break-word;
 467         word-break: break-all;
 468 }
 469
 470 a:visited {
 471         text-decoration: none;
 472         font-weight: normal;
 473 }
 474 #wikitext a:visited {
 475         color: #765193;
 476 }
 477
 478 a:hover {
 479         text-decoration: underline;
 480         color: #e00004;
 481 }
 482
 483 a.createlinktext {
 484         color: red;
 485 }
 486
 487 /*********/
 488 /* LISTS */
 489 /*********/
 490
 491 ul {
 492         list-style-type: square;
 493         margin: 0px 0px 10px 10px;
 494         padding-left: 10px;
 495 }
 496
 497 /********/
 498 /* MISC */
 499 /********/
 500
 501 hr {
 502         height: 0;
 503         border-width: 0;
 504         border-bottom: 1px solid #aaa;
 505 }
 506
 507 h2 {
 508         font-size: 1.7em;
 509         font-weight: normal;
 510 }
 511
 512 .frame h2 {
 513         margin-top: 0;
 514 }
 515
 516 pre {
 517         white-space: pre-wrap;
 518 }
 519
 520 code {
 521         font-size: inherit;
 522 }
 523
 524 input {
 525         font-size: inherit;
 526         font-family: inherit;
 527         font-weight: inherit;
 528         font-variant: inherit;
 529 }