LightPIT: comparison src/main/webapp/lightpit.css

-:1f1bce90127e
+:f0a1631eaf00
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 * POSSIBILITY OF SUCH DAMAGE.
 *
 */
+:root {
+--color-background: white;
+--color-background-popup: ghostwhite;
+--color-foreground: #1c204e;
+--color-foreground-inverted: white;
+--color-link: #3060f8;
+--color-background-mainmenu: #e0e0e5;
+--color-background-mainmenu-active: #d0d0d5;
+--color-background-sidemenu: #f7f7ff;
+--color-background-sidemenu-active: #e7e7ef;
+--color-background-th: #f0f0f0;
+--color-background-tr-even: #f7f7ff;
+--color-border-primary: #606060;
+--color-border-primary-fade: #d0d0d5;
+--color-border-secondary: #c0c0c0;
+--color-border-secondary-fade: #d3d3d3;
+--color-button-secondary: #f0f0f0;
+--color-button-secondary-hover: #f0f0ff;
+--color-button-primary: #20a0ff;
+--color-button-primary-text: white;
+--color-button-primary-hover: #1090cf;
+--color-background-issue-data: #f7f7f7;
+--color-background-comment-author: #e7e7ef;
+}
+@media (prefers-color-scheme: dark) {
+:root {
+--color-background: #2c404e;
+--color-foreground: #fefaf7;
+--color-foreground-inverted: #1c204e;
+--color-background-popup: #4f6778;
+--color-link: #90e8ff;
+--color-background-mainmenu: #3c3c49;
+--color-background-mainmenu-active: #5c5c69;
+--color-background-sidemenu: #5a5a80;
+--color-background-sidemenu-active: #7a7aa0;
+--color-background-th: #595970;
+--color-background-tr-even: #3c505e;
+--color-border-primary: #ececec;
+--color-border-primary-fade: #a9a9a9;
+--color-border-secondary: #d0d0d0;
+--color-border-secondary-fade: #959595;
+--color-button-secondary: #595970;
+--color-button-secondary-hover: #656585;
+--color-button-primary: #20a0ff;
+--color-button-primary-text: white;
+--color-button-primary-hover: #1090cf;
+--color-background-issue-data: #4c606e;
+--color-background-comment-author: #7a7aa0;
+}
+}
+.light-text {
+color: white;
+}
+.dark-text {
+color: #1c204e;
+}
+input, select, textarea {
+background: var(--color-background);
+color: var(--color-foreground);
+border: var(--color-border-primary) solid thin;
+border-radius: 2pt;
+}
 html {
 font-family: sans-serif;
 font-size: 11pt;
-background: white;
+background: var(--color-background);
-color: #1c204e;
+color: var(--color-foreground);
 margin: 0;
 padding: 0;
 height: 100vh;
 }
 margin: 0.75em 0;
 }
 h3 {
 margin: 0.25em 0;
-}
-.light-text {
-color: white;
-}
-.dark-text {
-color: #1c204e;
 }
 .edit-icon {
 margin-left: 1ex;
 margin-right: 1ex;
 font-size: inherit;
 }
 a {
 cursor: pointer;
-color: #3060f8;
+color: var(--color-link);
 text-decoration: none;
 }
 #page-area {
 display: flex;
 }
 #mainMenu {
 display: flex;
 flex-flow: row nowrap;
-border-image-source: linear-gradient(to right, #606060, rgba(60, 60, 60, .25));
+border-image-source: linear-gradient(to right, var(--color-border-primary), var(--color-border-primary-fade));
 border-image-slice: 1;
 border-bottom-style: solid;
 border-bottom-width: thin;
-background: #e0e0e5;
+background: var(--color-background-mainmenu);
 }
 #sideMenu {
 min-width: 32ex;
 width: 15vw;
 display: flex;
 flex-flow: column;
-color: #3060f8;
+color: var(--color-link);
-border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25));
+border-image-source: linear-gradient(to bottom, var(--color-border-primary), var(--color-border-primary-fade));
 border-image-slice: 1;
 border-right-style: solid;
 border-right-width: thin;
-background: #f7f7ff;
+background: var(--color-background-sidemenu);
 }
 #mainMenu .menuEntry {
 font-size: 1.2rem;
 padding: .25em 1em .25em 1em;
 #sideMenu .menuEntry:hover .edit-icon {
 display: initial;
 }
 #mainMenu .menuEntry[data-active] {
-background: #d0d0d5;
+background: var(--color-background-mainmenu-active);
 }
 #sideMenu .menuEntry[data-active] {
