+:root {\r
+ --layout-link-color: #000;\r
+ --layout-link-hover-color: #333;\r
+ --layout-input-text-color: #000;\r
+ --layout-offset-background-color: #FFF;\r
+ --layout-offset-background-light-color: #e9e9e9;\r
+}\r
+\r
+[data-theme="dark"] {\r
+ --layout-link-color: #FFF;\r
+ --layout-link-hover-color: #BBB;\r
+ --layout-input-text-color: #FFF;\r
+ --layout-input-background-color: #444;\r
+ --layout-offset-background-color: #444;\r
+ --layout-offset-background-light-color: #666;\r
+}\r
+\r
/*\r
-----------------------------------------------\r
Grey Box Method - Layout CSS\r
----------------------------------------------- */\r
\r
body {\r
- background: #eee;\r
- color: #333;\r
+ font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;\r
font-size: 11px;\r
padding: 0;\r
}\r
/* anchors\r
----------------------------------------------- */\r
a {\r
- color: #000;\r
+ color: var(--layout-link-color);\r
font-weight:bold;\r
text-decoration: none;\r
}\r
a:hover {\r
- color:#333;\r
+ color: var(--layout-link-hover-color);\r
+}\r
+\r
+/* input\r
+----------------------------------------------- */\r
+input { \r
+ color: var(--layout-input-text-color);\r
+ background-color: var(--layout-input-background-color);\r
}\r
\r
\r
----------------------------------------------- */\r
.container_12,\r
.container_16 {\r
- background:#fff;\r
}\r
\r
\r
margin-bottom:1em;\r
}\r
blockquote {\r
- font-family: Georgia, 'Times New Roman', serif;\r
+ xfont-family: Georgia, 'Times New Roman', serif;\r
font-size:1.2em;\r
padding-left:1em;\r
border-left:4px solid #ccc;\r
text-transform:uppercase;\r
}\r
ul.section li a {\r
- background:#bbb;\r
+ xbackground:#bbb;\r
}\r
ul.section li a:hover {\r
- background:#aaa;\r
+ xbackground:#aaa;\r
}\r
ul.section li a:active {\r
color:#fff;\r
- background:#666;\r
+ xbackground:#666;\r
}\r
ul.section li li a {\r
background:#ddd;\r
}\r
ul.section li li a:active {\r
color:#000;\r
- background:#fff;\r
+ xbackground:#fff;\r
}\r
ul.section ul li {\r
text-transform:none;\r
}\r
ul.section ul.current li a {\r
- background:#eee;\r
+ xbackground:#eee;\r
border-bottom:1px solid #fff;\r
}\r
ul.section ul.current li a:hover {\r
- background:#ddd;\r
+ xbackground:#ddd;\r
}\r
ul.section ul.current li a:active {\r
- background:#fff;\r
+ xbackground:#fff;\r
}\r
ul.section li a.current {\r
color:#fff;\r
- background:#666;\r
+ xbackground:#666;\r
}\r
ul.section li a.current:hover {\r
background:#555;\r
tbody td {\r
border-top:1px solid #bbb;\r
border-bottom:1px solid #bbb;\r
- background:#eee;\r
+ xbackground:#eee;\r
}\r
tbody tr.odd th,\r
tbody tr.odd td {\r
- background:#fff;\r
+ xbackground:#fff;\r
}\r
tfoot th,\r
tfoot td {\r
border-top:2px solid #666;\r
- background:#eee;\r
+ background:#555;\r
}\r
tfoot tr.total th,\r
tfoot tr.total td {\r
border:1px solid #bbb;\r
padding:10px;\r
position:relative;\r
- background:#e9e9e9;\r
+ background: var(--layout-offset-background-light-color);\r
margin-bottom:10px;\r
}\r
legend {\r
font-size:1.1em;\r
padding:.4em .8em;\r
- background:#fff;\r
+ background: var(--layout-offset-background-color);\r
border:1px solid #bbb;\r
}\r
fieldset.login p {\r