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