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         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-button {
 101         width: 100%;
 102         padding: 10px;
 103         text-align: left;
 104         border: 1px solid GhostWhite;
 105         background-color: GhostWhite;
 106         color: Black;
 107         font-size: 1vw;
 108         border-radius: 5px;
 109 }
 110
 111 .ctdl-sidebar-button:hover {
 112         border-color: Blue;
 113 }
 114
 115 .ctdl-sidebar-button-selected {
 116         font-weight: bold;
 117         background-color: Gainsboro;
 118 }
 119
 120 .ctdl-grid-banner-item button {
 121         background-color: #888888;
 122         color: #FFFFFF;
 123 }
 124
 125 .ctdl-logo-img {
 126         background-color: White;
 127         border-radius: 5px;
 128         padding-bottom: 3px;
 129         padding-left: 3px;
 130         padding-right: 3px;
 131 }
 132
 133 .ctdl-forum-reading-pane {
 134         background-color: DarkSlateGrey;        /* Background behind the message boxes */
 135 }
 136
 137 .ctdl-fmsg-wrapper {                            /* message wrapper for forum view */
 138         overflow: hidden;
 139         border-radius: 10px;
 140         background-color: White;
 141         margin: 1vw;
 142         padding: 5px;                           /* inside the box */
 143 }
 144
 145 .ctdl-mmsg-wrapper {                            /* message wrapper for mailbox view */
 146         overflow: hidden;
 147         background-color: White;
 148         padding: 5px;                           /* inside the box */
 149 }
 150
 151 .ctdl-msg-reply {
 152         margin-left: 5vw;
 153 }
 154
 155 .ctdl-msg-header {
 156         overflow: hidden;
 157         padding: 4px;
 158         min-height: 35px;
 159         background-color: GhostWhite;
 160         margin-bottom: 10px;                    /* this is the vertical space between the header and the message text */
 161 }
 162
 163 .ctdl-msg-header-info {
 164         float: left;
 165 }
 166
 167 .ctdl-msg-header-buttons {
 168         float: right;
 169 }
 170
 171 .ctdl-msg-button {
 172         margin-left: 2px;
 173         border-radius: 5px;
 174         background-color: Blue;
 175         color: Black;
 176         padding: 2px;
 177         background-color: GhostWhite;
 178         border-style: solid;
 179         border-width: thin;
 180         border-color: Black;
 181 }
 182
 183 .ctdl-msg-button a {
 184         color: Black;
 185 }
 186
 187 .ctdl-msg-button:hover {
 188         background-color: #123456;
 189         color: GhostWhite;
 190         transition: .3s;
 191         border-color: #123456;
 192 }
 193
 194 .ctdl-msg-button a:hover {
 195         color: White;
 196 }
 197
 198
 199 .ctdl-msg-button a {
 200         text-decoration: none;
 201 }
 202
 203 .ctdl-avatar {
 204         width: 32px;
 205 }
 206
 207 .ctdl-avatar img {
 208         clip-path: circle(50%);
 209 }
 210
 211 .ctdl-username {
 212         font-weight: bold;
 213         color: #000055;
 214 }
 215
 216 .ctdl-username a {
 217         text-decoration: none;
 218         padding-right: 4px;
 219 }
 220
 221 .ctdl-msgdate {
 222         padding-left: 4px;
 223 }
 224
 225 .ctdl-msgsubject {
 226         font-weight: bold;
 227 }
 228
 229 .ctdl-fmsg-content {                            /* message text, when in forum view */
 230         margin-left: 32px;
 231 }
 232
 233 .ctdl-mmsg-content {                            /* message text, when in mailbox view */
 234         margin-left: 0;
 235 }
 236
 237 .ctdl-avatar {
 238         float: left;
 239         padding-right: 2px;
 240 }
 241
 242 .ctdl-forum-nav {
 243         text-align: center;
 244         color: Black;
 245         background-color: Gainsboro;
 246         padding-top: 5px;
 247         padding-bottom: 5px;
 248 }
 249
 250 .ctdl-forum-nav a {
 251         text-decoration: none;
 252 }
 253
 254 blockquote {
 255         background-color: #f5f5f5 !important;
 256         color: Navy !important;
 257         margin-bottom: 0px;
 258         padding-bottom: 0px;
 259 }
 260
 261 blockquote blockquote {
 262         background-color: #ebebeb !important;
 263         color: Maroon !important;
 264 }
 265
 266 blockquote blockquote blockquote {
 267         background-color: #e1e1e1 !important;
 268         color: Green !important;
 269 }
 270
 271 blockquote blockquote blockquote blockquote {
 272         background-color: #d7d7d7 !important;
 273         color: Purple !important;
 274 }
 275
 276 blockquote blockquote blockquote blockquote blockquote {
 277         background-color: #cdcdcd !important;
 278         color: Teal !important;
 279 }
 280
 281 blockquote pre {
 282         margin-left: 1%;
 283         margin-right: 1%;
 284 }
 285
 286 .ctdl-forum-urlmodal {
 287         width: 75%;
 288 }
 289
 290 .ctdl-roomlist-top {
 291         background-color: GhostWhite;
 292         width: 100%;
 293         height: 100%;
 294         overflow: auto;
 295         border: none;
 296 }
 297
 298 .ctdl-roomlist-floor {
 299 }
 300
 301 .ctdl-roomlist-floor-label {
 302         font-size: x-large;
 303         margin: 1vw;
 304         margin-bottom: 0;
 305 }
 306
 307 .ctdl-roomlist-floor-rooms {
 308 }
 309
 310 .ctdl-roomlist-room {
 311         display: flex;
 312         flex-direction: row;
 313         flex-wrap: nowrap;
 314         justify-content: space-around;
 315         align-items: center;
 316         overflow: hidden;
 317         border-radius: 10px;
 318         border-style: outset;
 319         background-color: White;
 320         padding: 0.3vw;
 321         margin-top: 0;
 322         margin-bottom: 0.25vw;
 323         margin-left: 1vw;
 324         margin-right: 1vw;
 325 }
 326
 327 .ctdl-roomlist-roomicon {
 328         overflow: hidden;
 329         font-size: large;
 330         margin-right: auto;
 331 }
 332
 333 .ctdl-roomlist-roomname {
 334         font-size: large;
 335         margin-right: auto;
 336         padding-left: 1vw;
 337         padding-right: 1vw;
 338 }
 339
 340 .ctdl-roomlist-roomname-hasnewmsgs {
 341         font-weight: bold;
 342         margin-right: auto;
 343 }
 344
 345 .ctdl-roomlist-mtime {
 346         margin-left: auto;
 347 }
 348
 349 .ctdl-mailbox-grid-container {
 350         display: grid;
 351         position: relative;
 352         overflow: hidden;
 353         width: 100%;
 354         height: 100%;
 355         background-color: GhostWhite;
 356 }
 357
 358 .ctdl-mailbox-pane {                            /* list of messages when in mailbox view */
 359         height: 15vw;
 360         overflow-x: hidden;
 361         overflow-y: scroll;
 362         background-color: #DDDDDD;
 363         border-bottom: solid 3px SlateGrey;     /* We can probably turn this into a drag handle */
 364 }
 365
 366 .ctdl-mailbox-table {
 367         width: 100%;
 368         background-color: GhostWhite;
 369         border-collapse: collapse;
 370 }
 371
 372 .ctdl-mailbox-table td {
 373         padding: 5px;
 374 }
 375
 376 .ctdl-mailbox-table tr {
 377         cursor: pointer;
 378 }
 379
 380 .ctdl-mailbox-table tr:nth-child(even) {        /* this gives us the alternating-bar effect */
 381         background-color: Gainsboro;
 382 }
 383
 384 .ctdl-mailbox-table tr:hover {
 385         background-color: Blue;
 386         color: White;
 387 }
 388
 389 .ctdl-mailbox-table th {
 390         position: sticky;
 391         top: 0;
 392         z-index: 6;
 393         background-color: SlateGrey;
 394         color: White;
 395         padding-top: 5px;
 396         padding-bottom: 5px;
 397 }
 398
 399 .ctdl-mailbox-table th:hover {                  /* Suppress highlighting the header bar */
 400         background-color: SlateGrey;
 401         color: White;
 402         cursor: default;
 403 }
 404
 405 .ctdl-mail-subject {                            /* Subject column in mailbox message list */
 406 }
 407
 408 .ctdl-mail-sender {                             /* Sender column in mailbox message list */
 409 }
 410
 411 .ctdl-mail-date {                               /* Date column in mailbox message list */
 412         white-space: nowrap;
 413 }
 414
 415 .ctdl-mail-msgnum {                             /* # column in mailbox message list */
 416         white-space: nowrap;
 417 }
 418
 419 .ctdl-mailbox-reading-pane {                    /* message reading pane when in mailbox view */
 420         overflow: auto;
 421         background-color: GhostWhite;
 422         padding: 5px;
 423         overflow: auto;
 424         border: none;
 425 }
 426
 427 .ctdl-compose-mail {                            /* mail composition window */
 428         width: 100%;
 429         height: 100%;
 430         overflow: auto;
 431         border: 2px dashed red;                 /* FIXME this goes away after testing */
 432 }
 433
 434 .ctdl-login-screen-grid-container {
 435         display: grid;
 436         grid-template-columns: auto auto;
 437 }
 438
 439 .ctdl-login-screen-grid-item {
 440         padding: 20px;
 441         font-size: 1.25em;
 442         vertical-align: middle;
 443 }
 444
 445 .ctdl-login-screen-grid-item input {
 446         height: 100%;
 447         border: none;
 448         font-size: 1.25em;
 449 }