Browse Source

Change style to dark

Visman 1 year ago
parent
commit
3cf8b82a3d
4 changed files with 90 additions and 135 deletions
  1. 1 0
      .gitignore
  2. 8 9
      public/style/ForkBB/admin.css
  3. 29 55
      public/style/ForkBB/sccontent.css
  4. 52 71
      public/style/ForkBB/style.css

+ 1 - 0
.gitignore

@@ -12,5 +12,6 @@
 /public/.htaccess
 /public/.htaccess
 /public/index.php
 /public/index.php
 /public/upload/**/*
 /public/upload/**/*
+/public/style/ForkBB_old/*
 !/public/upload/index.html
 !/public/upload/index.html
 !.gitkeep
 !.gitkeep

+ 8 - 9
public/style/ForkBB/admin.css

@@ -1,11 +1,5 @@
 #forka {
 #forka {
-  --c-log-in-c: hsl(0, 60%, 100%);
-}
-
-@media (prefers-color-scheme: dark) {
-  #forka {
-    --c-log-in-c: hsl(0, 60%, 2%);
-  }
+  --c-log-in-c: hsl(220,5%,12%);
 }
 }
 
 
 /******************/
 /******************/
@@ -24,7 +18,7 @@
 #fork-a-menu .f-menu-a:hover,
 #fork-a-menu .f-menu-a:hover,
 #fork-a-menu .f-menu-a:focus {
 #fork-a-menu .f-menu-a:focus {
   background-color: var(--c-a-and-btn);
   background-color: var(--c-a-and-btn);
-  color: var(--c-active);
+  color: var(--c-nav-focus);
 }
 }
 
 
 #fork-a-menu #id-an-label {
 #fork-a-menu #id-an-label {
@@ -266,6 +260,10 @@
 /*********************/
 /*********************/
 /* Админка/Разделы   */
 /* Админка/Разделы   */
 /*********************/
 /*********************/
+#forka .f-editforums-form dt {
+  display: none;
+}
+
 #forka .f-deleteforum-form .f-fbtn {
 #forka .f-deleteforum-form .f-fbtn {
   width: auto;
   width: auto;
   display: inline-block;
   display: inline-block;
@@ -916,7 +914,8 @@
 }
 }
 
 
 #fork-rprt-old .f-field-reason {
 #fork-rprt-old .f-field-reason {
-  background-color: #FEEFB3;
+  color: var(--c-faggr-pr);
+  background-color: hsl(48, 40%, 85%);
 }
 }
 
 
 /****************************************/
 /****************************************/

+ 29 - 55
public/style/ForkBB/sccontent.css

