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