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 .ctdl-main-grid-container {                     /* This grid implements the "holy grail layout" of the screen */
  14         display: grid;
  15         grid-template-rows: 5vh auto;
  16         grid-template-columns: 12vw auto;
  17         grid-template-areas:
  18                 'ctdl-mg-banner ctdl-mg-banner'
  19                 'ctdl-mg-menu ctdl-mg-main';
  20         gap: 3px;
  21         background-color: DarkSlateGrey;        /* This is the color of the lines between the boxes, and also the boxes themselves if not overridden */
  22         padding: 0;                             /* This is the border around the edges of the screen */
  23         width: 100vw;
  24         height: 100vh;
  25 }
  26
  27 .ctdl-grid-banner-item {                        /* Top banner, referenced by the grid container */
  28         grid-area: ctdl-mg-banner;
  29         background-color: DarkSlateGrey;
  30 }
  31
  32 .ctdl-grid-sidebar-item {                       /* Side bar, referenced by the grid container */
  33         grid-area: ctdl-mg-menu;
  34         background-color: GhostWhite;
  35 }
  36
  37 .ctdl-grid-main-item {                          /* Main content area of the screen, referenced by the grid container */
  38         grid-area: ctdl-mg-main;
  39         overflow-x: hidden;
  40         overflow-y: auto;
  41 }
  42
  43 .ctdl-main-grid-container > div {
  44         text-align: left;
  45 }
  46
  47 .ctdl-banner-buttons {                          /* Flexbox container for everything we stick into the banner */
  48         display: flex;
  49         flex-direction: row;
  50         flex-wrap: nowrap;
  51         justify-content: space-between;
  52         align-items: center;
  53         margin: 0;
  54         width: 100%;
  55         height: 100%;
  56         overflow: hidden;
  57 }
  58
  59 .ctdl-banner-left {                             /* Items which should be grouped to the LEFT side of the banner */
  60         display: flex;
  61         flex-direction: row;
  62         flex-wrap: nowrap;
  63         align-items: center;
  64 }
  65
  66 .ctdl-banner-center {                           /* Items which should be grouped to the MIDDLE of the banner */
  67         display: flex;
  68         flex-direction: row;
  69         flex-wrap: nowrap;
  70         align-items: center;
  71 }
  72
  73 .ctdl-banner-right {                            /* Items which should be grouped to the RIGHT side of the banner */
  74         display: flex;
  75         flex-direction: row;
  76         flex-wrap: nowrap;
  77         align-items: center;
  78 }
  79
  80 .ctdl-banner-buttons li, .ctdl-banner-buttons li button {
  81         float: left;
  82         display: block;
  83         background-color: DarkSlateGrey;
  84         color: White;
  85         font-size: 1.25vw;
  86         border: none;
  87         padding-left: 4px;
  88         padding-right: 4px;
  89 }
  90
  91 .ctdl-banner-buttons li button:hover {
  92         background-color: Black;
  93 }
  94
  95 .ctdl-banner-buttons a {                        /* For example, the Login / Log Off button */
  96         color: White;
  97 }
  98
  99 .ctdl-banner-buttons span {                     /* For example, the name of the logged in user */
 100         color: White;
 101 }
 102
 103 .ctdl-logo-img {
 104         background-color: White;
 105         border-radius: 5px;
 106         padding-bottom: 3px;
 107         padding-left: 3px;
 108         padding-right: 3px;
 109 }
 110
 111 html,body,h1,h2,h3,h4,h5 {
 112         font-family: sans-serif
 113 }
 114
 115 .ctdl-modal {
 116         display: none;                          /* set to "block" to make the modal appear */
 117         z-index: 9;
 118         position: fixed;
 119         top: 50%;
 120         left: 50%;
 121         transform: translate(-50%, -50%);
 122         border-style: outset;
 123         border-width: 3px;
 124         border-color: Black;
 125         justify-content: center;
 126         align-items: center;
 127         padding: 10px;
 128         background-color: GhostWhite;
 129 }
 130
 131 .ctdl-modal-header {
 132         background-color: GhostWhite;
 133         padding: 10px;
 134 }
 135
 136 .ctdl-modal-main {
 137         padding: 10px;
 138 }
 139
 140 .ctdl-modal-footer {
 141         background-color: GhostWhite;
 142         padding: 10px;
 143 }
 144
 145 .ctdl-sidebar-button {
 146         width: 100%;
 147         padding: 10px;
 148         text-align: left;
 149         border: 1px solid GhostWhite;
 150         background-color: GhostWhite;
 151         color: Black;
 152         font-size: 1vw;
 153         border-radius: 5px;
 154 }
 155
 156 .ctdl-sidebar-button:hover {
 157         border-color: Blue;
 158 }
 159
 160 .ctdl-sidebar-button-selected {
 161         font-weight: bold;
 162         background-color: Gainsboro;
 163 }
 164
 165 .ctdl-grid-banner-item button {
 166         background-color: #888888;
 167         color: #FFFFFF;
 168 }
 169
 170 .ctdl-forum-reading-pane {
 171         background-color: DarkSlateGrey;        /* Background behind the message boxes */
 172 }
 173
 174 .ctdl-fmsg-wrapper {                            /* message wrapper for forum view */
 175         overflow: hidden;
 176         border-radius: 10px;
 177         background-color: White;
 178         margin: 1vw;
 179         padding: 5px;                           /* inside the box */
 180 }
 181
 182 .ctdl-mmsg-wrapper {                            /* message wrapper for mailbox view */
 183         overflow: hidden;
 184         background-color: White;
 185         padding: 5px;                           /* inside the box */
 186 }
 187
 188 .ctdl-msg-reply {
 189         margin-left: 5vw;
 190 }
 191
 192 .ctdl-msg-header {
 193         overflow: hidden;
 194         padding: 4px;
 195         min-height: 35px;
 196         background-color: GhostWhite;
 197         margin-bottom: 10px;                    /* this is the vertical space between the header and the message text */
 198 }
 199
 200 .ctdl-msg-header-info {
 201         float: left;
 202 }
 203
 204 .ctdl-msg-header-buttons {
 205         float: right;
 206 }
 207
 208 .ctdl-msg-button {
 209         margin-left: 2px;
 210         border-radius: 5px;
 211         background-color: Blue;
 212         color: Black;
 213         padding: 2px;
 214         background-color: GhostWhite;
 215         border-style: solid;
 216         border-width: thin;
 217         border-color: Black;
 218 }
 219
 220 .ctdl-msg-button a {
 221         color: Black;
 222 }
 223
 224 .ctdl-msg-button:hover {
 225         background-color: #123456;
 226         color: GhostWhite;
 227         transition: .3s;
 228         border-color: #123456;
 229 }
 230
 231 .ctdl-msg-button a:hover {
 232         color: White;
 233 }
 234
 235
 236 .ctdl-msg-button a {
 237         text-decoration: none;
 238 }
 239
 240 .ctdl-avatar {
 241         width: 32px;
 242 }
 243
 244 .ctdl-avatar img {
 245         clip-path: circle(50%);
 246 }
 247
 248 .ctdl-username {
 249         font-weight: bold;
 250         color: #000055;
 251 }
 252
 253 .ctdl-username a {
 254         text-decoration: none;
 255         padding-right: 4px;
 256 }
 257
 258 .ctdl-msgdate {
 259         padding-left: 4px;
 260 }
 261
 262 .ctdl-msgsubject {
 263         font-weight: bold;
 264 }
 265
 266 .ctdl-fmsg-content {                            /* message text, when in forum view */
 267         margin-left: 32px;
 268 }
 269
 270 .ctdl-mmsg-content {                            /* message text, when in mailbox view */
 271         margin-left: 0;
 272 }
 273
 274 .ctdl-avatar {
 275         float: left;
 276         padding-right: 2px;
 277 }
 278
 279 .ctdl-forum-nav {
 280         text-align: center;
 281         color: Black;
 282         background-color: Gainsboro;
 283         padding-top: 5px;
 284         padding-bottom: 5px;
 285 }
 286
 287 .ctdl-forum-nav a {
 288         text-decoration: none;
 289 }
 290
 291 blockquote {
 292         background-color: #f5f5f5 !important;
 293         color: Navy !important;
 294         margin-bottom: 0px;
 295         padding-bottom: 0px;
 296 }
 297
 298 blockquote blockquote {
 299         background-color: #ebebeb !important;
 300         color: Maroon !important;
 301 }
 302
 303 blockquote blockquote blockquote {
 304         background-color: #e1e1e1 !important;
 305         color: Green !important;
 306 }
 307
 308 blockquote blockquote blockquote blockquote {
 309         background-color: #d7d7d7 !important;
 310         color: Purple !important;
 311 }
 312
 313 blockquote blockquote blockquote blockquote blockquote {
 314         background-color: #cdcdcd !important;
 315         color: Teal !important;
 316 }
 317
 318 blockquote pre {
 319         margin-left: 1%;
 320         margin-right: 1%;
 321 }
 322
 323 .ctdl-forum-urlmodal {
 324         width: 75%;
 325 }
 326
 327 .ctdl-roomlist-top {
 328         background-color: GhostWhite;
 329         width: 100%;
 330         height: 100%;
 331         overflow: auto;
 332         border: none;
 333 }
 334
 335 .ctdl-roomlist-floor {
 336 }
 337
 338 .ctdl-roomlist-floor-label {
 339         font-size: x-large;
 340         margin: 1vw;
 341         margin-bottom: 0;
 342 }
 343
 344 .ctdl-roomlist-floor-rooms {
 345 }
 346
 347 .ctdl-roomlist-room {
 348         display: flex;
 349         flex-direction: row;
 350         flex-wrap: nowrap;
 351         justify-content: space-around;
 352         align-items: center;
 353         overflow: hidden;
 354         border-radius: 10px;
 355         border-style: outset;
 356         background-color: White;
 357         padding: 0.3vw;
 358         margin-top: 0;
 359         margin-bottom: 0.25vw;
 360         margin-left: 1vw;
 361         margin-right: 1vw;
 362 }
 363
 364 .ctdl-roomlist-roomicon {
 365         overflow: hidden;
 366         font-size: large;
 367         margin-right: auto;
 368 }
 369
 370 .ctdl-roomlist-roomname {
 371         font-size: large;
 372         margin-right: auto;
 373         padding-left: 1vw;
 374         padding-right: 1vw;
 375 }
 376
 377 .ctdl-roomlist-roomname-hasnewmsgs {
 378         font-weight: bold;
 379         margin-right: auto;
 380 }
 381
 382 .ctdl-roomlist-mtime {
 383         margin-left: auto;
 384 }
 385
 386 .ctdl-mailbox-grid-container {
 387         display: grid;
 388         position: relative;
 389         overflow: hidden;
 390         width: 100%;
 391         height: 100%;
 392         background-color: GhostWhite;
 393         grid-template-rows: 15vw 1fr;           /* "1fr" means "all of the remaining space" */
 394 }
 395
 396 .ctdl-mailbox-pane {                            /* list of messages when in mailbox view */
 397         overflow-x: hidden;
 398         overflow-y: scroll;
 399         background-color: #DDDDDD;
 400         border-bottom: solid 3px SlateGrey;     /* We can probably turn this into a drag handle */
 401 }
 402
 403 .ctdl-mailbox-table {
 404         width: 100%;
 405         background-color: GhostWhite;
 406         border-collapse: collapse;
 407 }
 408
 409 .ctdl-mailbox-table td {
 410         padding: 5px;
 411 }
 412
 413 .ctdl-mailbox-table tr {
 414         cursor: pointer;
 415         border-top: solid 1px LightGrey;
 416 }
 417
 418 .ctdl-mailbox-table tr:hover {
 419         border-top: solid 1px Blue;
 420         border-bottom: solid 1px Blue;
 421         background-color: LightGrey;
 422 }
 423
 424 .ctdl-mailbox-table th {
 425         position: sticky;
 426         top: 0;
 427         z-index: 6;
 428         background-color: SlateGrey;
 429         color: White;
 430         padding-top: 5px;
 431         padding-bottom: 5px;
 432 }
 433
 434 .ctdl-mailbox-table th:hover {                  /* Suppress highlighting the header bar */
 435         background-color: SlateGrey;
 436         color: White;
 437         cursor: default;
 438 }
 439
 440 .ctdl-mail-selected {
 441         background-color: Blue;
 442         color: White;
 443 }
 444
 445 .ctdl-mail-subject {                            /* Subject column in mailbox message list */
 446 }
 447
 448 .ctdl-mail-sender {                             /* Sender column in mailbox message list */
 449 }
 450
 451 .ctdl-mail-date {                               /* Date column in mailbox message list */
 452         white-space: nowrap;
 453 }
 454
 455 .ctdl-mail-msgnum {                             /* # column in mailbox message list */
 456         white-space: nowrap;
 457 }
 458
 459 .ctdl-mailbox-reading-pane {                    /* message reading pane when in mailbox view */
 460         overflow: auto;
 461         background-color: GhostWhite;
 462         padding: 5px;
 463         overflow: auto;
 464         border: none;
 465 }
 466
 467 .ctdl-compose-mail {                            /* mail composition window */
 468         width: 100%;
 469         height: 100%;
 470         overflow: auto;
 471         border: 2px dashed red;                 /* FIXME this goes away after testing */
 472 }
 473
 474 .ctdl-login-screen-grid-container {
 475         display: grid;
 476         grid-template-columns: auto auto;
 477 }
 478
 479 .ctdl-login-screen-grid-item {
 480         padding: 20px;
 481         font-size: 1.25em;
 482         vertical-align: middle;
 483 }
 484
 485 .ctdl-login-screen-grid-item input {
 486         height: 100%;
 487         border: none;
 488         font-size: 1.25em;
 489 }