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