DEV: Improved dark theme support

This commit is contained in:
Evg 2022-01-31 20:15:38 +03:00
parent 6e2ca32e2e
commit e3c4c57a71
19 changed files with 65 additions and 565 deletions

View file

@ -30,7 +30,6 @@ class EditAnswerController extends MainController
pageError404($post);
Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
Request::getResources()->addBottomStyles('/assets/js/editor/dark.css');
Request::getResources()->addBottomScript('/assets/js/editor/toastui-editor-all.min.js');
return Tpl::agRender(

View file

@ -34,7 +34,6 @@ class AddPostController extends MainController
Request::getResources()->addBottomStyles('/assets/js/tag/tagify.css');
Request::getResources()->addBottomScript('/assets/js/tag/tagify.min.js');
Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
Request::getResources()->addBottomStyles('/assets/js/editor/dark.css');
Request::getResources()->addBottomScript('/assets/js/editor/toastui-editor-all.min.js');
// Adding from page topic

View file

@ -32,7 +32,6 @@ class EditPostController extends MainController
}
Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
Request::getResources()->addBottomStyles('/assets/js/editor/dark.css');
Request::getResources()->addBottomScript('/assets/js/editor/toastui-editor-all.min.js');
Request::getResources()->addBottomStyles('/assets/js/tag/tagify.css');
Request::getResources()->addBottomScript('/assets/js/tag/tagify.min.js');

View file

@ -116,7 +116,6 @@ class PostController extends MainController
if ($this->user['id'] > 0 && $post['post_closed'] == 0) {
Request::getResources()->addBottomStyles('/assets/js/editor/toastui-editor.min.css');
Request::getResources()->addBottomStyles('/assets/js/editor/dark.css');
Request::getResources()->addBottomScript('/assets/js/editor/toastui-editor-all.min.js');
}

View file

@ -1,5 +1,5 @@
</div>
<footer class="w-100 mt15 p15 bg-zinc-800 clear">
<footer class="box-shadow-top mt20">
<div class="text-sm lowercase">
<?= Config::get('meta.name'); ?> &copy; <?= date('Y'); ?> — <?= Translate::get('admin'); ?>
</div>

View file

@ -20,16 +20,16 @@ $dark = Request::getCookie('dayNight') == 'dark' ? 'dark' : '';
<body class="bg-fons<?php if ($dark == 'dark') { ?> dark<?php } ?>">
<header class="bg-blue-steel-700 sticky top0 mt0">
<header class="bg-white br-bottom mt0 mb15">
<div class="flex justify-between items-center max-width mr-auto h40">
<div class="flex items-center">
<div class="w200 white">
<div class="w200 black">
<a class="ml20" href="/">
<i class="bi bi-house white"></i>
<i class="bi bi-house black"></i>
</a>
<span class="mr5 ml5">/</span>
<a href="<?= getUrlByName('admin'); ?>">
<span class="white"><?= Translate::get('admin'); ?><span>
<span class="black"><?= Translate::get('admin'); ?><span>
</a>
</div>
<div class="w400 items-center">
@ -40,7 +40,7 @@ $dark = Request::getCookie('dayNight') == 'dark' ? 'dark' : '';
</form>
</div>
</div>
<div class="white mr15">
<div class="black mr15">
<?= Request::getRemoteAddress(); ?>
</div>
</div>

View file

@ -1,4 +1,4 @@
<footer>
<footer class="box-shadow-top">
<?= Config::get('meta.name'); ?> &copy; <?= date('Y'); ?> — <span class="lowercase"><?= Translate::get('site.directory'); ?></span>
</footer>

View file

@ -1,5 +1,5 @@
</div>
<footer>
<footer class="box-shadow-top">
<?= Config::get('meta.name'); ?> &copy; <?= date('Y'); ?> — <span class="lowercase"><?= Translate::get('search'); ?></span>
</footer>

File diff suppressed because one or more lines are too long

View file

