feat: start settings css

Author: FredGuiou

i18n/english.js

@@ -172,7 +172,7 @@ const ui = {
       title: "General",
       save: "save",
       defaultPannel: "Default Package Menu",
-      themePannel: "Theme Panel",
+      themePannel: "Interface theme",
       warnings: "SAST Warnings to ignore",
       flags: "Flags (emojis) to ignore",
       network: "Network",

i18n/french.js

@@ -172,7 +172,7 @@ const ui = {
       title: "Général",
       save: "sauvegarder",
       defaultPannel: "Panneau par défaut",
-      themePannel: "Theme Panel",
+      themePannel: "Thème de l'interface",
       warnings: "Avertissements à ignorer",
       flags: "Drapeau (emojis) à ignorer",
       network: "Réseau",

public/components/gauge/gauge.css

@@ -10,12 +10,19 @@
   padding: 0 10px;
   border-radius: 4px;
 }
+body.dark .gauge>.line {
+  color: white;
+}
 
 .gauge>.line.clickable:hover {
   background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
   cursor: pointer;
 }
 
+body.dark .gauge>.line.clickable:hover {
+  background: var(--dark-theme-primary-color);
+}
+
 .gauge>.line+.line {
   margin-top: 5px;
 }

public/components/navigation/navigation.css

@@ -9,6 +9,10 @@ nav#aside {
   z-index: 40;
 }
 
+body.dark nav#aside {
+  background: var(--dark-theme-primary-color);
+}
+
 nav#aside>.nsecure-logo {
   margin-top: 20px;
 }

public/components/package/package.css

@@ -19,6 +19,10 @@ section#package-info {
   -webkit-transform: translateX(-100%);
 }
 
+body.dark section#package-info {
+  background: var(--dark-theme-primary-lighter);
+}
+
 section#package-info .package-container {
   margin-bottom: 40px;
   padding: 10px;

public/components/popup/popup.css

@@ -32,3 +32,10 @@ section#popup--background>.popup {
   border-left: 2px solid #ffffff;
   border-top: 2px solid #FFF;
 }
+
+body.dark section#popup--background>.popup {
+  background: #303263;
+  box-shadow: 5px 5px 15px var(--dark-theme-primary-color);
+  border-left: 2px solid var(--dark-theme-secondary-darker);
+  border-top: 2px solid var(--dark-theme-secondary-darker);
+}

public/components/searchbar/searchbar.css

@@ -213,6 +213,10 @@ div.search-result-pannel .package+.package {
   box-shadow: 2px 1px 10px #26107f7a;
 }
 
+body.dark #search-nav {
+  background: var(--dark-theme-primary-color);
+}
+
 #search-nav:has(#searchbar[style*="display: none;"]) {
   display: none;
 }
@@ -246,6 +250,10 @@ div.search-result-pannel .package+.package {
   color: #def7ff;
 }
 
+body.dark #search-nav .packages>.package {
+  background: linear-gradient(to right, rgba(11,3,31,1) 0%, rgba(11,3,31, 0.8) 50%, rgba(11, 3, 31, 0.6) 100%);
+}
+
 #search-nav .packages>.package>* {
   transform: skewX(20deg);
 }
@@ -260,6 +268,10 @@ div.search-result-pannel .package+.package {
   cursor: pointer;
 }
 
+body.dark #search-nav .packages>.package:not(.active):hover {
+  background: linear-gradient(to right, rgba(11, 3, 31, 0.7) 1%, rgba(11, 3, 31, 0.5) 100%);
+}
+
 #search-nav .packages>.package.active {
   background: linear-gradient(to right,  rgba(55,34,175,1) 0%,rgba(87,74,173,1) 50%,rgb(59, 110, 205) 100%);
 }

public/components/views/home/home.css

@@ -101,6 +101,10 @@
   border-bottom: 2px solid #cecec9;
 }
 
+body.dark .home--header--title .top {
+  border-bottom: 2px solid var(--dark-theme-secondary-color);
+}
+
 .home--header--title .top #project-name {
   color: var(--primary-lighter);
 }
@@ -112,6 +116,15 @@
   margin-top: 5px;
 }
 
+body.dark .home--header--title .top #project-name {
+  color: var(--secondary);
+}
+
+body.dark .home--header--title .top #project-version {
+  color: var(--secondary);
+  opacity: 0.9;
+}
+
 .home--header--title .bottom {
   display: flex;
   height: 26px;
@@ -125,6 +138,11 @@
   font-family: system-ui;
 }
 
+body.dark .home--header--title .bottom #project-description {
+  color: var(--secondary);
+  opacity: 0.9;
+}
+
 .home--header--title .bottom>ul {
   margin-left: auto;
   height: inherit;
@@ -139,6 +157,10 @@
   letter-spacing: 0.5px;
 }
 
+body.dark .home--header--title .bottom>ul li {
+  color: white;
+}
+
 .home--header--title .bottom>ul li:hover {
   text-decoration: underline;
   cursor: pointer;
@@ -242,6 +264,10 @@
   padding: 10px;
 }
 
+body.dark #home--view .home--body .module>.content>p {
+  color: #74ace3;
+}
+
 /**
  * WARNINGS BEGIN
  */
@@ -260,6 +286,11 @@
   border-radius: 4px;
 }
 
