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