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: 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_mail_folders li {
 278         color: DarkSlateGrey;
 279 }
 280
 281 .ctdl_mail_folders li:hover {
 282         color: Black;
 283 }
 284
 285 .ctdl-avatar {
 286         float: left;
 287         padding-right: 2px;
 288 }
 289
 290 .ctdl-forum-nav {
 291         text-align: center;
 292         color: Black;
 293         background-color: Gainsboro;
 294         padding-top: 5px;
 295         padding-bottom: 5px;
 296 }
 297
 298 .ctdl-forum-nav a {
 299         text-decoration: none;
 300 }
 301
 302 .ctdl-msg-body {
 303 }
 304
 305 .ctdl-forum-editor-body {
 306         padding-left: 5px;
 307         padding-right: 5px;
 308         padding-top: 1px black;
 309         padding-bottom: 1px black;
 310 }
 311
 312 blockquote {
 313         background-color: #f5f5f5 !important;
 314         color: Navy !important;
 315         border-left: 2px solid Navy;
 316         margin-bottom: 0px;
 317         padding-bottom: 0px;
 318         margin-left: 1em;
 319         padding-left: 1em;
 320 }
 321
 322 blockquote blockquote {
 323         background-color: #ebebeb !important;
 324         color: Maroon !important;
 325         border-left: 2px solid Maroon;
 326 }
 327
 328 blockquote blockquote blockquote {
 329         background-color: #e1e1e1 !important;
 330         color: Green !important;
 331         border-left: 2px solid Green;
 332 }
 333
 334 blockquote blockquote blockquote blockquote {
 335         background-color: #d7d7d7 !important;
 336         color: Purple !important;
 337         border-left: 2px solid Purple;
 338 }
 339
 340 blockquote blockquote blockquote blockquote blockquote {
 341         background-color: #cdcdcd !important;
 342         color: Teal !important;
 343         border-left: 2px solid Teal;
 344 }
 345
 346 blockquote pre {
 347         margin-left: 1%;
 348         margin-right: 1%;
 349 }
 350
 351 .ctdl-forum-urlmodal {
 352         width: 75%;
 353 }
 354
 355 .ctdl-roomlist-top {
 356         background-color: GhostWhite;
 357         width: 100%;
 358         height: 100%;
 359         overflow: auto;
 360         border: none;
 361 }
 362
 363 .ctdl-roomlist-floor {
 364 }
 365
 366 .ctdl-roomlist-floor-label {
 367         font-size: x-large;
 368         margin: 1vw;
 369         margin-bottom: 0;
 370 }
 371
 372 .ctdl-roomlist-floor-rooms {
 373 }
 374
 375 .ctdl-roomlist-room {
 376         display: flex;
 377         flex-direction: row;
 378         flex-wrap: nowrap;
 379         justify-content: space-around;
 380         align-items: center;
 381         overflow: hidden;
 382         border-radius: 10px;
 383         border-style: outset;
 384         background-color: White;
 385         padding: 0.3vw;
 386         margin-top: 0;
 387         margin-bottom: 0.25vw;
 388         margin-left: 1vw;
 389         margin-right: 1vw;
 390 }
 391
 392 .ctdl-roomlist-roomicon {
 393         overflow: hidden;
 394         font-size: large;
 395         margin-right: auto;
 396 }
 397
 398 .ctdl-roomlist-roomname {
 399         font-size: large;
 400         margin-right: auto;
 401         padding-left: 1vw;
 402         padding-right: 1vw;
 403 }
 404
 405 .ctdl-roomlist-roomname-hasnewmsgs {
 406         font-weight: bold;
 407         margin-right: auto;
 408 }
 409
 410 .ctdl-roomlist-mtime {
 411         margin-left: auto;
 412 }
 413
 414 .ctdl-mailbox-grid-container {
 415         display: grid;
 416         position: relative;
 417         overflow: hidden;
 418         width: 100%;
 419         height: 100%;
 420         background-color: GhostWhite;
 421         grid-template-rows: 15vw 1fr;           /* "1fr" means "all of the remaining space" */
 422 }
 423
 424 .ctdl-mailbox-pane {                            /* list of messages when in mailbox view */
 425         overflow-x: hidden;
 426         overflow-y: scroll;
 427         background-color: #DDDDDD;
 428         border-bottom: solid 3px SlateGrey;     /* We can probably turn this into a drag handle */
 429 }
 430
 431 .ctdl-mailbox-table {
 432         width: 100%;
 433         background-color: GhostWhite;
 434         border-collapse: collapse;
 435 }
 436
 437 .ctdl-mailbox-table td {
 438         padding: 5px;
 439 }
 440
 441 .ctdl-mailbox-table tr {
 442         cursor: pointer;
 443         border-top: solid 1px LightGrey;
 444 }
 445
 446 .ctdl-mailbox-table tr:hover {
 447         border-top: solid 1px Blue;
 448         border-bottom: solid 1px Blue;
 449         background-color: LightGrey;
 450 }
 451
 452 .ctdl-mailbox-table th {
 453         position: sticky;
 454         top: 0;
 455         z-index: 6;
 456         background-color: SlateGrey;
 457         color: White;
 458         padding-top: 5px;
 459         padding-bottom: 5px;
 460 }
 461
 462 .ctdl-mailbox-table th:hover {                  /* Suppress highlighting the header bar */
 463         background-color: SlateGrey;
 464         color: White;
 465         cursor: default;
 466 }
 467
 468 .ctdl-mail-selected {
 469         background-color: Blue;
 470         color: White;
 471 }
 472
 473 .ctdl-mail-subject {                            /* Subject column in mailbox message list */
 474 }
 475
 476 .ctdl-mail-sender {                             /* Sender column in mailbox message list */
 477 }
 478
 479 .ctdl-mail-date {                               /* Date column in mailbox message list */
 480         white-space: nowrap;
 481 }
 482
 483 .ctdl-mail-msgnum {                             /* # column in mailbox message list */
 484         white-space: nowrap;
 485 }
 486
 487 .ctdl-mailbox-reading-pane {                    /* message reading pane when in mailbox view */
 488         overflow: auto;
 489         background-color: GhostWhite;
 490         padding: 5px;
 491         overflow: auto;
 492         border: none;
 493 }
 494
 495 .ctdl-compose-mail {                            /* mail composition window */
 496         width: 100%;
 497         height: 100%;
 498         overflow: none;
 499         border: none;
 500         padding: 0;
 501         background-color: GhostWhite;
 502         display: grid;
 503         grid-template-rows: auto auto auto auto 1fr auto;
 504         grid-template-columns: auto 1fr;
 505         grid-template-areas:
 506                 'ctdl-compose-to-label ctdl-compose-to-line'
 507                 'ctdl-compose-cc-label ctdl-compose-cc-field'
 508                 'ctdl-compose-bcc-label ctdl-compose-bcc-field'
 509                 'ctdl-compose-subject-label ctdl-compose-subject-field'
 510                 'ctdl-compose-message-box ctdl-compose-message-box'
 511                 'ctdl-compose-toolbar ctdl-compose-toolbar';
 512         gap: 3px;
 513 }
 514
 515 .ctdl-compose-to-label {
 516         grid-area: ctdl-compose-to-label;
 517         padding: 0.5vw;
 518 }
 519
 520 .ctdl-compose-to-line {
 521         grid-area: ctdl-compose-to-line;
 522         padding-left: 0;
 523         padding-right: 0.5vw;
 524         padding-top: 0.5vw;
 525         padding-bottom: 1px;
 526         border-bottom: 1px solid Grey;
 527         margin-right: 0.5vw;
 528         display: flex;
 529         flex-direction: row;
 530         flex-wrap: nowrap;
 531         margin: 0;
 532         width: 100%;
 533         height: 100%;
 534         overflow: hidden;
 535 }
 536
 537 .ctdl-compose-to-field {
 538         flex-grow: 1;
 539
 540 }
 541
 542 .ctdl-compose-cc-label {
 543         grid-area: ctdl-compose-cc-label;
 544         padding: 0.5vw;
 545         display: none;
 546 }
 547
 548 .ctdl-compose-cc-field {
 549         grid-area: ctdl-compose-cc-field;
 550         border-bottom: 1px solid Grey;
 551         margin-right: 0.5vw;
 552         display: none;
 553         padding-left: 0;
 554         padding-right: 0.5vw;
 555         padding-top: 0.5vw;
 556         padding-bottom: 0;
 557 }
 558
 559 .ctdl-compose-bcc-label {
 560         grid-area: ctdl-compose-bcc-label;
 561         padding: 0.5vw;
 562         display: none;
 563 }
 564
 565 .ctdl-compose-bcc-field {
 566         grid-area: ctdl-compose-bcc-field;
 567         padding-left: 0;
 568         padding-right: 0.5vw;
 569         padding-top: 0.5vw;
 570         padding-bottom: 0;
 571         border-bottom: 1px solid Grey;
 572         margin-right: 0.5vw;
 573         display: none;
 574 }
 575
 576 .ctdl-compose-subject-label {
 577         grid-area: ctdl-compose-subject-label;
 578         padding: 0.5vw;
 579 }
 580
 581 .ctdl-compose-subject-field {
 582         grid-area: ctdl-compose-subject-field;
 583         padding-left: 0;
 584         padding-right: 0.5vw;
 585         padding-top: 0.5vw;
 586         padding-bottom: 0;
 587         border-bottom: 1px solid Grey;
 588         margin-right: 0.5vw;
 589 }
 590
 591 .ctdl-compose-message-box {
 592         grid-area: ctdl-compose-message-box;
 593         overflow-x: wrap;
 594         overflow-y: auto;
 595         padding: 0.5vw;
 596         border-bottom: 1px solid Grey;
 597         margin-left: 0.5vw;
 598         margin-right: 0.5vw;
 599 }
 600
 601 .ctdl-compose-toolbar {
 602         grid-area: ctdl-compose-toolbar;
 603         overflow: none;
 604         padding: 0.5vw;
 605         display: flex;
 606         flex-direction: row;
 607         flex-wrap: nowrap;
 608         justify-content: space-between;
 609         align-items: center;
 610         margin: 0:
 611         width: 100%;
 612         height: 100%;
 613         overflow: hidden;
 614 }
 615
 616 .ctdl-login-screen-grid-container {
 617         display: grid;
 618         grid-template-columns: auto auto;
 619 }
 620
 621 .ctdl-login-screen-grid-item {
 622         padding: 20px;
 623         font-size: 1.25em;
 624         vertical-align: middle;
 625 }
 626
 627 .ctdl-login-screen-grid-item input {
 628         height: 100%;
 629         border: none;
 630         font-size: 1.25em;
 631 }