webcit-ng/static/css/webcit.css

   1 /*
   2         Copyright (c) 1996-2022 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: 3px;
  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: DarkSlateGrey;        /* 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 }
 184
 185 .ctdl-mmsg-wrapper {                            /* message wrapper for mailbox view */
 186         overflow: hidden;
 187         background-color: White;
 188         padding: 5px;                           /* inside the box */
 189 }
 190
 191 .ctdl-msg-reply {
 192         margin-left: 5vw;
 193 }
 194
 195 .ctdl-msg-header {
 196         overflow: hidden;
 197         padding: 4px;
 198         min-height: 35px;
 199         background-color: GhostWhite;
 200         margin-bottom: 10px;                    /* this is the vertical space between the header and the message text */
 201 }
 202
 203 .ctdl-msg-header-info {
 204         float: left;
 205 }
 206
 207 .ctdl-msg-header-buttons {
 208         float: right;
 209 }
 210
 211 .ctdl-msg-button {
 212         margin-left: 2px;
 213         border-radius: 5px;
 214         background-color: Blue;
 215         color: Black;
 216         padding: 2px;
 217         background-color: GhostWhite;
 218         border-style: solid;
 219         border-width: thin;
 220         border-color: Black;
 221         cursor: default;
 222 }
 223
 224 .ctdl-msg-button:hover {
 225         background-color: #123456;
 226         color: GhostWhite;
 227         transition: .3s;
 228         border-color: #123456;
 229         cursor: default;
 230 }
 231
 232 .ctdl-msg-button a {
 233         color: Black;
 234         text-decoration: none;
 235         cursor: default;
 236 }
 237
 238 .ctdl-msg-button a:hover {
 239         color: White;
 240         cursor: default;
 241 }
 242
 243 .ctdl-avatar {
 244         width: 32px;
 245 }
 246
 247 .ctdl-avatar img {
 248         clip-path: circle(50%);
 249 }
 250
 251 .ctdl-username {
 252         font-weight: bold;
 253         color: #000055;
 254 }
 255
 256 .ctdl-username a {
 257         text-decoration: none;
 258         padding-right: 4px;
 259 }
 260
 261 .ctdl-msgdate {
 262         padding-left: 4px;
 263 }
 264
 265 .ctdl-msgsubject {
 266         font-weight: bold;
 267 }
 268
 269 .ctdl-fmsg-content {                            /* message text, when in forum view */
 270         margin-left: 32px;
 271 }
 272
 273 .ctdl-mmsg-content {                            /* message text, when in mailbox view */
 274         margin-left: 0;
 275 }
 276
 277 .ctdl-avatar {
 278         float: left;
 279         padding-right: 2px;
 280 }
 281
 282 .ctdl-forum-nav {
 283         text-align: center;
 284         color: Black;
 285         background-color: Gainsboro;
 286         padding-top: 5px;
 287         padding-bottom: 5px;
 288 }
 289
 290 .ctdl-forum-nav a {
 291         text-decoration: none;
 292 }
 293
 294 .ctdl-msg-body {
 295 }
 296
 297 .ctdl-forum-editor-body {
 298         padding-left: 5px;
 299         padding-right: 5px;
 300         padding-top: 1px black;
 301         padding-bottom: 1px black;
 302 }
 303
 304 blockquote {
 305         background-color: #f5f5f5 !important;
 306         color: Navy !important;
 307         border-left: 2px solid Navy;
 308         margin-bottom: 0px;
 309         padding-bottom: 0px;
 310         margin-left: 1em;
 311         padding-left: 1em;
 312 }
 313
 314 blockquote blockquote {
 315         background-color: #ebebeb !important;
 316         color: Maroon !important;
 317         border-left: 2px solid Maroon;
 318 }
 319
 320 blockquote blockquote blockquote {
 321         background-color: #e1e1e1 !important;
 322         color: Green !important;
 323         border-left: 2px solid Green;
 324 }
 325
 326 blockquote blockquote blockquote blockquote {
 327         background-color: #d7d7d7 !important;
 328         color: Purple !important;
 329         border-left: 2px solid Purple;
 330 }
 331
 332 blockquote blockquote blockquote blockquote blockquote {
 333         background-color: #cdcdcd !important;
 334         color: Teal !important;
 335         border-left: 2px solid Teal;
 336 }
 337
 338 blockquote pre {
 339         margin-left: 1%;
 340         margin-right: 1%;
 341 }
 342
 343 .ctdl-forum-urlmodal {
 344         width: 75%;
 345 }
 346
 347 .ctdl-roomlist-top {
 348         background-color: GhostWhite;
 349         width: 100%;
 350         height: 100%;
 351         overflow: auto;
 352         border: none;
 353 }
 354
 355 .ctdl-roomlist-floor {
 356 }
 357
 358 .ctdl-roomlist-floor-label {
 359         font-size: x-large;
 360         margin: 1vw;
 361         margin-bottom: 0;
 362 }
 363
 364 .ctdl-roomlist-floor-rooms {
 365 }
 366
 367 .ctdl-roomlist-room {
 368         display: flex;
 369         flex-direction: row;
 370         flex-wrap: nowrap;
 371         justify-content: space-around;
 372         align-items: center;
 373         overflow: hidden;
 374         border-radius: 10px;
 375         border-style: outset;
 376         background-color: White;
 377         padding: 0.3vw;
 378         margin-top: 0;
 379         margin-bottom: 0.25vw;
 380         margin-left: 1vw;
 381         margin-right: 1vw;
 382 }
 383
 384 .ctdl-roomlist-roomicon {
 385         overflow: hidden;
 386         font-size: large;
 387         margin-right: auto;
 388 }
 389
 390 .ctdl-roomlist-roomname {
 391         font-size: large;
 392         margin-right: auto;
 393         padding-left: 1vw;
 394         padding-right: 1vw;
 395 }
 396
 397 .ctdl-roomlist-roomname-hasnewmsgs {
 398         font-weight: bold;
 399         margin-right: auto;
 400 }
 401
 402 .ctdl-roomlist-mtime {
 403         margin-left: auto;
 404 }
 405
 406 .ctdl-mailbox-grid-container {
 407         display: grid;
 408         position: relative;
 409         overflow: hidden;
 410         width: 100%;
 411         height: 100%;
 412         background-color: GhostWhite;
 413         grid-template-rows: 15vw 1fr;           /* "1fr" means "all of the remaining space" */
 414 }
 415
 416 .ctdl-mailbox-pane {                            /* list of messages when in mailbox view */
 417         overflow-x: hidden;
 418         overflow-y: scroll;
 419         background-color: #DDDDDD;
 420         border-bottom: solid 3px SlateGrey;     /* We can probably turn this into a drag handle */
 421 }
 422
 423 .ctdl-mailbox-table {
 424         width: 100%;
 425         background-color: GhostWhite;
 426         border-collapse: collapse;
 427 }
 428
 429 .ctdl-mailbox-table td {
 430         padding: 5px;
 431 }
 432
 433 .ctdl-mailbox-table tr {
 434         cursor: pointer;
 435         border-top: solid 1px LightGrey;
 436 }
 437
 438 .ctdl-mailbox-table tr:hover {
 439         border-top: solid 1px Blue;
 440         border-bottom: solid 1px Blue;
 441         background-color: LightGrey;
 442 }
 443
 444 .ctdl-mailbox-table th {
 445         position: sticky;
 446         top: 0;
 447         z-index: 6;
 448         background-color: SlateGrey;
 449         color: White;
 450         padding-top: 5px;
 451         padding-bottom: 5px;
 452 }
 453
 454 .ctdl-mailbox-table th:hover {                  /* Suppress highlighting the header bar */
 455         background-color: SlateGrey;
 456         color: White;
 457         cursor: default;
 458 }
 459
 460 .ctdl-mail-selected {
 461         background-color: Blue;
 462         color: White;
 463 }
 464
 465 .ctdl-mail-subject {                            /* Subject column in mailbox message list */
 466 }
 467
 468 .ctdl-mail-sender {                             /* Sender column in mailbox message list */
 469 }
 470
 471 .ctdl-mail-date {                               /* Date column in mailbox message list */
 472         white-space: nowrap;
 473 }
 474
 475 .ctdl-mail-msgnum {                             /* # column in mailbox message list */
 476         white-space: nowrap;
 477 }
 478
 479 .ctdl-mailbox-reading-pane {                    /* message reading pane when in mailbox view */
 480         overflow: auto;
 481         background-color: GhostWhite;
 482         padding: 5px;
 483         overflow: auto;
 484         border: none;
 485 }
 486
 487 .ctdl-compose-mail {                            /* mail composition window */
 488         width: 100%;
 489         height: 100%;
 490         overflow: none;
 491         border: none;
 492         padding: 0;
 493         background-color: GhostWhite;
 494         display: grid;
 495         grid-template-rows: auto auto auto auto 1fr auto;
 496         grid-template-columns: auto 1fr;
 497         grid-template-areas:
 498                 'ctdl-compose-to-label ctdl-compose-to-line'
 499                 'ctdl-compose-cc-label ctdl-compose-cc-field'
 500                 'ctdl-compose-bcc-label ctdl-compose-bcc-field'
 501                 'ctdl-compose-subject-label ctdl-compose-subject-field'
 502                 'ctdl-compose-message-box ctdl-compose-message-box'
 503                 'ctdl-compose-toolbar ctdl-compose-toolbar';
 504         gap: 3px;
 505 }
 506
 507 .ctdl-compose-to-label {
 508         grid-area: ctdl-compose-to-label;
 509         padding: 0.5vw;
 510 }
 511
 512 .ctdl-compose-to-line {
 513         grid-area: ctdl-compose-to-line;
 514         padding-left: 0;
 515         padding-right: 0.5vw;
 516         padding-top: 0.5vw;
 517         padding-bottom: 1px;
 518         border-bottom: 1px solid Grey;
 519         margin-right: 0.5vw;
 520         display: flex;
 521         flex-direction: row;
 522         flex-wrap: nowrap;
 523         margin: 0;
 524         width: 100%;
 525         height: 100%;
 526         overflow: hidden;
 527 }
 528
 529 .ctdl-compose-to-field {
 530         flex-grow: 1;
 531
 532 }
 533
 534 .ctdl-compose-cc-label {
 535         grid-area: ctdl-compose-cc-label;
 536         padding: 0.5vw;
 537         display: none;
 538 }
 539
 540 .ctdl-compose-cc-field {
 541         grid-area: ctdl-compose-cc-field;
 542         border-bottom: 1px solid Grey;
 543         margin-right: 0.5vw;
 544         display: none;
 545         padding-left: 0;
 546         padding-right: 0.5vw;
 547         padding-top: 0.5vw;
 548         padding-bottom: 0;
 549 }
 550
 551 .ctdl-compose-bcc-label {
 552         grid-area: ctdl-compose-bcc-label;
 553         padding: 0.5vw;
 554         display: none;
 555 }
 556
 557 .ctdl-compose-bcc-field {
 558         grid-area: ctdl-compose-bcc-field;
 559         padding-left: 0;
 560         padding-right: 0.5vw;
 561         padding-top: 0.5vw;
 562         padding-bottom: 0;
 563         border-bottom: 1px solid Grey;
 564         margin-right: 0.5vw;
 565         display: none;
 566 }
 567
 568 .ctdl-compose-subject-label {
 569         grid-area: ctdl-compose-subject-label;
 570         padding: 0.5vw;
 571 }
 572
 573 .ctdl-compose-subject-field {
 574         grid-area: ctdl-compose-subject-field;
 575         padding-left: 0;
 576         padding-right: 0.5vw;
 577         padding-top: 0.5vw;
 578         padding-bottom: 0;
 579         border-bottom: 1px solid Grey;
 580         margin-right: 0.5vw;
 581 }
 582
 583 .ctdl-compose-message-box {
 584         grid-area: ctdl-compose-message-box;
 585         overflow-x: wrap;
 586         overflow-y: auto;
 587         padding: 0.5vw;
 588         border-bottom: 1px solid Grey;
 589         margin-left: 0.5vw;
 590         margin-right: 0.5vw;
 591 }
 592
 593 .ctdl-compose-toolbar {
 594         grid-area: ctdl-compose-toolbar;
 595         overflow: none;
 596         padding: 0.5vw;
 597         display: flex;
 598         flex-direction: row;
 599         flex-wrap: nowrap;
 600         justify-content: space-between;
 601         align-items: center;
 602         margin: 0:
 603         width: 100%;
 604         height: 100%;
 605         overflow: hidden;
 606 }
 607
 608 .ctdl-login-screen-grid-container {
 609         display: grid;
 610         grid-template-columns: auto auto;
 611 }
 612
 613 .ctdl-login-screen-grid-item {
 614         padding: 20px;
 615         font-size: 1.25em;
 616         vertical-align: middle;
 617 }
 618
 619 .ctdl-login-screen-grid-item input {
 620         height: 100%;
 621         border: none;
 622         font-size: 1.25em;
 623 }