@ -1,474 +0,0 @@
@charset "utf-8";
.toastui-editor-dark.toastui-editor-defaultUI {
border-color: #494c56;
color: #eee;
}
.toastui-editor-dark .toastui-editor-md-container,
.toastui-editor-dark .toastui-editor-ww-container {
background-color: #121212;
}
.toastui-editor-dark .toastui-editor-defaultUI-toolbar {
background-color: #232428;
border-bottom-color: #303238;
}
.toastui-editor-dark .toastui-editor-toolbar-icons {
background-position-y: -49px;
border-color: #232428;
}
.toastui-editor-dark .toastui-editor-toolbar-icons:not(:disabled):hover {
background-color: #36383f;
border-color: #36383f;
}
.toastui-editor-dark .toastui-editor-toolbar-divider {
background-color: #303238;
}
.toastui-editor-dark .toastui-editor-tooltip {
background-color: #535662;
}
.toastui-editor-dark .toastui-editor-tooltip .arrow {
background-color: #535662;
}
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync::before {
color: #8f939f;
}
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync.active::before {
color: #67ccff;
}
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch {
background-color: #2b4455;
}
.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch {
background-color: #2b4455;
}
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch::before {
background-color: #8f939f;
}
.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch::before {
background-color: #67ccff;
}
.toastui-editor-dark .toastui-editor-main .toastui-editor-md-splitter {
background-color: #303238;
}
.toastui-editor-dark .toastui-editor-mode-switch {
border-top-color: #393b42;
background-color: #121212;
}
.toastui-editor-dark .toastui-editor-mode-switch .tab-item {
border-color: #393b42;
background-color: #232428;
color: #757a86;
}
.toastui-editor-dark .toastui-editor-mode-switch .tab-item.active {
border-top-color: #121212;
background-color: #121212;
color: #eee;
}
.toastui-editor-dark .toastui-editor-popup,
.toastui-editor-dark .toastui-editor-context-menu {
background-color: #121212;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
border-color: #494c56;
}
.toastui-editor-dark .toastui-editor-popup-add-heading ul li:hover {
background-color: #36383f;
}
.toastui-editor-dark .toastui-editor-popup-body label {
color: #9a9da3;
}
.toastui-editor-dark .toastui-editor-popup-body input[type='text'] {
background-color: transparent;
color: #eee;
border-color: #303238;
}
.toastui-editor-dark .toastui-editor-popup-body input[type='text']:focus {
outline-color: #67ccff;
}
.toastui-editor-dark .toastui-editor-popup-body input[type='text'].disabled {
color: #969aa5;
border-color: #303238;
background-color: rgba(48, 50, 56, 0.4);
}
.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item {
border-bottom-color: #292e37;
color: #eee;
}
.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item:hover {
border-bottom-color: #3c424d;
}
.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item.active {
color: #67ccff;
border-bottom-color: #67ccff;
}
.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-name {
border-color: #303238;
color: #eee;
}
.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button {
border-color: #303238;
background-color: #232428;
color: #eee;
}
.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button:hover {
border-color: #494c56;
}
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button {
color: #eee;
border-color: #303238;
background-color: #232428;
}
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button:hover {
border-color: #494c56;
}
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button {
color: #121212;
background-color: #67ccff;
}
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button:hover {
color: #121212;
background-color: #32baff;
}
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell {
border-color: #303238;
background-color: #121212;
}
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell.header {
border-color: #303238;
background-color: #232428;
}
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-selection-layer {
border-color: rgba(103, 204, 255, 0.4);
background-color: rgba(103, 204, 255, 0.1);
}
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-description {
color: #eee
}
.toastui-editor-dark .toastui-editor-md-tab-container {
background-color: #232428;
border-bottom-color: #303238;
}
.toastui-editor-dark .toastui-editor-md-tab-container .tab-item {
border-color: #393b42;
background-color: #2d2f34;
color: #757a86;
}
.toastui-editor-dark .toastui-editor-md-tab-container .tab-item.active {
border-bottom-color: #121212;
background-color: #121212;
color: #eee;
}
.toastui-editor-dark .toastui-editor-context-menu .menu-group {
border-bottom-color: #303238;
color: #eee;
}
.toastui-editor-dark .toastui-editor-context-menu .menu-item span::before {
background-position-y: -126px;
}
.toastui-editor-dark .toastui-editor-context-menu li:not(.disabled):hover {
background-color: #36383f;
}
.toastui-editor-dark .toastui-editor-context-menu li.disabled {
color: #969aa5;
}
.toastui-editor-dark .toastui-editor-dropdown-toolbar {
border-color: #494c56;
background-color: #232428;
}
.toastui-editor-dark .ProseMirror,
.toastui-editor-dark .toastui-editor-contents p,
.toastui-editor-dark .toastui-editor-contents h1,
.toastui-editor-dark .toastui-editor-contents h2,
.toastui-editor-dark .toastui-editor-contents h3,
.toastui-editor-dark .toastui-editor-contents h4,
.toastui-editor-dark .toastui-editor-contents h5,
.toastui-editor-dark .toastui-editor-contents h6 {
color: #fff;
}
.toastui-editor-dark .toastui-editor-contents h1,
.toastui-editor-dark .toastui-editor-contents h2 {
border-color: #fff;
}
.toastui-editor-dark .toastui-editor-contents del {
color: #777980;
}
.toastui-editor-dark .toastui-editor-contents blockquote {
border-color: #303135;
}
.toastui-editor-dark .toastui-editor-contents blockquote p,
.toastui-editor-dark .toastui-editor-contents blockquote ul,
.toastui-editor-dark .toastui-editor-contents blockquote ol {
color: #777980;
}
.toastui-editor-dark .toastui-editor-contents pre {
background-color: #232428;
}
.toastui-editor-dark .toastui-editor-contents pre code {
background-color: transparent;
color: #fff;
}
.toastui-editor-dark .toastui-editor-contents code {
color: #c1798b;
background-color: #35262a;
}
.toastui-editor-dark .toastui-editor-contents div {
color: #fff;
}
.toastui-editor-dark .toastui-editor-ww-code-block-language {
border-color: #303238;
background-color: #121212;
}
.toastui-editor-dark .toastui-editor-ww-code-block-language input {
color: #fff;
}
.toastui-editor-dark .toastui-editor-contents .toastui-editor-ww-code-block:after {
background-color: #232428;
border: 1px solid #393b42;
color: #eee;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
}
.toastui-editor-dark .toastui-editor-contents .toastui-editor-custom-block-editor {
background: #392d31;
color: #fff;
border-color: #327491;
}
.toastui-editor-dark .toastui-editor-custom-block.ProseMirror-selectednode .toastui-editor-custom-block-view {
color: #fff;
border-color: #327491;
}
.toastui-editor-dark .toastui-editor-custom-block-view button {
background-color: #232428;
border-color: #393b42;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
}
.toastui-editor-dark .toastui-editor-custom-block-view button:hover {
background-color: #232428;
border-color: #595c68;
}
.toastui-editor-dark .toastui-editor-custom-block-view .info {
color: #65acca;
}
.toastui-editor-dark .toastui-editor-contents table {
border-color: #303238;
}
.toastui-editor-dark .toastui-editor-contents table th,
.toastui-editor-dark .toastui-editor-contents table td {
border-color: #303238;
}
.toastui-editor-dark .toastui-editor-contents table th {
background-color: #3a3c42;
}
.toastui-editor-dark .toastui-editor-contents table td,
.toastui-editor-dark .toastui-editor-contents table td p {
color: #fff;
}
.toastui-editor-dark .toastui-editor-contents td.toastui-editor-cell-selected {
background-color: rgba(103, 204, 255, 0.5);
}
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-cell-selected {
background-color: rgba(103, 204, 255, 0.3);
}
.toastui-editor-dark table.ProseMirror-selectednode {
outline-color: #67ccff;
}
.toastui-editor-dark .html-block.ProseMirror-selectednode {
outline-color: #67ccff;
}
.toastui-editor-dark .toastui-editor-contents ul,
.toastui-editor-dark .toastui-editor-contents menu,
.toastui-editor-dark .toastui-editor-contents ol,
.toastui-editor-dark .toastui-editor-contents dir {
color: #55575f;
}
.toastui-editor-dark .toastui-editor-contents ul > li::before {
background-color: #55575f;
}
.toastui-editor-dark .toastui-editor-contents hr {
border-color: #55575f;
}
.toastui-editor-dark .toastui-editor-contents a {
color: #4b96e6;
}
.toastui-editor-dark .toastui-editor-contents a:hover {
color: #1f70de;
}
.toastui-editor-dark .toastui-editor-contents .image-link:hover::before {
border-color: #393b42;
background-color: #232428;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgICAgICA8ZyBzdHJva2U9IiNFRUUiIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNy42NjUgMTUuMDdsLTEuODE5LS4wMDJjLTEuNDg2IDAtMi42OTItMS4yMjgtMi42OTItMi43NDR2LS4xOTJjMC0xLjUxNSAxLjIwNi0yLjc0NCAyLjY5Mi0yLjc0NGgzLjg0NmMxLjQ4NyAwIDIuNjkyIDEuMjI5IDIuNjkyIDIuNzQ0di4xOTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzcuMjkzIDApIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjMyNiA0LjkzNGwxLjgyMi4wMDJjMS40ODcgMCAyLjY5MyAxLjIyOCAyLjY5MyAyLjc0NHYuMTkyYzAgMS41MTUtMS4yMDYgMi43NDQtMi42OTMgMi43NDRoLTMuODQ1Yy0xLjQ4NyAwLTIuNjkyLTEuMjI5LTIuNjkyLTIuNzQ0VjcuNjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzAuOTk2IDApIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
.toastui-editor-dark .toastui-editor-contents .task-list-item::before {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgc3Ryb2tlPSIjNTU1NzVGIj4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAzMCAtMzE2KSB0cmFuc2xhdGUoNzg4IDE5MikgdHJhbnNsYXRlKDI0MiAxMjQpIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iMTciIGhlaWdodD0iMTciIHg9Ii41IiB5PSIuNSIgcng9IjIiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==');
background-color: transparent;
}
.toastui-editor-dark .toastui-editor-contents .task-list-item.checked::before {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgZmlsbD0iIzRCOTZFNiI+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2IDBjMS4xMDUgMCAyIC44OTUgMiAydjE0YzAgMS4xMDUtLjg5NSAyLTIgMkgyYy0xLjEwNSAwLTItLjg5NS0yLTJWMkMwIC44OTUuODk1IDAgMiAwaDE0em0tMS43OTMgNS4yOTNjLS4zOS0uMzktMS4wMjQtLjM5LTEuNDE0IDBMNy41IDEwLjU4NSA1LjIwNyA4LjI5M2wtLjA5NC0uMDgzYy0uMzkyLS4zMDUtLjk2LS4yNzgtMS4zMi4wODMtLjM5LjM5LS4zOSAxLjAyNCAwIDEuNDE0bDMgMyAuMDk0LjA4M2MuMzkyLjMwNS45Ni4yNzggMS4zMi0uMDgzbDYtNiAuMDgzLS4wOTRjLjMwNS0uMzkyLjI3OC0uOTYtLjA4My0xLjMyeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwNTAgLTI5NikgdHJhbnNsYXRlKDc4OCAxOTIpIHRyYW5zbGF0ZSgyNjIgMTA0KSIvPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K');
}
.toastui-editor-dark .toastui-editor-md-delimiter,
.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-delimiter,
.toastui-editor-dark .toastui-editor-md-thematic-break,
.toastui-editor-dark .toastui-editor-md-link,
.toastui-editor-dark .toastui-editor-md-table,
.toastui-editor-dark .toastui-editor-md-block-quote {
color: #55575f;
}
.toastui-editor-dark .toastui-editor-md-meta,
.toastui-editor-dark .toastui-editor-md-html {
color: #55575f;
}
.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-url.toastui-editor-md-marked-text {
color: #777980;
}
.toastui-editor-dark .toastui-editor-md-block-quote .toastui-editor-md-marked-text,
.toastui-editor-dark .toastui-editor-md-list-item .toastui-editor-md-meta {
color: #b3b5bc;
}
.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-desc.toastui-editor-md-marked-text,
.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-odd {
color: #4b96e6;
}
.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-even {
color: #ef6767;
}
.toastui-editor-dark .toastui-editor-md-table .toastui-editor-md-table-cell {
color: #fff;
}
.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-marked-text {
color: #c1798b;
}
.toastui-editor-dark .toastui-editor-md-code {
background-color: #35262a;
}
.toastui-editor-dark .toastui-editor-md-code-block-line-background {
background-color: #232428;
}
.toastui-editor-dark .toastui-editor-md-code-block .toastui-editor-md-meta {
color: #aaa;
}
.toastui-editor-dark .toastui-editor-md-custom-block {
color: #fff;
}
.toastui-editor-dark .toastui-editor-md-custom-block-line-background {
background-color: #392d31;
}
.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-delimiter {
color: #327491;
}
.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-meta {
color: #65acca;
}
.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
background-color: rgba(255, 250, 193, 0.5);
}
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
background-color: rgba(255, 250, 193, 0.5);
}
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight {
color: #fff;
}
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
background-color: rgba(255, 250, 193, 0.25);
}
.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
background-color: rgba(255, 250, 193, 0.25);
}

