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: #f0f0f0;
  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         border-color: #f0f0f0;
  83         background-color: #f0f0f0;
  84         color: #000000;
  85 }
  86
  87 .ctdl-sidebar-class button:hover {
  88         background-color: #ffffff;
  89 }
  90
  91 .ctdl-grid-banner-item button {
  92         background-color: #888888;
  93         color: #FFFFFF;
  94 }
  95
  96 .ctdl-msg-reading-pane {
  97         background-color: #456789;
  98 }
  99
 100 .ctdl-fmsg-wrapper {            /* message wrapper for forum view */
 101         overflow: hidden;
 102         border-radius: 10px;
 103         background-color: white;
 104         margin: 1vw;
 105         padding: 5px;           /* inside the box */
 106 }
 107
 108 .ctdl-mmsg-wrapper {            /* message wrapper for mailbox view */
 109         overflow: hidden;
 110         background-color: white;
 111         padding: 5px;           /* inside the box */
 112         border-style: solid;    /* could also be: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden */
 113         border-width: 1px;
 114 }
 115
 116 .ctdl-msg-reply {
 117         margin-left: 5vw;
 118 }
 119
 120 .ctdl-msg-header {
 121         overflow: hidden;
 122         padding: 4px;
 123         background-color: GhostWhite;
 124 }
 125
 126 .ctdl-msg-header-info {
 127         float: left;
 128 }
 129
 130 .ctdl-msg-header-buttons {
 131         float: right;
 132 }
 133
 134 .ctdl-msg-button {
 135         margin-left: 2px;
 136         border-radius: 5px;
 137         background-color: blue;
 138         color: black;
 139         padding: 2px;
 140         background-color: GhostWhite;
 141         border-style: solid;
 142         border-width: thin;
 143         border-color: black;
 144 }
 145
 146 .ctdl-msg-button:hover {
 147         background-color: #123456;
 148         color: GhostWhite;
 149         transition: .3s;
 150         border-color: #123456;
 151 }
 152
 153 .ctdl-msg-button a {
 154         text-decoration: none;
 155 }
 156
 157 .ctdl-avatar {
 158         width: 32px;
 159 }
 160
 161 .ctdl-username {
 162         font-weight: bold;
 163         color: #000055;
 164 }
 165
 166 .ctdl-username a {
 167         text-decoration: none;
 168         padding-right: 4px;
 169 }
 170
 171 .ctdl-msgdate {
 172         padding-left: 4px;
 173 }
 174
 175 .ctdl-msgsubject {
 176         font-weight: bold;
 177 }
 178
 179 .ctdl-fmsg-content {                    /* message text, when in forum view */
 180         margin-left: 32px;
 181 }
 182
 183 .ctdl-mmsg-content {                    /* message text, when in mailbox view */
 184         margin-left: 0;
 185 }
 186
 187 .ctdl-avatar {
 188         float: left;
 189         padding-right: 2px;
 190 }
 191
 192 .ctdl-forum-nav {
 193         text-align: center;
 194         color: #ffff00;
 195 }
 196
 197 .ctdl-forum-nav a {
 198         text-decoration: none;
 199 }
 200
 201 blockquote {
 202         background-color: #f5f5f5 !important;
 203         color: navy !important;
 204         margin-bottom: 0px;
 205         padding-bottom: 0px;
 206 }
 207
 208 blockquote blockquote {
 209         background-color: #ebebeb !important;
 210         color: maroon !important;
 211 }
 212
 213 blockquote blockquote blockquote {
 214         background-color: #e1e1e1 !important;
 215         color: green !important;
 216 }
 217
 218 blockquote blockquote blockquote blockquote {
 219         background-color: #d7d7d7 !important;
 220         color: purple !important;
 221 }
 222
 223 blockquote blockquote blockquote blockquote blockquote {
 224         background-color: #cdcdcd !important;
 225         color: teal !important;
 226 }
 227
 228 blockquote pre {
 229         margin-left: 1%;
 230         margin-right: 1%;
 231 }
 232
 233 .ctdl-roomlist-top {
 234         margin: 1%;
 235 }
 236
 237 .ctdl-roomlist-floor {
 238 }
 239
 240 .ctdl-roomlist-floor-label {
 241         font-size: x-large;
 242         margin: 1vw;
 243 }
 244
 245 .ctdl-roomlist-floor-rooms {
 246 }
 247
 248 .ctdl-roomlist-room {
 249         overflow: hidden;
 250         border-radius: 10px;
 251         background-color: white;
 252         padding: 0.5vw;
 253         margin-bottom: 0.5vw;
 254         width: 100%;
 255 }
 256
 257 .ctdl-roomlist-roomicon {
 258         overflow: hidden;
 259         font-size: large;
 260         margin-left: 1vw;
 261         margin-right: 1vw;
 262         padding-left: 0.75vw;
 263         padding-right: 1.75vw;
 264         padding-top: 0.75vw;
 265         padding-bottom: 0.75vw;
 266 }
 267
 268 .ctdl-roomlist-roomname {
 269         font-size: large;
 270 }
 271
 272 .ctdl-roomlist-roomname-hasnewmsgs {
 273         font-weight: bold;
 274 }
 275
 276 .ctdl-roomlist-mtime {
 277 }
 278
 279 .ctdl-mailbox-heading {
 280         position: sticky;
 281         top: 0;
 282         z-index: 6;
 283 }
 284
 285 .ctdl-mailbox-pane {            /* list of messages when in mailbox view */
 286         width: 100%;
 287         height: 20em;
 288         overflow-x: hidden;
 289         overflow-y: scroll;
 290 }
 291
 292 .ctdl-reading-pane {            /* message reading/composing pane when in mailbox view */
 293         overflow: auto;
 294 }
 295
 296 .ctdl-compose-mail {            /* mail composition window */
 297         width: 100%;
 298         height: 100%;
 299         overflow: auto;
 300         border: 5px solid red;
 301         background-color: yellow;
 302 }