YunoHost/doc
1
0
Fork 0
mirror of https://github.com/YunoHost/doc.git synced 2024-09-03 20:06:26 +02:00
Code Issues Projects Releases Packages Wiki Activity
doc/themes/learn4/css-compiled/spectre-exp.css

370 lines
107 KiB
CSS
Raw Normal View History

Adding Learn4 and our customizations
2020-11-14 11:24:49 +01:00
/*! Spectre.css Experimentals v0.5.8 | MIT License | github.com/picturepan2/spectre */
.form-autocomplete { position: relative; }
.form-autocomplete .form-autocomplete-input { -ms-flex-line-pack: start; align-content: flex-start; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: auto; min-height: 1.6rem; padding: 0.1rem; }
.form-autocomplete .form-autocomplete-input.is-focused { box-shadow: 0 0 0 0.1rem rgba(26, 163, 237, 0.2); border-color: #1AA3ED; }
.form-autocomplete .form-autocomplete-input .form-input { border-color: transparent; box-shadow: none; display: inline-block; -ms-flex: 1 0 auto; flex: 1 0 auto; height: 1.2rem; line-height: 0.8rem; margin: 0.1rem; width: auto; }
.form-autocomplete .menu { left: 0; position: absolute; top: 100%; width: 100%; }
.form-autocomplete.autocomplete-oneline .form-autocomplete-input { -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow-x: auto; }
.form-autocomplete.autocomplete-oneline .chip { -ms-flex: 1 0 auto; flex: 1 0 auto; }
.calendar { border: 0.05rem solid #e7e9ed; border-radius: 0.1rem; display: block; min-width: 280px; }
.calendar .calendar-nav { -ms-flex-align: center; align-items: center; background: #f8f9fa; border-top-left-radius: 0.1rem; border-top-right-radius: 0.1rem; display: -ms-flexbox; display: flex; font-size: 0.9rem; padding: 0.4rem; }
.calendar .calendar-header, .calendar .calendar-body { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; padding: 0.4rem 0; }
.calendar .calendar-header .calendar-date, .calendar .calendar-body .calendar-date { -ms-flex: 0 0 14.28%; flex: 0 0 14.28%; max-width: 14.28%; }
.calendar .calendar-header { background: #f8f9fa; border-bottom: 0.05rem solid #e7e9ed; color: #acb3c2; font-size: 0.7rem; text-align: center; }
.calendar .calendar-body { color: #667189; }
.calendar .calendar-date { border: 0; padding: 0.2rem; }
.calendar .calendar-date .date-item { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: 0.05rem solid transparent; border-radius: 50%; color: #667189; cursor: pointer; font-size: 0.7rem; height: 1.4rem; line-height: 1rem; outline: none; padding: 0.1rem; position: relative; text-align: center; text-decoration: none; transition: background .2s, border .2s, box-shadow .2s, color .2s; vertical-align: middle; white-space: nowrap; width: 1.4rem; }
.calendar .calendar-date .date-item.date-today { border-color: #35b9bb; color: #1AA3ED; }
.calendar .calendar-date .date-item:focus { box-shadow: 0 0 0 0.1rem rgba(26, 163, 237, 0.2); }
.calendar .calendar-date .date-item:focus, .calendar .calendar-date .date-item:hover { background: #44c8ca; border-color: #35b9bb; color: #1AA3ED; text-decoration: none; }
.calendar .calendar-date .date-item:active, .calendar .calendar-date .date-item.active { background: #129be6; border-color: #108bce; color: #fff; }
.calendar .calendar-date .date-item.badge::after { position: absolute; top: 3px; right: 3px; transform: translate(50%, -50%); }
.calendar .calendar-date .date-item:disabled, .calendar .calendar-date .date-item.disabled, .calendar .calendar-date .calendar-event:disabled, .calendar .calendar-date .calendar-event.disabled { cursor: default; opacity: .25; pointer-events: none; }
.calendar .calendar-date.prev-month .date-item, .calendar .calendar-date.prev-month .calendar-event, .calendar .calendar-date.next-month .date-item, .calendar .calendar-date.next-month .calendar-event { opacity: .25; }
.calendar .calendar-range { position: relative; }
.calendar .calendar-range::before { background: #38C5C7; content: ""; height: 1.4rem; left: 0; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.calendar .calendar-range.range-start::before { left: 50%; }
.calendar .calendar-range.range-end::before { right: 50%; }
.calendar .calendar-range.range-start .date-item, .calendar .calendar-range.range-end .date-item { background: #129be6; border-color: #108bce; color: #fff; }
.calendar .calendar-range .date-item { color: #1AA3ED; }
.calendar.calendar-lg .calendar-body { padding: 0; }
.calendar.calendar-lg .calendar-body .calendar-date { border-bottom: 0.05rem solid #e7e9ed; border-right: 0.05rem solid #e7e9ed; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; height: 5.5rem; padding: 0; }
.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) { border-right: 0; }
.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7) { border-bottom: 0; }
.calendar.calendar-lg .date-item { -ms-flex-item-align: end; align-self: flex-end; height: 1.4rem; margin-right: 0.2rem; margin-top: 0.2rem; }
.calendar.calendar-lg .calendar-range::before { top: 19px; }
.calendar.calendar-lg .calendar-range.range-start::before { left: auto; width: 19px; }
.calendar.calendar-lg .calendar-range.range-end::before { right: 19px; }
.calendar.calendar-lg .calendar-events { -ms-flex-positive: 1; flex-grow: 1; line-height: 1; overflow-y: auto; padding: 0.2rem; }
.calendar.calendar-lg .calendar-event { border-radius: 0.1rem; font-size: 0.7rem; display: block; margin: 0.1rem auto; overflow: hidden; padding: 3px 4px; text-overflow: ellipsis; white-space: nowrap; }
.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1), .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2), .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3), .carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4), .carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-container .carousel-item:nth-of-type(5), .carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-container .carousel-item:nth-of-type(6), .carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-container .carousel-item:nth-of-type(7), .carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-container .carousel-item:nth-of-type(8) { animation: carousel-slidein .75s ease-in-out 1; opacity: 1; z-index: 100; }
.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1), .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2), .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3), .carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4), .carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-nav .nav-item:nth-of-type(5), .carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-nav .nav-item:nth-of-type(6), .carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-nav .nav-item:nth-of-type(7), .carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-nav .nav-item:nth-of-type(8) { color: #e7e9ed; }
.carousel { background: #f8f9fa; display: block; overflow: hidden; position: relative; width: 100%; -webkit-overflow-scrolling: touch; z-index: 1; }
.carousel .carousel-container { height: 100%; left: 0; position: relative; }
.carousel .carousel-container::before { content: ""; display: block; padding-bottom: 56.25%; }
.carousel .carousel-container .carousel-item { animation: carousel-slideout 1s ease-in-out 1; height: 100%; left: 0; margin: 0; opacity: 0; position: absolute; top: 0; width: 100%; }
.carousel .carousel-container .carousel-item:hover .item-prev, .carousel .carousel-container .carousel-item:hover .item-next { opacity: 1; }
.carousel .carousel-container .item-prev, .carousel .carousel-container .item-next { background: rgba(231, 233, 237, 0.25); border-color: rgba(231, 233, 237, 0.5); color: #e7e9ed; opacity: 0; position: absolute; top: 50%; transition: all .4s; transform: translateY(-50%); z-index: 100; }
.carousel .carousel-container .item-prev { left: 1rem; }
.carousel .carousel-container .item-next { right: 1rem; }
.carousel .carousel-nav { bottom: 0.4rem; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; left: 50%; position: absolute; transform: translateX(-50%); width: 10rem; z-index: 100; }
.carousel .carousel-nav .nav-item { color: rgba(231, 233, 237, 0.5); display: block; -ms-flex: 1 0 auto; flex: 1 0 auto; height: 1.6rem; margin: 0.2rem; max-width: 2.5rem; position: relative; }
.carousel .carousel-nav .nav-item::before { background: currentColor; content: ""; display: block; height: 0.1rem; position: absolute; top: .5rem; width: 100%; }
@keyframes carousel-slidein { 0% { transform: translateX(100%); }
100% { transform: translateX(0); } }
@keyframes carousel-slideout { 0% { opacity: 1;
transform: translateX(0); }
100% { opacity: 1;
transform: translateX(-50%); } }
.comparison-slider { height: 50vh; overflow: hidden; position: relative; width: 100%; -webkit-overflow-scrolling: touch; }
.comparison-slider .comparison-before, .comparison-slider .comparison-after { height: 100%; left: 0; margin: 0; overflow: hidden; position: absolute; top: 0; }
.comparison-slider .comparison-before img, .comparison-slider .comparison-after img { height: 100%; object-fit: cover; object-position: left center; position: absolute; width: 100%; }
.comparison-slider .comparison-before { width: 100%; z-index: 1; }
.comparison-slider .comparison-before .comparison-label { right: 0.8rem; }
.comparison-slider .comparison-after { max-width: 100%; min-width: 0; z-index: 2; }
.comparison-slider .comparison-after::before { background: transparent; content: ""; cursor: default; height: 100%; left: 0; position: absolute; right: 0.8rem; top: 0; z-index: 1; }
.comparison-slider .comparison-after::after { background: currentColor; border-radius: 50%; box-shadow: 0 -5px, 0 5px; color: #fff; content: ""; height: 3px; position: absolute; right: 0.4rem; top: 50%; transform: translate(50%, -50%); width: 3px; }
.comparison-slider .comparison-after .comparison-label { left: 0.8rem; }
.comparison-slider .comparison-resizer { animation: first-run 1.5s 1 ease-in-out; cursor: ew-resize; height: 0.8rem; left: 0; max-width: 100%; min-width: 0.8rem; opacity: 0; outline: none; position: relative; resize: horizontal; top: 50%; transform: translateY(-50%) scaleY(30); width: 0; }
.comparison-slider .comparison-label { background: rgba(69, 77, 93, 0.5); bottom: 0.8rem; color: #fff; padding: 0.2rem 0.4rem; position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
@keyframes first-run { 0% { width: 0; }
25% { width: 2.4rem; }
50% { width: 0.8rem; }
75% { width: 1.2rem; }
100% { width: 0; } }
.filter .filter-tag#tag-0:checked ~ .filter-nav .chip[for="tag-0"], .filter .filter-tag#tag-1:checked ~ .filter-nav .chip[for="tag-1"], .filter .filter-tag#tag-2:checked ~ .filter-nav .chip[for="tag-2"], .filter .filter-tag#tag-3:checked ~ .filter-nav .chip[for="tag-3"], .filter .filter-tag#tag-4:checked ~ .filter-nav .chip[for="tag-4"], .filter .filter-tag#tag-5:checked ~ .filter-nav .chip[for="tag-5"], .filter .filter-tag#tag-6:checked ~ .filter-nav .chip[for="tag-6"], .filter .filter-tag#tag-7:checked ~ .filter-nav .chip[for="tag-7"], .filter .filter-tag#tag-8:checked ~ .filter-nav .chip[for="tag-8"] { background: #1AA3ED; color: #fff; }
.filter .filter-tag#tag-1:checked ~ .filter-body .filter-item:not([data-tag~="tag-1"]), .filter .filter-tag#tag-2:checked ~ .filter-body .filter-item:not([data-tag~="tag-2"]), .filter .filter-tag#tag-3:checked ~ .filter-body .filter-item:not([data-tag~="tag-3"]), .filter .filter-tag#tag-4:checked ~ .filter-body .filter-item:not([data-tag~="tag-4"]), .filter .filter-tag#tag-5:checked ~ .filter-body .filter-item:not([data-tag~="tag-5"]), .filter .filter-tag#tag-6:checked ~ .filter-body .filter-item:not([data-tag~="tag-6"]), .filter .filter-tag#tag-7:checked ~ .filter-body .filter-item:not([data-tag~="tag-7"]), .filter .filter-tag#tag-8:checked ~ .filter-body .filter-item:not([data-tag~="tag-8"]) { display: none; }
.filter .filter-nav { margin: 0.4rem 0; }
.filter .filter-body { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.meter { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #f8f9fa; border: 0; border-radius: 0.1rem; display: block; width: 100%; height: 0.8rem; }
.meter::-webkit-meter-inner-element { display: block; }
.meter::-webkit-meter-bar, .meter::-webkit-meter-optimum-value, .meter::-webkit-meter-suboptimum-value, .meter::-webkit-meter-even-less-good-value { border-radius: 0.1rem; }
.meter::-webkit-meter-bar { background: #f8f9fa; }
.meter::-webkit-meter-optimum-value { background: #32b643; }
.meter::-webkit-meter-suboptimum-value { background: #ffb700; }
.meter::-webkit-meter-even-less-good-value { background: #e85600; }
.meter::-moz-meter-bar, .meter:-moz-meter-optimum, .meter:-moz-meter-sub-optimum, .meter:-moz-meter-sub-sub-optimum { border-radius: 0.1rem; }
.meter:-moz-meter-optimum::-moz-meter-bar { background: #32b643; }
.meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #ffb700; }
.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #e85600; }
.off-canvas { display: -ms-flexbox; display: flex; -ms-flex-flow: nowrap; flex-flow: nowrap; height: 100%; position: relative; width: 100%; }
.off-canvas .off-canvas-toggle { display: block; position: absolute; top: 0.4rem; transition: none; z-index: 1; left: 0.4rem; }
.off-canvas .off-canvas-sidebar { background: #f8f9fa; bottom: 0; min-width: 10rem; overflow-y: auto; position: fixed; top: 0; transition: transform .25s; z-index: 200; left: 0; transform: translateX(-100%); }
.off-canvas .off-canvas-content { -ms-flex: 1 1 auto; flex: 1 1 auto; height: 100%; padding: 0.4rem 0.4rem 0.4rem 4rem; }
.off-canvas .off-canvas-overlay { background: rgba(69, 77, 93, 0.1); border-color: transparent; border-radius: 0; bottom: 0; display: none; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; }
.off-canvas .off-canvas-sidebar:target, .off-canvas .off-canvas-sidebar.active { transform: translateX(0); }
.off-canvas .off-canvas-sidebar:target ~ .off-canvas-overlay, .off-canvas .off-canvas-sidebar.active ~ .off-canvas-overlay { display: block; z-index: 100; }
@media (min-width: 960px) { .off-canvas.off-canvas-sidebar-show .off-canvas-toggle { display: none; }
.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar { -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; transform: none; }
.off-canvas.off-canvas-sidebar-show .off-canvas-overlay { display: none !important; } }
.parallax { display: block; height: auto; position: relative; width: auto; }
.parallax .parallax-content { box-shadow: 0 1rem 2.1rem rgba(69, 77, 93, 0.3); height: auto; transform: perspective(1000px); transform-style: preserve-3d; transition: all .4s ease; width: 100%; }
.parallax .parallax-content::before { content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.parallax .parallax-front { -ms-flex-align: center; align-items: center; color: #fff; display: -ms-flexbox; display: flex; height: 100%; -ms-flex-pack: center; justify-content: center; left: 0; position: absolute; text-align: center; text-shadow: 0 0 20px rgba(69, 77, 93, 0.75); top: 0; transform: translateZ(50px) scale(0.95); transition: transform .4s; width: 100%; z-index: 1; }
.parallax .parallax-top-left { height: 50%; outline: none; position: absolute; width: 50%; z-index: 100; left: 0; top: 0; }
.parallax .parallax-top-left:focus ~ .parallax-content, .parallax .parallax-top-left:hover ~ .parallax-content { transform: perspective(1000px) rotateX(3deg) rotateY(-3deg); }
.parallax .parallax-top-left:focus ~ .parallax-content::before, .parallax .parallax-top-left:hover ~ .parallax-content::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, transparent 50%); }
.parallax .parallax-top-left:focus ~ .parallax-content .parallax-front, .parallax .parallax-top-left:hover ~ .parallax-content .parallax-front { transform: translate3d(4.5px, 4.5px, 50px) scale(0.95); }
.parallax .parallax-top-right { height: 50%; outline: none; position: absolute; width: 50%; z-index: 100; right: 0; top: 0; }
.parallax .parallax-top-right:focus ~ .parallax-content, .parallax .parallax-top-right:hover ~ .parallax-content { transform: perspective(1000px) rotateX(3deg) rotateY(3deg); }
.parallax .parallax-top-right:focus ~ .parallax-content::before, .parallax .parallax-top-right:hover ~ .parallax-content::before { background: linear-gradient(-135deg, rgba(255, 255, 255, 0.35) 0%, transparent 50%); }
.parallax .parallax-top-right:focus ~ .parallax-content .parallax-front, .parallax .parallax-top-right:hover ~ .parallax-content .parallax-front { transform: translate3d(-4.5px, 4.5px, 50px) scale(0.95); }
.parallax .parallax-bottom-left { height: 50%; outline: none; position: absolute; width: 50%; z-index: 100; bottom: 0; left: 0; }
.parallax .parallax-bottom-left:focus ~ .parallax-content, .parallax .parallax-bottom-left:hover ~ .parallax-content { transform: perspective(1000px) rotateX(-3deg) rotateY(-3deg); }
.parallax .parallax-bottom-left:focus ~ .parallax-content::before, .parallax .parallax-bottom-left:hover ~ .parallax-content::before { background: linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0%, transparent 50%); }
.parallax .parallax-bottom-left:focus ~ .parallax-content .parallax-front, .parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front { transform: translate3d(4.5px, -4.5px, 50px) scale(0.95); }
.parallax .parallax-bottom-right { height: 50%; outline: none; position: absolute; width: 50%; z-index: 100; bottom: 0; right: 0; }
.parallax .parallax-bottom-right:focus ~ .parallax-content, .parallax .parallax-bottom-right:hover ~ .parallax-content { transform: perspective(1000px) rotateX(-3deg) rotateY(3deg); }
.parallax .parallax-bottom-right:focus ~ .parallax-content::before, .parallax .parallax-bottom-right:hover ~ .parallax-content::before { background: linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 0%, transparent 50%); }
.parallax .parallax-bottom-right:focus ~ .parallax-content .parallax-front, .parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front { transform: translate3d(-4.5px, -4.5px, 50px) scale(0.95); }
.progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #f0f1f4; border: 0; border-radius: 0.1rem; color: #1AA3ED; height: 0.2rem; position: relative; width: 100%; }
.progress::-webkit-progress-bar { background: transparent; border-radius: 0.1rem; }
.progress::-webkit-progress-value { background: #1AA3ED; border-radius: 0.1rem; }
.progress::-moz-progress-bar { background: #1AA3ED; border-radius: 0.1rem; }
.progress:indeterminate { animation: progress-indeterminate 1.5s linear infinite; background: #f0f1f4 linear-gradient(to right, #1AA3ED 30%, #f0f1f4 30%) top left/150% 150% no-repeat; }
.progress:indeterminate::-moz-progress-bar { background: transparent; }
@keyframes progress-indeterminate { 0% { background-position: 200% 0; }
100% { background-position: -200% 0; } }
.slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; display: block; width: 100%; height: 1.2rem; }
.slider:focus { box-shadow: 0 0 0 0.1rem rgba(26, 163, 237, 0.2); outline: none; }
.slider.tooltip:not([data-tooltip])::after { content: attr(value); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; background: #1AA3ED; border: 0; border-radius: 50%; height: 0.6rem; margin-top: -0.25rem; transition: transform .2s; width: 0.6rem; }
.slider::-moz-range-thumb { background: #1AA3ED; border: 0; border-radius: 50%; height: 0.6rem; transition: transform .2s; width: 0.6rem; }
.slider::-ms-thumb { background: #1AA3ED; border: 0; border-radius: 50%; height: 0.6rem; transition: transform .2s; width: 0.6rem; }
.slider:active::-webkit-slider-thumb { transform: scale(1.25); }
.slider:active::-moz-range-thumb { transform: scale(1.25); }
.slider:active::-ms-thumb { transform: scale(1.25); }
.slider:disabled::-webkit-slider-thumb, .slider.disabled::-webkit-slider-thumb { background: #e7e9ed; transform: scale(1); }
.slider:disabled::-moz-range-thumb, .slider.disabled::-moz-range-thumb { background: #e7e9ed; transform: scale(1); }
.slider:disabled::-ms-thumb, .slider.disabled::-ms-thumb { background: #e7e9ed; transform: scale(1); }
.slider::-webkit-slider-runnable-track { background: #f0f1f4; border-radius: 0.1rem; height: 0.1rem; width: 100%; }
.slider::-moz-range-track { background: #f0f1f4; border-radius: 0.1rem; height: 0.1rem; width: 100%; }
.slider::-ms-track { background: #f0f1f4; border-radius: 0.1rem; height: 0.1rem; width: 100%; }
.slider::-ms-fill-lower { background: #1AA3ED; }
.timeline .timeline-item { display: -ms-flexbox; display: flex; margin-bottom: 1.2rem; position: relative; }
.timeline .timeline-item::before { background: #e7e9ed; content: ""; height: 100%; left: 11px; position: absolute; top: 1.2rem; width: 2px; }
.timeline .timeline-item .timeline-left { -ms-flex: 0 0 auto; flex: 0 0 auto; }
.timeline .timeline-item .timeline-content { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 2px 0 2px 0.8rem; }
.timeline .timeline-item .timeline-icon { -ms-flex-align: center; align-items: center; border-radius: 50%; color: #fff; display: -ms-flexbox; display: flex; height: 1.2rem; -ms-flex-pack: center; justify-content: center; text-align: center; width: 1.2rem; }
.timeline .timeline-item .timeline-icon::before { border: 0.1rem solid #1AA3ED; border-radius: 50%; content: ""; display: block; height: 0.4rem; left: 0.4rem; position: absolute; top: 0.4rem; width: 0.4rem; }
.timeline .timeline-item .timeline-icon.icon-lg { background: #1AA3ED; line-height: 1.2rem; }
.timeline .timeline-item .timeline-icon.icon-lg::before { content: none; }
.viewer-360 { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; }
.viewer-360 .viewer-slider[max='36'][value='1'] + .viewer-image { background-position-y: 0%; }
.viewer-360 .viewer-slider[max='36'][value='2'] + .viewer-image { background-position-y: 2.8571428571%; }
.viewer-360 .viewer-slider[max='36'][value='3'] + .viewer-image { background-position-y: 5.7142857143%; }
.viewer-360 .viewer-slider[max='36'][value='4'] + .viewer-image { background-position-y: 8.5714285714%; }
.viewer-360 .viewer-slider[max='36'][value='5'] + .viewer-image { background-position-y: 11.4285714286%; }
.viewer-360 .viewer-slider[max='36'][value='6'] + .viewer-image { background-position-y: 14.2857142857%; }
.viewer-360 .viewer-slider[max='36'][value='7'] + .viewer-image { background-position-y: 17.1428571429%; }
.viewer-360 .viewer-slider[max='36'][value='8'] + .viewer-image { background-position-y: 20%; }
.viewer-360 .viewer-slider[max='36'][value='9'] + .viewer-image { background-position-y: 22.8571428571%; }
.viewer-360 .viewer-slider[max='36'][value='10'] + .viewer-image { background-position-y: 25.7142857143%; }
.viewer-360 .viewer-slider[max='36'][value='11'] + .viewer-image { background-position-y: 28.5714285714%; }
.viewer-360 .viewer-slider[max='36'][value='12'] + .viewer-image { background-position-y: 31.4285714286%; }
.viewer-360 .viewer-slider[max='36'][value='13'] + .viewer-image { background-position-y: 34.2857142857%; }
.viewer-360 .viewer-slider[max='36'][value='14'] + .viewer-image { background-position-y: 37.1428571429%; }
.viewer-360 .viewer-slider[max='36'][value='15'] + .viewer-image { background-position-y: 40%; }
.viewer-360 .viewer-slider[max='36'][value='16'] + .viewer-image { background-position-y: 42.8571428571%; }
.viewer-360 .viewer-slider[max='36'][value='17'] + .viewer-image { background-position-y: 45.7142857143%; }
.viewer-360 .viewer-slider[max='36'][value='18'] + .viewer-image { background-position-y: 48.5714285714%; }
.viewer-360 .viewer-slider[max='36'][value='19'] + .viewer-image { background-position-y: 51.4285714286%; }
.viewer-360 .viewer-slider[max='36'][value='20'] + .viewer-image { background-position-y: 54.2857142857%; }
.viewer-360 .viewer-slider[max='36'][value='21'] + .viewer-image { background-position-y: 57.1428571429%; }
.viewer-360 .viewer-slider[max='36'][value='22'] + .viewer-image { background-position-y: 60%; }
.viewer-360 .viewer-slider[max='36'][value='23'] + .viewer-image { background-position-y: 62.8571428571%; }
.viewer-360 .viewer-slider[max='36'][value='24'] + .viewer-image { background-position-y: 65.7142857143%; }
.viewer-360 .viewer-slider[max='36'][value='25'] + .viewer-image { background-position-y: 68.5714285714%; }
.viewer-360 .viewer-slider[max='36'][value='26'] + .viewer-image { background-position-y: 71.4285714286%; }
.viewer-360 .viewer-slider[max='36'][value='27'] + .viewer-image { background-position-y: 74.2857142857%; }
.viewer-360 .viewer-slider[max='36'][value='28'] + .viewer-image { background-position-y: 77.1428571429%; }
.viewer-360 .viewer-slider[max='36'][value='29'] + .viewer-image { background-position-y: 80%; }
.viewer-360 .viewer-slider[max='36'][value='30'] + .viewer-image { background-position-y: 82.8571428571%; }
.viewer-360 .viewer-slider[max='36'][value='31'] + .viewer-image { background-position-y: 85.7142857143%; }
.viewer-360 .viewer-slider[max='36'][value='32'] + .viewer-image { background-position-y: 88.5714285714%; }
.viewer-360 .viewer-slider[max='36'][value='33'] + .viewer-image { background-position-y: 91.4285714286%; }
.viewer-360 .viewer-slider[max='36'][value='34'] + .viewer-image { background-position-y: 94.2857142857%; }
.viewer-360 .viewer-slider[max='36'][value='35'] + .viewer-image { background-position-y: 97.1428571429%; }
.viewer-360 .viewer-slider[max='36'][value='36'] + .viewer-image { background-position-y: 100%; }
.viewer-360 .viewer-slider { cursor: ew-resize; margin: 1rem; -ms-flex-order: 2; order: 2; width: 60%; }
.viewer-360 .viewer-image { background-position-y: 0; background-repeat: no-repeat; background-size: 100%; max-width: 100%; -ms-flex-order: 1; order: 1; }
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3BlY3RyZS1leHAuY3NzIiwic291cmNlcyI6WyJzcGVjdHJlLWV4cC5zY3NzIiwidGhlbWUvX3ZhcmlhYmxlcy5zY3NzIiwic3BlY3RyZS9fdmFyaWFibGVzLnNjc3MiLCJzcGVjdHJlL19taXhpbnMuc2NzcyIsInNwZWN0cmUvbWl4aW5zL19hdmF0YXIuc2NzcyIsInNwZWN0cmUvbWl4aW5zL19idXR0b24uc2NzcyIsInNwZWN0cmUvbWl4aW5zL19jbGVhcmZpeC5zY3NzIiwic3BlY3RyZS9taXhpbnMvX2NvbG9yLnNjc3MiLCJzcGVjdHJlL21peGlucy9fbGFiZWwuc2NzcyIsInNwZWN0cmUvbWl4aW5zL19wb3NpdGlvbi5zY3NzIiwic3BlY3RyZS9taXhpbnMvX3NoYWRvdy5zY3NzIiwic3BlY3RyZS9taXhpbnMvX3RleHQuc2NzcyIsInNwZWN0cmUvbWl4aW5zL190b2FzdC5zY3NzIiwic3BlY3RyZS9fYXV0b2NvbXBsZXRlLnNjc3MiLCJzcGVjdHJlL19jYWxlbmRhcnMuc2NzcyIsInNwZWN0cmUvX2Nhcm91c2Vscy5zY3NzIiwic3BlY3RyZS9fY29tcGFyaXNvbi1zbGlkZXJzLnNjc3MiLCJzcGVjdHJlL19maWx0ZXJzLnNjc3MiLCJzcGVjdHJlL19tZXRlcnMuc2NzcyIsInNwZWN0cmUvX29mZi1jYW52YXMuc2NzcyIsInNwZWN0cmUvX3BhcmFsbGF4LnNjc3MiLCJzcGVjdHJlL19wcm9ncmVzcy5zY3NzIiwic3BlY3RyZS9fc2xpZGVycy5zY3NzIiwic3BlY3RyZS9fdGltZWxpbmVzLnNjc3MiLCJzcGVjdHJlL192aWV3ZXItMzYwLnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gVmFyaWFibGVzIGFuZCBtaXhpbnNcbkBpbXBvcnQgXCJ0aGVtZS92YXJpYWJsZXNcIjtcbkBpbXBvcnQgXCJzcGVjdHJlL3ZhcmlhYmxlc1wiO1xuQGltcG9ydCBcInNwZWN0cmUvbWl4aW5zXCI7XG5cbi8qISBTcGVjdHJlLmNzcyBFeHBlcmltZW50YWxzIHYjeyR2ZXJzaW9ufSB8IE1JVCBMaWNlbnNlIHwgZ2l0aHViLmNvbS9waWN0dXJlcGFuMi9zcGVjdHJlICovXG4vLyBFeHBlcmltZW50YWxzXG5AaW1wb3J0IFwic3BlY3RyZS9hdXRvY29tcGxldGVcIjtcbkBpbXBvcnQgXCJzcGVjdHJlL2NhbGVuZGFyc1wiO1xuQGltcG9ydCBcInNwZWN0cmUvY2Fyb3VzZWxzXCI7XG5AaW1wb3J0IFwic3BlY3RyZS9jb21wYXJpc29uLXNsaWRlcnNcIjtcbkBpbXBvcnQgXCJzcGVjdHJlL2ZpbHRlcnNcIjtcbkBpbXBvcnQgXCJzcGVjdHJlL21ldGVyc1wiO1xuQGltcG9ydCBcInNwZWN0cmUvb2ZmLWNhbnZhc1wiO1xuQGltcG9ydCBcInNwZWN0cmUvcGFyYWxsYXhcIjtcbkBpbXBvcnQgXCJzcGVjdHJlL3Byb2dyZXNzXCI7XG5AaW1wb3J0IFwic3BlY3RyZS9zbGlkZXJzXCI7XG5AaW1wb3J0IFwic3BlY3RyZS90aW1lbGluZXNcIjtcbkBpbXBvcnQgXCJzcGVjdHJlL3ZpZXdlci0zNjBcIjtcbiIsIi8vIENvbG9yc1xuJHR1cnF1b2lzZTogIzFBQkM5QztcbiRncmVlbi1zZWE6ICMxNkEwODU7XG4kZW1lcmFsZDogIzJFQ0M3MTtcbiRuZXBocml0aXM6ICMyN0FFNjA7XG4kcGV0ZXItcml2ZXI6ICMzNDk4REI7XG4kYmVsaXplX2hvbGU6ICMyOTgwQjk7XG4kZGVlcC13ZWxsOiAjMjgzQTYzO1xuJGxhdmVuZGVyOiAjNzY3NmY0O1xuJGFtZXRoeXN0OiAjQTY2QkJFO1xuJHdpc3RlcmlhOiAjOEU0NEFEO1xuJHdldC1hc3BoYWx0OiAjMzQ0OTVFO1xuJG1pZG5pZ2h0LWJsdWU6ICMyQzNFNTA7XG4kc3VuZmxvd2VyOiAjRjJDQTI3O1xuJG9yYW5nZTogI0YzOUMxMjtcbiRjYXJyb3Q6ICNFNjdFMjI7XG4kcHVtcGtpbjogI0QzNTQwMDtcbiRhbGl6YXJpbjogI0U3NEMzQztcbiRwb21lZ3JhbmF0ZTogI0MwMzkyQjtcbiRjbG91ZHM6ICNFQ0YwRjE7XG4kc2lsdmVyOiAjQkRDM0M3O1xuJGNvbmNyZXRlOiAjOTVBNUE2O1xuJGFzYmVzdG9zOiAjN0Y4QzhEO1xuXG4kcHJpbWFyeS1jb2xvcjogIzFBQTNFRCAhZGVmYXVsdDtcbiRzZWNvbmRhcnktY29sb3I6ICMzOEM1QzcgIWRlZmF1bHQ7XG4kZGFyay1jb2xvcjogIzQ1NGQ1ZCAhZGVmYXVsdDtcbiRib2R5LWZvbnQtY29sb3I6IGRhcmtlbigkZGFyay1jb2xvciwgNSUpICFkZWZhdWx0O1xuJGxpbmstY29sb3I6IGRhcmtlbigkcHJpbWFyeS1jb2xvciwgNSUpICFkZWZhdWx0O1xuJGdyYXktY29sb3I6IGxpZ2h0ZW4oJGRhcmstY29sb3IsIDQwJSkgIWRlZmF1bHQ7XG4kZ3JheS1jb2xvci1kYXJrOiBkYXJrZW4oJGdyYXktY29sb3IsIDI1JSkgIWRlZmF1bHQ7XG4kYm9yZGVyLWNvbG9yOiBsaWdodGVuKCRkYXJrLWNvbG9yLCA2MCUpICFkZWZhdWx0O1xuJGJnLWNvbG9yOiBsaWdodGVuKCRkYXJrLWNvbG9yLCA2NiUpICFkZWZhdWx0O1xuJGNvZGUtY29sb3I6ICRsYXZlbmRlciAhZGVmYXVsdDtcbiRzZWxlY3Rpb24tY29sb3I6ICNFQ0VDRkU7XG5cbi8vIFNpZGViYXJcbiRzaWRlYmFyLXdpZHRoOiAxNHJlbTtcbiRzaWRlYmFyLWJyYW5kLWhlaWdodDogN3JlbTtcblxuLy8gRm9udHNcbiRiYXNlLWZvbnQtZmFtaWx5OiAtYXBwbGUtc3lzdGVtLCBzeXN0ZW0tdWksIEJsaW5rTWFjU3lzdGVtRm9udCwgXCJTZWdvZSBVSVwiLCBSb2JvdG8gIWRlZmF1bHQ7XG4kZmFsbGJhY2stZm9udC1mYW1pbHk6IFwiSGVsdmV0aWNhIE5ldWVcIiwgc2Fucy1zZXJpZiAhZGVmYXVsdDtcbiRib2R5LWZvbnQtZmFtaWx5OiBcIlB1YmxpYyBTYW5zXCIsICAkZmFsbGJhY2stZm9udC1mYW1pbHkgIWRlZmF1bHQ7XG4kdGl0bGUtZm9udC1mYW1pbHk6IFwiTWV0cm9wb2xpc1wiLCAkZmFsbGJhY2stZm9udC1mYW1pbHkgIWRlZmF1bHQ7XG4kbW9uby1mb250LWZhbWlseTogXCJIYWNrXCIsIG1vbm9zcGFjZSAhZGVmYXVsdDtcbiRmb250LXNpemU6IC44NXJlbSAhZGVmYXVsdDtcbiRtaW4tcmVzcG9uc2l2ZS1mb250LXNpemU6IDE4cHg7XG4iLCIvLyBDb3JlIHZhcmlhYmxlc1xuJHZlcnNpb246IFwiMC41LjhcIjtcblxuLy8gQ29yZSBmZWF0dXJlc1xuJHJ0bDogZmFsc2UgIWRlZmF1bHQ7XG5cbi8vIENvcmUgY29sb3JzXG4kcHJpbWFyeS1jb2xvcjogIzU3NTVkOSAhZGVmYXVsdDtcbiRwcmltYXJ5LWNvbG9yLWRhcms6IGRhcmtlbigkcHJpbWFyeS1jb2xvciwgMyUpICFkZWZhdWx0O1xu
Reference in a new issue Copy permalink