@@ -1,63 +1,37 @@
 :root {
 :root {
-  --c-fprimary: hsl(0, 0%, 20%);
-  --bg-fprimary: hsl(60, 9%, 98%);
-  --br-fprimary: hsl(34, 50%, 45%);
-  --bg-like-br1: hsl(34, 50%, 45%);
-  --c-a-and-btn: hsl(34, 100%, 17%);
-  --bg-fh1: hsl(28, 42%, 79%);
-  --br-fh1: hsl(34, 100%, 25%);
-  --bg-active: hsl(34, 100%, 25%);
-  --c-icon-sub: hsl(34, 100%, 25%);
-  --bg-focus: hsl(34, 44%, 69%);
-  --bg-post-h: hsl(34, 44%, 69%);
-  --bg-post-b: hsl(28, 88%, 97%);
-  --bg-fann: hsl(28, 88%, 97%);
-  --bg-submenu: hsl(36, 100%, 90%);
-  --c-active: hsl(28, 60%, 93%);
-  --bg-btn: hsl(28, 60%, 93%);
-  --bg-like-nav: hsl(28, 60%, 93%);
-  --c-light: hsl(28, 60%, 93%);
-  --c-tsticky: hsl(357, 100%, 42%);
-  --c-faggr: hsl(357, 100%, 42%);
+  --c-fprimary: hsl(40, 16%, 93%);
+  --bg-fprimary: hsl(0, 0%, 16%);
+  --br-fprimary: hsl(0, 0%, 34%);
+  --bg-like-br1: hsl(0, 18%, 30%);
+  --c-a-and-btn: hsl(50, 100%, 50%);
+  --c-fh1: hsl(0, 0%, 80%);
+  --bg-fh1: hsl(220, 5%, 12%);
+  --br-fh1: hsl(0, 0%, 80%);
+  --c-icon-sub: hsl(0, 0%, 70%);
+  --c-focus: hsl(220, 5%, 12%);
+  --bg-focus: hsl(50, 100%, 50%);
+  --bg-post-h: hsl(0, 20%, 26%);
+  --bg-post-b: hsl(0, 0%, 26%);
+  --bg-fann: hsl(0, 0%, 21%);
+  --bg-submenu: hsl(0, 0%, 20%);
+  --bg-stats: hsl(0, 0%, 21%);
+  --c-active: hsl(40, 16%, 93%);
+  --c-nav-focus: hsl(220, 5%, 12%);
+  --bg-active: hsl(220, 5%, 12%);
+  --bg-btn: hsl(0, 0%, 21%);
+  --bg-nav: hsl(0, 0%, 19%);
+  --bg-like-nav: hsl(0, 0%, 19%);
+  --c-light: hsl(40, 16%, 93%);
+  --c-tsticky: hsl(0, 100%, 50%);
+  --c-faggr: hsl(357, 75%, 50%);
   --c-faggr-pr: hsl(0, 0%, 20%);
   --c-faggr-pr: hsl(0, 0%, 20%);
   --bg-faggr: hsl(0, 100%, 86%);
   --bg-faggr: hsl(0, 100%, 86%);
-  --c-tclosed: hsl(213, 9%, 80%);
-  --c-tpoll: hsl(136, 50%, 31%);
+  --c-tclosed: hsl(0, 0%, 45%);
+  --c-tpoll: hsl(50, 100%, 50%);
   --c-req: hsl(0, 100%, 50%);
   --c-req: hsl(0, 100%, 50%);
-  --bg-bbcode: hsl(0, 0%, 100%);
+  --bg-bbcode: hsl(220, 5%, 16%);
   --br-bbcode: hsl(0, 0%, 75%);
   --br-bbcode: hsl(0, 0%, 75%);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --c-fprimary: hsl(0, 0%, 20%);
-    --bg-fprimary: hsl(34, 40%, 58%);
-    --br-fprimary: hsl(34, 50%, 25%);
-    --bg-like-br1: hsl(34, 50%, 45%);
-    --c-a-and-btn: hsl(34, 100%, 15%);
-    --bg-fh1: hsl(28, 42%, 79%);
-    --br-fh1: hsl(34, 100%, 25%);
-    --bg-active: hsl(34, 100%, 25%);
-    --c-icon-sub: hsl(34, 100%, 25%);
-    --bg-focus: hsl(34, 80%, 59%);
-    --bg-post-h: hsl(34, 44%, 69%);
-    --bg-post-b: hsl(36, 48%, 67%);
-    --bg-fann: hsl(36, 48%, 67%);
-    --bg-submenu: hsl(36, 50%, 60%);
-    --c-active: hsl(28, 50%, 73%);
-    --bg-btn: hsl(28, 50%, 73%);
-    --bg-like-nav: hsl(28, 50%, 73%);
-    --c-light: hsl(28, 50%, 73%);
-    --c-tsticky: hsl(357, 100%, 42%);
-    --c-faggr: hsl(357, 100%, 42%);
-    --c-faggr-pr: hsl(0, 0%, 20%);
-    --bg-faggr: hsl(0, 100%, 86%);
-    --c-tclosed: hsl(0, 0%, 32%);
-    --c-tpoll: hsl(136, 50%, 31%);
-    --c-req: hsl(0, 100%, 50%);
-    --bg-bbcode: hsl(0, 0%, 70%);
-    --br-bbcode: hsl(0, 0%, 15%);
-  }
+  --bg-poll-res: hsl(50, 100%, 50%);
 }
 }
 
 
 html,
 html,

+ 52 - 71
public/style/ForkBB/style.css

