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 the grid take up exactly 100% of the screen */
   8         box-sizing: border-box;
   9         padding: 0;
  10         margin: 0;
  11 }
  12
  13 .ctdl-grid-banner-item {                /* These grid items will be referenced in the grid container */
  14         grid-area: header;
  15         background-color: #282a35;
  16 }
  17
  18 .ctdl-grid-navbar-item {
  19         grid-area: menu;
  20         background-color: GhostWhite;
  21 }
  22
  23 .ctdl-grid-main-item {
  24         grid-area: main;
  25         overflow-x: hidden;
  26         overflow-y: auto;
  27 }
  28
  29 .ctdl-main-grid-container {                     /* This is so mind-bogglingly simple I can't believe it works */
  30         display: grid;
  31         grid-template-rows: 100px auto;
  32         grid-template-columns: 200px auto;
  33         grid-template-areas:
  34                 'header header'
  35                 'menu main';
  36         gap: 3px;
  37         background-color: #456789;      /* This is the color of the lines between the boxes, and also the boxes themselves if not overridden */
  38         padding: 0;                     /* This is the border around the edges of the screen */
  39         width: 100vw;
  40         height: 100vh;
  41 }
  42
  43 .ctdl-main-grid-container > div {
  44         text-align: left;
  45         padding: 10px 0;
  46 }
  47
  48 .ctdl-banner-buttons li {               /* Buttons that appear in the top banner are list items that reference this class */
  49         float: left;
  50         display: block;
  51         padding: 8px;
  52         background-color: #282a35;
  53         color: white;
  54 }
  55
  56 .ctdl-banner-buttons li:hover {         /* Buttons that appear in the top banner also reference this class when hovered over */
  57         background-color: black;
  58 }
  59
  60 html,body,h1,h2,h3,h4,h5 {
  61         font-family: sans-serif
  62 }
  63
  64 .ctdl-modal {
  65         display: none;                  /* set to "block" to make the modal appear */
  66         z-index: 9;
  67         position: fixed;
  68         top: 50%;
  69         left: 50%;
  70         transform: translate(-50%, -50%);
  71         border-style: outset;
  72         border-width: 3px;
  73         justify-content: center;
  74         align-items: center;
  75         padding: 10px;
  76         background-color: #BBBBBB;
  77 }
  78
  79 .ctdl-sidebar-class button {
  80         width: 100%;
  81         text-align: left;
  82         background-color: #888888;
  83         color: #FFFFFF;
  84 }
  85
  86 .ctdl-grid-banner-item button {
  87         background-color: #888888;
  88         color: #FFFFFF;
  89 }
  90
  91 .ctdl-msg-reading-pane {
  92         background-color: #456789;
  93 }
  94
  95 .ctdl-fmsg-wrapper {            /* message wrapper for forum view */
  96         overflow: hidden;
  97         border-radius: 10px;
  98         background-color: white;
  99         margin: 1vw;
 100         padding: 5px;           /* inside the box */
 101 }
 102
 103 .ctdl-mmsg-wrapper {            /* message wrapper for mailbox view */
 104         overflow: hidden;
 105         background-color: white;
 106         padding: 5px;           /* inside the box */
 107         border-style: solid;    /* could also be: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden */
 108         border-width: 1px;
 109 }
 110
 111 .ctdl-msg-reply {
 112         margin-left: 5vw;
 113 }
 114
 115 .ctdl-msg-header {
 116         overflow: hidden;
 117         padding: 4px;
 118         background-color: GhostWhite;
 119 }
 120
 121 .ctdl-msg-header-info {
 122         float: left;
 123 }
 124
 125 .ctdl-msg-header-buttons {
 126         float: right;
 127 }
 128
 129 .ctdl-msg-button {
 130         margin-left: 2px;
 131         border-radius: 5px;
 132         background-color: blue;
 133         color: black;
 134         padding: 2px;
 135         background-color: GhostWhite;
 136         border-style: solid;
 137         border-width: thin;
 138         border-color: black;
 139 }
 140
 141 .ctdl-msg-button:hover {
 142         background-color: #123456;
 143         color: GhostWhite;
 144         transition: .3s;
 145         border-color: #123456;
 146 }
 147
 148 .ctdl-msg-button a {
 149         text-decoration: none;
 150 }
 151
 152 .ctdl-avatar {
 153         width: 32px;
 154 }
 155
 156 .ctdl-username {
 157         font-weight: bold;
 158         color: #000055;
 159 }
 160
 161 .ctdl-username a {
 162         text-decoration: none;
 163         padding-right: 4px;
 164 }
 165
 166 .ctdl-msgdate {
 167         padding-left: 4px;
 168 }
 169
 170 .ctdl-msgsubject {
 171         font-weight: bold;
 172 }
 173
 174 .ctdl-fmsg-content {                    /* message text, when in forum view */
 175         margin-left: 32px;
 176 }
 177
 178 .ctdl-mmsg-content {                    /* message text, when in mailbox view */
 179         margin-left: 0;
 180 }
 181
 182 .ctdl-avatar {
 183         float: left;
 184         padding-right: 2px;
 185 }
 186
 187 .ctdl-forum-nav {
 188         text-align: center;
 189         color: #ffff00;
 190 }
 191
 192 .ctdl-forum-nav a {
 193         text-decoration: none;
 194 }
 195
 196 blockquote {
 197         background-color: #f5f5f5 !important;
 198         color: navy !important;
 199         margin-bottom: 0px;
 200         padding-bottom: 0px;
 201 }
 202
 203 blockquote blockquote {
 204         background-color: #ebebeb !important;
 205         color: maroon !important;
 206 }
 207
 208 blockquote blockquote blockquote {
 209         background-color: #e1e1e1 !important;
 210         color: green !important;
 211 }
 212
 213 blockquote blockquote blockquote blockquote {
 214         background-color: #d7d7d7 !important;
 215         color: purple !important;
 216 }
 217
 218 blockquote blockquote blockquote blockquote blockquote {
 219         background-color: #cdcdcd !important;
 220         color: teal !important;
 221 }
 222
 223 blockquote pre {
 224         margin-left: 1%;
 225         margin-right: 1%;
 226 }
 227
 228 .ctdl-roomlist-top {
 229         margin: 1%;
 230 }
 231
 232 .ctdl-roomlist-floor {
 233 }
 234
 235 .ctdl-roomlist-floor-label {
 236         font-size: x-large;
 237         margin: 1vw;
 238 }
 239
 240 .ctdl-roomlist-floor-rooms {
 241 }
 242
 243 .ctdl-roomlist-room {
 244         overflow: hidden;
 245         border-radius: 10px;
 246         background-color: white;
 247         padding: 0.5vw;
 248         margin-bottom: 0.5vw;
 249         width: 100%;
 250 }
 251
 252 .ctdl-roomlist-roomicon {
 253         overflow: hidden;
 254         font-size: large;
 255         margin-left: 1vw;
 256         margin-right: 1vw;
 257         padding-left: 0.75vw;
 258         padding-right: 1.75vw;
 259         padding-top: 0.75vw;
 260         padding-bottom: 0.75vw;
 261 }
 262
 263 .ctdl-roomlist-roomname {
 264         font-size: large;
 265 }
 266
 267 .ctdl-roomlist-roomname-hasnewmsgs {
 268         font-weight: bold;
 269 }
 270
 271 .ctdl-roomlist-mtime {
 272 }
 273
 274 .ctdl-mailbox-heading {
 275         position: sticky;
 276         top: 0;
 277         z-index: 6;
 278 }
 279
 280 .ctdl-mailbox-pane {            /* list of messages when in mailbox view */
 281         width: 100%;
 282         height: 20em;
 283         overflow-x: hidden;
 284         overflow-y: scroll;
 285 }
 286
 287 .ctdl-reading-pane {            /* message reading/composing pane when in mailbox view */
 288         overflow: auto;
 289 }
 290
 291 .ctdl-compose-mail {            /* mail composition window */
 292         width: 100%;
 293         height: 100%;
 294         overflow: auto;
 295         border: 5px solid red;
 296         background-color: yellow;
 297 }