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