View file

@ -139,7 +139,5 @@
<?php } ?>
</div>
<?php } ?>
<?= Tpl::import('/_block/sidebar/lang', ['lang' => []]); ?>
</div>
</aside>

View file

@ -250,6 +250,4 @@ $rose-600: #e11d48;
$rose-700: #be123c;
$rose-800: #9f1239;
$rose-900: #881337;
$blue-steel-700: #3c8dbc;

View file

@ -24,9 +24,7 @@ html {
:root {
--body-bg-color: #f3f4f6;
--body-color: #222;
--bg-box: #fff;
--black: #222;
--black: #030303;
--white: #fff;
--br-box-gray: #ededed;
--gray-400: #9ca3af;
@ -34,24 +32,7 @@ html {
--blue-100: #dbeafe;
--slate-100: #f1f5f9;
--slate-300: #cbd5e1;
}
body.dark {
--body-bg-color: #030303;
--body-color: #d1d5db;
--black: #fff;
--white: #222;
--br-box-gray: #111;
--gray-400: #ccc;
--gray-600: #ddd;
--blue-100: #111;
--slate-100: #333;
--slate-300: #111;
}
.bg-fons {
background-color: var(--body-bg-color);
color: var(--body-color);
--yellow-100: #fef9c3;
}
body {
@ -61,6 +42,15 @@ body {
margin: 0;
}
.body-bg-fon { background-color: #f3f4f6; }
body.dark {
filter: invert(100%);
background-color: #222;
}
body.dark .bg-white { background-color: var(--br-box-gray); }
a {
color: #4183c4;
cursor: pointer;
@ -183,14 +173,13 @@ img {
.bg-green-600 { background-color: $green-600; }
.bg-gray-100 { background-color: $gray-100; }
.bg-yellow-50 { background-color: $yellow-50; }
.bg-yellow-100 { background-color: $yellow-100; }
.bg-yellow-100 { background-color: var(--yellow-100); }
.bg-purple-100 { background-color: $purple-100; }
.bg-blue-100 { background-color: var(--blue-100); }
.bg-blue-500 { background-color: $blue-500; }
.bg-sky-50 { background-color: $sky-50; }
.bg-red-200 { background-color: $red-200; }
.bg-pink-800 { background-color: $pink-800; }
.bg-blue-steel-700 { background-color: $blue-steel-700; }
/*
* Other
@ -199,6 +188,7 @@ img {
*/
.box-shadow { box-shadow: 0 2px 4px -1px rgba(0,0,0,0.15) }
.box-shadow-top { box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.15) }
.box-shadow-all { box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
.br-box-gray { border: 1px solid var(--br-box-gray); }
.br-top-dotted { border: 1px dotted #ddd; }

View file

@ -14,47 +14,18 @@
margin: 0 auto;
}
.box {
border-radius: 5px;
padding: 15px;
margin-bottom: 15px;
overflow: hidden;
display: block;
}
.box-flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-radius: 5px;
margin-bottom: 15px;
}
.logo {
text-transform: uppercase;
font-size: 21px;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: 400;
font-weight: 500;
margin: 0 0 10px 0;
}
h3.uppercase-box {
color: #6b7280;
font-size: 0.875rem;
text-transform: uppercase;
line-height: 1;
}
footer {
background-color: #27272a;
color: var(--gray-400);
background-color: var(--white);
color: var(--gray-600);
padding: 15px;
overflow: hidden;
}
@ -73,10 +44,13 @@ footer ul {
footer ul li a {
font-size: 14px;
color: #fff;
color: var(--gray-600);
margin-bottom: 5px;
}
footer ul li a:hover,
footer .icon:hover { color: #111; }
code {
color: #9b4f5e;
background-color: #f5f2f0;
@ -121,6 +95,36 @@ details[open] > summary {
color: #666;
}
.logo {
text-transform: uppercase;
font-size: 21px;
}
.box {
border-radius: 5px;
padding: 15px;
margin-bottom: 15px;
overflow: hidden;
display: block;
}
.box-flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-radius: 5px;
margin-bottom: 15px;
}
.uppercase-box {
color: var(--gray-600);
font-size: 0.875rem;
text-transform: uppercase;
line-height: 1;
font-weight: 400;
}
.page {
margin-left: auto;
margin-right: auto;
@ -213,13 +217,4 @@ a:hover > img { opacity: 0.8; }
}
/* Tippy.js - theme: light, */
.dark .tippy-box[data-theme~="light"] {
background-color: $black;
color: $neutral-900;
}
.dark .tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow::before { border-top-color: $black; }
.dark .tippy-box[data-theme~="light"][data-placement^="bottom"] > .tippy-arrow::before,
.dark .tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow::before { border-bottom-color: $black; }
.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}

View file

@ -1,5 +1,5 @@
</div>
<footer>
<footer class="box-shadow-top">
<div class="left">
<div class="mb5">
<?= Config::get('meta.name'); ?>

View file

@ -1,7 +1,7 @@
<?php
Translate::setLang($user['lang']);
$dark = Request::getCookie('dayNight') == 'dark' ? 'dark' : '';
$css = $data['type'] == 'web' || $data['type'] == 'page' ? '' : 'bg-fons';
$css = $data['type'] == 'web' || $data['type'] == 'page' ? '' : 'body-bg-fon';
$type = $data['type'] ?? false;
$facet = $data['facet'] ?? false;
?>
@ -15,7 +15,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= $meta; ?>
<?php getRequestHead()->output(); ?>
<link rel="stylesheet" href="/assets/css/style.css?26">
<link rel="stylesheet" href="/assets/css/style.css?29">
<link rel="icon" sizes="16x16" href="/favicon.ico" type="image/x-icon">
<link rel="icon" sizes="120x120" href="/favicon-120.ico" type="image/x-icon">
</head>

View file

@ -41,7 +41,7 @@ if ($blog['facet_is_deleted'] == 0) { ?>
<aside class="col-span-3 relative mb-none">
<?php if ($blog['facet_is_deleted'] == 0) { ?>
<div class="br-box-gray p15 mb15 br-rd5 bg-white text-sm">
<div class="uppercase gray mb5"> <?= Translate::get('created by'); ?></div>
<h3 class="uppercase-box"><?= Translate::get('created by'); ?></h3>
<a class="flex relative pt5 pb5 items-center hidden gray-600" href="/@<?= $data['user']['login']; ?>">
<?= user_avatar_img($data['user']['avatar'], 'max', $data['user']['login'], 'w30 mr5 br-rd-50'); ?>
<span class="ml5"><?= $data['user']['login']; ?></span>

View file

@ -52,9 +52,7 @@
<?php if ($user['id'] > 0 && !empty($data['topics_user'])) { ?>
<div class="box br-box-gray box-shadow-all bg-white text-sm">
<div class="uppercase gray mb5">
<?= Translate::get('reading'); ?>
</div>
<h3 class="uppercase-box"><?= Translate::get('reading'); ?></h3>
<?php
$my = [];

View file

@ -1,5 +1,4 @@
<?php
$dark = Request::getCookie('dayNight') == 'dark' ? 'dark' : '';
$type = $data['type'] ?? false;
$facet = $data['facet'] ?? false; ?>
@ -17,7 +16,7 @@ $facet = $data['facet'] ?? false; ?>
<link rel="icon" sizes="120x120" href="/favicon-120.ico" type="image/x-icon">
</head>
<body class="p0 m0 black<?php if ($dark == 'dark') { ?> dark<?php } ?>">
<body<?php if (Request::getCookie('dayNight') == 'dark') { ?> class="dark"<?php } ?>>
<header class="bg-white mt0 mb15">
<div class="br-bottom mr-auto max-w1240 w-100 pr10 pl15 mb10 mb-none items-center flex">