diff options
1 files changed, 863 insertions, 0 deletions
| -rw-r--r-- | docs/dist/spectre-exp.css | 863 |
diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css new file mode 100644 index 0000000..55af0d0 --- /dev/null +++ b/docs/dist/spectre-exp.css @@ -0,0 +1,863 @@ +/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */ +.calendar { + border: .1rem solid #f0f1f4; + border-radius: .2rem; + display: block; + min-width: 28rem; + text-align: center; +} +.calendar .calendar-nav { + -webkit-align-items: center; + align-items: center; + background: #f8f9fa; + border-top-left-radius: .2rem; + border-top-right-radius: .2rem; + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -ms-flex-align: center; + font-size: 1.6rem; + padding: 1rem; +} +.calendar .calendar-header, +.calendar .calendar-body { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -ms-flex-pack: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-justify-content: center; + justify-content: center; + padding: 1rem 0; +} +.calendar .calendar-header .calendar-date, +.calendar .calendar-body .calendar-date { + -webkit-flex: 0 0 14.28%; + -ms-flex: 0 0 14.28%; + flex: 0 0 14.28%; + max-width: 14.28%; +} +.calendar .calendar-header { + background: #f8f9fa; + border-bottom: .1rem solid #f0f1f4; + color: #acb3c2; + font-size: 1.2rem; +} +.calendar .calendar-body { + color: #727e96; +} +.calendar .calendar-date { + border: 0; + padding: .4rem; +} +.calendar .calendar-date .date-item { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: transparent; + border: .1rem solid transparent; + border-radius: 50%; + color: #727e96; + cursor: pointer; + height: 2.8rem; + line-height: 2rem; + outline: none; + padding: .3rem; + position: relative; + text-align: center; + text-decoration: none; + transition: all .2s ease; + vertical-align: middle; + white-space: nowrap; + width: 2.8rem; +} +.calendar .calendar-date .date-item.date-today { + border-color: #e4e6f6; + color: #5764c6; +} +.calendar .calendar-date .date-item:focus { + box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15); +} +.calendar .calendar-date .date-item:focus, +.calendar .calendar-date .date-item:hover { + background: #fbfbfe; + border-color: #e4e6f6; + color: #5764c6; + text-decoration: none; +} +.calendar .calendar-date .date-item:active, +.calendar .calendar-date .date-item.active { + background: #4c59c2; + border-color: #3e4cb6; + color: #fff; +} +.calendar .calendar-date .date-item.badge::after { + position: absolute; + right: .3rem; + top: .3rem; + -webkit-transform: translate(50%, -50%); + -ms-transform: translate(50%, -50%); + transform: translate(50%, -50%); +} +.calendar .calendar-date.disabled .date-item, +.calendar .calendar-date.disabled .calendar-event, +.calendar .calendar-date .date-item:disabled, +.calendar .calendar-date .calendar-event:disabled { + cursor: default; + opacity: .25; + pointer-events: none; +} +.calendar .calendar-range { + position: relative; +} +.calendar .calendar-range::before { + background: #eff1fa; + content: ""; + height: 2.8rem; + left: 0; + position: absolute; + right: 0; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +.calendar .calendar-range.range-start::before { + left: 50%; +} +.calendar .calendar-range.range-end::before { + right: 50%; +} +.calendar .calendar-range .date-item { + color: #5764c6; +} +.calendar.calendar-lg .calendar-body { + padding: 0; +} +.calendar.calendar-lg .calendar-body .calendar-date { + border-bottom: .1rem solid #f0f1f4; + border-right: .1rem solid #f0f1f4; + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 11rem; + 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 { + -webkit-align-self: flex-end; + align-self: flex-end; + -ms-flex-item-align: end; + height: 2.8rem; + margin-right: .5rem; + margin-top: .5rem; +} +.calendar.calendar-lg .calendar-range::before { + top: 1.9rem; +} +.calendar.calendar-lg .calendar-range.range-start::before { + left: auto; + width: 1.9rem; +} +.calendar.calendar-lg .calendar-range.range-end::before { + right: 1.9rem; +} +.calendar.calendar-lg .calendar-events { + -webkit-flex-grow: 1; + flex-grow: 1; + -ms-flex-positive: 1; + line-height: 1; + overflow-y: auto; + padding: .5rem; +} +.calendar.calendar-lg .calendar-event { + background: #eff1fa; + border-radius: .2rem; + color: #5764c6; + display: block; + font-size: 1.2rem; + margin: .2rem auto; + overflow: hidden; + padding: .3rem .4rem; + text-align: left; + text-overflow: ellipsis; + vertical-align: baseline; + white-space: nowrap; +} +.carousel { + background: #f8f9fa; + display: block; + overflow: hidden; + position: relative; + width: 100%; +} +.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 { + -webkit-animation: carousel-slideout 1s ease-in-out 1; + 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, .25); + border-color: rgba(231, 233, 237, .5); + color: #e7e9ed; + opacity: 0; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + transition: all .4s ease; + z-index: 200; +} +.carousel .carousel-container .item-prev { + left: 2rem; +} +.carousel .carousel-container .item-next { + right: 2rem; +} +.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) { + -webkit-animation: carousel-slidein .75s ease-in-out 1; + 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) { + color: #e7e9ed; +} +.carousel .carousel-nav { + bottom: 1rem; + display: -webkit-flex; + display: flex; + display: -ms-flexbox; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + left: 50%; + position: absolute; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 20rem; + z-index: 200; +} +.carousel .carousel-nav .nav-item { + color: rgba(231, 233, 237, .5); + display: block; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + height: 4rem; + margin: .4rem; + max-width: 5rem; + position: relative; +} +.carousel .carousel-nav .nav-item::before { + background: currentColor; + content: ""; + display: block; + height: .3rem; + position: absolute; + top: 2rem; + width: 100%; +} +@-webkit-keyframes carousel-slidein { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes carousel-slidein { + 0% { + -webkit-transform: translateX(100%); + transform: translateX(100%); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes carousel-slideout { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 1; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + } +} +@keyframes carousel-slideout { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } + 100% { + opacity: 1; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + } +} +.comparison-slider { + height: 50vh; + overflow: hidden; + position: relative; + width: 100%; +} +.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: none; + object-position: left top; + position: absolute; + width: 100%; + z-index: -1; +} +.comparison-slider .comparison-before { + width: 100%; +} +.comparison-slider .comparison-before .comparison-label { + right: 1.6rem; +} +.comparison-slider .comparison-after { + max-width: 100%; + min-width: 0; + z-index: 1; +} +.comparison-slider .comparison-after::before { + background: transparent; + content: ""; + cursor: default; + height: 100%; + left: 0; + position: absolute; + right: 1.6rem; + top: 0; + z-index: 1; +} +.comparison-slider .comparison-after::after { + background: currentColor; + border-radius: 50%; + box-shadow: 0 -.5rem, 0 .5rem; + color: #fff; + content: ""; + height: .3rem; + position: absolute; + right: .8rem; + top: 50%; + -webkit-transform: translate(50%, -50%); + -ms-transform: translate(50%, -50%); + transform: translate(50%, -50%); + width: .3rem; + z-index: -1; +} +.comparison-slider .comparison-after .comparison-label { + left: 1.6rem; +} +.comparison-slider .comparison-resizer { + -webkit-animation: first-run 1.5s 1 ease-in-out; + animation: first-run 1.5s 1 ease-in-out; + cursor: ew-resize; + height: 1.5rem; + left: 0; + max-width: 100%; + min-width: 1.6rem; + opacity: 0; + outline: none; + position: relative; + resize: horizontal; + top: 50%; + -webkit-transform: translateY(-50%) scaleY(30); + -ms-transform: translateY(-50%) scaleY(30); + transform: translateY(-50%) scaleY(30); + width: 0; +} +.comparison-slider .comparison-label { + background: rgba(69, 77, 93, .5); + bottom: 1.6rem; + color: #fff; + padding: .3rem .8rem; + position: absolute; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +@-webkit-keyframes first-run { + 0% { + width: 0; + } + 25% { + width: 4.8rem; + } + 50% { + width: 1.6rem; + } + 75% { + width: 2.4rem; + } + 100% { + width: 0; + } +} +@keyframes first-run { + 0% { + width: 0; + } + 25% { + width: 4.8rem; + } + 50% { + width: 1.6rem; + } + 75% { + width: 2.4rem; + } + 100% { + width: 0; + } +} +.filter .filter-nav { + margin: 1rem 0; +} +.filter .filter-body { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.filter .filter-tag#tag-all:checked ~ .filter-nav .chip[for="tag-all"], +.filter .filter-tag#tag-action:checked ~ .filter-nav .chip[for="tag-action"], +.filter .filter-tag#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"], +.filter .filter-tag#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"], +.filter .filter-tag#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] { + background: #5764c6; + color: #fff; +} +.filter .filter-tag#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]), +.filter .filter-tag#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]), +.filter .filter-tag#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]), +.filter .filter-tag#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) { + display: none; +} +.meter { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #f8f9fa; + border: 0; + border-radius: .2rem; + display: block; + height: 1.6rem; + width: 100%; +} +.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: .2rem; +} +.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: .2rem; +} +.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; +} +.parallax { + display: block; + height: auto; + position: relative; + width: auto; +} +.parallax .parallax-content { + box-shadow: 0 2rem 4.2rem rgba(69, 77, 93, .3); + height: auto; + -webkit-transform: perspective(100rem); + transform: perspective(100rem); + -webkit-transform-style: preserve-3d; + 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 { + -webkit-align-items: center; + align-items: center; + color: #fff; + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + -ms-flex-align: center; + -ms-flex-pack: center; + height: 100%; + -webkit-justify-content: center; + justify-content: center; + left: 0; + position: absolute; + text-align: center; + text-shadow: 0 0 3rem rgba(69, 77, 93, .95); + top: 0; + -webkit-transform: translateZ(10rem); + transform: translateZ(10rem); + transition: all .4s ease; + width: 100%; + z-index: 1; +} +.parallax .parallax-top-left { + height: 50%; + left: 0; + position: absolute; + top: 0; + width: 50%; + z-index: 300; +} +.parallax .parallax-top-left:hover ~ .parallax-content { + -webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(3deg); + transform: perspective(100rem) rotateX(-3deg) rotateY(3deg); +} +.parallax .parallax-top-left:hover ~ .parallax-content::before { + background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); +} +.parallax .parallax-top-left:hover ~ .parallax-content .parallax-front { + -webkit-transform: translate3d(-.65rem, -.65rem, 10rem); + transform: translate3d(-.65rem, -.65rem, 10rem); +} +.parallax .parallax-top-right { + height: 50%; + position: absolute; + right: 0; + top: 0; + width: 50%; + z-index: 300; +} +.parallax .parallax-top-right:hover ~ .parallax-content { + -webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg); + transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg); +} +.parallax .parallax-top-right:hover ~ .parallax-content::before { + background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); +} +.parallax .parallax-top-right:hover ~ .parallax-content .parallax-front { + -webkit-transform: translate3d(.65rem, -.65rem, 10rem); + transform: translate3d(.65rem, -.65rem, 10rem); +} +.parallax .parallax-bottom-left { + bottom: 0; + height: 50%; + left: 0; + position: absolute; + width: 50%; + z-index: 300; +} +.parallax .parallax-bottom-left:hover ~ .parallax-content { + -webkit-transform: perspective(100rem) rotateX(3deg) rotateY(3deg); + transform: perspective(100rem) rotateX(3deg) rotateY(3deg); +} +.parallax .parallax-bottom-left:hover ~ .parallax-content::before { + background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); +} +.parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front { + -webkit-transform: translate3d(-.65rem, .65rem, 10rem); + transform: translate3d(-.65rem, .65rem, 10rem); +} +.parallax .parallax-bottom-right { + bottom: 0; + height: 50%; + position: absolute; + right: 0; + width: 50%; + z-index: 300; +} +.parallax .parallax-bottom-right:hover ~ .parallax-content { + -webkit-transform: perspective(100rem) rotateX(3deg) rotateY(-3deg); + transform: perspective(100rem) rotateX(3deg) rotateY(-3deg); +} +.parallax .parallax-bottom-right:hover ~ .parallax-content::before { + background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); +} +.parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front { + -webkit-transform: translate3d(.65rem, .65rem, 10rem); + transform: translate3d(.65rem, .65rem, 10rem); +} +.progress { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #f0f1f4; + border: 0; + border-radius: .2rem; + color: #5764c6; + height: .4rem; + position: relative; + width: 100%; +} +.progress::-webkit-progress-bar { + background: transparent; + border-radius: .2rem; +} +.progress::-webkit-progress-value { + background: #5764c6; + border-radius: .2rem; +} +.progress::-moz-progress-bar { + background: #5764c6; + border-radius: .2rem; +} +.progress:indeterminate { + -webkit-animation: progress-indeterminate 1.5s linear infinite; + animation: progress-indeterminate 1.5s linear infinite; + background: #f0f1f4 linear-gradient(to right, #5764c6 30%, #f0f1f4 30%) top left / 150% 150% no-repeat; +} +.progress:indeterminate::-moz-progress-bar { + background: transparent; +} +@-webkit-keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} +@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; + height: 2.4rem; + width: 100%; +} +.slider:focus { + box-shadow: 0 0 0 .2rem rgba(87, 100, 198, .15); + outline: none; +} +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + background: #5764c6; + border: 0; + border-radius: 50%; + height: 1.2rem; + margin-top: -.5rem; + transition: transform .2s ease, -webkit-transform .2s ease; + transition: transform .2s ease; + transition: -webkit-transform .2s ease; + width: 1.2rem; +} +.slider::-moz-range-thumb { + background: #5764c6; + border: 0; + border-radius: 50%; + height: 1.2rem; + transition: transform .2s ease, -webkit-transform .2s ease; + transition: transform .2s ease; + transition: -webkit-transform .2s ease; + width: 1.2rem; +} +.slider::-ms-thumb { + background: #5764c6; + border: 0; + border-radius: 50%; + height: 1.2rem; + transition: transform .2s ease, -webkit-transform .2s ease; + transition: transform .2s ease; + transition: -webkit-transform .2s ease; + width: 1.2rem; +} +.slider:active::-webkit-slider-thumb { + -webkit-transform: scale(1.25); + transform: scale(1.25); +} +.slider:active::-moz-range-thumb { + transform: scale(1.25); +} +.slider:active::-ms-thumb { + -ms-transform: scale(1.25); + transform: scale(1.25); +} +.slider:disabled::-webkit-slider-thumb, +.slider.disabled::-webkit-slider-thumb { + background: #e7e9ed; + -webkit-transform: scale(1); + 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; + -ms-transform: scale(1); + transform: scale(1); +} +.slider::-webkit-slider-runnable-track { + background: #f0f1f4; + border-radius: .2rem; + height: .2rem; + width: 100%; +} +.slider::-moz-range-track { + background: #f0f1f4; + border-radius: .2rem; + height: .2rem; + width: 100%; +} +.slider::-ms-track { + background: #f0f1f4; + border-radius: .2rem; + height: .2rem; + width: 100%; +} +.slider::-ms-fill-lower { + background: #5764c6; +} +.timeline .timeline-item { + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + margin-bottom: 2.4rem; + position: relative; +} +.timeline .timeline-item::before { + background: #f0f1f4; + content: ""; + height: 100%; + left: 1.1rem; + position: absolute; + top: 2.4rem; + width: .2rem; +} +.timeline .timeline-item .timeline-left { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.timeline .timeline-item .timeline-content { + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: .2rem 0 .2rem 1.5rem; +} +.timeline .timeline-item .timeline-icon { + border-radius: 50%; + color: #fff; + display: block; + height: 2.4rem; + text-align: center; + width: 2.4rem; +} +.timeline .timeline-item .timeline-icon::before { + border: .2rem solid #5764c6; + border-radius: 50%; + content: ""; + display: block; + height: .8rem; + left: .8rem; + position: absolute; + top: .8rem; + width: .8rem; +} +.timeline .timeline-item .timeline-icon.icon-lg { + background: #5764c6; + font-size: 1.6rem; + line-height: 2rem; +} +.timeline .timeline-item .timeline-icon.icon-lg::before { + content: none; +}
\ No newline at end of file |