+body.dark .home--warnings>p {
+  background: linear-gradient(to right, rgb(11, 3, 31) 0%, rgba(46, 10, 10, 0.7) 100%);
+  color: rgb(253, 210, 210);
+}
+
 .home--warnings>p+p {
   margin-top: 5px;
 }
@@ -293,6 +324,10 @@
   color: #546884;
 }
 
+body.dark .home--overview>div {
+  color: white;
+}
+
 .home--overview>div>.title {
   display: flex;
   font-size: 20px;
@@ -312,6 +347,10 @@
   margin-top: 10px;
 }
 
+body.dark .home--overview>div>span {
+  color: var(--dark-theme-secondary-color);
+}
+
 .home--packages--overview {
   display: flex;
   flex-direction: column;
@@ -337,17 +376,31 @@
   transition: 0.5s linear all;
 }
 
+body.dark .home--packages--overview>div {
+  background: linear-gradient(to right, rgb(11, 3, 31) 0%, rgba(46, 10, 10, 0.8) 100%);
+  color: rgb(253, 210, 210);
+}
+
 .home--packages--overview>div:hover {
   border-color: #da4e44;
   cursor: pointer;
   background: linear-gradient(to right, rgb(231, 206, 195) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
+body.dark .home--packages--overview>div:hover {
+  border-color: #da4e44;
+  background: linear-gradient(to right, rgb(11, 3, 31) 0%, rgba(46, 10, 10, 0.8) 100%);
+}
+
 .home--packages--overview>div span {
   color: #6d5703;
   margin-left: 10px;
 }
 
+body.dark .home--packages--overview>div span {
+  color: #ac8a05;
+}
+
 .home--packages--overview>div>div.chips {
   margin-left: auto;
   display: flex;
@@ -365,6 +418,12 @@
   color: #611717;
 }
 
+body.dark .home--packages--overview>div>div.chips>p {
+  background: linear-gradient(to bottom, rgb(75 22 22) 0%, rgb(26 5 5) 100%);
+  color: #f5c6c6;
+  box-shadow: 2px 2px 6px 0px #0e01019e;
+}
+
 .home--packages--overview>div>div.chips>p+p {
   margin-left: 10px;
 }

public/components/views/home/maintainers/maintainers.css

@@ -21,6 +21,11 @@
   flex-grow: 1;
 }
 
+body.dark .home--maintainers>.person {
+  color: white;
+  background: var(--dark-theme-primary-color);
+}
+
 .home--maintainers>.person:hover {
   border-color: var(--secondary-darker);
   cursor: pointer;
@@ -119,12 +124,21 @@
   color: #546884;
 }
 
+body.dark .maintainers--popup>.header>.informations>p.name {
+  color: white;
+}
+
 .maintainers--popup>.header>.informations>p.email {
   color: var(--secondary-darker);
   margin-top: 10px;
   font-family: monospace;
 }
 
+body.dark .maintainers--popup>.header>.informations>p.email {
+  color: var(--dark-theme-secondary-color);
+  opacity: 0.9;
+}
+
 .maintainers--popup>.header>.icons {
   display: flex;
   align-items: center;
@@ -162,6 +176,10 @@
   flex-shrink: 0;
 }
 
+body.dark .maintainers--popup>.separator {
+  background: var(--dark-theme-secondary-color);
+}
+
 .maintainers--popup>.separator>p {
   background: #f5f4f4;
   padding: 0 10px;
@@ -171,6 +189,11 @@
   color: #255471;
 }
 
+.maintainers--popup>.separator>p {
+  background: #303263;
+  color: #3cbde5;
+}
+
 .maintainers--popup>ul {
   display: flex;
   flex-direction: column;
@@ -196,15 +219,29 @@
   font-size: 15px;
 }
 
+body.dark .maintainers--popup>ul li {
+  background: linear-gradient(to right, var(--dark-theme-primary-color) 0%, rgba(28, 29, 58, 0.185) 100%);
+  border: none;
+  color: white;
+}
+
 .maintainers--popup>ul li>p{
   color: #234c99;
 }
 
+body.dark .maintainers--popup>ul li>p{
+  color: #9ca6b7;
+}
+
 .maintainers--popup>ul li>span{
   color: #2470b3;
   margin-left: 10px;
 }
 
+body.dark .maintainers--popup>ul li>span{
+  color: var(--dark-theme-secondary-color);
+}
+
 .maintainers--popup>ul li>i{
   margin-left: auto;
   margin-right: 13px;

public/components/views/home/report/report.css

@@ -15,6 +15,10 @@
   flex-shrink: 0;
 }
 
+body.dark .report--popup>.title {
+  background: var(--dark-theme-secondary-color);
+}
+
 .report--popup>.title>p {
   background: #f5f4f4;
   padding: 0 10px;
@@ -25,6 +29,11 @@
   font-size: 20px;
 }
 
+body.dark .report--popup>.title>p {
+  background: #303263;
+  color: #3cbde5;
+}
+
 .report--popup>form {
   display: flex;
   flex-direction: column;
@@ -39,6 +48,10 @@
   font-size: 18px;
 }
 
+body.dark .report--popup>form label {
+  color: white;
+}
+
 .report--popup>form input {
   padding: 11px 6px;
   border: none;