adjust contrasts; use css vars
All checks were successful
Marzipano Prod / Produktivumgebung (push) Successful in 1m2s
All checks were successful
Marzipano Prod / Produktivumgebung (push) Successful in 1m2s
This commit is contained in:
@ -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.
|
||||
|
||||
@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user