mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
207 lines
10 KiB
CSS
Executable File
207 lines
10 KiB
CSS
Executable File
.Tutorial-one {
|
|
padding: 10px;
|
|
background-image: url('../img/tutorials/1.png');
|
|
}
|
|
|
|
.Info-icon {
|
|
padding: 10px;
|
|
height: 50px;
|
|
width: 50px;
|
|
background-image: url('../img/tutorials/info.png');
|
|
}
|
|
|
|
.Tutorial-image--box {
|
|
height: 220px;
|
|
width: 520px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.tut-Hide--check{
|
|
display: none;
|
|
}
|
|
|
|
#slider {
|
|
height: 35vw;
|
|
position: relative;
|
|
perspective: 1000px;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
#slider label {
|
|
margin: auto;
|
|
width: 60%;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
cursor: pointer;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
#s1:checked ~ #slide4,
|
|
#s2:checked ~ #slide5,
|
|
#s3:checked ~ #slide1,
|
|
#s4:checked ~ #slide2,
|
|
#s5:checked ~ #slide3 {
|
|
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
|
|
transform: translate3d(-30%, 0, -200px);
|
|
}
|
|
|
|
#s1:checked~#slide5,
|
|
#s2:checked~#slide1,
|
|
#s3:checked~#slide2,
|
|
#s4:checked~#slide3,
|
|
#s5:checked~#slide4 {
|
|
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
|
|
transform: translate3d(-15%, 0, -100px);
|
|
}
|
|
|
|
#s1:checked~#slide1,
|
|
#s2:checked~#slide2,
|
|
#s3:checked~#slide3,
|
|
#s4:checked~#slide4,
|
|
#s5:checked~#slide5 {
|
|
box-shadow: 0 13px 25px 0 rgba(0, 0, 0, .3), 0 11px 7px 0 rgba(0, 0, 0, .19);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
#s1:checked~#slide2,
|
|
#s2:checked~#slide3,
|
|
#s3:checked~#slide4,
|
|
#s4:checked~#slide5,
|
|
#s5:checked~#slide1 {
|
|
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
|
|
transform: translate3d(15%, 0, -100px);
|
|
}
|
|
|
|
#s1:checked~#slide3,
|
|
#s2:checked~#slide4,
|
|
#s3:checked~#slide5,
|
|
#s4:checked~#slide1,
|
|
#s5:checked~#slide2 {
|
|
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
|
|
transform: translate3d(30%, 0, -200px);
|
|
}
|
|
|
|
#slide1 {
|
|
background: #00BCD4;
|
|
}
|
|
|
|
#slide2 {
|
|
background: #4CAF50;
|
|
}
|
|
|
|
#slide3 {
|
|
background: #CDDC39;
|
|
}
|
|
|
|
#slide4 {
|
|
background: #FFC107;
|
|
}
|
|
|
|
#slide5 {
|
|
background: #FF5722
|
|
}
|
|
|
|
.tut-Icon--alarm {
|
|
content: url('../img/tutorials/alarm.png');
|
|
}
|
|
|
|
.tut-Icon--bell {
|
|
|
|
content: url('../img/tutorials/bell.png');
|
|
}
|
|
|
|
.tut-Icon--sol {
|
|
content: url('../img/tutorials/bulb.png');
|
|
}
|
|
|
|
.tut-Icon--info {
|
|
content: url('../img/tutorials/info.png');
|
|
}
|
|
|
|
.tut-Monitor--ack {
|
|
margin: 5px;
|
|
object-fit: fill;
|
|
object-position: center;
|
|
content: url('../img/tutorials/ack_rsv.png');
|
|
}
|
|
|
|
.tut-Monitor--metrics {
|
|
margin: 5px;
|
|
object-fit: fill;
|
|
object-position: center;
|
|
content: url('../img/tutorials/metrics.png');
|
|
}
|
|
|
|
.tut-Monitor--range {
|
|
margin: 5px;
|
|
object-fit: fill;
|
|
object-position: center;
|
|
content: url('../img/tutorials/range.png');
|
|
}
|
|
|
|
.tut-Monitor--incident {
|
|
margin: 5px;
|
|
object-fit: fill;
|
|
object-position: center;
|
|
content: url('../img/tutorials/incidents.png');
|
|
}
|
|
|
|
.tut-Monitor--monitor {
|
|
margin: 5px;
|
|
object-fit: fill;
|
|
object-position: center;
|
|
content: url('../img/tutorials/monitor.png');
|
|
}
|
|
|
|
.bs-Button--icon--right.bs-Button--eye:after,
|
|
.bs-Button--eye:before {
|
|
padding-top: 2px;
|
|
size: 7px;
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA20lEQVQ4T+3SP0tCURgH4MchCITCVcIhaGoRRPADuPQJkiAo55YGJ50cHAUXNzFaCpzc/QKBg3NjRHOBTi1x4SAi1+4FHRw8cJbz53l5f7wZO16ZHXsO4PaJps0wG0otkkr+B57hHlWcBugHEwzwFYdvAuu4RQdzvITP1zhBC08YrqNx4DNm6OIIr/gOu4Ab/KKBS9ytonFgDVfo4w29AEftHuMRFTxgjFESGN2fo41PRFApfJoihzya+EjT8uqbMoq4CIfvIY4Ijl1pxyZpWpb3BzB1VBsf7n+Gf+YPHxVDqgqmAAAAAElFTkSuQmCC');
|
|
}
|
|
|
|
.bs-Button--icon--right.bs-Button--eye:active:after,
|
|
.bs-Button--icon--right.bs-Button--eye:focus:hover:after,
|
|
.bs-Button--icon--right.bs-Button--eye:hover:after,
|
|
.bs-Button--eye:active:before,
|
|
.bs-Button--eye:focus:hover:before,
|
|
.bs-Button--eye:hover:before {
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA20lEQVQ4T+3SP0tCURgH4MchCITCVcIhaGoRRPADuPQJkiAo55YGJ50cHAUXNzFaCpzc/QKBg3NjRHOBTi1x4SAi1+4FHRw8cJbz53l5f7wZO16ZHXsO4PaJps0wG0otkkr+B57hHlWcBugHEwzwFYdvAuu4RQdzvITP1zhBC08YrqNx4DNm6OIIr/gOu4Ab/KKBS9ytonFgDVfo4w29AEftHuMRFTxgjFESGN2fo41PRFApfJoihzya+EjT8uqbMoq4CIfvIY4Ijl1pxyZpWpb3BzB1VBsf7n+Gf+YPHxVDqgqmAAAAAElFTkSuQmCC');
|
|
}
|
|
|
|
.bs-Button--blue.bs-Button--eye:before,
|
|
.bs-Button--blue.bs-Button--eye:hover:before,
|
|
.bs-Button--icon--right.bs-Button--blue.bs-Button--eye:after,
|
|
.bs-Button--icon--right.bs-Button--blue.bs-Button--eye:hover:after,
|
|
.bs-Button--icon--right.bs-Button--eye.bs-Button--blue.bs-is-disabled:after,
|
|
.bs-Button--icon--right.bs-Button--eye.bs-Button--blue:disabled:after,
|
|
.bs-Button--eye.bs-Button--blue.bs-is-disabled:before,
|
|
.bs-Button--eye.bs-Button--blue:disabled:before {
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA20lEQVQ4T+3SP0tCURgH4MchCITCVcIhaGoRRPADuPQJkiAo55YGJ50cHAUXNzFaCpzc/QKBg3NjRHOBTi1x4SAi1+4FHRw8cJbz53l5f7wZO16ZHXsO4PaJps0wG0otkkr+B57hHlWcBugHEwzwFYdvAuu4RQdzvITP1zhBC08YrqNx4DNm6OIIr/gOu4Ab/KKBS9ytonFgDVfo4w29AEftHuMRFTxgjFESGN2fo41PRFApfJoihzya+EjT8uqbMoq4CIfvIY4Ijl1pxyZpWpb3BzB1VBsf7n+Gf+YPHxVDqgqmAAAAAElFTkSuQmCC');
|
|
}
|
|
.bs-Button--icon--right.bs-Button--link.bs-Button--eye:after,
|
|
.bs-Button--link.bs-Button--eye:before {
|
|
height: 10px;
|
|
width: 15px;
|
|
height: 15px;
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA20lEQVQ4T+3SP0tCURgH4MchCITCVcIhaGoRRPADuPQJkiAo55YGJ50cHAUXNzFaCpzc/QKBg3NjRHOBTi1x4SAi1+4FHRw8cJbz53l5f7wZO16ZHXsO4PaJps0wG0otkkr+B57hHlWcBugHEwzwFYdvAuu4RQdzvITP1zhBC08YrqNx4DNm6OIIr/gOu4Ab/KKBS9ytonFgDVfo4w29AEftHuMRFTxgjFESGN2fo41PRFApfJoihzya+EjT8uqbMoq4CIfvIY4Ijl1pxyZpWpb3BzB1VBsf7n+Gf+YPHxVDqgqmAAAAAElFTkSuQmCC');
|
|
}
|
|
.bs-Button--icon--right.bs-Button--link.bs-Button--eye:active:after,
|
|
.bs-Button--icon--right.bs-Button--link.bs-Button--eye:hover:after,
|
|
.bs-Button--link.bs-Button--eye:active:before,
|
|
.bs-Button--link.bs-Button--eye:hover:before {
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+c2V0dGluZ3MtLWhvdmVyPC90aXRsZT48cGF0aCBkPSJNMTQuNDI2IDkuMjk4Yy0uMTY0IDAtMS4xNDcgMC0xLjU1Ny0uNDk2IDAtLjA4My0uMDgyLS4wODMtLjA4Mi0uMTY2LS4wODItLjU3OC42NTYtMS4zMjIuNzM4LTEuNDA1LjE2NC0uMTY1LjE2NC0uNDEzLjA4Mi0uNDk1LS4wODItLjA4My0uNDEtLjQxNC0uNDkyLS41NzktLjA4Mi0uMTY1LS4zMjgtLjA4My0uNDkyLjA4My0uMTY0LjE2NS0uODIuODI2LTEuMzkzLjc0My0uMDgyIDAtLjA4Mi0uMDgyLS4xNjQtLjA4Mi0uNDkyLS4zMy0uNDkyLTEuMzIyLS40OTItMS40ODggMC0uMjQ4LS4wODItLjQxMy0uMjQ2LS40MTNoLS44MmMtLjE2NCAwLS4yNDYuMTY1LS4yNDYuNDEzIDAgLjE2NiAwIDEuMTU3LS40OTIgMS41Ny0uMDgxIDAtLjA4MS4wODMtLjE2My4wODMtLjU3NCAwLTEuMjMtLjY2MS0xLjM5NC0uODI2LS4xNjQtLjE2Ni0uNDEtLjE2Ni0uNDkyLS4wODMtLjA4Mi4xNjUtLjQxLjQ5Ni0uNTczLjU3OS0uMDgyLjA4Mi0uMDgyLjMzLjA4Mi40OTUuMTYzLjE2Ni44Mi44MjcuNzM3IDEuNDA1IDAgLjA4My0uMDgyLjA4My0uMDgyLjE2Ni0uMzI4LjQ5Ni0xLjMxMS40OTYtMS40NzUuNDk2LS4yNDYgMC0uNDEuMDgyLS40MS4yNDd2Ljc0NGMwIC4xNjYuMTY0LjMzLjQxLjMzLjE2NCAwIDEuMTQ3IDAgMS41NTcuNDk3IDAgLjA4Mi4wODIuMDgyLjA4Mi4xNjUuMDgyLjU3OS0uNjU2IDEuMzIyLS43MzggMS40MDUtLjE2My4xNjUtLjE2My40MTMtLjA4MS40OTYuMDgxLjA4Mi40MS40MTMuNDkxLjU3OC4wODIuMDgzLjMyOC4wODMuNDkyLS4wODIuMTY0LS4xNjYuODItLjgyNyAxLjM5NC0uNzQ0LjA4MiAwIC4wODIuMDgzLjE2My4wODMuNDkyLjQxMy40OTIgMS4zMjIuNDkyIDEuNTcgMCAuMTY1LjE2NC40MTMuMzI4LjQxM2guNzM4Yy4xNjQgMCAuMzI4LS4xNjUuMzI4LS40MTMgMC0uMTY2IDAtMS4xNTcuNDkyLTEuNTcuMDgyIDAgLjA4Mi0uMDgzLjE2My0uMDgzLjU3NC0uMDgzIDEuMzEyLjY2MSAxLjM5NC43NDQuMTY0LjE2NS40MS4xNjUuNDkyLjA4MmwuNTczLS41NzhjLjA4Mi0uMDgzLjA4Mi0uMzMtLjA4MS0uNDk2LS4xNjQtLjE2NS0uODItLjgyNi0uNzM4LTEuNDA1IDAtLjA4My4wODItLjA4My4wODItLjE2NS40MS0uNDk2IDEuMzExLS40OTYgMS41NTctLjQ5Ni4xNjQgMCAuNDEtLjE2NS40MS0uMzN2LS43NDVhLjc0MS43NDEgMCAwIDAtLjU3NC0uMjQ3ek0xMCAxMi4wMzNjLTEuMDkgMC0yLS45MTctMi0yLjAxNkM4IDguOTE3IDguOTEgOCAxMCA4YzEuMDkgMCAyIC45MTcgMiAyLjAxNyAwIDEuMS0uOTEgMi4wMTYtMiAyLjAxNnoiIGZpbGw9IiMzMjMyNUQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==');
|
|
}
|
|
.bs-Button--icon--right.bs-Button--eye.bs-is-disabled:after,
|
|
.bs-Button--icon--right.bs-Button--eye:disabled:after,
|
|
.bs-Button--link.bs-Button--icon--right.bs-Button--eye.bs-is-disabled:after,
|
|
.bs-Button--link.bs-Button--icon--right.bs-Button--eye:disabled:after,
|
|
.bs-Button--link.bs-Button--eye.bs-is-disabled:before,
|
|
.bs-Button--link.bs-Button--eye:disabled:before,
|
|
.bs-Button--eye.bs-is-disabled:before,
|
|
.bs-Button--eye:disabled:before {
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+c2V0dGluZ3MtLWRpc2FibGVkPC90aXRsZT48cGF0aCBkPSJNMTQuNDI2IDkuMjk4Yy0uMTY0IDAtMS4xNDcgMC0xLjU1Ny0uNDk2IDAtLjA4My0uMDgyLS4wODMtLjA4Mi0uMTY2LS4wODItLjU3OC42NTYtMS4zMjIuNzM4LTEuNDA1LjE2NC0uMTY1LjE2NC0uNDEzLjA4Mi0uNDk1LS4wODItLjA4My0uNDEtLjQxNC0uNDkyLS41NzktLjA4Mi0uMTY1LS4zMjgtLjA4My0uNDkyLjA4My0uMTY0LjE2NS0uODIuODI2LTEuMzkzLjc0My0uMDgyIDAtLjA4Mi0uMDgyLS4xNjQtLjA4Mi0uNDkyLS4zMy0uNDkyLTEuMzIyLS40OTItMS40ODggMC0uMjQ4LS4wODItLjQxMy0uMjQ2LS40MTNoLS44MmMtLjE2NCAwLS4yNDYuMTY1LS4yNDYuNDEzIDAgLjE2NiAwIDEuMTU3LS40OTIgMS41Ny0uMDgxIDAtLjA4MS4wODMtLjE2My4wODMtLjU3NCAwLTEuMjMtLjY2MS0xLjM5NC0uODI2LS4xNjQtLjE2Ni0uNDEtLjE2Ni0uNDkyLS4wODMtLjA4Mi4xNjUtLjQxLjQ5Ni0uNTczLjU3OS0uMDgyLjA4Mi0uMDgyLjMzLjA4Mi40OTUuMTYzLjE2Ni44Mi44MjcuNzM3IDEuNDA1IDAgLjA4My0uMDgyLjA4My0uMDgyLjE2Ni0uMzI4LjQ5Ni0xLjMxMS40OTYtMS40NzUuNDk2LS4yNDYgMC0uNDEuMDgyLS40MS4yNDd2Ljc0NGMwIC4xNjYuMTY0LjMzLjQxLjMzLjE2NCAwIDEuMTQ3IDAgMS41NTcuNDk3IDAgLjA4Mi4wODIuMDgyLjA4Mi4xNjUuMDgyLjU3OS0uNjU2IDEuMzIyLS43MzggMS40MDUtLjE2My4xNjUtLjE2My40MTMtLjA4MS40OTYuMDgxLjA4Mi40MS40MTMuNDkxLjU3OC4wODIuMDgzLjMyOC4wODMuNDkyLS4wODIuMTY0LS4xNjYuODItLjgyNyAxLjM5NC0uNzQ0LjA4MiAwIC4wODIuMDgzLjE2My4wODMuNDkyLjQxMy40OTIgMS4zMjIuNDkyIDEuNTcgMCAuMTY1LjE2NC40MTMuMzI4LjQxM2guNzM4Yy4xNjQgMCAuMzI4LS4xNjUuMzI4LS40MTMgMC0uMTY2IDAtMS4xNTcuNDkyLTEuNTcuMDgyIDAgLjA4Mi0uMDgzLjE2My0uMDgzLjU3NC0uMDgzIDEuMzEyLjY2MSAxLjM5NC43NDQuMTY0LjE2NS40MS4xNjUuNDkyLjA4MmwuNTczLS41NzhjLjA4Mi0uMDgzLjA4Mi0uMzMtLjA4MS0uNDk2LS4xNjQtLjE2NS0uODItLjgyNi0uNzM4LTEuNDA1IDAtLjA4My4wODItLjA4My4wODItLjE2NS40MS0uNDk2IDEuMzExLS40OTYgMS41NTctLjQ5Ni4xNjQgMCAuNDEtLjE2NS40MS0uMzN2LS43NDVhLjc0MS43NDEgMCAwIDAtLjU3NC0uMjQ3ek0xMCAxMi4wMzNjLTEuMDkgMC0yLS45MTctMi0yLjAxNkM4IDguOTE3IDguOTEgOCAxMCA4YzEuMDkgMCAyIC45MTcgMiAyLjAxNyAwIDEuMS0uOTEgMi4wMTYtMiAyLjAxNnoiIGZpbGw9IiM4ODk4QUEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==');
|
|
} |