UI changes, green theme
This commit is contained in:
Radek Davidek
parent
355de3dcde
commit
4221587d5b
@ -1,6 +1,6 @@
|
||||
body
|
||||
{
|
||||
background: #FFFFCC;
|
||||
background: #2a2a2a;
|
||||
color: #000000;
|
||||
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
|
||||
margin: 5px 10px 10px 10px;
|
||||
@ -78,13 +78,13 @@ td, th, p, li
|
||||
}
|
||||
.tborder
|
||||
{
|
||||
background: #FFFFCC;
|
||||
background: #2a2a2a;
|
||||
color: #000000;
|
||||
border: 1px solid #0B198C;
|
||||
}
|
||||
.tcat
|
||||
{
|
||||
background: #FFFFCC url(../images/cat-line.gif) repeat-x top left;
|
||||
background: #2a2a2a url(../images/cat-line.gif) repeat-x top left;
|
||||
color: #000000;
|
||||
font: bold 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
|
||||
}
|
||||
@ -125,7 +125,7 @@ td, th, p, li
|
||||
}
|
||||
.thead a:hover, .thead a:active, .thead_ahover
|
||||
{
|
||||
color: #FFFFCC;
|
||||
color: #2a2a2a;
|
||||
}
|
||||
.tfoot
|
||||
{
|
||||
@ -142,12 +142,12 @@ td, th, p, li
|
||||
}
|
||||
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
|
||||
{
|
||||
color: #FFFFCC;
|
||||
color: #2a2a2a;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.alt1, .alt1Active
|
||||
{
|
||||
background: #FFFFCC;
|
||||
background: #2a2a2a;
|
||||
color: #000000;
|
||||
font-size: 9pt;
|
||||
}
|
||||
@ -158,12 +158,12 @@ td, th, p, li
|
||||
}
|
||||
.inlinemod
|
||||
{
|
||||
background: #FFFFCC;
|
||||
background: #2a2a2a;
|
||||
color: #000000;
|
||||
}
|
||||
.wysiwyg
|
||||
{
|
||||
background: #FFFFCC;
|
||||
background: #2a2a2a;
|
||||
color: #000000;
|
||||
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
|
||||
margin: 5px 10px 10px 10px;
|
||||
@ -171,7 +171,7 @@ td, th, p, li
|
||||
}
|
||||
textarea, .bginput
|
||||
{
|
||||
background: #FFFFCC;
|
||||
background: #2a2a2a;
|
||||
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
|
||||
}
|
||||
.bginput option, .bginput optgroup
|
||||
@ -187,7 +187,7 @@ textarea, .bginput
|
||||
}
|
||||
select
|
||||
{
|
||||
background: #FFFFCC;
|
||||
background: #2a2a2a;
|
||||
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
|
||||
}
|
||||
option, optgroup
|
||||
@ -214,7 +214,7 @@ option, optgroup
|
||||
}
|
||||
.fjsel
|
||||
{
|
||||
background: #FFFFCC;
|
||||
background: #2a2a2a;
|
||||
color: #000000;
|
||||
}
|
||||
.fjdpth0
|
||||
@ -231,7 +231,7 @@ option, optgroup
|
||||
}
|
||||
.panelsurround
|
||||
{
|
||||
background: #FFFFCC;
|
||||
background: #2a2a2a;
|
||||
color: #000000;
|
||||
}
|
||||
legend
|
||||
@ -294,7 +294,7 @@ legend
|
||||
}
|
||||
.vbmenu_hilite
|
||||
{
|
||||
background: #FFFFCC;
|
||||
background: #2a2a2a;
|
||||
color: #330000;
|
||||
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
|
||||
white-space: nowrap;
|
||||
@ -517,126 +517,126 @@ ul.menu .topline {border-top:1px solid #aaa}
|
||||
|
||||
:root[data-theme='dark']
|
||||
{
|
||||
--fc-bg-page: radial-gradient(circle at top, #1f2025 0%, #18191d 45%, #121317 100%);
|
||||
--fc-fg-main: #eae4d8;
|
||||
--fc-link: #9dc0ff;
|
||||
--fc-link-hover: #e4b89f;
|
||||
--fc-surface: #1d1f24;
|
||||
--fc-shadow-strong: rgba(0, 0, 0, 0.45);
|
||||
--fc-shadow-soft: rgba(0,0,0,.35);
|
||||
--fc-border: #3f4148;
|
||||
--fc-thead-top: #4b2d22;
|
||||
--fc-thead-bottom: #3b2219;
|
||||
--fc-thead-fg: #f2e9d7;
|
||||
--fc-tcat-top: #2d3139;
|
||||
--fc-tcat-bottom: #242830;
|
||||
--fc-tcat-fg: #ddd6c8;
|
||||
--fc-alt1: #23262d;
|
||||
--fc-alt2: #2a2e36;
|
||||
--fc-panel-surround: #252932;
|
||||
--fc-panel-bg: #20242b;
|
||||
--fc-panel-border: #3d424b;
|
||||
--fc-input-bg: #171b22;
|
||||
--fc-input-border: #525866;
|
||||
--fc-button-top: #3c3322;
|
||||
--fc-button-bottom: #2f281c;
|
||||
--fc-button-hover-top: #4a3f2b;
|
||||
--fc-button-hover-bottom: #383024;
|
||||
--fc-button-border: #6f6040;
|
||||
--fc-vbmenu-top: #4a2b20;
|
||||
--fc-vbmenu-bottom: #3c2219;
|
||||
--fc-vbmenu-fg: #f0e7d7;
|
||||
--fc-header-top: #262b34;
|
||||
--fc-header-bottom: #1f242c;
|
||||
--fc-header-title: #ece8df;
|
||||
--fc-header-sep: #a99376;
|
||||
--fc-header-section: #d8cab3;
|
||||
--fc-pill-bg: #2b313a;
|
||||
--fc-pill-border: #4b5563;
|
||||
--fc-pill-fg: #ddd9cf;
|
||||
--fc-pill-alert-bg: #3f2a20;
|
||||
--fc-pill-alert-border: #7b4a32;
|
||||
--fc-pill-alert-fg: #f5d7c8;
|
||||
--fc-account-bg: #20252e;
|
||||
--fc-account-border: #434b58;
|
||||
--fc-avatar-border: #5c6878;
|
||||
--fc-clock: #85d99a;
|
||||
--fc-nav-bg: #2a3038;
|
||||
--fc-nav-border: #576174;
|
||||
--fc-nav-fg: #e6dfd0;
|
||||
--fc-nav-hover-bg: #343b45;
|
||||
--fc-nav-active-bg: #6f3f2a;
|
||||
--fc-nav-active-fg: #fff0da;
|
||||
--fc-nav-active-border: #945137;
|
||||
--fc-nav-logout-bg: #4a2f24;
|
||||
--fc-nav-logout-border: #8f5135;
|
||||
--fc-nav-logout-fg: #ffd8c4;
|
||||
--fc-chat-new: #ff8b8b;
|
||||
--fc-chat-info: #9dc0ff;
|
||||
--fc-chat-default: #eae4d8;
|
||||
--fc-bg-page: #1a1a1a;
|
||||
--fc-fg-main: #e0e0e0;
|
||||
--fc-link: #4ade80;
|
||||
--fc-link-hover: #6ee7a7;
|
||||
--fc-surface: #1a1a1a;
|
||||
--fc-shadow-strong: rgba(0, 0, 0, 0.5);
|
||||
--fc-shadow-soft: rgba(0, 0, 0, 0.5);
|
||||
--fc-border: #3a3a3a;
|
||||
--fc-thead-top: #4ade80;
|
||||
--fc-thead-bottom: #4ade80;
|
||||
--fc-thead-fg: #1a1a1a;
|
||||
--fc-tcat-top: #2f2f2f;
|
||||
--fc-tcat-bottom: #2a2a2a;
|
||||
--fc-tcat-fg: #e0e0e0;
|
||||
--fc-alt1: #2a2a2a;
|
||||
--fc-alt2: #252525;
|
||||
--fc-panel-surround: #2a2a2a;
|
||||
--fc-panel-bg: #2a2a2a;
|
||||
--fc-panel-border: #3a3a3a;
|
||||
--fc-input-bg: #2a2a2a;
|
||||
--fc-input-border: #4ade80;
|
||||
--fc-button-top: #2a2a2a;
|
||||
--fc-button-bottom: #2a2a2a;
|
||||
--fc-button-hover-top: #3a3a3a;
|
||||
--fc-button-hover-bottom: #3a3a3a;
|
||||
--fc-button-border: #4ade80;
|
||||
--fc-vbmenu-top: #2a2a2a;
|
||||
--fc-vbmenu-bottom: #2a2a2a;
|
||||
--fc-vbmenu-fg: #e0e0e0;
|
||||
--fc-header-top: #2a2a2a;
|
||||
--fc-header-bottom: #2a2a2a;
|
||||
--fc-header-title: #4ade80;
|
||||
--fc-header-sep: #4ade80;
|
||||
--fc-header-section: #a0a0a0;
|
||||
--fc-pill-bg: #2a2a2a;
|
||||
--fc-pill-border: #3a3a3a;
|
||||
--fc-pill-fg: #e0e0e0;
|
||||
--fc-pill-alert-bg: #3f2a2a;
|
||||
--fc-pill-alert-border: #ef4444;
|
||||
--fc-pill-alert-fg: #fecaca;
|
||||
--fc-account-bg: #2a2a2a;
|
||||
--fc-account-border: #3a3a3a;
|
||||
--fc-avatar-border: #3a3a3a;
|
||||
--fc-clock: #4ade80;
|
||||
--fc-nav-bg: #2a2a2a;
|
||||
--fc-nav-border: #3a3a3a;
|
||||
--fc-nav-fg: #e0e0e0;
|
||||
--fc-nav-hover-bg: #3a3a3a;
|
||||
--fc-nav-active-bg: #4ade80;
|
||||
--fc-nav-active-fg: #1a1a1a;
|
||||
--fc-nav-active-border: #4ade80;
|
||||
--fc-nav-logout-bg: #3f2a2a;
|
||||
--fc-nav-logout-border: #ef4444;
|
||||
--fc-nav-logout-fg: #fecaca;
|
||||
--fc-chat-new: #ef4444;
|
||||
--fc-chat-info: #4ade80;
|
||||
--fc-chat-default: #e0e0e0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
{
|
||||
:root:not([data-theme='light'])
|
||||
{
|
||||
--fc-bg-page: radial-gradient(circle at top, #1f2025 0%, #18191d 45%, #121317 100%);
|
||||
--fc-fg-main: #eae4d8;
|
||||
--fc-link: #9dc0ff;
|
||||
--fc-link-hover: #e4b89f;
|
||||
--fc-surface: #1d1f24;
|
||||
--fc-shadow-strong: rgba(0, 0, 0, 0.45);
|
||||
--fc-shadow-soft: rgba(0,0,0,.35);
|
||||
--fc-border: #3f4148;
|
||||
--fc-thead-top: #4b2d22;
|
||||
--fc-thead-bottom: #3b2219;
|
||||
--fc-thead-fg: #f2e9d7;
|
||||
--fc-tcat-top: #2d3139;
|
||||
--fc-tcat-bottom: #242830;
|
||||
--fc-tcat-fg: #ddd6c8;
|
||||
--fc-alt1: #23262d;
|
||||
--fc-alt2: #2a2e36;
|
||||
--fc-panel-surround: #252932;
|
||||
--fc-panel-bg: #20242b;
|
||||
--fc-panel-border: #3d424b;
|
||||
--fc-input-bg: #171b22;
|
||||
--fc-input-border: #525866;
|
||||
--fc-button-top: #3c3322;
|
||||
--fc-button-bottom: #2f281c;
|
||||
--fc-button-hover-top: #4a3f2b;
|
||||
--fc-button-hover-bottom: #383024;
|
||||
--fc-button-border: #6f6040;
|
||||
--fc-vbmenu-top: #4a2b20;
|
||||
--fc-vbmenu-bottom: #3c2219;
|
||||
--fc-vbmenu-fg: #f0e7d7;
|
||||
--fc-header-top: #262b34;
|
||||
--fc-header-bottom: #1f242c;
|
||||
--fc-header-title: #ece8df;
|
||||
--fc-header-sep: #a99376;
|
||||
--fc-header-section: #d8cab3;
|
||||
--fc-pill-bg: #2b313a;
|
||||
--fc-pill-border: #4b5563;
|
||||
--fc-pill-fg: #ddd9cf;
|
||||
--fc-pill-alert-bg: #3f2a20;
|
||||
--fc-pill-alert-border: #7b4a32;
|
||||
--fc-pill-alert-fg: #f5d7c8;
|
||||
--fc-account-bg: #20252e;
|
||||
--fc-account-border: #434b58;
|
||||
--fc-avatar-border: #5c6878;
|
||||
--fc-clock: #85d99a;
|
||||
--fc-nav-bg: #2a3038;
|
||||
--fc-nav-border: #576174;
|
||||
--fc-nav-fg: #e6dfd0;
|
||||
--fc-nav-hover-bg: #343b45;
|
||||
--fc-nav-active-bg: #6f3f2a;
|
||||
--fc-nav-active-fg: #fff0da;
|
||||
--fc-nav-active-border: #945137;
|
||||
--fc-nav-logout-bg: #4a2f24;
|
||||
--fc-nav-logout-border: #8f5135;
|
||||
--fc-nav-logout-fg: #ffd8c4;
|
||||
--fc-chat-new: #ff8b8b;
|
||||
--fc-chat-info: #9dc0ff;
|
||||
--fc-chat-default: #eae4d8;
|
||||
--fc-bg-page: #1a1a1a;
|
||||
--fc-fg-main: #e0e0e0;
|
||||
--fc-link: #4ade80;
|
||||
--fc-link-hover: #6ee7a7;
|
||||
--fc-surface: #1a1a1a;
|
||||
--fc-shadow-strong: rgba(0, 0, 0, 0.5);
|
||||
--fc-shadow-soft: rgba(0, 0, 0, 0.5);
|
||||
--fc-border: #3a3a3a;
|
||||
--fc-thead-top: #4ade80;
|
||||
--fc-thead-bottom: #4ade80;
|
||||
--fc-thead-fg: #1a1a1a;
|
||||
--fc-tcat-top: #2f2f2f;
|
||||
--fc-tcat-bottom: #2a2a2a;
|
||||
--fc-tcat-fg: #e0e0e0;
|
||||
--fc-alt1: #2a2a2a;
|
||||
--fc-alt2: #252525;
|
||||
--fc-panel-surround: #2a2a2a;
|
||||
--fc-panel-bg: #2a2a2a;
|
||||
--fc-panel-border: #3a3a3a;
|
||||
--fc-input-bg: #2a2a2a;
|
||||
--fc-input-border: #4ade80;
|
||||
--fc-button-top: #2a2a2a;
|
||||
--fc-button-bottom: #2a2a2a;
|
||||
--fc-button-hover-top: #3a3a3a;
|
||||
--fc-button-hover-bottom: #3a3a3a;
|
||||
--fc-button-border: #4ade80;
|
||||
--fc-vbmenu-top: #2a2a2a;
|
||||
--fc-vbmenu-bottom: #2a2a2a;
|
||||
--fc-vbmenu-fg: #e0e0e0;
|
||||
--fc-header-top: #2a2a2a;
|
||||
--fc-header-bottom: #2a2a2a;
|
||||
--fc-header-title: #4ade80;
|
||||
--fc-header-sep: #4ade80;
|
||||
--fc-header-section: #a0a0a0;
|
||||
--fc-pill-bg: #2a2a2a;
|
||||
--fc-pill-border: #3a3a3a;
|
||||
--fc-pill-fg: #e0e0e0;
|
||||
--fc-pill-alert-bg: #3f2a2a;
|
||||
--fc-pill-alert-border: #ef4444;
|
||||
--fc-pill-alert-fg: #fecaca;
|
||||
--fc-account-bg: #2a2a2a;
|
||||
--fc-account-border: #3a3a3a;
|
||||
--fc-avatar-border: #3a3a3a;
|
||||
--fc-clock: #4ade80;
|
||||
--fc-nav-bg: #2a2a2a;
|
||||
--fc-nav-border: #3a3a3a;
|
||||
--fc-nav-fg: #e0e0e0;
|
||||
--fc-nav-hover-bg: #3a3a3a;
|
||||
--fc-nav-active-bg: #4ade80;
|
||||
--fc-nav-active-fg: #1a1a1a;
|
||||
--fc-nav-active-border: #4ade80;
|
||||
--fc-nav-logout-bg: #3f2a2a;
|
||||
--fc-nav-logout-border: #ef4444;
|
||||
--fc-nav-logout-fg: #fecaca;
|
||||
--fc-chat-new: #ef4444;
|
||||
--fc-chat-info: #4ade80;
|
||||
--fc-chat-default: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -646,6 +646,10 @@ body
|
||||
color: var(--fc-fg-main);
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
min-height: 100vh;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
a:link, a:visited, .page a:link, .page a:visited
|
||||
@ -681,6 +685,7 @@ a:hover, a:active, .page a:hover, .page a:active
|
||||
|
||||
.tborder
|
||||
{
|
||||
background: var(--fc-border);
|
||||
border: 1px solid var(--fc-border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
@ -1127,3 +1132,89 @@ input#s
|
||||
background: var(--fc-input-bg);
|
||||
border: 1px solid var(--fc-input-border);
|
||||
}
|
||||
|
||||
|
||||
:root[data-theme='dark'] input:focus,
|
||||
:root[data-theme='dark'] select:focus,
|
||||
:root[data-theme='dark'] textarea:focus
|
||||
{
|
||||
outline: none;
|
||||
border-color: #4ade80;
|
||||
box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
{
|
||||
:root:not([data-theme='light']) input:focus,
|
||||
:root:not([data-theme='light']) select:focus,
|
||||
:root:not([data-theme='light']) textarea:focus
|
||||
{
|
||||
outline: none;
|
||||
border-color: #4ade80;
|
||||
box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .fc-forumdisplay .thead
|
||||
{
|
||||
background: linear-gradient(180deg, #304039 0%, #27342f 100%);
|
||||
color: #d8f7e4;
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .fc-forumdisplay .thead a:link,
|
||||
:root[data-theme='dark'] .fc-forumdisplay .thead a:visited,
|
||||
:root[data-theme='dark'] .fc-forumdisplay .thead a:hover,
|
||||
:root[data-theme='dark'] .fc-forumdisplay .thead a:active
|
||||
{
|
||||
color: #d8f7e4;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
{
|
||||
:root:not([data-theme='light']) .fc-forumdisplay .thead
|
||||
{
|
||||
background: linear-gradient(180deg, #304039 0%, #27342f 100%);
|
||||
color: #d8f7e4;
|
||||
}
|
||||
|
||||
:root:not([data-theme='light']) .fc-forumdisplay .thead a:link,
|
||||
:root:not([data-theme='light']) .fc-forumdisplay .thead a:visited,
|
||||
:root:not([data-theme='light']) .fc-forumdisplay .thead a:hover,
|
||||
:root:not([data-theme='light']) .fc-forumdisplay .thead a:active
|
||||
{
|
||||
color: #d8f7e4;
|
||||
}
|
||||
}
|
||||
|
||||
/* Legacy classes that still had light-yellow backgrounds in dark mode */
|
||||
:root[data-theme='dark'] .alt3,
|
||||
:root[data-theme='dark'] .inlinemod,
|
||||
:root[data-theme='dark'] .fjdpth0,
|
||||
:root[data-theme='dark'] .wysiwyg,
|
||||
:root[data-theme='dark'] .vbmenu_hilite,
|
||||
:root[data-theme='dark'] .vbmenu_option,
|
||||
:root[data-theme='dark'] .page,
|
||||
:root[data-theme='dark'] .panel,
|
||||
:root[data-theme='dark'] ul.menu ul li a
|
||||
{
|
||||
background: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
{
|
||||
:root:not([data-theme='light']) .alt3,
|
||||
:root:not([data-theme='light']) .inlinemod,
|
||||
:root:not([data-theme='light']) .fjdpth0,
|
||||
:root:not([data-theme='light']) .wysiwyg,
|
||||
:root:not([data-theme='light']) .vbmenu_hilite,
|
||||
:root:not([data-theme='light']) .vbmenu_option,
|
||||
:root:not([data-theme='light']) .page,
|
||||
:root:not([data-theme='light']) .panel,
|
||||
:root:not([data-theme='light']) ul.menu ul li a
|
||||
{
|
||||
background: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<title>kAmMa's Forum - {{FORUM_NAME}}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class='page fc-page'>
|
||||
<div class='page fc-page fc-forumdisplay'>
|
||||
<div class='fc-shell'>
|
||||
<br/>
|
||||
{{COMMON_HEADER}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user