Preparation for theme

Start for a base to have a colour scheme follow through other resources.

html/css/standardTheme.css

@@ -0,0 +1,62 @@
+:root {
+ --ColorPreview: rgb(234, 7, 7); /* This is used for colour preview variables only */
+
+ --Black: rgb(0, 0, 0);
+ --White: rgb(255, 255, 255);
+
+ --DarkText: rgb(0, 0, 0);
+ --LightText: rgb(255, 255, 255);
+
+ --OpacityStrength: 0.9; /* This is used for opaque variables only */
+
+ --BackgroundR: 23;
+ --BackgroundG: 23;
+ --BackgroundB: 23;
+
+ --PrimaryR: 220;
+ --PrimaryG: 20;
+ --PrimaryB: 60;
+
+ --SecondaryR: 54;
+ --SecondaryG: 54;
+ --SecondaryB: 54;
+
+ --SuccessR: 32;
+ --SuccessG: 187;
+ --SuccessB: 68;
+
+ --ErrorR: 193;
+ --ErrorG: 1;
+ --ErrorB: 20;
+
+ --PoliceR: 33;
+ --PoliceG: 151;
+ --PoliceB: 242;
+
+ --AmbulanceR: 244;
+ --AmbulanceG: 66;
+ --AmbulanceB: 54;
+
+ /* DONT TOUCH BELOW THIS LINE */
+
+ --Background: rgb(var(--BackgroundR), var(--BackgroundG), var(--BackgroundB));
+ --Primary: rgb(var(--PrimaryR), var(--PrimaryG), var(--PrimaryB));
+ --Secondary: rgb(var(--SecondaryR), var(--SecondaryG), var(--SecondaryB));
+ --Success: rgb(var(--SuccessR), var(--SuccessG), var(--SuccessB));
+ --Error: rgb(var(--ErrorR), var(--ErrorG), var(--ErrorB));
+ --Police: rgb(var(--PoliceR), var(--PoliceG), var(--PoliceB));
+ --Ambulance: rgb(var(--AmbulanceR), var(--AmbulanceG), var(--AmbulanceB));
+
+ --BackgroundTransparency: rgba(var(--BackgroundR), var(--BackgroundG), var(--BackgroundB), var(--OpacityStrength));
+ --PrimaryTransparency: rgba(var(--PrimaryR), var(--PrimaryG), var(--PrimaryB), var(--OpacityStrength));
+ --SecondaryTransparency: rgba(var(--SecondaryR), var(--SecondaryG), var(--SecondaryB), var(--OpacityStrength));
+ --SuccessTransparency: rgba(var(--SuccessR), var(--SuccessG), var(--SuccessB), var(--OpacityStrength));
+ --ErrorTransparency: rgba(var(--ErrorR), var(--ErrorG), var(--ErrorB), var(--OpacityStrength));
+ --PoliceTransparency: rgba(var(--PoliceR), var(--PoliceG), var(--PoliceB), var(--OpacityStrength));
+ --AmbulanceTransparency: rgba(var(--AmbulanceR), var(--AmbulanceG), var(--AmbulanceB), var(--OpacityStrength));
+}
+
+/*
+ To import to other resources:
+ <link rel="stylesheet" href="https://cfx-nui-qb-core/html/css/standardTheme.css">
+*/

html/css/style.css

@@ -3,74 +3,60 @@ html::-webkit-scrollbar {
 }
 
 @media (width: 3840px) and (height: 2160px) {
- .success {
- background-color: rgba(23, 23, 23, 90%);
+
+ .success, .primary, .error, .police, .ambulance {
+ background-color: var(--BackgroundTransparency);
  border-radius: 10px;
  box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
- border-left: 0.5rem solid #20bb44;
  font-size: 1.5vh;
  }
 
+ .success {
+ border-left: 0.5rem solid var(--Success);
+ }
+
  .primary {
- background-color: rgba(23, 23, 23, 90%);
- border-radius: 10px;
- box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
- border-left: 5px solid #1c75d2;
- font-size: 1.5vh;
+ border-left: 5px solid var(--Primary);
  }
 
  .error {
- background-color: rgba(23, 23, 23, 90%);
- border-radius: 10px;
- box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
- border-left: 5px solid #c10114;
- font-size: 1.5vh;
+ border-left: 5px solid var(--Error);
  }
 
  .police {
- background-color: rgba(23, 23, 23, 90%);
- border-radius: 10px;
- box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
- border-left: 5px solid #2197f2;
- font-size: 1.5vh;
+ border-left: 5px solid var(--Police);
  }
 
  .ambulance {
- background-color: rgba(23, 23, 23, 90%);
- border-radius: 10px;
- box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
- border-left: 5px solid #f44236;
- font-size: 1.5vh;
+ border-left: 5px solid var(--Ambulance);
  }
 
 }
 
-.success {
- background-color: #20bb44;
+.success, .primary, .error, .police, .ambulance {
  border-radius: 5px;
- border: 1px solid #6ae587;
+}
+.success {
+ background-color: var(--Success);
+ border: 1px solid var(--Success);
 }
 
 .primary {
- background-color: #1c75d2;
- border-radius: 5px;
- border: 1px solid #6facec;
+ background-color: var(--Primary);
+ border: 1px solid var(--Primary);
 }
 
 .error {
- background-color: #c10114;
- border-radius: 5px;
- border: 1px solid #fe4255;
+ background-color: var(--Error);
+ border: 1px solid var(--Error);
 }
 
 .police {
- background-color: #2197f2;
- border-radius: 5px;
- border: 1px solid #7ac1f7;
+ background-color: var(--Police);
+ border: 1px solid var(--Police);
 }
 
 .ambulance {
- background-color: #f44236;
- border-radius: 5px;
- border: 1px solid #f88e86;
+ background-color: var(--Ambulance);
+ border: 1px solid var(--Ambulance);
 }

html/index.html

@@ -4,6 +4,7 @@
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
+ <link rel="stylesheet" href="css/standardTheme.css">
  <link href="css/style.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js" defer></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js" defer></script>