Add eternity-wasteland-v2 theme
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Eternity Project">
|
||||
<rect width="64" height="64" fill="#161210"/>
|
||||
<circle cx="32" cy="32" r="22" fill="none" stroke="#e7e2d3" stroke-width="3"/>
|
||||
<circle cx="22" cy="22" r="4" fill="#e4632c"/>
|
||||
<circle cx="41" cy="28" r="2.5" fill="#8fae3d"/>
|
||||
<circle cx="27" cy="43" r="3" fill="#e4632c"/>
|
||||
<line x1="22" y1="22" x2="41" y2="28" stroke="#e7e2d3" stroke-width="1.5"/>
|
||||
<line x1="22" y1="22" x2="27" y2="43" stroke="#e7e2d3" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 542 B |
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60" role="img" aria-label="Eternity Project">
|
||||
<circle cx="30" cy="30" r="22" fill="none" stroke="#11212b" stroke-width="2"/>
|
||||
<circle cx="21" cy="21" r="3" fill="#ff6b35"/>
|
||||
<circle cx="38" cy="26" r="2" fill="#11212b"/>
|
||||
<circle cx="26" cy="40" r="2.5" fill="#ff6b35"/>
|
||||
<line x1="21" y1="21" x2="38" y2="26" stroke="#11212b" stroke-width="1"/>
|
||||
<line x1="21" y1="21" x2="26" y2="40" stroke="#11212b" stroke-width="1"/>
|
||||
<text x="66" y="30" font-family="'Space Grotesk','Helvetica Neue',sans-serif" font-size="24" font-weight="700" letter-spacing="1" fill="#11212b">ETERNITY</text>
|
||||
<text x="67" y="46" font-family="'DM Mono','Courier New',monospace" font-size="11" letter-spacing="2" fill="#59706b">PROJECT / FI</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 793 B |
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "Eternity Wasteland v2",
|
||||
"author": "Eternity Project",
|
||||
"license": "GNU Affero General Public License",
|
||||
"version": "2.0.0",
|
||||
"extends": "elastic",
|
||||
"localization": false,
|
||||
"config": {
|
||||
"product_name": "eternityproject.fi",
|
||||
"skin_logo": "skins/eternity-wasteland-v2/images/logo.svg",
|
||||
"skin_favicon": "skins/eternity-wasteland-v2/images/favicon.svg"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,468 @@
|
||||
@import url("../../elastic/styles/styles.css");
|
||||
@import url("../../elastic/styles/styles.min.css");
|
||||
|
||||
:root {
|
||||
--ink: #11212b;
|
||||
--paper: #f1f1e9;
|
||||
--acid: #c7ef4b;
|
||||
--orange: #ff6b35;
|
||||
--line: #b9c5bc;
|
||||
--muted: #59706b;
|
||||
--panel: rgb(241 241 233 / 80%);
|
||||
--field: #fbfbf6;
|
||||
--backdrop: rgb(17 33 43 / 85%);
|
||||
--flash-error: #ffe3d9;
|
||||
--grid: 17 33 43;
|
||||
--grid-a1: 5%;
|
||||
--grid-a2: 4%;
|
||||
--body-font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
|
||||
--header-font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
|
||||
--font-family-monospace: "DM Mono", "Courier New", monospace;
|
||||
--primary: var(--ink);
|
||||
--primary-text: var(--paper);
|
||||
--secondary: var(--acid);
|
||||
--secondary-text: var(--ink);
|
||||
--body-bg: var(--paper);
|
||||
--content-bg: var(--paper);
|
||||
--layout-bg: var(--paper);
|
||||
--main-action-color: var(--ink);
|
||||
--main-action-text-color: var(--paper);
|
||||
--link-color: var(--ink);
|
||||
--input-focus-border-color: var(--ink);
|
||||
--input-focus-box-shadow: 0 0 0 3px var(--acid);
|
||||
--border-radius: 0;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--ink: #e7e2d3;
|
||||
--paper: #161210;
|
||||
--acid: #8fae3d;
|
||||
--orange: #e4632c;
|
||||
--line: #4a3f33;
|
||||
--muted: #a89a86;
|
||||
--panel: rgb(22 18 16 / 82%);
|
||||
--field: #211b17;
|
||||
--backdrop: rgb(8 6 5 / 90%);
|
||||
--flash-error: #3a1c14;
|
||||
--grid: 228 98 44;
|
||||
--grid-a1: 7%;
|
||||
--grid-a2: 5%;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#layout,
|
||||
#layout-content,
|
||||
#layout-list,
|
||||
#layout-sidebar,
|
||||
#layout-menu {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--body-font-family);
|
||||
background-image: linear-gradient(90deg, transparent 49.5%, rgb(var(--grid) / var(--grid-a1)) 50%, transparent 50.5%), linear-gradient(rgb(var(--grid) / var(--grid-a2)) 1px, transparent 1px);
|
||||
background-size: 70px 70px, 7px 7px;
|
||||
transition: background-color 200ms ease, color 200ms ease;
|
||||
}
|
||||
|
||||
body > #layout,
|
||||
#layout {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#layout::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #layout::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
background-image: radial-gradient(circle at 12% 20%, rgb(143 174 61 / 12%), transparent 35%), radial-gradient(circle at 85% 75%, rgb(228 98 44 / 14%), transparent 40%);
|
||||
}
|
||||
|
||||
body a,
|
||||
body .link,
|
||||
#taskmenu a,
|
||||
#taskmenu a:visited {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
body a:hover,
|
||||
body .link:hover,
|
||||
#taskmenu a:hover,
|
||||
#taskmenu a.selected {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
#layout > .header,
|
||||
#layout-sidebar .header,
|
||||
#layout-list .header,
|
||||
#layout-content .header {
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
#logo {
|
||||
max-height: 60px;
|
||||
max-width: 260px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #logo {
|
||||
filter: brightness(0) saturate(100%) invert(93%) sepia(13%) saturate(389%) hue-rotate(356deg) brightness(103%) contrast(81%);
|
||||
}
|
||||
|
||||
body.task-login #layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.task-login #layout-content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body.task-login #logo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 16vh;
|
||||
}
|
||||
|
||||
#login-form {
|
||||
position: relative;
|
||||
top: 20vh;
|
||||
width: 95%;
|
||||
max-width: 320px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#messagelist-header,
|
||||
#directorylist-header,
|
||||
#taskmenu,
|
||||
#taskmenu .action-buttons,
|
||||
#layout-menu .menu,
|
||||
.toolbar {
|
||||
font-family: var(--font-family-monospace);
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
#taskmenu .action-buttons a,
|
||||
#taskmenu a,
|
||||
#layout-menu .menu a,
|
||||
.toolbar a.button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#taskmenu .action-buttons a.selected,
|
||||
#taskmenu .action-buttons a:hover,
|
||||
#taskmenu a.selected,
|
||||
#layout-menu .menu a.selected,
|
||||
#layout-menu .menu a:hover {
|
||||
background: var(--acid);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.button,
|
||||
.btn,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
button,
|
||||
.formbuttons .button {
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
.btn:hover,
|
||||
input[type="button"]:hover,
|
||||
input[type="submit"]:hover,
|
||||
button:hover,
|
||||
.formbuttons .button:hover {
|
||||
background: var(--acid);
|
||||
color: var(--ink);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button.secondary,
|
||||
.btn-secondary,
|
||||
.button.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.button.secondary:hover,
|
||||
.btn-secondary:hover,
|
||||
.button.btn-secondary:hover {
|
||||
background: var(--orange);
|
||||
}
|
||||
|
||||
/* Elastic gives these icon-only Inbox controls fixed Daylight colors. */
|
||||
html[data-theme="dark"] #rcmbtn111,
|
||||
html[data-theme="dark"] #rcmbtn112,
|
||||
html[data-theme="dark"] #rcmbtn113,
|
||||
html[data-theme="dark"] .searchbar .button.unread {
|
||||
background: var(--field);
|
||||
border-color: var(--line);
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #listmenulink,
|
||||
html[data-theme="dark"] #rcmbtn111::before,
|
||||
html[data-theme="dark"] #rcmbtn112::before,
|
||||
html[data-theme="dark"] #rcmbtn113::before,
|
||||
html[data-theme="dark"] .searchbar .button.unread::before {
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #rcmbtn111:hover,
|
||||
html[data-theme="dark"] #rcmbtn112:hover,
|
||||
html[data-theme="dark"] #rcmbtn113:hover,
|
||||
html[data-theme="dark"] .searchbar .button.unread:hover,
|
||||
html[data-theme="dark"] #listmenulink:hover {
|
||||
background: var(--acid);
|
||||
border-color: var(--acid);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #rcmbtn110,
|
||||
html[data-theme="dark"] #messagelist-header .task-menu-button,
|
||||
html[data-theme="dark"] #messagelist-header .toolbar-menu-button {
|
||||
background: var(--field);
|
||||
border-color: var(--line);
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #rcmbtn110::before,
|
||||
html[data-theme="dark"] #messagelist-header .task-menu-button::before,
|
||||
html[data-theme="dark"] #messagelist-header .toolbar-menu-button::before {
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #rcmbtn110:hover,
|
||||
html[data-theme="dark"] #messagelist-header .task-menu-button:hover,
|
||||
html[data-theme="dark"] #messagelist-header .toolbar-menu-button:hover {
|
||||
background: var(--acid);
|
||||
border-color: var(--acid);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #mailboxlist .mailbox.selected > a {
|
||||
background: var(--acid);
|
||||
border-color: var(--acid);
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="search"],
|
||||
textarea,
|
||||
select,
|
||||
.custom-select,
|
||||
.form-control {
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-color: var(--field);
|
||||
color: var(--ink);
|
||||
font-family: var(--body-font-family);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
.custom-select:focus,
|
||||
.form-control:focus {
|
||||
border-color: var(--ink);
|
||||
outline: 3px solid var(--acid);
|
||||
outline-offset: 1px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-group > label,
|
||||
.form-label,
|
||||
.propform label,
|
||||
#login-form label {
|
||||
color: var(--ink);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.7px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#login-form,
|
||||
#login-footer,
|
||||
#login-content,
|
||||
#login-box {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#login-form .row,
|
||||
#login-form .form-group {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#login-form .input-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#login-form .input-group > .form-control,
|
||||
#login-form .input-group-text,
|
||||
#login-form .input-group .icon {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
body.task-login #login-form .form-control,
|
||||
body.task-login #login-form .input-group-text,
|
||||
body.task-login #login-form .input-group .icon {
|
||||
background-color: var(--field) !important;
|
||||
border-color: var(--ink);
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
|
||||
body.task-login #login-form .form-control::placeholder {
|
||||
color: var(--muted);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
margin-top: 1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.theme-toggle:hover,
|
||||
.theme-toggle[aria-pressed="true"] {
|
||||
background: var(--acid);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
body.task-login #messagestack {
|
||||
top: auto;
|
||||
bottom: 1rem;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.listing,
|
||||
.records-table,
|
||||
.table,
|
||||
#messagelist,
|
||||
#directorylist,
|
||||
#contacts-table,
|
||||
.box,
|
||||
.card,
|
||||
#compose-headers,
|
||||
#compose-content,
|
||||
#message-content,
|
||||
#mailview-left,
|
||||
#mailview-right,
|
||||
#message-header,
|
||||
.message-header,
|
||||
#layout-sidebar .pagenav,
|
||||
#layout-list .pagenav,
|
||||
#layout-sidebar .footer,
|
||||
#layout-list .footer {
|
||||
border-color: var(--ink);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.records-table thead td,
|
||||
.records-table thead th,
|
||||
#messagelist thead td,
|
||||
#directorylist .treelist li a {
|
||||
border-color: var(--ink);
|
||||
color: var(--muted);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.records-table tbody tr td,
|
||||
#messagelist tbody tr td,
|
||||
#directorylist .treelist li a {
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.records-table tbody tr:hover td,
|
||||
#messagelist tbody tr:hover td,
|
||||
#directorylist .treelist li a:hover,
|
||||
.popover .menu li a:hover,
|
||||
.menu li a:hover,
|
||||
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
|
||||
.dropdown-item:hover {
|
||||
background: var(--acid);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.records-table tbody tr.selected td,
|
||||
#messagelist tbody tr.selected td,
|
||||
#directorylist .treelist li.selected > a {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
.popover,
|
||||
.menu,
|
||||
.ui-autocomplete,
|
||||
.dropdown-menu,
|
||||
#rcmKSearchpane {
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 0;
|
||||
box-shadow: 4px 4px 0 var(--backdrop);
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.alert,
|
||||
#messagestack > div,
|
||||
#messagestack > .alert {
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
|
||||
.alert-success,
|
||||
#messagestack .success {
|
||||
background: var(--acid);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.alert-danger,
|
||||
.alert-error,
|
||||
#messagestack .error {
|
||||
border-color: var(--orange);
|
||||
background: var(--flash-error);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.quota-widget .value,
|
||||
.progress-bar {
|
||||
background: var(--orange);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
<roundcube:add_label name="back" />
|
||||
<roundcube:add_label name="errortitle" />
|
||||
<roundcube:add_label name="options" />
|
||||
<roundcube:add_label name="plaintoggle" />
|
||||
<roundcube:add_label name="htmltoggle" />
|
||||
<roundcube:add_label name="previous" />
|
||||
<roundcube:add_label name="next" />
|
||||
<roundcube:add_label name="select" />
|
||||
<roundcube:add_label name="close" />
|
||||
<roundcube:add_label name="browse" />
|
||||
<roundcube:add_label name="choosefile" />
|
||||
<roundcube:add_label name="choosefiles" />
|
||||
<roundcube:object name="doctype" value="html5" />
|
||||
<roundcube:if condition="!env:framed || env:extwin" />
|
||||
<html>
|
||||
<roundcube:else />
|
||||
<html class="iframe">
|
||||
<roundcube:endif />
|
||||
<head>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
if (localStorage.getItem('ep-theme') === 'dark') {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
} catch (error) { }
|
||||
}());
|
||||
</script>
|
||||
<roundcube:object name="meta" />
|
||||
<roundcube:object name="links" />
|
||||
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
|
||||
<link rel="shortcut icon" type="image/svg+xml" href="/images/favicon.svg">
|
||||
<link rel="stylesheet" href="/deps/bootstrap.min.css">
|
||||
<roundcube:if condition="config:devel_mode" />
|
||||
<link rel="stylesheet/less" href="/styles/styles.less">
|
||||
<roundcube:link rel="stylesheet/less" href="/styles/print.less" condition="env:action == 'print'" />
|
||||
<script src="/deps/less.min.js" data-env="development"></script>
|
||||
<roundcube:else />
|
||||
<link rel="stylesheet" href="/styles/styles.css">
|
||||
<roundcube:link rel="stylesheet" href="/styles/print.css" condition="env:action == 'print'" />
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="env:action != 'print' && !config:devel_mode && config:dark_mode_support" />
|
||||
<script>
|
||||
try {
|
||||
if (document.cookie.indexOf('colorMode=dark') > -1
|
||||
|| (document.cookie.indexOf('colorMode=light') === -1 && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
document.documentElement.className += ' dark-mode';
|
||||
}
|
||||
} catch (error) { }
|
||||
</script>
|
||||
<roundcube:endif />
|
||||
</head>
|
||||
<body class="task-<roundcube:exp expression="env:error_task ?: env:task ?: 'error'"> action-<roundcube:exp expression="asciiwords(env:action, true, '-') ?: 'none'">">
|
||||
<roundcube:if condition="!env:framed || env:extwin" />
|
||||
<div id="<roundcube:exp expression="env:action == 'print' ? 'print-' : ''">layout">
|
||||
<roundcube:endif />
|
||||
@@ -0,0 +1,62 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
if (localStorage.getItem('ep-theme') === 'dark') {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
} catch (error) { }
|
||||
}());
|
||||
</script>
|
||||
|
||||
<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
|
||||
|
||||
<div id="layout-content" class="selected no-navbar" role="main">
|
||||
<roundcube:object name="logo" src="/images/logo.svg" id="logo" alt="Logo" />
|
||||
<roundcube:form id="login-form" name="login-form" method="post" class="propform">
|
||||
<roundcube:object name="loginform" form="login-form" size="40" submit=true class="form-control" />
|
||||
<button type="button" class="theme-toggle" id="theme-toggle" aria-pressed="false"></button>
|
||||
<div id="login-footer" role="contentinfo">
|
||||
<roundcube:object name="productname" condition="config:display_product_info > 0" />
|
||||
<roundcube:object name="version" condition="config:display_product_info == 2" />
|
||||
<roundcube:if condition="config:support_url" />
|
||||
• <a href="<roundcube:var name='config:support_url' />" target="_blank" rel="noopener" class="support-link"><roundcube:label name="support" /></a>
|
||||
<roundcube:endif />
|
||||
<roundcube:container name="loginfooter" id="login-footer" />
|
||||
</div>
|
||||
</roundcube:form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var root = document.documentElement;
|
||||
var button = document.getElementById('theme-toggle');
|
||||
|
||||
function updateButton() {
|
||||
var dark = root.getAttribute('data-theme') === 'dark';
|
||||
button.textContent = dark ? 'DAYLIGHT' : 'WASTELAND';
|
||||
button.setAttribute('aria-pressed', dark ? 'true' : 'false');
|
||||
}
|
||||
|
||||
updateButton();
|
||||
button.addEventListener('click', function () {
|
||||
var dark = root.getAttribute('data-theme') === 'dark';
|
||||
if (dark) {
|
||||
root.removeAttribute('data-theme');
|
||||
} else {
|
||||
root.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
try {
|
||||
localStorage.setItem('ep-theme', dark ? 'light' : 'dark');
|
||||
} catch (error) { }
|
||||
updateButton();
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
|
||||
<noscript>
|
||||
<p class="noscriptwarning"><roundcube:label name="noscriptwarning" /></p>
|
||||
</noscript>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; overflow: hidden; }
|
||||
body {
|
||||
background-color: #f1f1e9;
|
||||
background-image: url(images/logo.svg), linear-gradient(90deg, transparent 49.5%, rgb(17 33 43 / 5%) 50%, transparent 50.5%), linear-gradient(rgb(17 33 43 / 4%) 1px, transparent 1px);
|
||||
background-position: center, 0 0, 0 0;
|
||||
background-repeat: no-repeat, repeat, repeat;
|
||||
background-size: 30%, 70px 70px, 7px 7px;
|
||||
}
|
||||
html[data-theme="dark"] body {
|
||||
background-color: #161210;
|
||||
background-image: url(images/logo.svg), linear-gradient(90deg, transparent 49.5%, rgb(228 98 44 / 7%) 50%, transparent 50.5%), linear-gradient(rgb(228 98 44 / 5%) 1px, transparent 1px);
|
||||
}
|
||||
html[data-theme="dark"] body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(circle at 12% 20%, rgb(143 174 61 / 12%), transparent 35%), radial-gradient(circle at 85% 75%, rgb(228 98 44 / 14%), transparent 40%);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
try {
|
||||
if (localStorage.getItem('ep-theme') === 'dark') {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
} catch (error) { }
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user