UI changes, green theme

This commit is contained in:
Radek Davidek 2026-03-27 17:25:16 +01:00
parent 355de3dcde
commit 4221587d5b
2 changed files with 219 additions and 128 deletions

View File

@ -1,6 +1,6 @@
body body
{ {
background: #FFFFCC; background: #2a2a2a;
color: #000000; color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 5px 10px 10px 10px; margin: 5px 10px 10px 10px;
@ -78,13 +78,13 @@ td, th, p, li
} }
.tborder .tborder
{ {
background: #FFFFCC; background: #2a2a2a;
color: #000000; color: #000000;
border: 1px solid #0B198C; border: 1px solid #0B198C;
} }
.tcat .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; color: #000000;
font: bold 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; 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 .thead a:hover, .thead a:active, .thead_ahover
{ {
color: #FFFFCC; color: #2a2a2a;
} }
.tfoot .tfoot
{ {
@ -142,12 +142,12 @@ td, th, p, li
} }
.tfoot a:hover, .tfoot a:active, .tfoot_ahover .tfoot a:hover, .tfoot a:active, .tfoot_ahover
{ {
color: #FFFFCC; color: #2a2a2a;
text-decoration: underline; text-decoration: underline;
} }
.alt1, .alt1Active .alt1, .alt1Active
{ {
background: #FFFFCC; background: #2a2a2a;
color: #000000; color: #000000;
font-size: 9pt; font-size: 9pt;
} }
@ -158,12 +158,12 @@ td, th, p, li
} }
.inlinemod .inlinemod
{ {
background: #FFFFCC; background: #2a2a2a;
color: #000000; color: #000000;
} }
.wysiwyg .wysiwyg
{ {
background: #FFFFCC; background: #2a2a2a;
color: #000000; color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 5px 10px 10px 10px; margin: 5px 10px 10px 10px;
@ -171,7 +171,7 @@ td, th, p, li
} }
textarea, .bginput textarea, .bginput
{ {
background: #FFFFCC; background: #2a2a2a;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
} }
.bginput option, .bginput optgroup .bginput option, .bginput optgroup
@ -187,7 +187,7 @@ textarea, .bginput
} }
select select
{ {
background: #FFFFCC; background: #2a2a2a;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
} }
option, optgroup option, optgroup
@ -214,7 +214,7 @@ option, optgroup
} }
.fjsel .fjsel
{ {
background: #FFFFCC; background: #2a2a2a;
color: #000000; color: #000000;
} }
.fjdpth0 .fjdpth0
@ -231,7 +231,7 @@ option, optgroup
} }
.panelsurround .panelsurround
{ {
background: #FFFFCC; background: #2a2a2a;
color: #000000; color: #000000;
} }
legend legend
@ -294,7 +294,7 @@ legend
} }
.vbmenu_hilite .vbmenu_hilite
{ {
background: #FFFFCC; background: #2a2a2a;
color: #330000; color: #330000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap; white-space: nowrap;
@ -517,126 +517,126 @@ ul.menu .topline {border-top:1px solid #aaa}
:root[data-theme='dark'] :root[data-theme='dark']
{ {
--fc-bg-page: radial-gradient(circle at top, #1f2025 0%, #18191d 45%, #121317 100%); --fc-bg-page: #1a1a1a;
--fc-fg-main: #eae4d8; --fc-fg-main: #e0e0e0;
--fc-link: #9dc0ff; --fc-link: #4ade80;
--fc-link-hover: #e4b89f; --fc-link-hover: #6ee7a7;
--fc-surface: #1d1f24; --fc-surface: #1a1a1a;
--fc-shadow-strong: rgba(0, 0, 0, 0.45); --fc-shadow-strong: rgba(0, 0, 0, 0.5);
--fc-shadow-soft: rgba(0,0,0,.35); --fc-shadow-soft: rgba(0, 0, 0, 0.5);
--fc-border: #3f4148; --fc-border: #3a3a3a;
--fc-thead-top: #4b2d22; --fc-thead-top: #4ade80;
--fc-thead-bottom: #3b2219; --fc-thead-bottom: #4ade80;
--fc-thead-fg: #f2e9d7; --fc-thead-fg: #1a1a1a;
--fc-tcat-top: #2d3139; --fc-tcat-top: #2f2f2f;
--fc-tcat-bottom: #242830; --fc-tcat-bottom: #2a2a2a;
--fc-tcat-fg: #ddd6c8; --fc-tcat-fg: #e0e0e0;
--fc-alt1: #23262d; --fc-alt1: #2a2a2a;
--fc-alt2: #2a2e36; --fc-alt2: #252525;
--fc-panel-surround: #252932; --fc-panel-surround: #2a2a2a;
--fc-panel-bg: #20242b; --fc-panel-bg: #2a2a2a;
--fc-panel-border: #3d424b; --fc-panel-border: #3a3a3a;
--fc-input-bg: #171b22; --fc-input-bg: #2a2a2a;
--fc-input-border: #525866; --fc-input-border: #4ade80;
--fc-button-top: #3c3322; --fc-button-top: #2a2a2a;
--fc-button-bottom: #2f281c; --fc-button-bottom: #2a2a2a;
--fc-button-hover-top: #4a3f2b; --fc-button-hover-top: #3a3a3a;
--fc-button-hover-bottom: #383024; --fc-button-hover-bottom: #3a3a3a;
--fc-button-border: #6f6040; --fc-button-border: #4ade80;
--fc-vbmenu-top: #4a2b20; --fc-vbmenu-top: #2a2a2a;
--fc-vbmenu-bottom: #3c2219; --fc-vbmenu-bottom: #2a2a2a;
--fc-vbmenu-fg: #f0e7d7; --fc-vbmenu-fg: #e0e0e0;
--fc-header-top: #262b34; --fc-header-top: #2a2a2a;
--fc-header-bottom: #1f242c; --fc-header-bottom: #2a2a2a;
--fc-header-title: #ece8df; --fc-header-title: #4ade80;
--fc-header-sep: #a99376; --fc-header-sep: #4ade80;
--fc-header-section: #d8cab3; --fc-header-section: #a0a0a0;
--fc-pill-bg: #2b313a; --fc-pill-bg: #2a2a2a;
--fc-pill-border: #4b5563; --fc-pill-border: #3a3a3a;
--fc-pill-fg: #ddd9cf; --fc-pill-fg: #e0e0e0;
--fc-pill-alert-bg: #3f2a20; --fc-pill-alert-bg: #3f2a2a;
--fc-pill-alert-border: #7b4a32; --fc-pill-alert-border: #ef4444;
--fc-pill-alert-fg: #f5d7c8; --fc-pill-alert-fg: #fecaca;
--fc-account-bg: #20252e; --fc-account-bg: #2a2a2a;
--fc-account-border: #434b58; --fc-account-border: #3a3a3a;
--fc-avatar-border: #5c6878; --fc-avatar-border: #3a3a3a;
--fc-clock: #85d99a; --fc-clock: #4ade80;
--fc-nav-bg: #2a3038; --fc-nav-bg: #2a2a2a;
--fc-nav-border: #576174; --fc-nav-border: #3a3a3a;
--fc-nav-fg: #e6dfd0; --fc-nav-fg: #e0e0e0;
--fc-nav-hover-bg: #343b45; --fc-nav-hover-bg: #3a3a3a;
--fc-nav-active-bg: #6f3f2a; --fc-nav-active-bg: #4ade80;
--fc-nav-active-fg: #fff0da; --fc-nav-active-fg: #1a1a1a;
--fc-nav-active-border: #945137; --fc-nav-active-border: #4ade80;
--fc-nav-logout-bg: #4a2f24; --fc-nav-logout-bg: #3f2a2a;
--fc-nav-logout-border: #8f5135; --fc-nav-logout-border: #ef4444;
--fc-nav-logout-fg: #ffd8c4; --fc-nav-logout-fg: #fecaca;
--fc-chat-new: #ff8b8b; --fc-chat-new: #ef4444;
--fc-chat-info: #9dc0ff; --fc-chat-info: #4ade80;
--fc-chat-default: #eae4d8; --fc-chat-default: #e0e0e0;
} }
@media (prefers-color-scheme: dark) @media (prefers-color-scheme: dark)
{ {
:root:not([data-theme='light']) :root:not([data-theme='light'])
{ {
--fc-bg-page: radial-gradient(circle at top, #1f2025 0%, #18191d 45%, #121317 100%); --fc-bg-page: #1a1a1a;
--fc-fg-main: #eae4d8; --fc-fg-main: #e0e0e0;
--fc-link: #9dc0ff; --fc-link: #4ade80;
--fc-link-hover: #e4b89f; --fc-link-hover: #6ee7a7;
--fc-surface: #1d1f24; --fc-surface: #1a1a1a;
--fc-shadow-strong: rgba(0, 0, 0, 0.45); --fc-shadow-strong: rgba(0, 0, 0, 0.5);
--fc-shadow-soft: rgba(0,0,0,.35); --fc-shadow-soft: rgba(0, 0, 0, 0.5);
--fc-border: #3f4148; --fc-border: #3a3a3a;
--fc-thead-top: #4b2d22; --fc-thead-top: #4ade80;
--fc-thead-bottom: #3b2219; --fc-thead-bottom: #4ade80;
--fc-thead-fg: #f2e9d7; --fc-thead-fg: #1a1a1a;
--fc-tcat-top: #2d3139; --fc-tcat-top: #2f2f2f;
--fc-tcat-bottom: #242830; --fc-tcat-bottom: #2a2a2a;
--fc-tcat-fg: #ddd6c8; --fc-tcat-fg: #e0e0e0;
--fc-alt1: #23262d; --fc-alt1: #2a2a2a;
--fc-alt2: #2a2e36; --fc-alt2: #252525;
--fc-panel-surround: #252932; --fc-panel-surround: #2a2a2a;
--fc-panel-bg: #20242b; --fc-panel-bg: #2a2a2a;
--fc-panel-border: #3d424b; --fc-panel-border: #3a3a3a;
--fc-input-bg: #171b22; --fc-input-bg: #2a2a2a;
--fc-input-border: #525866; --fc-input-border: #4ade80;
--fc-button-top: #3c3322; --fc-button-top: #2a2a2a;
--fc-button-bottom: #2f281c; --fc-button-bottom: #2a2a2a;
--fc-button-hover-top: #4a3f2b; --fc-button-hover-top: #3a3a3a;
--fc-button-hover-bottom: #383024; --fc-button-hover-bottom: #3a3a3a;
--fc-button-border: #6f6040; --fc-button-border: #4ade80;
--fc-vbmenu-top: #4a2b20; --fc-vbmenu-top: #2a2a2a;
--fc-vbmenu-bottom: #3c2219; --fc-vbmenu-bottom: #2a2a2a;
--fc-vbmenu-fg: #f0e7d7; --fc-vbmenu-fg: #e0e0e0;
--fc-header-top: #262b34; --fc-header-top: #2a2a2a;
--fc-header-bottom: #1f242c; --fc-header-bottom: #2a2a2a;
--fc-header-title: #ece8df; --fc-header-title: #4ade80;
--fc-header-sep: #a99376; --fc-header-sep: #4ade80;
--fc-header-section: #d8cab3; --fc-header-section: #a0a0a0;
--fc-pill-bg: #2b313a; --fc-pill-bg: #2a2a2a;
--fc-pill-border: #4b5563; --fc-pill-border: #3a3a3a;
--fc-pill-fg: #ddd9cf; --fc-pill-fg: #e0e0e0;
--fc-pill-alert-bg: #3f2a20; --fc-pill-alert-bg: #3f2a2a;
--fc-pill-alert-border: #7b4a32; --fc-pill-alert-border: #ef4444;
--fc-pill-alert-fg: #f5d7c8; --fc-pill-alert-fg: #fecaca;
--fc-account-bg: #20252e; --fc-account-bg: #2a2a2a;
--fc-account-border: #434b58; --fc-account-border: #3a3a3a;
--fc-avatar-border: #5c6878; --fc-avatar-border: #3a3a3a;
--fc-clock: #85d99a; --fc-clock: #4ade80;
--fc-nav-bg: #2a3038; --fc-nav-bg: #2a2a2a;
--fc-nav-border: #576174; --fc-nav-border: #3a3a3a;
--fc-nav-fg: #e6dfd0; --fc-nav-fg: #e0e0e0;
--fc-nav-hover-bg: #343b45; --fc-nav-hover-bg: #3a3a3a;
--fc-nav-active-bg: #6f3f2a; --fc-nav-active-bg: #4ade80;
--fc-nav-active-fg: #fff0da; --fc-nav-active-fg: #1a1a1a;
--fc-nav-active-border: #945137; --fc-nav-active-border: #4ade80;
--fc-nav-logout-bg: #4a2f24; --fc-nav-logout-bg: #3f2a2a;
--fc-nav-logout-border: #8f5135; --fc-nav-logout-border: #ef4444;
--fc-nav-logout-fg: #ffd8c4; --fc-nav-logout-fg: #fecaca;
--fc-chat-new: #ff8b8b; --fc-chat-new: #ef4444;
--fc-chat-info: #9dc0ff; --fc-chat-info: #4ade80;
--fc-chat-default: #eae4d8; --fc-chat-default: #e0e0e0;
} }
} }
@ -646,6 +646,10 @@ body
color: var(--fc-fg-main); color: var(--fc-fg-main);
margin: 0; margin: 0;
padding: 12px; 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 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 .tborder
{ {
background: var(--fc-border);
border: 1px solid var(--fc-border); border: 1px solid var(--fc-border);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
@ -1127,3 +1132,89 @@ input#s
background: var(--fc-input-bg); background: var(--fc-input-bg);
border: 1px solid var(--fc-input-border); 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;
}
}

View File

@ -8,7 +8,7 @@
<title>kAmMa's Forum - {{FORUM_NAME}}</title> <title>kAmMa's Forum - {{FORUM_NAME}}</title>
</head> </head>
<body> <body>
<div class='page fc-page'> <div class='page fc-page fc-forumdisplay'>
<div class='fc-shell'> <div class='fc-shell'>
<br/> <br/>
{{COMMON_HEADER}} {{COMMON_HEADER}}