diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-08-29 13:07:53 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-08-29 13:07:53 +0300 |
commit | e78b3c34348f26d40a813612c5a3786f1c56607a (patch) | |
tree | f857491026c5f728fe95fe1564ec30c931a1b30a /docs/dist/spectre-exp.css | |
parent | 66c492fd05c2d720c81e2be8d6845560b868e7ff (diff) |
Initial SASS build
Diffstat (limited to 'docs/dist/spectre-exp.css')
-rw-r--r-- | docs/dist/spectre-exp.css | 165 |
1 files changed, 138 insertions, 27 deletions
diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css index 1b9b6cc..820170c 100644 --- a/docs/dist/spectre-exp.css +++ b/docs/dist/spectre-exp.css @@ -6,6 +6,7 @@ min-width: 280px; text-align: center; } + .calendar .calendar-nav { align-items: center; background: #f8f9fa; @@ -17,6 +18,7 @@ font-size: .8rem; padding: .4rem; } + .calendar .calendar-header, .calendar .calendar-body { display: flex; @@ -27,25 +29,30 @@ justify-content: center; padding: .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: .05rem solid #e7e9ed; color: #acb3c2; font-size: .6rem; } + .calendar .calendar-body { color: #727e96; } + .calendar .calendar-date { border: 0; padding: .2rem; } + .calendar .calendar-date .date-item { -webkit-appearance: none; -moz-appearance: none; @@ -67,13 +74,16 @@ white-space: nowrap; width: 1.4rem; } + .calendar .calendar-date .date-item.date-today { border-color: #e4e6f6; color: #5764c6; } + .calendar .calendar-date .date-item:focus { box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } + .calendar .calendar-date .date-item:focus, .calendar .calendar-date .date-item:hover { background: #fbfbfe; @@ -81,19 +91,21 @@ 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: 3px; top: 3px; - -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, @@ -102,9 +114,11 @@ opacity: .25; pointer-events: none; } + .calendar .calendar-range { position: relative; } + .calendar .calendar-range::before { background: #eff1fa; content: ""; @@ -113,21 +127,25 @@ position: absolute; right: 0; top: 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: .05rem solid #e7e9ed; border-right: .05rem solid #e7e9ed; @@ -138,12 +156,15 @@ 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 { align-self: flex-end; -ms-flex-item-align: end; @@ -151,16 +172,20 @@ margin-right: .2rem; margin-top: .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 { flex-grow: 1; -ms-flex-positive: 1; @@ -168,6 +193,7 @@ overflow-y: auto; padding: .2rem; } + .calendar.calendar-lg .calendar-event { background: #eff1fa; border-radius: .1rem; @@ -179,9 +205,9 @@ padding: 3px 4px; text-align: left; text-overflow: ellipsis; - vertical-align: baseline; white-space: nowrap; } + .carousel { background: #f8f9fa; display: block; @@ -189,16 +215,19 @@ 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 { animation: carousel-slideout 1s ease-in-out 1; height: 100%; @@ -209,29 +238,33 @@ 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); + background: fade(#e7e9ed, 25%); + border-color: fade(#e7e9ed, 50%); color: #e7e9ed; opacity: 0; position: absolute; top: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all .4s ease; z-index: 200; } + .carousel .carousel-container .item-prev { left: 1rem; } + .carousel .carousel-container .item-next { right: 1rem; } + .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), @@ -240,27 +273,29 @@ 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: .4rem; - display: -ms-flexbox; display: flex; + display: -ms-flexbox; -ms-flex-pack: center; justify-content: center; left: 50%; position: absolute; - -ms-transform: translateX(-50%); transform: translateX(-50%); width: 10rem; z-index: 200; } + .carousel .carousel-nav .nav-item { - color: rgba(231, 233, 237, .5); + color: fade(#e7e9ed, 50%); display: block; -ms-flex: 1 0 auto; flex: 1 0 auto; @@ -269,6 +304,7 @@ max-width: 2.5rem; position: relative; } + .carousel .carousel-nav .nav-item::before { background: currentColor; content: ""; @@ -278,6 +314,7 @@ top: .5rem; width: 100%; } + @keyframes carousel-slidein { 0% { transform: translateX(100%); @@ -286,6 +323,7 @@ transform: translateX(0); } } + @keyframes carousel-slideout { 0% { opacity: 1; @@ -296,12 +334,14 @@ transform: translateX(-50%); } } + .comparison-slider { height: 50vh; overflow: hidden; position: relative; width: 100%; } + .comparison-slider .comparison-before, .comparison-slider .comparison-after { height: 100%; @@ -311,6 +351,7 @@ position: absolute; top: 0; } + .comparison-slider .comparison-before img, .comparison-slider .comparison-after img { height: 100%; @@ -319,18 +360,22 @@ position: absolute; width: 100%; } + .comparison-slider .comparison-before { width: 100%; z-index: 1; } + .comparison-slider .comparison-before .comparison-label { right: .8rem; } + .comparison-slider .comparison-after { max-width: 100%; min-width: 0; z-index: 2; } + .comparison-slider .comparison-after::before { background: transparent; content: ""; @@ -342,6 +387,7 @@ top: 0; z-index: 1; } + .comparison-slider .comparison-after::after { background: currentColor; border-radius: 50%; @@ -352,13 +398,14 @@ position: absolute; right: .4rem; top: 50%; - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); width: 3px; } + .comparison-slider .comparison-after .comparison-label { left: .8rem; } + .comparison-slider .comparison-resizer { animation: first-run 1.5s 1 ease-in-out; cursor: ew-resize; @@ -371,12 +418,12 @@ position: relative; resize: horizontal; top: 50%; - -ms-transform: translateY(-50%) scaleY(30); transform: translateY(-50%) scaleY(30); width: 0; } + .comparison-slider .comparison-label { - background: rgba(69, 77, 93, .5); + background: fade(#454d5d, 50%); bottom: .8rem; color: #fff; padding: .2rem .4rem; @@ -386,6 +433,7 @@ -ms-user-select: none; user-select: none; } + @keyframes first-run { 0% { width: 0; @@ -403,15 +451,18 @@ width: 0; } } + .filter .filter-nav { margin: .4rem 0; } + .filter .filter-body { display: flex; display: -ms-flexbox; -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"], @@ -420,12 +471,14 @@ 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; @@ -434,51 +487,63 @@ border: 0; border-radius: .1rem; display: block; - height: .8rem; + height: .8rem; 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: .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: .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; } + .parallax { display: block; height: auto; position: relative; width: auto; } + .parallax .parallax-content { box-shadow: 0 1rem 2.1rem rgba(69, 77, 93, .3); height: auto; @@ -487,6 +552,7 @@ transition: all .4s ease; width: 100%; } + .parallax .parallax-content::before { content: ""; display: block; @@ -496,6 +562,7 @@ top: 0; width: 100%; } + .parallax .parallax-front { align-items: center; color: #fff; @@ -508,81 +575,98 @@ left: 0; position: absolute; text-align: center; - text-shadow: 0 0 20px rgba(69, 77, 93, .5); + text-shadow: 0 0 20px fade(#454d5d, 50%); top: 0; - transform: translateZ(100px) scale(.9); + transform: translateZ(100px) scale(1-""); transition: all .4s ease; width: 100%; z-index: 1; } + .parallax .parallax-top-left { height: 50%; left: 0; position: absolute; - top: 0; + top: 0; width: 50%; z-index: 300; } + .parallax .parallax-top-left:hover ~ .parallax-content { transform: perspective(1000px) 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 { - transform: translate3d(-6.5px, -6.5px, 100px) scale(.9); + transform: translate3d(-6.5px, -6.5px, 100px) scale(1-""); } + .parallax .parallax-top-right { height: 50%; position: absolute; right: 0; - top: 0; + top: 0; width: 50%; z-index: 300; } + .parallax .parallax-top-right:hover ~ .parallax-content { transform: perspective(1000px) 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 { - transform: translate3d(6.5px, -6.5px, 100px) scale(.9); + transform: translate3d(6.5px, -6.5px, 100px) scale(1-""); } + .parallax .parallax-bottom-left { bottom: 0; height: 50%; - left: 0; + left: 0; position: absolute; width: 50%; z-index: 300; } + .parallax .parallax-bottom-left:hover ~ .parallax-content { transform: perspective(1000px) 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 { - transform: translate3d(-6.5px, 6.5px, 100px) scale(.9); + transform: translate3d(-6.5px, 6.5px, 100px) scale(1-""); } + .parallax .parallax-bottom-right { bottom: 0; height: 50%; position: absolute; - right: 0; + right: 0; width: 50%; z-index: 300; } + .parallax .parallax-bottom-right:hover ~ .parallax-content { transform: perspective(1000px) 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 { - transform: translate3d(6.5px, 6.5px, 100px) scale(.9); + transform: translate3d(6.5px, 6.5px, 100px) scale(1-""); } + .progress { -webkit-appearance: none; -moz-appearance: none; @@ -595,25 +679,31 @@ position: relative; width: 100%; } + .progress::-webkit-progress-bar { background: transparent; border-radius: .1rem; } + .progress::-webkit-progress-value { background: #5764c6; border-radius: .1rem; } + .progress::-moz-progress-bar { background: #5764c6; border-radius: .1rem; } + .progress:indeterminate { animation: progress-indeterminate 1.5s linear infinite; - background: #f0f1f4 linear-gradient(to right, #5764c6 30%, #f0f1f4 30%) top left / 150% 150% no-repeat; + background: #f0f1f4 linear-gradient(to right, #5764c6 30%, #f0f1f4 30%) top left/150% 150% no-repeat; } + .progress:indeterminate::-moz-progress-bar { background: transparent; } + @keyframes progress-indeterminate { 0% { background-position: 200% 0; @@ -622,19 +712,22 @@ background-position: -200% 0; } } + .slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; display: block; - height: 1.2rem; + height: 1.2rem; width: 100%; } + .slider:focus { box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); outline: none; } + .slider::-webkit-slider-thumb { -webkit-appearance: none; background: #5764c6; @@ -645,6 +738,7 @@ transition: transform .2s ease; width: .6rem; } + .slider::-moz-range-thumb { background: #5764c6; border: 0; @@ -653,6 +747,7 @@ transition: transform .2s ease; width: .6rem; } + .slider::-ms-thumb { background: #5764c6; border: 0; @@ -661,59 +756,69 @@ transition: transform .2s ease; width: .6rem; } + .slider:active::-webkit-slider-thumb { 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; 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: .1rem; height: .1rem; width: 100%; } + .slider::-moz-range-track { background: #f0f1f4; border-radius: .1rem; height: .1rem; width: 100%; } + .slider::-ms-track { background: #f0f1f4; border-radius: .1rem; height: .1rem; width: 100%; } + .slider::-ms-fill-lower { background: #5764c6; } + .timeline .timeline-item { display: flex; display: -ms-flexbox; margin-bottom: 1.2rem; position: relative; } + .timeline .timeline-item::before { background: #e7e9ed; content: ""; @@ -723,15 +828,18 @@ 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 .8rem; } + .timeline .timeline-item .timeline-icon { border-radius: 50%; color: #fff; @@ -740,6 +848,7 @@ text-align: center; width: 1.2rem; } + .timeline .timeline-item .timeline-icon::before { border: .1rem solid #5764c6; border-radius: 50%; @@ -751,11 +860,13 @@ top: .4rem; width: .4rem; } + .timeline .timeline-item .timeline-icon.icon-lg { background: #5764c6; font-size: .8rem; line-height: 1rem; } + .timeline .timeline-item .timeline-icon.icon-lg::before { content: none; }
\ No newline at end of file |