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