-background: #e7e7ef
+background: var(--color-background-sidemenu-active);
 }
 #sideMenu .level-0 {
 padding-left: .75em;
 }
 flex-grow: 1;
 padding: 1.5em;
 }
 #whats-new {
-background: ghostwhite;
+background: var(--color-background-popup);
 position: fixed;
 top: 10%;
 left: 50%;
 transform: translate(-50%, 0);
 padding: 1.5em;
-border: #1c204e solid 2px;
+border: var(--color-foreground) solid 2px;
 border-radius: 4px;
 }
 .blurred {
 filter: blur(5px);
 button, a.button {
 display: inline-block;
 font-size: medium;
 border-style: solid;
 border-width: thin;
-border-color: #606060;
+border-color: var(--color-border-primary);
 color: inherit;
-background: #f0f0f0;
+background: var(--color-button-secondary);
 padding: .25em .5em .25em .5em;
 cursor: default;
 text-decoration: none;
 text-align: center;
 font-variant-caps: small-caps;
 }
 button:hover, a.button:hover {
-background: #f0f0ff;
+background: var(--color-button-secondary-hover);
-}
-button[data-toggle], a.button[data-toggle] {
-border-color: #1040a0;
-background: #d0d0d5;
 }
 button[type=submit], a.button.submit {
-background: #20a0ff;
+background: var(--color-button-primary);
-color: white;
+color: var(--color-button-primary-text);
 }
 button[type=submit]:hover, a.button.submit:hover {
-background: #1090cf;
+background: var(--color-button-primary-hover);
 }
 th {
 text-align: left;
 }
 table.datatable {
 border-style: solid;
 border-width: thin;
-border-color: silver;
+border-color: var(--color-border-secondary);
 border-collapse: collapse;
 }
 table.datatable th {
 white-space: nowrap;
 font-weight: bold;
-background: #f7f7ff;
+background: var(--color-background-th);
 }
 table.datatable th, table.datatable td {
 border-style: solid;
 border-width: thin;
-border-color: lightgray;
+border-color: var(--color-border-secondary-fade);
 padding: .4em;
 }
 table.datatable tr:nth-child(2n) {
-background: #faffff;
+background: var(--color-background-tr-even);
 }
 table.formtable {
 border-style: none;
 border-collapse: separate;
 .bigskip {
 margin-top: 1.5em;
 }
-.info-box, .error-box, .warn-box {
+.info-box, .error-box {
 margin: 1.5em;
 border-style: dashed;
 border-width: thin;
 border-color: deepskyblue;
 padding: 1em;
 .error-box {
 border-style: outset;
 border-color: red;
 background: lightcoral;
-}
-.warn-box {
-border-style: outset;
-border-color: gold;
-background: lightgoldenrodyellow;
 }
 .table {
 display: table;
 border-spacing: .5em;
 padding: .1em 2ex .1em 2ex;
 display: inline-block;
 box-sizing: border-box;
 border-style: solid;
 border-width: thin;
-border-color: silver;
+border-color: var(--color-border-secondary);
 border-radius: 4pt;
 background: darkgray;
 text-align: center;
 font-weight: bolder;
 font-size: x-small;
 color: lightgray;
 background: darkgray;
 }
 hr.issue-view-separator {
-border-image-source: linear-gradient(to right, rgba(60, 60, 60, .1), rgba(96, 96, 96, 1), rgba(60, 60, 60, .1));
+border-image-source: linear-gradient(to right, var(--color-border-primary-fade), var(--color-border-primary), var(--color-border-primary-fade));
 border-image-slice: 1;
 border-width: thin;
 border-style: none;
 border-top-style: solid;
 }
 padding-left: .25rem;
 margin-bottom: 1.25em;
 }
 .comment-author {
-color: #3060f8;
+color: var(--color-link);
-background: #e7e7ef;
+background: var(--color-background-comment-author);
 margin-left: -.25rem;
 padding: .25rem;
 }
 .comment-author-name {
 }
 div.mde-preview {
 border-style: solid;
 border-width: 2px;
-border-color: silver;
+border-color: var(--color-border-secondary);
 padding: .25em;
 border-radius: 8px;
 }
 span.eta-overdue {
 border-collapse: collapse;
 margin-bottom: 1em;
 }
 table.issue-view td, table.issue-view th {
-background: #f7f7f7;
+background: var(--color-background-issue-data);
-border: solid silver 1pt;
+border: solid var(--color-border-secondary) 1pt;
 padding: .5em;
 }
 table.issue-view th {
 white-space: nowrap;

Mercurial > hg > LightPIT / file comparison

comparison: src/main/webapp/lightpit.css

src/main/webapp/lightpit.css