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