src/main/webapp/lightpit.css

Mon, 04 Jan 2021 12:45:22 +0100

author
Mike Becker <universe@uap-core.de>
date
Mon, 04 Jan 2021 12:45:22 +0100
changeset 172
89b3320557e2
parent 162
2adc8623dd89
child 180
009700915269
permissions
-rw-r--r--

fixes #120 - thin border rendering for Chrome

     1 /*
     2  * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS HEADER.
     3  * 
     4  * Copyright 2018 Mike Becker. All rights reserved.
     5  * 
     6  * Redistribution and use in source and binary forms, with or without
     7  * modification, are permitted provided that the following conditions are met:
     8  *
     9  *   1. Redistributions of source code must retain the above copyright
    10  *      notice, this list of conditions and the following disclaimer.
    11  *
    12  *   2. Redistributions in binary form must reproduce the above copyright
    13  *      notice, this list of conditions and the following disclaimer in the
    14  *      documentation and/or other materials provided with the distribution.
    15  *
    16  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    17  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    18  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    19  * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
    20  * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    21  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    22  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    23  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    24  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    25  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    26  * POSSIBILITY OF SUCH DAMAGE.
    27  * 
    28  */
    30 html {
    31     font-family: sans-serif;
    32     font-size: 11pt;
    33     background: white;
    34     color: #1c204e;
    35     margin: 0;
    36     padding: 0;
    37 }
    39 body {
    40     height: 100%;
    41     margin: 0;
    42     padding: 0;
    43 }
    45 a {
    46     color: #3060f8;
    47     text-decoration: none;
    48 }
    50 #mainMenu {
    51     position: fixed;
    52     z-index: 2;
    53     width: 100%;
    54     display: flex;
    55     flex-flow: row wrap;
    56     border-image-source: linear-gradient(to right, #606060, rgba(60, 60, 60, .25));
    57     border-image-slice: 1;
    58     border-bottom-style: solid;
    59     border-bottom-width: thin;
    60 }
    62 #sideMenu {
    63     display: flex;
    64     z-index: 1;
    65     flex-flow: column;
    66     position: fixed;
    67     height: 100%;
    68     width: 40ch; /* adjust with sidebar-spacing.margin-left */
    69     padding-top: 2.25rem;
    70     color: #3060f8;
    71     border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25));
    72     border-image-slice: 1;
    73     border-right-style: solid;
    74     border-right-width: thin;
    75 }
    77 #content-area.sidebar-spacing {
    78     margin-left: 40ch; /* adjust with sideMenu.width */
    79 }
    81 #mainMenu {
    82     font-size: 1.2rem;
    83     background: #e0e0e5;
    84 }
    86 #sideMenu {
    87     background: #f7f7ff;
    88     overflow-x: scroll;
    89 }
    91 #mainMenu .menuEntry {
    92     padding: .25em 1em .25em 1em;
    93     border-right-style: solid;
    94     border-right-width: thin;
    95     border-right-color: #9095a1;
    96 }
    98 #sideMenu .menuEntry {
    99     padding-top: .25em;
   100     padding-bottom: .25em;
   101     border-bottom-style: solid;
   102     border-bottom-width: thin;
   103     border-bottom-color: #d7d7df;
   104 }
   106 #mainMenu .menuEntry[data-active] {
   107     background: #d0d0d5;
   108 }
   110 #sideMenu .menuEntry[data-active] {
   111     background: #e7e7ef
   112 }
   114 #sideMenu .level-0 {
   115     padding-left: .25em;
   116 }
   118 #sideMenu .level-1 {
   119     padding-left: .75em;
   120 }
   122 #sideMenu .level-2 {
   123     padding-left: 2em;
   124 }
   126 #content-area {
   127     padding: 2.75rem 1em 1em;
   128 }
   130 button, a.button {
   131     display: inline-block;
   132     font-size: medium;
   133     border-style: solid;
   134     border-width: thin;
   135     border-color: #606060;
   136     color: inherit;
   137     background: #f0f0f0;
   139     padding: .25em .5em .25em .5em;
   140     cursor: default;
   141     text-decoration: none;
   142 }
   144 button:hover, a.button:hover {
   145     background: #f0f0ff;
   146 }
   148 button[type=submit], a.button.submit {
   149     background: #20a0ff;
   150     color: white;
   151 }
   153 button[type=submit]:hover, a.button.submit:hover {
   154     background: #1090cf;
   155 }
   157 th {
   158     text-align: left;
   159 }
   161 table.datatable {
   162     border-style: solid;
   163     border-width: thin;
   164     border-color: silver;
   165     border-collapse: collapse;
   166 }
   168 table.datatable th {
   169     white-space: nowrap;
   170     font-weight: bold;
   171     background: #f7f7ff;
   172 }
   174 table.datatable th, table.datatable td {
   175     border-style: solid;
   176     border-width: thin;
   177     border-color: lightgray;
   178     padding: .4em;
   179 }
   181 table.datatable tr:nth-child(2n) {
   182     background: #faffff;
   183 }
   185 table.formtable {
   186     border-style: none;
   187     border-collapse: separate;
   188     border-spacing: 1em;
   189 }
   191 table.formtable th {
   192     font-weight: bold;
   193     text-align: left;
   194     vertical-align: center;
   195     white-space: nowrap;
   196 }
   198 table.formtable tbody td > * {
   199     width: 100%;
   200     box-sizing: border-box;
   201 }
   203 table.formtable input[type=date] {
   204     width: auto;
   205 }
   207 table.formtable tfoot td {
   208     text-align: right;
   209 }
   211 .fullwidth {
   212     width: 100%;
   213 }
   215 .vtop {
   216     vertical-align: top;
   217 }
   219 .hcenter {
   220     text-align: center;
   221 }
   223 .hright {
   224     text-align: right;
   225 }
   227 .smalltext {
   228     font-size: smaller;
   229 }
   231 .nowrap {
   232     white-space: nowrap;
   233 }
   235 .medskip {
   236     margin-top: .5em;
   237 }
   239 .info-box, .error-box, .warn-box {
   240     margin: 2em;
   241     border-style: dashed;
   242     border-width: thin;
   243     border-color: deepskyblue;
   244     padding: 1em;
   245 }
   247 .error-box {
   248     border-color: red;
   249 }
   251 .warn-box {
   252     border-color: gold;
   253 }
   255 .table {
   256     display: table;
   257     border-spacing: .5em;
   258     margin: -.5em;
   259 }
   261 .row {
   262     display: table-row;
   263 }
   265 .caption {
   266     font-weight: bold;
   267 }
   269 .row > div {
   270     display: table-cell;
   271 }
   273 /* MARKDOWN STYLES */
   275 div.markdown-styled p:first-child {
   276     margin-top: 0;
   277 }
   279 div.markdown-styled table {
   280     border-collapse: collapse;
   281 }
   283 div.markdown-styled td,
   284 div.markdown-styled th {
   285     padding: 0.25em;
   286     border-style: solid;
   287     border-color: darkgray;
   288     border-width: thin;
   289 }

mercurial