Merge pull request #1031 from AllanOcelot/global_styling

Implement CSS Global Variables
the-hideout · Jan 14, 2025 · 23cbefb · 23cbefb
2 parents c91bd7b + 8a5879d
commit 23cbefb
Show file tree

Hide file tree

Showing 51 changed files with 338 additions and 327 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,17 +1,36 @@
+/* Variables start */
 :root {
-    --display-height: auto;
+  --color-black: #000;
+    --color-black-light: #1b1919;
+  --color-white: #fff;
+  --color-gunmetal: #383945;
+    --color-gunmetal-dark: #2d2d2f;
+  --color-gold-one: #c7c5b3;
+  --color-gold-two: #9a8866;
+  --color-blue-light: #0292c0;
+  --color-gray: #424242;
+    --color-gray-light : #636363;
+  --color-green: #00a700;
+    --color-green-light: #6a9a66;
+  --color-orange : #ca8a00;
+  --color-red: #cd1e2f;
+    --color-red-light: #9a6666;
+  --color-purple: #8c6edf;
+  --color-yellow: #ffe084;
+    --color-yellow-light: #E0DFD6;
 }
 
+
 .desc-line-break {
     margin-top: 2rem;
     margin-bottom: 2rem;
     width: 50%;
 }
 
 body {
-    background-color: #2d2d2f;
+    background-color: var(--color-gunmetal-dark);
     background-image: url('images/background-1.png');
-    color: #c7c5b3;
+    color: var(--color-gold-one);
     margin: 0;
     padding: 0;
     height: 100%;
@@ -49,9 +68,9 @@ button {
 
 button,
 input[type='submit'] {
-    background-color: #9a8866;
+    background-color: var(--color-gold-two);
     border: 0;
-    color: #000;
+    color: var(--color-black);
     height: 40px;
     padding: 0;
 }
@@ -60,16 +79,15 @@ input[type='text'],
 input[type='number'] {
     padding: 12px;
     max-height: 40px;
-
-    border: 2px solid #9a8866;
-    background-color: #2d2d2f;
-    color: #c7c5b3;
+    border: 2px solid var(--color-gold-two);
+    background-color: var(--color-gunmetal-dark);
+    color: var(--color-gold-one);
 }
 
 input[type='text']:focus,
 input[type='number']:focus {
     outline: none;
-    border: 2px solid #c7c5b3;
+    border: 2px solid var(--color-gold-one);
 }
 
 input[type='text'].number {
@@ -86,7 +104,7 @@ select {
 }
 
 a {
-    color: #9a8866;
+    color: var(--color-gold-two);
     text-decoration: none;
 }
 
@@ -114,15 +132,15 @@ cite {
 }
 
 .updated-label {
-    color: #ccc;
+    color: var(--color-gold-one);
     font-size: 10px;
     left: 4px;
     position: absolute;
     top: 2px;
 }
 
 .time-wrapper {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgb( from var(--color-black) r g b / 0.5);
     padding: 10px 20px;
     position: absolute;
     right: -10px;
@@ -181,12 +199,12 @@ cite {
 }
 
 .price-wrapper {
-    color: #b0b0b0;
+    color: var(--color-gold-one);
     font-size: 14px;
 }
 
 .price-wrapper-tool {
-    color: #0292c0;
+    color: var(--color-blue-light);
     font-size: 14px;
 }
 
@@ -210,56 +228,106 @@ cite {
 }
 
 div.tippy-box {
-    background-color: #2d2c2e;
-    color: #c7c5b3;
-    border-color: #4f4f4f;
+    background-color: var(--color-gunmetal-dark);
+    color: var(--color-gold-one);
+    border-color: var(--color-gray);
     border-radius: 4px;
     border-style: solid;
     border-width: 3px;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 1px rgb( from var(--color-black) r g b / 0.1);
 }
 
 div.tippy-box[data-placement^='top'] > .tippy-arrow::before {
-    border-top-color: #4f4f4f;
+    border-top-color: var(--color-gray);
     bottom: -10px;
 }
 
 div.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
-    border-bottom-color: #4f4f4f;
+    border-bottom-color: var(--color-gray);
     top: -10px;
 }
 
 div.tippy-box[data-placement^='left'] > .tippy-arrow::before {
-    border-left-color: #4f4f4f;
+    border-left-color: var(--color-gray);
     right: -10px;
 }
 
 div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
-    border-right-color: #4f4f4f;
+    border-right-color: var(--color-gray);
     left: -10px;
 }
 
 .hr-muted {
     margin-top: 2rem;
-    border-bottom: 1px solid #9a8866;
+    border-bottom: 1px solid var(--color-gold-two);
     width: 80%;
     opacity: 0.4;
 }
 
 .hr-muted-full {
     margin-top: 2rem;
-    border-bottom: 1px solid #9a8866;
+    border-bottom: 1px solid var(--color-gold-two);
     width: 100%;
     opacity: 0.4;
 }
 
 .rc-slider-mark-text {
-    color: #757257 !important;
+    color: rgb( from var(--color-gold-one) r g b / 0.8) !important;
 }
 
 .rc-slider-mark-text-active {
-    color: #c7c5b3 !important;
+    color: rgb( from var(--color-gold-one) r g b/ 1) !important;
+}
+
+/* Global reuseable styles, specific to the Tarkov.Dev style */
+.information-section {
+    background: rgb( from var(--color-black) r g b / 0.1);
+    border: 1px solid rgb( from var(--color-white) r g b/ 0.1);
+    border-radius: 0 20px 0 20px;
+    margin-bottom: 50px;
+    overflow: hidden;
+}
+.information-section.has-table {
+    border-radius: 0 20px 0 0;
+}
+
+.information-section h2 {
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    margin: 0;
+    padding: 15px 20px;
+    background: rgb( from var(--primary-color-black) r g b / 0.4);
+    color: var(--color-gold-one);
+    background: rgb( from var(--color-black) r g b / 0.3);
+    border-bottom: 1px solid rgb( from var(--color-white) r g b / 0.1);
+}
+.information-section h2 svg {
+    width: 1.6rem !important;
+    height: auto !important;
+    margin: 0 12px 0 0;
 }
+.information-section .content {
+  padding: 20px;
+}
+.information-section .content p {
+  margin: 0;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 @media screen and (min-width: 800px) {
     .control-wrapper {

diff --git a/src/App.js b/src/App.js
@@ -7,6 +7,7 @@ import CookieConsent from "react-cookie-consent";
 import { ErrorBoundary } from "react-error-boundary";
 
 import './App.css';
+
 import i18n from './i18n.js';
 import loadPolyfills from './modules/polyfills.js';
 

diff --git a/src/components/api-metrics-graph/index.js b/src/components/api-metrics-graph/index.js
@@ -87,7 +87,7 @@ function ApiMetricsGraph({ graph }) {
                         }}
                         style={{
                             data: {
-                                stroke: '#3b9c3a',
+                                stroke: 'var(--color-green)',
                                 strokeWidth: 4,
                             },
                             parent: { border: '1px solid #ccc' },

diff --git a/src/components/canvas-grid/index.js b/src/components/canvas-grid/index.js
@@ -48,7 +48,7 @@ function CanvasGrid(props) {
         const width = 20;
 
         ctx.beginPath();
-        ctx.fillStyle = '#000'; // outer border color
+        ctx.fillStyle = 'var(--color-black)'; // outer border color
         ctx.fillRect(startX, startY, horizontal * 20 + 2, vertical * 20 + 2);
 
         startX = startX + 1;

diff --git a/src/components/cost-items-cell/index.css b/src/components/cost-items-cell/index.css
@@ -10,7 +10,7 @@
 }
 
 .cost-item-wrapper.disabled::after {
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgb( from var(--color-black) r g b / 0.3);
     bottom: 0;
     content: ' ';
     left: 0;
@@ -20,7 +20,7 @@
 }
 
 .cost-item-count-wrapper {
-    color: #c7c5b3;
+    color: var(--color-gold-one);
 }
 
 .cost-image-wrapper {

diff --git a/src/components/crafts-table/index.css b/src/components/crafts-table/index.css
@@ -1,5 +1,5 @@
 .duration-wrapper, .finish-wrapper {
-    color: #636363;
+    color: var(--color-gray-light);
     font-size: 14px;
 }
 

diff --git a/src/components/data-table/index.css b/src/components/data-table/index.css
@@ -15,7 +15,7 @@
 }
 
 .data-table thead, .data-table tfoot {
-    background: rgba(0, 0, 0, 0.4);
+    background: rgb( from var(--color-black) r g b / 0.4);
     position: sticky;
     top: 0;
 }
@@ -29,7 +29,7 @@
 }
 
 .data-table thead tr:first-child {
-    border-top: 4px solid #1b1919;
+    border-top: 4px solid var(--color-black-light);
 }
 
 .data-table tbody tr.last-row {
@@ -42,18 +42,18 @@
 
 .data-cell, .data-table tfoot th {
     padding: 5px 15px;
-    border-top: 4px solid #1b1919;
-    border-bottom: 4px solid #1b1919;
+    border-top: 4px solid var(--color-black-light);
+    border-bottom: 4px solid var(--color-black-light);
 }
 
 th:first-child,
 td.data-cell:first-child {
-    border-left: 4px solid #1b1919;
+    border-left: 4px solid var(--color-black-light);
 }
 
 th:last-child,
 td.data-cell:last-child {
-    border-right: 4px solid #1b1919;
+    border-right: 4px solid var(--color-black-light);
 }
 
 .data-table .center-content {
@@ -70,16 +70,16 @@ td.data-cell:last-child {
 }
 
 .data-table tr td {
-    background-color: #2d2d2f;
+    background-color: var(--color-gunmetal-dark);
 }
 
 .data-table tbody tr.expanded td {
-    background-color: #242324;
+    background-color: var(--color-gunmetal-dark);
 }
 
 .arrow-icon,
 .arrow-placeholder {
-    fill: #c7c5b3;
+    fill: var(--color-gold-one);
     height: 10px;
     width: 10px;
 }