@@ -1,63 +1,37 @@
 :root {
 :root {
-  --c-fprimary: hsl(0, 0%, 20%);
-  --bg-fprimary: hsl(60, 9%, 98%);
-  --br-fprimary: hsl(34, 50%, 45%);
-  --bg-like-br1: hsl(34, 50%, 45%);
-  --c-a-and-btn: hsl(34, 100%, 17%);
-  --bg-fh1: hsl(28, 42%, 79%);
-  --br-fh1: hsl(34, 100%, 25%);
-  --bg-active: hsl(34, 100%, 25%);
-  --c-icon-sub: hsl(34, 100%, 25%);
-  --bg-focus: hsl(34, 44%, 69%);
-  --bg-post-h: hsl(34, 44%, 69%);
-  --bg-post-b: hsl(28, 88%, 97%);
-  --bg-fann: hsl(28, 88%, 97%);
-  --bg-submenu: hsl(36, 100%, 90%);
-  --c-active: hsl(28, 60%, 93%);
-  --bg-btn: hsl(28, 60%, 93%);
-  --bg-like-nav: hsl(28, 60%, 93%);
-  --c-light: hsl(28, 60%, 93%);
-  --c-tsticky: hsl(357, 100%, 42%);
-  --c-faggr: hsl(357, 100%, 42%);
+  --c-fprimary: hsl(40, 16%, 93%);
+  --bg-fprimary: hsl(0, 0%, 16%);
+  --br-fprimary: hsl(0, 0%, 34%);
+  --bg-like-br1: hsl(0, 18%, 30%);
+  --c-a-and-btn: hsl(50, 100%, 50%);
+  --c-fh1: hsl(0, 0%, 80%);
+  --bg-fh1: hsl(220, 5%, 12%);
+  --br-fh1: hsl(0, 0%, 80%);
+  --c-icon-sub: hsl(0, 0%, 70%);
+  --c-focus: hsl(220, 5%, 12%);
+  --bg-focus: hsl(50, 100%, 50%);
+  --bg-post-h: hsl(0, 20%, 26%);
+  --bg-post-b: hsl(0, 0%, 26%);
+  --bg-fann: hsl(0, 0%, 21%);
+  --bg-submenu: hsl(0, 0%, 20%);
+  --bg-stats: hsl(0, 0%, 21%);
+  --c-active: hsl(40, 16%, 93%);
+  --c-nav-focus: hsl(220, 5%, 12%);
+  --bg-active: hsl(220, 5%, 12%);
+  --bg-btn: hsl(0, 0%, 21%);
+  --bg-nav: hsl(0, 0%, 19%);
+  --bg-like-nav: hsl(0, 0%, 19%);
+  --c-light: hsl(40, 16%, 93%);
+  --c-tsticky: hsl(0, 100%, 50%);
+  --c-faggr: hsl(357, 75%, 50%);
   --c-faggr-pr: hsl(0, 0%, 20%);
   --c-faggr-pr: hsl(0, 0%, 20%);
   --bg-faggr: hsl(0, 100%, 86%);
   --bg-faggr: hsl(0, 100%, 86%);
-  --c-tclosed: hsl(213, 9%, 80%);
-  --c-tpoll: hsl(136, 50%, 31%);
+  --c-tclosed: hsl(0, 0%, 45%);
+  --c-tpoll: hsl(50, 100%, 50%);
   --c-req: hsl(0, 100%, 50%);
   --c-req: hsl(0, 100%, 50%);
-  --bg-bbcode: hsl(0, 0%, 100%);
+  --bg-bbcode: hsl(220, 5%, 16%);
   --br-bbcode: hsl(0, 0%, 75%);
   --br-bbcode: hsl(0, 0%, 75%);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --c-fprimary: hsl(0, 0%, 15%);
-    --bg-fprimary: hsl(34, 40%, 58%);
-    --br-fprimary: hsl(34, 50%, 25%);
-    --bg-like-br1: hsl(34, 50%, 45%);
-    --c-a-and-btn: hsl(34, 100%, 15%);
-    --bg-fh1: hsl(28, 42%, 79%);
-    --br-fh1: hsl(34, 100%, 25%);
-    --bg-active: hsl(34, 100%, 25%);
-    --c-icon-sub: hsl(34, 100%, 25%);
-    --bg-focus: hsl(34, 80%, 59%);
-    --bg-post-h: hsl(34, 44%, 69%);
-    --bg-post-b: hsl(36, 48%, 67%);
-    --bg-fann: hsl(36, 48%, 67%);
-    --bg-submenu: hsl(36, 50%, 60%);
-    --c-active: hsl(28, 50%, 73%);
-    --bg-btn: hsl(28, 50%, 73%);
-    --bg-like-nav: hsl(28, 50%, 73%);
-    --c-light: hsl(28, 50%, 73%);
-    --c-tsticky: hsl(357, 100%, 42%);
-    --c-faggr: hsl(357, 100%, 42%);
-    --c-faggr-pr: hsl(0, 0%, 20%);
-    --bg-faggr: hsl(0, 100%, 86%);
-    --c-tclosed: hsl(0, 0%, 32%);
-    --c-tpoll: hsl(136, 50%, 31%);
-    --c-req: hsl(0, 100%, 50%);
-    --bg-bbcode: hsl(0, 0%, 70%);
-    --br-bbcode: hsl(0, 0%, 15%);
-  }
+  --bg-poll-res: hsl(50, 100%, 50%);
 }
 }
 
 
 /*******************/
 /*******************/
