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