127 lines
2.3 KiB
CSS
127 lines
2.3 KiB
CSS
.widget-container {
|
|
width: 545px;
|
|
height: var(--attraction-widget-container-height, 100%);
|
|
max-height: calc(100% - 90px);
|
|
color: #ffffff;
|
|
background: #806c59;
|
|
border: 2px solid #806c59;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.widget-content {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.widget-slide {
|
|
position: relative;
|
|
display: none;
|
|
top: 0;
|
|
left: 0;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.widget-slide.active,
|
|
.widget-slide.preview {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.widget-media {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 644px;
|
|
}
|
|
|
|
.view-container {
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.widget-header {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
|
|
rgba(179, 165, 152, 0.4);
|
|
box-shadow: inset 4px 4px 12px rgba(255, 255, 255, 0.12);
|
|
width: 100%;
|
|
padding: 9px 16px;
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 120%;
|
|
}
|
|
|
|
.widget-text {
|
|
width: 100%;
|
|
align-self: self-start;
|
|
padding: 16px;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 150%; /* or 27px */
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease-in-out;
|
|
user-select: none;
|
|
word-break: break-word;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.widget-text p {
|
|
margin: 0;
|
|
}
|
|
|
|
.widget-text.preview {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
font-weight: 700;
|
|
font-size: 48px;
|
|
line-height: 120%;
|
|
text-align: center;
|
|
}
|
|
|
|
.widget-text.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.widget-titles {
|
|
display: flex;
|
|
height: 50px;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin: 5px 0 0 0;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
|
|
rgba(179, 165, 152, 0.4);
|
|
box-shadow: inset 4px 4px 12px rgba(255, 255, 255, 0.12);
|
|
border-radius: 0 0 10px 10px;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.widget-title {
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 21px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
|
|
.widget-title.active {
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
text-underline-offset: 5px;
|
|
}
|
|
|
|
.widget-title.preview {
|
|
display: none;
|
|
}
|