webcit-ng/static/css/webcit.css

   1 /*
   2         Copyright (c) 1996-2023 by Art Cancro and the citadel.org team.
   3         This program is open source software.  Use, duplication, or disclosure
   4         are subject to the terms of the GNU General Public License, version 3.
   5 */
   6
   7 * {                                             /* This makes grids consume exactly 100% of their parent containers */
   8         box-sizing: border-box;
   9         padding: 0;
  10         margin: 0;
  11 }
  12
  13 [contenteditable]:focus {
  14         outline: 0px solid transparent;
  15 }
  16
  17 .ctdl-main-grid-container {                     /* This grid implements the "holy grail layout" of the screen */
  18         display: grid;
  19         grid-template-rows: 5vh auto;
  20         grid-template-columns: 12vw auto;
  21         grid-template-areas:
  22                 'ctdl-mg-banner ctdl-mg-banner'
  23                 'ctdl-mg-menu ctdl-mg-main';
  24         gap: 1px;
  25         background-color: DarkSlateGrey;        /* This is the color of the lines between the boxes, and also the boxes themselves if not overridden */
  26         padding: 0;                             /* This is the border around the edges of the screen */
  27         width: 100vw;
  28         height: 100vh;
  29 }
  30
  31 .ctdl-grid-banner-item {                        /* Top banner, referenced by the grid container */
  32         grid-area: ctdl-mg-banner;
  33         background-color: DarkSlateGrey;
  34 }
  35
  36 .ctdl-grid-sidebar-item {                       /* Side bar, referenced by the grid container */
  37         grid-area: ctdl-mg-menu;
  38         background-color: GhostWhite;
  39 }
  40
  41 .ctdl-grid-main-item {                          /* Main content area of the screen, referenced by the grid container */
  42         grid-area: ctdl-mg-main;
  43         overflow-x: hidden;
  44         overflow-y: auto;
  45 }
  46
  47 .ctdl-main-grid-container > div {
  48         text-align: left;
  49 }
  50
  51 .ctdl-banner-buttons {                          /* Flexbox container for everything we stick into the banner */
  52         display: flex;
  53         flex-direction: row;
  54         flex-wrap: nowrap;
  55         justify-content: space-between;
  56         align-items: center;
  57         margin: 0;
  58         width: 100%;
  59         height: 100%;
  60         overflow: hidden;
  61 }
  62
  63 .ctdl-banner-left {                             /* Items which should be grouped to the LEFT side of the banner */
  64         display: flex;
  65         flex-direction: row;
  66         flex-wrap: nowrap;
  67         align-items: center;
  68 }
  69
  70 .ctdl-banner-center {                           /* Items which should be grouped to the MIDDLE of the banner */
  71         display: flex;
  72         flex-direction: row;
  73         flex-wrap: nowrap;
  74         align-items: center;
  75 }
  76
  77 .ctdl-banner-right {                            /* Items which should be grouped to the RIGHT side of the banner */
  78         display: flex;
  79         flex-direction: row;
  80         flex-wrap: nowrap;
  81         align-items: center;
  82 }
  83
  84 .ctdl-banner-buttons li, .ctdl-banner-buttons li button {
  85         float: left;
  86         display: block;
  87         background-color: DarkSlateGrey;
  88         color: White;
  89         font-size: 1.7vh;
  90         border: none;
  91         padding: 1vh;
  92 }
  93
  94 .ctdl-banner-buttons li button:hover {
  95         background-color: Black;
  96 }
  97
  98 .ctdl-banner-buttons a {                        /* For example, the Login / Log Off button */
  99         color: White;
 100 }
 101
 102 .ctdl-banner-buttons span {                     /* For example, the name of the logged in user */
 103         color: White;
 104 }
 105
 106 .ctdl-logo-img {
 107         background-color: White;
 108         border-radius: 5px;
 109         padding-bottom: 3px;
 110         padding-left: 3px;
 111         padding-right: 3px;
 112 }
 113
 114 html,body,h1,h2,h3,h4,h5 {
 115         font-family: sans-serif
 116 }
 117
 118 .ctdl-modal {
 119         display: none;                          /* set to "block" to make the modal appear */
 120         z-index: 9;
 121         position: fixed;
 122         top: 50%;
 123         left: 50%;
 124         transform: translate(-50%, -50%);
 125         border-style: outset;
 126         border-width: 3px;
 127         border-color: Black;
 128         justify-content: center;
 129         align-items: center;
 130         padding: 10px;
 131         background-color: GhostWhite;
 132 }
 133
 134 .ctdl-modal-header {
 135         background-color: GhostWhite;
 136         padding: 10px;
 137 }
 138
 139 .ctdl-modal-main {
 140         padding: 10px;
 141 }
 142
 143 .ctdl-modal-footer {
 144         background-color: GhostWhite;
 145         padding: 10px;
 146 }
 147
 148 .ctdl-sidebar-button {
 149         width: 100%;
 150         padding: 10px;
 151         text-align: left;
 152         border: 1px solid GhostWhite;
 153         background-color: GhostWhite;
 154         color: Black;
 155         font-size: 1.5vh;
 156         border-radius: 5px;
 157 }
 158
 159 .ctdl-sidebar-button:hover {
 160         border-color: Blue;
 161 }
 162
 163 .ctdl-sidebar-button-selected {
 164         font-weight: bold;
 165         background-color: Gainsboro;
 166 }
 167
 168 .ctdl-grid-banner-item button {
 169         background-color: #888888;
 170         color: #FFFFFF;
 171 }
 172
 173 .ctdl-forum-reading-pane {
 174         background-color: White;        /* Background behind the message boxes */
 175 }
 176
 177 .ctdl-fmsg-wrapper {                            /* message wrapper for forum view */
 178         overflow: hidden;
 179         border-radius: 10px;
 180         background-color: White;
 181         margin: 1vw;
 182         padding: 5px;                           /* inside the box */
 183         border-radius: 10px;
 184         border-style: outset;
 185         border-width: thin;
 186 }
 187
 188 .ctdl-mmsg-wrapper {                            /* message wrapper for mailbox view */
 189         overflow: hidden;
 190         background-color: White;
 191         padding: 5px;                           /* inside the box */
 192 }
 193
 194 .ctdl-msg-reply {
 195         margin-left: 5vw;
 196 }
 197
 198 .ctdl-msg-header {
 199         overflow: hidden;
 200         padding: 4px;
 201         min-height: 35px;
 202         background-color: GhostWhite;
 203         margin-bottom: 10px;                    /* this is the vertical space between the header and the message text */
 204 }
 205
 206 .ctdl-msg-header-info {
 207         float: left;
 208 }
 209
 210 .ctdl-msg-header-buttons {
 211         float: right;
 212 }
 213
 214 .ctdl-msg-button {
 215         margin-left: 2px;
 216         border-radius: 5px;
 217         background-color: Blue;
 218         color: Black;
 219         padding: 2px;
 220         background-color: GhostWhite;
 221         border-style: solid;
 222         border-width: thin;
 223         border-color: Black;
 224         cursor: default;
 225 }
 226
 227 .ctdl-msg-button:hover {
 228         background-color: #123456;
 229         color: GhostWhite;
 230         transition: .3s;
 231         border-color: #123456;
 232         cursor: default;
 233 }
 234
 235 .ctdl-msg-button a {
 236         color: Black;
 237         text-decoration: none;
 238         cursor: default;
 239 }
 240
 241 .ctdl-msg-button a:hover {
 242         color: White;
 243         cursor: default;
 244 }
 245
 246 .ctdl-avatar {
 247         width: 32px;
 248 }
 249
 250 .ctdl-avatar img {
 251         clip-path: circle(50%);
 252 }
 253
 254 .ctdl-username {
 255         font-weight: bold;
 256         color: #000055;
 257 }
 258
 259 .ctdl-username a {
 260         text-decoration: none;
 261         padding-right: 4px;
 262 }
 263
 264 .ctdl-msgdate {
 265         padding-left: 4px;
 266 }
 267
 268 .ctdl-msgsubject {
 269         font-weight: bold;
 270 }
 271
 272 .ctdl-fmsg-content {                            /* message text, when in forum view */
 273         margin-left: 32px;
 274 }
 275
 276 .ctdl-mmsg-content {                            /* message text, when in mailbox view */
 277         margin-left: 0;
 278 }
 279
 280 .ctdl_mail_folders li {
 281         color: DarkSlateGrey;
 282 }
 283
 284 .ctdl_mail_folders li:hover {
 285         color: Black;
 286 }
 287
 288 .ctdl-avatar {
 289         float: left;
 290         padding-right: 2px;
 291 }
 292
 293 .ctdl-forum-nav {
 294         text-align: center;
 295         color: Black;
 296         background-color: Gainsboro;
 297         padding-top: 5px;
 298         padding-bottom: 5px;
 299 }
 300
 301 .ctdl-forum-nav a {
 302         text-decoration: none;
 303 }
 304
 305 .ctdl-msg-body {
 306 }
 307
 308 .ctdl-forum-editor-body {
 309         padding-left: 5px;
 310         padding-right: 5px;
 311         padding-top: 1px black;
 312         padding-bottom: 1px black;
 313 }
 314
 315 blockquote {
 316         background-color: #f5f5f5 !important;
 317         color: Navy !important;
 318         border-left: 2px solid Navy;
 319         margin-bottom: 0px;
 320         padding-bottom: 0px;
 321         margin-left: 1em;
 322         padding-left: 1em;
 323 }
 324
 325 blockquote blockquote {
 326         background-color: #ebebeb !important;
 327         color: Maroon !important;
 328         border-left: 2px solid Maroon;
 329 }
 330
 331 blockquote blockquote blockquote {
 332         background-color: #e1e1e1 !important;
 333         color: Green !important;
 334         border-left: 2px solid Green;
 335 }
 336
 337 blockquote blockquote blockquote blockquote {
 338         background-color: #d7d7d7 !important;
 339         color: Purple !important;
 340         border-left: 2px solid Purple;
 341 }
 342
 343 blockquote blockquote blockquote blockquote blockquote {
 344         background-color: #cdcdcd !important;
 345         color: Teal !important;
 346         border-left: 2px solid Teal;
 347 }
 348
 349 blockquote pre {
 350         margin-left: 1%;
 351         margin-right: 1%;
 352 }
 353
 354 .ctdl-forum-urlmodal {
 355         width: 75%;
 356 }
 357
 358 /* use this class for any small item that needs to be centered on the screen in the main div */
 359 .ctdl-middle {
 360         display: flex;
 361         flex-direction: column;
 362         justify-content: center;
 363         align-items: center;
 364         text-align: center;
 365         min-height: 100vh;
 366         background-color: GhostWhite;
 367         overflow: none;
 368         border: none;
 369 }
 370
 371 .ctdl-roomlist-top {
 372         background-color: GhostWhite;
 373         width: 100%;
 374         height: 100%;
 375         overflow: auto;
 376         border: none;
 377 }
 378
 379 .ctdl-roomlist-floor {
 380 }
 381
 382 .ctdl-roomlist-floor-label {
 383         font-size: x-large;
 384         margin: 1vw;
 385         margin-bottom: 0;
 386 }
 387
 388 .ctdl-roomlist-floor-rooms {
 389 }
 390
 391 .ctdl-roomlist-room {
 392         display: flex;
 393         flex-direction: row;
 394         flex-wrap: nowrap;
 395         justify-content: space-around;
 396         align-items: center;
 397         overflow: hidden;
 398         border-radius: 10px;
 399         border-style: outset;
 400         border-width: thin;
 401         background-color: White;
 402         padding: 0.3vw;
 403         margin-top: 0;
 404         margin-bottom: 0.1vw;
 405         margin-left: 1vw;
 406         margin-right: 1vw;
 407 }
 408
 409 .ctdl-roomlist-roomicon {
 410         overflow: hidden;
 411         font-size: large;
 412         margin-right: auto;
 413 }
 414
 415 .ctdl-roomlist-roomname {
 416         font-size: large;
 417         margin-right: auto;
 418         padding-left: 1vw;
 419         padding-right: 1vw;
 420 }
 421
 422 .ctdl-roomlist-roomname-hasnewmsgs {
 423         font-weight: bold;
 424         margin-right: auto;
 425 }
 426
 427 .ctdl-roomlist-mtime {
 428         margin-left: auto;
 429 }
 430
 431 .ctdl-mailbox-grid-container {
 432         display: grid;
 433         position: relative;
 434         overflow: hidden;
 435         width: 100%;
 436         height: 100%;
 437         background-color: GhostWhite;
 438         grid-template-rows: 15vw 1fr;           /* "1fr" means "all of the remaining space" */
 439 }
 440
 441 .ctdl-mailbox-pane {                            /* list of messages when in mailbox view */
 442         overflow-x: hidden;
 443         overflow-y: scroll;
 444         background-color: #DDDDDD;
 445         border-bottom: solid 3px SlateGrey;     /* We can probably turn this into a drag handle */
 446 }
 447
 448 .ctdl-mailbox-table {
 449         width: 100%;
 450         background-color: GhostWhite;
 451         border-collapse: collapse;
 452 }
 453
 454 .ctdl-mailbox-table td {
 455         padding: 5px;
 456 }
 457
 458 .ctdl-mailbox-table tr {
 459         cursor: pointer;
 460         border-top: solid 1px LightGrey;
 461 }
 462
 463 .ctdl-mailbox-table tr:hover {
 464         border-top: solid 1px Blue;
 465         border-bottom: solid 1px Blue;
 466         background-color: LightGrey;
 467 }
 468
 469 .ctdl-mailbox-table th {
 470         position: sticky;
 471         top: 0;
 472         z-index: 6;
 473         background-color: SlateGrey;
 474         color: White;
 475         padding-top: 5px;
 476         padding-bottom: 5px;
 477 }
 478
 479 .ctdl-mailbox-table th:hover {                  /* Suppress highlighting the header bar */
 480         background-color: SlateGrey;
 481         color: White;
 482         cursor: default;
 483 }
 484
 485 .ctdl-mail-selected {
 486         background-color: Blue;
 487         color: White;
 488 }
 489
 490 .ctdl-mail-subject {                            /* Subject column in mailbox message list */
 491 }
 492
 493 .ctdl-mail-sender {                             /* Sender column in mailbox message list */
 494 }
 495
 496 .ctdl-mail-date {                               /* Date column in mailbox message list */
 497         white-space: nowrap;
 498 }
 499
 500 .ctdl-mail-msgnum {                             /* # column in mailbox message list */
 501         white-space: nowrap;
 502 }
 503
 504 .ctdl-mailbox-reading-pane {                    /* message reading pane when in mailbox view */
 505         overflow: auto;
 506         background-color: GhostWhite;
 507         padding: 5px;
 508         overflow: auto;
 509         border: none;
 510 }
 511
 512 .ctdl-compose-mail {                            /* mail composition window */
 513         width: 100%;
 514         height: 100%;
 515         overflow: none;
 516         border: none;
 517         padding: 0;
 518         background-color: GhostWhite;
 519         display: grid;
 520         grid-template-rows: auto auto auto auto 1fr auto;
 521         grid-template-columns: auto 1fr;
 522         grid-template-areas:
 523                 'ctdl-compose-to-label ctdl-compose-to-line'
 524                 'ctdl-compose-cc-label ctdl-compose-cc-field'
 525                 'ctdl-compose-bcc-label ctdl-compose-bcc-field'
 526                 'ctdl-compose-subject-label ctdl-compose-subject-field'
 527                 'ctdl-compose-message-box ctdl-compose-message-box'
 528                 'ctdl-compose-toolbar ctdl-compose-toolbar';
 529         gap: 3px;
 530 }
 531
 532 .ctdl-compose-to-label {
 533         grid-area: ctdl-compose-to-label;
 534         padding: 0.5vw;
 535 }
 536
 537 .ctdl-compose-to-line {
 538         grid-area: ctdl-compose-to-line;
 539         padding-left: 0;
 540         padding-right: 0.5vw;
 541         padding-top: 0.5vw;
 542         padding-bottom: 1px;
 543         border-bottom: 1px solid Grey;
 544         margin-right: 0.5vw;
 545         display: flex;
 546         flex-direction: row;
 547         flex-wrap: nowrap;
 548         margin: 0;
 549         width: 100%;
 550         height: 100%;
 551         overflow: hidden;
 552 }
 553
 554 .ctdl-compose-to-field {
 555         flex-grow: 1;
 556
 557 }
 558
 559 .ctdl-compose-cc-label {
 560         grid-area: ctdl-compose-cc-label;
 561         padding: 0.5vw;
 562         display: none;
 563 }
 564
 565 .ctdl-compose-cc-field {
 566         grid-area: ctdl-compose-cc-field;
 567         border-bottom: 1px solid Grey;
 568         margin-right: 0.5vw;
 569         display: none;
 570         padding-left: 0;
 571         padding-right: 0.5vw;
 572         padding-top: 0.5vw;
 573         padding-bottom: 0;
 574 }
 575
 576 .ctdl-compose-bcc-label {
 577         grid-area: ctdl-compose-bcc-label;
 578         padding: 0.5vw;
 579         display: none;
 580 }
 581
 582 .ctdl-compose-bcc-field {
 583         grid-area: ctdl-compose-bcc-field;
 584         padding-left: 0;
 585         padding-right: 0.5vw;
 586         padding-top: 0.5vw;
 587         padding-bottom: 0;
 588         border-bottom: 1px solid Grey;
 589         margin-right: 0.5vw;
 590         display: none;
 591 }
 592
 593 .ctdl-compose-subject-label {
 594         grid-area: ctdl-compose-subject-label;
 595         padding: 0.5vw;
 596 }
 597
 598 .ctdl-compose-subject-field {
 599         grid-area: ctdl-compose-subject-field;
 600         padding-left: 0;
 601         padding-right: 0.5vw;
 602         padding-top: 0.5vw;
 603         padding-bottom: 0;
 604         border-bottom: 1px solid Grey;
 605         margin-right: 0.5vw;
 606 }
 607
 608 .ctdl-compose-message-box {
 609         grid-area: ctdl-compose-message-box;
 610         overflow-x: wrap;
 611         overflow-y: auto;
 612         padding: 0.5vw;
 613         border-bottom: 1px solid Grey;
 614         margin-left: 0.5vw;
 615         margin-right: 0.5vw;
 616 }
 617
 618 .ctdl-compose-toolbar {
 619         grid-area: ctdl-compose-toolbar;
 620         overflow: none;
 621         padding: 0.5vw;
 622         display: flex;
 623         flex-direction: row;
 624         flex-wrap: nowrap;
 625         justify-content: space-between;
 626         align-items: center;
 627         margin: 0:
 628         width: 100%;
 629         height: 100%;
 630         overflow: hidden;
 631 }
 632
 633 .ctdl-login-screen-grid-container {
 634         display: grid;
 635         grid-template-columns: auto auto;
 636 }
 637
 638 .ctdl-login-screen-grid-item {
 639         padding: 20px;
 640         font-size: 1.25em;
 641         vertical-align: middle;
 642 }
 643
 644 .ctdl-login-screen-grid-item input {
 645         height: 100%;
 646         border: none;
 647         font-size: 1.25em;
 648 }
 649
 650 .ctdl-fatal-error {
 651         background-color: DarkRed;
 652         margin-left: 1em;
 653         margin-right: 1em;
 654         padding: 1em;
 655         font-size: 2em;
 656         color: White;
 657 }