adjust contrasts; use css vars

assets/index.js

@@ -30,13 +30,13 @@ import APP_DATA from "./data";
   // mdi icons
   var svgs = {
     "chevron-up-circle-outline":
-      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-up-circle-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="#fff"><path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M7.4,15.4L12,10.8L16.6,15.4L18,14L12,8L6,14L7.4,15.4Z" /></svg>',
+      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-up-circle-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="white"><path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M7.4,15.4L12,10.8L16.6,15.4L18,14L12,8L6,14L7.4,15.4Z" /></svg>',
     "play-circle-outline":
-      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-play-circle-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="#fff"><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>',
+      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-play-circle-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="white"><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>',
     "information-outline":
-      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-information-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="#fff"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>',
+      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-information-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="white"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>',
     "pause-circle-outline":
-      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-pause-circle-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="#fff"><path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>',
+      '<svg xmlns="http://www.w3.org/2000/svg" id="mdi-pause-circle-outline" viewBox="0 0 24 24" height="1em" width="1em" fill="white"><path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>',
   };
 
   // Grab elements from DOM.

assets/style.css

@@ -7,7 +7,6 @@
   text-size-adjust: none;
   -webkit-user-drag: none;
   -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   min-width: 0;
 }
 
@@ -75,7 +74,7 @@ body.multiple-scenes #titleBar {
   height: 100%;
   line-height: 27.5px;
   padding: 5px;
-  background-color: #1a1a37;
+  background-color: var(--gcg-color-secondary);
   font-weight: 900;
   font-size: 1.5rem;
   overflow: hidden;
@@ -118,10 +117,10 @@ body.multiple-scenes #titleBar {
   width: 40px;
   height: 40px;
   padding: 5px;
-  background-color: #ffbc3b;
+  background-color: var(--gcg-color-primary);
   border-radius: 50%;
   margin: 10px;
-  color: #fff;
+  color: var(--gcg-color-secondary);
   font-size: 30px;
 }
 
@@ -135,12 +134,12 @@ body.multiple-scenes #titleBar {
   width: 40px;
   height: 40px;
   padding: 5px;
-  background-color: #ffbc3b;
+  background-color: var(--gcg-color-primary);
   border-radius: 20px;
   margin: 10px;
   margin-right: 20px;
   cursor: pointer;
-  color: #fff;
+  color: var(--gcg-color-secondary);
   font-size: 30px;
 }
 
@@ -156,10 +155,10 @@ body.fullscreen-enabled #autorotateToggle {
   width: 40px;
   height: 40px;
   padding: 5px;
-  background-color: #ffbc3b;
+  background-color: var(--gcg-color-primary);
   border-radius: 50%;
   margin: 10px;
-  color: #fff;
+  color: var(--gcg-color-secondary);
 }
 
 #sceneList {
@@ -173,7 +172,7 @@ body.fullscreen-enabled #autorotateToggle {
   gap: 5px;
   padding: 5px;
   overflow: auto;
-  background-color: #1a1a37;
+  background-color: var(--gcg-color-secondary);
   border-radius: 15px;
   transition: 0.2s ease;
 }
@@ -193,7 +192,7 @@ body.fullscreen-enabled #autorotateToggle {
   gap: 0.5rem;
   padding: 0.5rem;
   border-radius: 10px;
-  color: #fff;
+  color: var(--gcg-color-secondary);
   font-weight: 700;
   height: 40px;
   cursor: pointer;
@@ -212,14 +211,13 @@ body.fullscreen-enabled #autorotateToggle {
 
 #sceneList .scene:hover,
 #sceneList .scene:active {
-  background-color: #fff !important;
-  color: #1a1a37;
+  background-color: white !important;
+  color: var(--gcg-color-secondary);
   transition: 0.3s ease;
 }
 
 #sceneList .scene.current {
-  background-color: rgb(103, 115, 131);
-  background-color: #ffbc3b;
+  background-color: var(--gcg-color-primary);
 }
 
 /* Link hotspot */
@@ -252,30 +250,18 @@ body.fullscreen-enabled #autorotateToggle {
   position: absolute;
   left: 100%;
   top: 30px; /* ( 60 - (16 + 2*8) ) / 2 */
-
   margin-left: 3px;
-
   font-size: 16px;
-
   max-width: 300px;
-
   padding: 8px 10px;
-
   border-radius: 5px;
-
-  background-color: rgb(58, 68, 84);
-  background-color: #1a1a37;
-
-  color: #fff;
-
+  background-color: var(--gcg-color-secondary);
+  color: white;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-
   cursor: pointer;
-
   opacity: 0;
-
   transform: translateX(-8px);
   transition: -webkit-transform 0.3s, transform 0.3s, opacity 0.3s;
 }
@@ -314,17 +300,17 @@ body.fullscreen-enabled #autorotateToggle {
   padding: 5px;
   padding-right: 10px;
   border-radius: 25px;
-  background-color: #1a1a37;
+  background-color: var(--gcg-color-secondary);
   cursor: pointer;
   transition: max-width 0.5s ease;
-  color: #fff;
+  color: white;
   display: flex;
   gap: 0.5rem;
   align-items: center;
 }
 
 .info-hotspot.audio-room .info-hotspot-header {
-  background-color: #ffbc3b;
+  background-color: var(--gcg-color-primary);
   width: 75px;
   height: 75px;
   max-width: 75px;
@@ -380,10 +366,9 @@ body.fullscreen-enabled #autorotateToggle {
   width: 40px;
   height: 40px;
   padding: 5px;
-  background-color: rgb(103, 115, 131);
-  background-color: #fff;
+  background-color: white;
   border-radius: 50%;
-  color: #000;
+  color: var(--gcg-color-secondary);
 }
 
 /* Hide controls when width is too small */