/*! 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%; 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; 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, .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; height: 50vh; overflow: hidden; position: relative; width: 100%; } .carousel .carousel-container { height: 100%; left: 0; position: relative; } .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 1; animation: carousel-slidein .75s ease-in 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%); } } .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::-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; }