@@ -301,6 +275,7 @@ body,
   padding: 0.625rem;
   padding: 0.625rem;
   border: 0.0625rem solid var(--br-fh1);
   border: 0.0625rem solid var(--br-fh1);
   background-color: var(--bg-fh1);
   background-color: var(--bg-fh1);
+  color: var(--c-fh1);
 }
 }
 
 
 #fork section > h2,
 #fork section > h2,
@@ -341,6 +316,7 @@ body,
   color: var(--c-a-and-btn);
   color: var(--c-a-and-btn);
   cursor: pointer;
   cursor: pointer;
   text-decoration: none;
   text-decoration: none;
+  transition-duration: 1s;
 }
 }
 
 
 #fork .f-btn {
 #fork .f-btn {
@@ -366,11 +342,13 @@ body,
 #fork a:focus,
 #fork a:focus,
 #fork .f-btn:hover,
 #fork .f-btn:hover,
 #fork .f-btn:focus {
 #fork .f-btn:focus {
+  color: var(--c-focus);
   background-color: var(--bg-focus);
   background-color: var(--bg-focus);
 }
 }
 
 
 #fork a:active,
 #fork a:active,
 #fork .f-btn:active {
 #fork .f-btn:active {
+  color: var(--c-active);
   background-color: var(--bg-active);
   background-color: var(--bg-active);
 }
 }
 
 
@@ -445,7 +423,7 @@ body,
 }
 }
 
 
 #fork .f-menu-checkbox:focus + .f-menu-toggle::after {
 #fork .f-menu-checkbox:focus + .f-menu-toggle::after {
-  color: var(--bg-focus);
+  color: var(--c-nav-focus);
   background-color: var(--c-a-and-btn);
   background-color: var(--c-a-and-btn);
 }
 }
 
 
@@ -510,7 +488,7 @@ body,
 }
 }
 
 
 #fork-nav .f-menu-items {
 #fork-nav .f-menu-items {
-  background-color: var(--bg-btn);
+  background-color: var(--bg-nav);
   border-bottom: 0.0625rem solid var(--br-fprimary);
   border-bottom: 0.0625rem solid var(--br-fprimary);
 }
 }
 
 
@@ -531,11 +509,11 @@ body,
 #fork-nav .f-menu-a:hover,
 #fork-nav .f-menu-a:hover,
 #fork-nav .f-menu-a:focus {
 #fork-nav .f-menu-a:focus {
   background-color: var(--c-a-and-btn);
   background-color: var(--c-a-and-btn);
-  color: var(--c-active);
+  color: var(--c-nav-focus);
 }
 }
 
 
 #fork-nav .f-menu-user-items {
 #fork-nav .f-menu-user-items {
-  background-color: var(--bg-btn);
+  background-color: var(--bg-nav);
   display: flex;
   display: flex;
   flex-grow: 1;
   flex-grow: 1;
   justify-content: flex-end;
   justify-content: flex-end;
@@ -669,9 +647,9 @@ body,
   padding: 0.625rem;
   padding: 0.625rem;
 }
 }
 
 
-#fork #id-fhtha {
+/*#fork #id-fhtha {
   color: var(--c-a-and-btn);
   color: var(--c-a-and-btn);
-}
+}*/
 
 
 @media screen and (min-width: 50rem) {
 @media screen and (min-width: 50rem) {
   #fork #id-fhth1 {
   #fork #id-fhth1 {
@@ -874,6 +852,7 @@ body,
 #fork .f-ctrl {
 #fork .f-ctrl {
   border: 0.0625rem solid var(--br-fprimary);
   border: 0.0625rem solid var(--br-fprimary);
   background-color: var(--bg-fprimary);
   background-color: var(--bg-fprimary);
+  color: var(--c-fprimary);
 }
 }
 
 
 #fork input.f-ctrl:user-invalid {
 #fork input.f-ctrl:user-invalid {
@@ -883,7 +862,7 @@ body,
 #fork input:focus,
 #fork input:focus,
 #fork select:focus,
 #fork select:focus,
 #fork textarea:focus {
 #fork textarea:focus {
