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 contains the "holy grail layout" of the screen */
  14         display: grid;
  15         grid-template-rows: 100px auto;
  16         grid-template-columns: 200px auto;
  17         grid-template-areas:
  18                 'header header'
  19                 'menu 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: header;
  29         background-color: DarkSlateGrey;
  30 }
  31
  32 .ctdl-grid-sidebar-item {                       /* Side bar, referenced by the grid container */
  33         grid-area: 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: main;
  39         overflow-x: hidden;
  40         overflow-y: auto;
  41 }
  42
  43 .ctdl-main-grid-container > div {
  44         text-align: left;
  45         padding: 0;
  46 }
  47
  48 .ctdl-banner-buttons li, .ctdl-banner-buttons li button {
  49         float: left;
  50         display: block;
  51         padding: 8px;
  52         background-color: DarkSlateGrey;
  53         color: White;
  54         font-size: 1.25vw;
  55         border: none;
  56 }
  57
  58 .ctdl-banner-buttons li button:hover {
  59         background-color: Black;
  60 }
  61
  62 .ctdl-banner-buttons a {
  63         color: White;
  64 }
  65
  66 html,body,h1,h2,h3,h4,h5 {
  67         font-family: sans-serif
  68 }
  69
  70 .ctdl-modal {
  71         display: none;                          /* set to "block" to make the modal appear */
  72         z-index: 9;
  73         position: fixed;
  74         top: 50%;
  75         left: 50%;
  76         transform: translate(-50%, -50%);
  77         border-style: outset;
  78         border-width: 3px;
  79         border-color: Black;
  80         justify-content: center;
  81         align-items: center;
  82         padding: 10px;
  83         background-color: GhostWhite;
  84 }
  85
  86 .ctdl-modal-header {
  87         background-color: GhostWhite;
  88         padding: 10px;
  89 }
  90
  91 .ctdl-modal-main {
  92         padding: 10px;
  93 }
  94
  95 .ctdl-modal-footer {
  96         background-color: GhostWhite;
  97         padding: 10px;
  98 }
  99
 100 .ctdl-sidebar-class button {
 101         width: 100%;
 102         padding: 10px;
 103         text-align: left;
 104         border-color: GhostWhite;
 105         background-color: GhostWhite;
 106         color: #000000;
 107         font-size: 1vw;
 108 }
 109
 110 .ctdl-sidebar-class button:hover {
 111         background-color: White;
 112 }
 113
 114 .ctdl-grid-banner-item button {
 115         background-color: #888888;
 116         color: #FFFFFF;
 117 }
 118
 119 .ctdl-forum-reading-pane {
 120         background-color: DarkSlateGrey;
 121 }
 122
 123 .ctdl-fmsg-wrapper {                            /* message wrapper for forum view */
 124         overflow: hidden;
 125         border-radius: 10px;
 126         background-color: White;
 127         margin: 1vw;
 128         padding: 5px;                           /* inside the box */
 129 }
 130
 131 .ctdl-mmsg-wrapper {                            /* message wrapper for mailbox view */
 132         overflow: hidden;
 133         background-color: White;
 134         padding: 5px;                           /* inside the box */
 135 }
 136
 137 .ctdl-msg-reply {
 138         margin-left: 5vw;
 139 }
 140
 141 .ctdl-msg-header {
 142         overflow: hidden;
 143         padding: 4px;
 144         min-height: 35px;
 145         background-color: GhostWhite;
 146         margin-bottom: 10px;                    /* this is the vertical space between the header and the message text */
 147 }
 148
 149 .ctdl-msg-header-info {
 150         float: left;
 151 }
 152
 153 .ctdl-msg-header-buttons {
 154         float: right;
 155 }
 156
 157 .ctdl-msg-button {
 158         margin-left: 2px;
 159         border-radius: 5px;
 160         background-color: Blue;
 161         color: Black;
 162         padding: 2px;
 163         background-color: GhostWhite;
 164         border-style: solid;
 165         border-width: thin;
 166         border-color: Black;
 167 }
 168
 169 .ctdl-msg-button a {
 170         color: Black;
 171 }
 172
 173 .ctdl-msg-button:hover {
 174         background-color: #123456;
 175         color: GhostWhite;
 176         transition: .3s;
 177         border-color: #123456;
 178 }
 179
 180 .ctdl-msg-button a:hover {
 181         color: White;
 182 }
 183
 184
 185 .ctdl-msg-button a {
 186         text-decoration: none;
 187 }
 188
 189 .ctdl-avatar {
 190         width: 32px;
 191 }
 192
 193 .ctdl-username {
 194         font-weight: bold;
 195         color: #000055;
 196 }
 197
 198 .ctdl-username a {
 199         text-decoration: none;
 200         padding-right: 4px;
 201 }
 202
 203 .ctdl-msgdate {
 204         padding-left: 4px;
 205 }
 206
 207 .ctdl-msgsubject {
 208         font-weight: bold;
 209 }
 210
 211 .ctdl-fmsg-content {                            /* message text, when in forum view */
 212         margin-left: 32px;
 213 }
 214
 215 .ctdl-mmsg-content {                            /* message text, when in mailbox view */
 216         margin-left: 0;
 217 }
 218
 219 .ctdl-avatar {
 220         float: left;
 221         padding-right: 2px;
 222 }
 223
 224 .ctdl-forum-nav {
 225         text-align: center;
 226         color: #ffff00;
 227 }
 228
 229 .ctdl-forum-nav a {
 230         text-decoration: none;
 231 }
 232
 233 blockquote {
 234         background-color: #f5f5f5 !important;
 235         color: Navy !important;
 236         margin-bottom: 0px;
 237         padding-bottom: 0px;
 238 }
 239
 240 blockquote blockquote {
 241         background-color: #ebebeb !important;
 242         color: Maroon !important;
 243 }
 244
 245 blockquote blockquote blockquote {
 246         background-color: #e1e1e1 !important;
 247         color: Green !important;
 248 }
 249
 250 blockquote blockquote blockquote blockquote {
 251         background-color: #d7d7d7 !important;
 252         color: Purple !important;
 253 }
 254
 255 blockquote blockquote blockquote blockquote blockquote {
 256         background-color: #cdcdcd !important;
 257         color: Teal !important;
 258 }
 259
 260 blockquote pre {
 261         margin-left: 1%;
 262         margin-right: 1%;
 263 }
 264
 265 .ctdl-forum-urlmodal {
 266         width: 75%;
 267 }
 268
 269 .ctdl-roomlist-top {
 270         margin: 1%;
 271 }
 272
 273 .ctdl-roomlist-floor {
 274 }
 275
 276 .ctdl-roomlist-floor-label {
 277         font-size: x-large;
 278         margin: 1vw;
 279 }
 280
 281 .ctdl-roomlist-floor-rooms {
 282 }
 283
 284 .ctdl-roomlist-room {
 285         overflow: hidden;
 286         border-radius: 10px;
 287         background-color: White;
 288         padding: 0.5vw;
 289         margin-bottom: 0.5vw;
 290         width: 100%;
 291 }
 292
 293 .ctdl-roomlist-roomicon {
 294         overflow: hidden;
 295         font-size: large;
 296         margin-left: 1vw;
 297         margin-right: 1vw;
 298         padding-left: 0.75vw;
 299         padding-right: 1.75vw;
 300         padding-top: 0.75vw;
 301         padding-bottom: 0.75vw;
 302 }
 303
 304 .ctdl-roomlist-roomname {
 305         font-size: large;
 306 }
 307
 308 .ctdl-roomlist-roomname-hasnewmsgs {
 309         font-weight: bold;
 310 }
 311
 312 .ctdl-roomlist-mtime {
 313 }
 314
 315 .ctdl-mailbox-grid-container {
 316         display: grid;
 317         position: relative;
 318         overflow: hidden;
 319         width: 100%;
 320         height: 100%;
 321         background-color: GhostWhite;
 322 }
 323
 324 .ctdl-mailbox-pane {                            /* list of messages when in mailbox view */
 325         height: 15vw;
 326         overflow-x: hidden;
 327         overflow-y: scroll;
 328         background-color: #DDDDDD;
 329         border-bottom: solid 3px SlateGrey;     /* We can probably turn this into a drag handle */
 330 }
 331
 332 .ctdl-mailbox-table {
 333         width: 100%;
 334         background-color: GhostWhite;
 335         border-collapse: collapse;
 336 }
 337
 338 .ctdl-mailbox-table td {
 339         padding: 5px;
 340 }
 341
 342 .ctdl-mailbox-table tr {
 343         cursor: pointer;
 344 }
 345
 346 .ctdl-mailbox-table tr:nth-child(even) {        /* this gives us the alternating-bar effect */
 347         background-color: Gainsboro;
 348 }
 349
 350 .ctdl-mailbox-table tr:hover {
 351         background-color: Blue;
 352         color: White;
 353 }
 354
 355 .ctdl-mailbox-table th {
 356         position: sticky;
 357         top: 0;
 358         z-index: 6;
 359         background-color: SlateGrey;
 360         color: White;
 361         padding-top: 5px;
 362         padding-bottom: 5px;
 363 }
 364
 365 .ctdl-mailbox-table th:hover {                  /* Suppress highlighting the header bar */
 366         background-color: SlateGrey;
 367         color: White;
 368         cursor: default;
 369 }
 370
 371 .ctdl-mail-subject {                            /* Subject column in mailbox message list */
 372 }
 373
 374 .ctdl-mail-sender {                             /* Sender column in mailbox message list */
 375 }
 376
 377 .ctdl-mail-date {                               /* Date column in mailbox message list */
 378         white-space: nowrap;
 379 }
 380
 381 .ctdl-mail-msgnum {                             /* # column in mailbox message list */
 382         white-space: nowrap;
 383 }
 384
 385 .ctdl-mailbox-reading-pane {                    /* message reading pane when in mailbox view */
 386         overflow-x: hidden;
 387         overflow-y: auto;
 388         background-color: GhostWhite;
 389         padding: 5px;
 390 }
 391
 392 .ctdl-compose-mail {                            /* mail composition window */
 393         width: 100%;
 394         height: 100%;
 395         overflow: auto;
 396         border: 2px dashed red;                 /* FIXME this goes away after testing */
 397 }
 398
 399 .ctdl-login-screen-grid-container {
 400         display: grid;
 401         grid-template-columns: auto auto;
 402 }
 403
 404 .ctdl-login-screen-grid-item {
 405         padding: 20px;
 406         font-size: 1.25em;
 407         vertical-align: middle;
 408 }
 409
 410 .ctdl-login-screen-grid-item input {
 411         height: 100%;
 412         border: none;
 413         font-size: 1.25em;
 414 }