184 lines
3.7 KiB
CSS
184 lines
3.7 KiB
CSS
.ol-control.ol-storymap {
|
|
top: .5em;
|
|
left: .5em;
|
|
bottom: .5em;
|
|
max-width: 35%;
|
|
border-radius: .5em;
|
|
position: absolute;
|
|
height: auto;
|
|
background-color: rgba(255,255,255,.5);
|
|
}
|
|
.ol-storymap {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.ol-storymap > div {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
height: 100%;
|
|
position: relative;
|
|
scroll-behavior: smooth;
|
|
user-select: none;
|
|
}
|
|
.ol-storymap >div.ol-move {
|
|
scroll-behavior: unset;
|
|
}
|
|
|
|
.ol-control.ol-storymap .chapter {
|
|
position: relative;
|
|
padding: .5em;
|
|
overflow: hidden;
|
|
}
|
|
.ol-control.ol-storymap .chapter:last-child {
|
|
margin-bottom: 100%;
|
|
}
|
|
.ol-storymap .chapter {
|
|
cursor: pointer;
|
|
opacity: .4;
|
|
}
|
|
.ol-storymap .chapter.ol-select {
|
|
cursor: default;
|
|
opacity: 1;
|
|
background-color: rgba(255,255,255,.8);
|
|
}
|
|
|
|
.ol-storymap .ol-scroll-top,
|
|
.ol-storymap .ol-scroll-next {
|
|
position: relative;
|
|
min-height: 1.7em;
|
|
color: rgba(0,60,136,.5);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.ol-storymap .ol-scroll-next span {
|
|
padding-bottom: 1.4em;
|
|
display: block;
|
|
}
|
|
.ol-storymap .ol-scroll-top span {
|
|
padding-top: 1.4em;
|
|
display: block;
|
|
}
|
|
|
|
.ol-storymap .ol-scroll-top:before,
|
|
.ol-storymap .ol-scroll-next:before {
|
|
content: "";
|
|
border: .3em solid currentColor;
|
|
border-radius: .3em;
|
|
border-color: transparent currentColor currentColor transparent;
|
|
width: .8em;
|
|
height: .8em;
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
animation: ol-bounce-bottom 0.35s linear infinite alternate;
|
|
pointer-events: none;
|
|
}
|
|
.ol-storymap .ol-scroll-top:before {
|
|
border-color: currentColor transparent transparent currentColor;
|
|
animation: ol-bounce-top 0.35s linear infinite alternate;
|
|
}
|
|
|
|
@keyframes ol-bounce-top{
|
|
from {top: -.2em;}
|
|
to {top: .5em;}
|
|
}
|
|
@keyframes ol-bounce-bottom{
|
|
from {bottom: -.2em;}
|
|
to {bottom: .5em;}
|
|
}
|
|
|
|
.ol-storymap img[data-title] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* scrollLine / scrollbox */
|
|
.ol-storymap.scrollLine,
|
|
.ol-storymap.scrollBox {
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
max-width: 40%;
|
|
}
|
|
.ol-storymap.scrollLine .chapter,
|
|
.ol-storymap.scrollBox .chapter {
|
|
background-color: #fff;
|
|
margin: 100% 0;
|
|
}
|
|
.ol-storymap.scrollLine .chapter:first-child,
|
|
.ol-storymap.scrollBox .chapter:first-child {
|
|
margin-top: 3em;
|
|
}
|
|
.ol-storymap.scrollLine .chapter.ol-select,
|
|
.ol-storymap.scrollLine .chapter,
|
|
.ol-storymap.scrollBox .chapter.ol-select,
|
|
.ol-storymap.scrollBox .chapter {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ol-storymap.scrollLine .ol-scrolldiv,
|
|
.ol-storymap.scrollBox .ol-scrolldiv {
|
|
padding-right: 30px;
|
|
}
|
|
.ol-storymap.scrollLine:before,
|
|
.ol-storymap.scrollBox:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 100%;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 14px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.ol-storymap.scrollLine .ol-scroll,
|
|
.ol-storymap.scrollBox .ol-scroll {
|
|
display: block!important;
|
|
padding: 0;
|
|
width: 1px;
|
|
opacity: 1!important;
|
|
right: 15px;
|
|
overflow: visible;
|
|
transition: none;
|
|
}
|
|
.ol-storymap.scrollLine .ol-scroll > div {
|
|
background-color: transparent;
|
|
overflow: visible;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
box-shadow: unset;
|
|
}
|
|
.ol-storymap.scrollLine .ol-scroll > div:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #0af;
|
|
border: 2px solid #fff;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.ol-storymap.scrollBox .ol-scroll > div {
|
|
display: none;
|
|
}
|
|
.ol-storymap.scrollBox .chapter:after {
|
|
content: "";
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
top: Min(30%, 5em);
|
|
right: -24.5px;
|
|
box-shadow: 0 0 0 2px #fff, inset 0 0 0 15px #0af;
|
|
border-radius: 50%;
|
|
border: 5px solid transparent;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
}
|