-  box-shadow: 0 0 0 0.125rem var(--br-fprimary);
+  box-shadow: 0 0 0 0.125rem var(--c-a-and-btn);
 }
 }
 
 
 #fork .f-field-hint .f-yhint {
 #fork .f-field-hint .f-yhint {
@@ -1069,7 +1048,7 @@ body,
 }
 }
 
 
 #fork .f-nav-links .f-page.active {
 #fork .f-nav-links .f-page.active {
-  border-color: var(--bg-active);
+  border-color: var(--c-active);
   background-color: var(--bg-active);
   background-color: var(--bg-active);
   color: var(--c-active);
   color: var(--c-active);
 }
 }
@@ -1152,6 +1131,7 @@ body,
 /*********************/
 /*********************/
 #fork #fork-stats {
 #fork #fork-stats {
   border-top: 0.0625rem solid var(--br-fprimary);
   border-top: 0.0625rem solid var(--br-fprimary);
+  background-color: var(--bg-stats);
   font-size: 0.875rem;
   font-size: 0.875rem;
   padding: 0.3125rem 0;
   padding: 0.3125rem 0;
 }
 }
@@ -1486,13 +1466,13 @@ body,
   opacity: 0.6;
   opacity: 0.6;
 }
 }
 
 
-#fork .f-fsticky .f-ficon::before {
+/*#fork .f-fsticky .f-ficon::before {
   color: var(--c-tsticky);
   color: var(--c-tsticky);
-}
+}*/
 
 
 #fork .f-tsticky::before {
 #fork .f-tsticky::before {
   font: 900 0.875rem "fa";
   font: 900 0.875rem "fa";
-  content: "\f08d"; /* \f35b */
+  content: "\f08d";
   color: var(--c-tsticky);
   color: var(--c-tsticky);
 }
 }
 
 
@@ -1680,6 +1660,7 @@ body,
   display: inline-block;
   display: inline-block;
   font-family: "fa";
   font-family: "fa";
   font-weight: 900;
   font-weight: 900;
+  font-size: 0.75rem;
 }
 }
 
 
 #fork .f-user-contacts > a {
 #fork .f-user-contacts > a {
@@ -2090,11 +2071,11 @@ body,
 #fork .f-poll-ab {
 #fork .f-poll-ab {
   border: 0.0625rem solid var(--br-fprimary);
   border: 0.0625rem solid var(--br-fprimary);
   width: 60%;
   width: 60%;
-  height: 0.5rem;
+  /*height: 0.5rem;*/
 }
 }
 
 
 #fork .f-poll-ab-s1 {
 #fork .f-poll-ab-s1 {
-  background-color: var(--bg-like-br1);
+  background-color: var(--bg-poll-res);
   height: 0.5rem;
   height: 0.5rem;
   display: block;
   display: block;
   font-size: 0;
   font-size: 0;
@@ -2422,7 +2403,7 @@ body,
 
 
   #fork-usrlst .f-hc-tasc > a.active,
   #fork-usrlst .f-hc-tasc > a.active,
   #fork-usrlst .f-hc-tdesc > a.active {
   #fork-usrlst .f-hc-tdesc > a.active {
-    border: 0.0625rem solid var(--bg-active);
+    border: 0.0625rem solid var(--c-a-and-btn);
   }
   }
 
 
   #fork-usrlst .f-cell > b,
   #fork-usrlst .f-cell > b,
@@ -2723,7 +2704,7 @@ body,
 #fork-pm-menu a.f-menu-a:hover,
 #fork-pm-menu a.f-menu-a:hover,
 #fork-pm-menu a.f-menu-a:focus {
 #fork-pm-menu a.f-menu-a:focus {
   background-color: var(--c-a-and-btn);
   background-color: var(--c-a-and-btn);
-  color: var(--c-active);
+  color: var(--c-nav-focus);
 }
 }
 
 
 #fork-pm-menu #id-pmn-label {
 #fork-pm-menu #id-pmn-label {
@@ -2860,7 +2841,7 @@ body,
     border-bottom: 0;
     border-bottom: 0;
     border-inline-start: 0.0625rem solid var(--br-fprimary);
     border-inline-start: 0.0625rem solid var(--br-fprimary);
     padding: 0;
     padding: 0;
-    background-color: var(--bg-like-nav);
+    background-color: var(--bg-nav);
   }
   }
 
 
   #fork.f-with-nav #fork-footer {
   #fork.f-with-nav #fork-footer {