/** * @theme * @name Light */ /** * @theme * @name Light */ /* @fs-light-primary_50: #fafafa; @fs-light-primary_100: #f5f5f5; @fs-light-primary_200: #eeeeee; @fs-light-primary_300: #e0e0e0; @fs-light-primary_400: #bdbdbd; @fs-light-primary_500: #9e9e9e; @fs-light-primary_600: #757575; @fs-light-primary_700: #616161; @fs-light-primary_800: #424242; @fs-light-primary_900: #212121; */ /** * @theme * @name Light * @component Carousel */ .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-canister { position: relative; backface-visibility: hidden; margin: 0; overflow: hidden; transition: transform 0.5s ease; transform: translate3d(0, 0, 0); } .fs-carousel.fs-light.fs-carousel-enabled.fs-carousel-auto_height .fs-carousel-canister { transition: height 0.5s ease, transform 0.5s ease; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-control { width: 40px; height: 40px; position: absolute; top: 0; bottom: 0; background: #fff; border-radius: 100%; display: block; margin: auto; opacity: 0; overflow: hidden; text-indent: 200%; transition: opacity 0.15s ease, visibility 0.15s ease; visibility: hidden; white-space: nowrap; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-control:before { width: 0; height: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; margin: auto; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-control.fs-carousel-visible { opacity: 1; visibility: visible; } .no-touchevents .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-control.fs-carousel-visible:hover { background: #CFD8DC; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-control_previous, .fs-carousel.fs-light.fs-carousel-enabled.fs-carousel-rtl .fs-carousel-control_next { right: auto; left: 20px; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-control_previous:before, .fs-carousel.fs-light.fs-carousel-enabled.fs-carousel-rtl .fs-carousel-control_next:before { border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 10.5px solid #263238; border-left: none; margin-left: 13.7px; margin-right: auto; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-control_next, .fs-carousel.fs-light.fs-carousel-enabled.fs-carousel-rtl .fs-carousel-control_previous { left: auto; right: 20px; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-control_next:before, .fs-carousel.fs-light.fs-carousel-enabled.fs-carousel-rtl .fs-carousel-control_previous:before { border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10.5px solid #263238; border-right: none; margin-right: 13.7px; margin-left: auto; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-control_disabled { opacity: 0; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-pagination { width: 100%; margin: 10px 0 0; padding: 0; text-align: center; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-page { width: 10px; height: 10px; background: #263238; border-radius: 100%; margin: 0 3px; opacity: 0.5; overflow: hidden; text-indent: 200%; white-space: nowrap; } .fs-carousel.fs-light.fs-carousel-enabled .fs-carousel-page.fs-carousel-active, .no-touchevents .fs-light.fs-carousel-enabled .fs-carousel-page:hover { opacity: 1; } /** * @theme * @name Light * @component Checkbox */ .fs-checkbox.fs-light { margin: 0 0 10px 0; } .fs-checkbox.fs-light .fs-checkbox-label { color: #263238; font-size: 14px; line-height: 20px; } .fs-checkbox.fs-light .fs-checkbox-marker { width: 20px; height: 20px; background: #fff; border: 1px solid #546E7A; border-radius: 2px; margin: 0 10px 0 0; } .fs-checkbox.fs-light .fs-checkbox-flag:before { width: 5px; height: 10px; border: 2px solid #546E7A; border-top: 0; border-left: 0; margin: 3px 0 0 6px; } .fs-light.fs-checkbox-radio .fs-checkbox-marker { border-radius: 100%; } .fs-light.fs-checkbox-radio .fs-checkbox-flag { width: 10px; height: 10px; background: #546E7A; } .fs-light.fs-checkbox-focus .fs-checkbox-label, .no-touchevents .fs-light:hover .fs-checkbox-label { color: #141A1E; } .fs-light.fs-checkbox-focus .fs-checkbox-marker, .no-touchevents .fs-light:hover .fs-checkbox-marker { border-color: #263238; } .fs-light.fs-checkbox-focus .fs-checkbox-flag:before, .no-touchevents .fs-light:hover .fs-checkbox-flag:before { border-color: #263238; } .fs-light.fs-checkbox-radio.fs-checkbox-focus .fs-checkbox-flag, .no-touchevents .fs-light.fs-checkbox-radio:hover .fs-checkbox-flag { background: #263238; } .fs-light.fs-checkbox-disabled { opacity: 0.5; } .fs-light.fs-checkbox-disabled .fs-checkbox-label, .no-touchevents .fs-light.fs-checkbox-disabled:hover .fs-checkbox-label { color: #263238; } .fs-light.fs-checkbox-disabled .fs-checkbox-marker, .no-touchevents .fs-light.fs-checkbox-disabled:hover .fs-checkbox-marker { border-color: #546E7A; } .fs-light.fs-checkbox-disabled .fs-checkbox-flag:before, .no-touchevents .fs-light.fs-checkbox-disabled:hover .fs-checkbox-flag:before { border-color: #546E7A; } .fs-light.fs-checkbox-radio.fs-checkbox-disabled .fs-checkbox-flag, .no-touchevents .fs-light.fs-checkbox-radio.fs-checkbox-disabled:hover .fs-checkbox-flag { background: #546E7A; } .fs-light.fs-checkbox-toggle .fs-checkbox-label { line-height: 40px; } .fs-light.fs-checkbox-toggle .fs-checkbox-marker { width: 100px; height: 40px; border-radius: 2px; } .fs-light.fs-checkbox-toggle .fs-checkbox-flag { background: #546E7A; border: 2px solid #fff; border-radius: 4px; } .fs-light.fs-checkbox-toggle .fs-checkbox-flag:before { display: none; } .fs-light.fs-checkbox-toggle .fs-checkbox-flag:after { width: 2px; height: 10px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; box-shadow: 3px 0 0 #fff, -3px 0 0 #fff; content: ''; margin: auto; } .no-touchevents .fs-light.fs-checkbox-toggle:hover .fs-checkbox-flag:after { opacity: 1; } .fs-light.fs-checkbox-toggle .fs-checkbox-state { color: #455A64; font-size: 12px; line-height: 40px; text-transform: uppercase; } .fs-light.fs-checkbox-toggle.fs-checkbox-focus .fs-checkbox-flag, .no-touchevents .fs-light.fs-checkbox-toggle:hover .fs-checkbox-flag { background: #263238; } .fs-light.fs-checkbox-toggle.fs-checkbox-disabled .fs-checkbox-flag, .no-touchevents .fs-light.fs-checkbox-toggle.fs-checkbox-disabled:hover .fs-checkbox-flag { background: #546E7A; } /** * @theme * @name Light * @component Dropdown */ .fs-dropdown.fs-light .fs-dropdown-selected { height: 40px; background: #fff; border: 1px solid #546E7A; border-radius: 2px; color: #263238; font-size: 14px; line-height: 40px; margin: 0; padding: 0 40px 0 15px; } .fs-dropdown.fs-light .fs-dropdown-selected:after { height: 0; width: 0; position: absolute; top: 0; right: 15px; bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #546E7A; content: ''; display: block; margin: auto 0; } .no-touchevents .fs-dropdown.fs-light .fs-dropdown-selected:hover, .fs-dropdown.fs-light.fs-dropdown-focus .fs-dropdown-selected { background-color: #fff; border-color: #263238; color: #263238; } .no-touchevents .fs-dropdown.fs-light .fs-dropdown-selected:hover:after, .fs-dropdown.fs-light.fs-dropdown-focus .fs-dropdown-selected:after { border-top-color: #263238; } .fs-dropdown.fs-light .fs-dropdown-options { max-height: 260px; border: 1px solid #263238; border-width: 0 1px 1px; border-radius: 0 0 2px 2px; background-color: #fff; margin: 0; padding: 0; } .fs-dropdown.fs-light .fs-dropdown-group { border-bottom: 1px solid #78909C; color: #546E7A; font-size: 11px; padding: 10px 15px; text-transform: uppercase; } .fs-dropdown.fs-light .fs-dropdown-item { background: #fff; color: #263238; font-size: 14px; line-height: 1.5; padding: 10px 15px; text-align: left; } .fs-dropdown.fs-light .fs-dropdown-item:first-child { border-radius: 0; } .fs-dropdown.fs-light .fs-dropdown-item:last-child { border-bottom: 0; border-radius: 0 0 2px 2px; } .no-touchevents .fs-dropdown.fs-light .fs-dropdown-item:hover { color: #141A1E; background-color: #CFD8DC; } .fs-dropdown.fs-light .fs-dropdown-item_selected, .no-touchevents .fs-dropdown.fs-light .fs-dropdown-item_selected:hover { background: #B0BEC5; } .fs-dropdown.fs-light .fs-dropdown-item_disabled, .no-touchevents .fs-dropdown.fs-light .fs-dropdown-item_disabled:hover { color: #263238; background-color: #fff; border-color: #546E7A; opacity: 0.5; } .fs-light.fs-dropdown-open .fs-dropdown-options { border-radius: 0 0 2px 2px; } .fs-light.fs-dropdown-open .fs-dropdown-selected { border-radius: 2px 2px 0 0; } .fs-light.fs-dropdown-open .fs-dropdown-selected { background-color: #fff; } .fs-light.fs-dropdown-cover .fs-dropdown-options { border-radius: 2px; border-width: 1px; } .fs-light.fs-dropdown-cover .fs-dropdown-item:first-child { border-radius: 2px 2px 0 0; } .fs-light.fs-dropdown-bottom .fs-dropdown-options { border-width: 1px 1px 0; } .fs-light.fs-dropdown-bottom .fs-dropdown-item:last-child { border: none; } .fs-light.fs-dropdown-bottom.fs-dropdown-open .fs-dropdown-selected { border-radius: 0 0 2px 2px; } .fs-light.fs-dropdown-bottom.fs-dropdown-open .fs-dropdown-options { border-radius: 2px 2px 0 0; } .fs-light.fs-dropdown-bottom.fs-dropdown-cover.fs-dropdown-open .fs-dropdown-selected { border-radius: 2px; } .fs-light.fs-dropdown-bottom.fs-dropdown-cover.fs-dropdown-open .fs-dropdown-options { border-radius: 2px; border-width: 1px; } .fs-light.fs-dropdown-multiple { border: 1px solid #546E7A; border-radius: 2px; } .fs-light.fs-dropdown-multiple .fs-dropdown-options { border: none; border-radius: 2px; } .fs-light.fs-dropdown-disabled { opacity: 0.5; } .fs-light.fs-dropdown-disabled .fs-dropdown-selected, .no-touchevents .fs-light.fs-dropdown-disabled .fs-dropdown-selected:hover { background: #fff; border-color: #546E7A; color: #263238; cursor: default; } .fs-light.fs-dropdown-disabled .fs-dropdown-selected:after, .no-touchevents .fs-light.fs-dropdown-disabled .fs-dropdown-selected:hover:after { border-top-color: #546E7A; } .fs-light.fs-dropdown-disabled .fs-dropdown-options { background: #fff; border-color: #546E7A; } .fs-light.fs-dropdown-disabled .fs-dropdown-group, .fs-light.fs-dropdown-disabled .fs-dropdown-item { border-color: #546E7A; color: #263238; } .fs-light.fs-dropdown-disabled .fs-dropdown-item, .no-touchevents .fs-light.fs-dropdown-disabled .fs-dropdown-item:hover { color: #263238; background-color: #fff; } .fs-light.fs-dropdown-disabled .fs-dropdown-item_selected, .no-touchevents .fs-light.fs-dropdown-disabled .fs-dropdown-item_selected:hover { background: #fff; } .fs-light.fs-dropdown-options.fs-scrollbar { overflow: hidden; } .fs-light.fs-dropdown-options.fs-scrollbar .fs-scrollbar-bar { border: 1px solid #546E7A; border-width: 0 0 0 1px; } .fs-light.fs-dropdown-options.fs-scrollbar .fs-scrollbar-content { border: none; max-height: 260px; height: auto; } .fs-light.fs-dropdown-options.fs-scrollbar.fs-scrollbar-active .fs-scrollbar-content { padding: 0; } .fs-light.fs-dropdown-options.fs-scrollbar .fs-scrollbar-bar, .fs-light.fs-dropdown-options.fs-scrollbar .fs-scrollbar-track { border-radius: 0 2px 2px 0; } /** * @theme * @name Light * @component Lightbox */ .fs-lightbox.fs-light { z-index: 101; background: #fff; border-radius: 2px; box-shadow: 0 0 25px #141A1E; padding: 10px; } .fs-light.fs-lightbox-inline { padding: 30px; } .fs-light.fs-lightbox-animating { transition: height 0.25s ease, width 0.25s ease, opacity 0.25s linear, top 0.25s ease; } .fs-light.fs-lightbox-animating .fs-lightbox-content, .fs-light.fs-lightbox-animating .fs-lightbox-thumbnails, .fs-light.fs-lightbox-animating .fs-lightbox-tools, .fs-light.fs-lightbox-animating .fs-lightbox-meta, .fs-light.fs-lightbox-animating .fs-lightbox-control { transition: opacity 0.25s linear 0.25s, visibility 0.25s linear 0.25s; } .fs-light.fs-lightbox-mobile .fs-lightbox-image_container { transition: height 0.25s ease, width 0.25s ease, top 0.25s ease, left 0.25s ease; } .fs-light.fs-lightbox-mobile.fs-lightbox-scaling .fs-lightbox-image_container { transition: none !important; } .fs-light.fs-lightbox-overlay { z-index: 100; background: #141A1E; transition: opacity 0.25s linear; } .fs-light.fs-lightbox-overlay.fs-lightbox-open { opacity: 0.75; } .fs-lightbox.fs-light .fs-lightbox-close { width: 30px; height: 30px; top: -7.5px; right: -7.5px; z-index: 105; background: #fff; border-radius: 100%; text-indent: 200%; white-space: nowrap; } .fs-lightbox.fs-light .fs-lightbox-close:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: #263238; content: "\00d7"; display: block; font-family: "Helvetica", Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 30px; margin: auto; text-align: center; text-indent: 0; transition: color 0.15s linear; } .fs-lightbox.fs-light .fs-lightbox-loading_icon { width: 50px; height: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 105; display: block; margin: auto; opacity: 0; transition: opacity 0.25s linear, visibility 0.25s linear; visibility: hidden; } .fs-lightbox.fs-light .fs-lightbox-loading_icon:before, .fs-lightbox.fs-light .fs-lightbox-loading_icon:after { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 110%; content: ''; display: block; } .fs-lightbox.fs-light .fs-lightbox-loading_icon:before { border: 5px solid rgba(38, 50, 56, 0.25); } .fs-lightbox.fs-light .fs-lightbox-loading_icon:after { animation: fs-lightbox-loading-spin 0.75s linear infinite; border: 5px solid transparent; border-top-color: #263238; } @keyframes fs-lightbox-loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .fs-lightbox.fs-light .fs-lightbox-container { z-index: 103; background: #fff; } .fs-lightbox.fs-light .fs-lightbox-content { background: #fff; } .fs-lightbox.fs-light .fs-lightbox-meta { padding: 10px 10px 0; } .fs-lightbox.fs-light .fs-lightbox-control { width: 40px; height: 40px; z-index: 105; background: #fff; border-radius: 100%; box-shadow: 0 0 5px rgba(20, 26, 30, 0.25); opacity: 1; overflow: hidden; text-indent: 200%; transition: opacity 0.15s linear, visibility 0.15s linear; visibility: visible; } .fs-lightbox.fs-light .fs-lightbox-control:before { width: 0; height: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; margin: auto; } .no-touchevents .fs-lightbox.fs-light .fs-lightbox-control:hover { background: #CFD8DC; } .fs-lightbox.fs-light .fs-lightbox-control_previous { left: 20px; } .fs-lightbox.fs-light .fs-lightbox-control_previous:before { border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 10.4px solid #263238; margin-left: 14px; } .fs-lightbox.fs-light .fs-lightbox-control_next { right: 20px; } .fs-lightbox.fs-light .fs-lightbox-control_next:before { border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 10.4px solid #263238; margin-right: 14px; } .no-touchevents .fs-lightbox.fs-light .fs-lightbox-control { opacity: 0; visibility: hidden; } .no-touchevents .fs-lightbox.fs-light:hover .fs-lightbox-control { opacity: 1; visibility: visible; } .no-touchevents .fs-lightbox.fs-light .fs-lightbox-control_disabled, .no-touchevents .fs-lightbox.fs-light:hover .fs-lightbox-control_disabled { opacity: 0; cursor: default; visibility: hidden; } .fs-lightbox.fs-light .fs-lightbox-position { color: #78909C; font-size: 12px; margin: 5px 0; padding: 0; } .fs-lightbox.fs-light .fs-lightbox-caption p { color: #546E7A; font-size: 14px; line-height: 1.6; margin: 5px 0; padding: 0; } .fs-lightbox.fs-light .fs-lightbox-error { width: 250px; } .fs-lightbox.fs-light .fs-lightbox-error p { color: #900; font-size: 14px; margin: 0; padding: 25px; text-align: center; text-transform: uppercase; } .fs-lightbox-thumbnails { height: 60px; } .fs-lightbox-thumbnail_container { height: 80px; padding: 0 0 30px; } .fs-lightbox.fs-light .fs-lightbox-thumbnail_item { width: 50px; height: 50px; margin: 0 10px 0 0; opacity: 0.25; transition: opacity 0.25s linear; } .fs-lightbox.fs-light .fs-lightbox-thumbnail_item:last-child { margin: 0; } .fs-lightbox.fs-light .fs-lightbox-thumbnail_item.fs-lightbox-active, .no-touchevents .fs-lightbox.fs-light .fs-lightbox-thumbnail_item:hover { opacity: 1; } .fs-light.fs-lightbox-loading .fs-lightbox-content, .fs-light.fs-lightbox-loading .fs-lightbox-thumbnails, .fs-light.fs-lightbox-loading .fs-lightbox-tools, .fs-light.fs-lightbox-loading .fs-lightbox-meta, .fs-light.fs-lightbox-loading .fs-lightbox-control { opacity: 0; transition: opacity 0.25s linear, visibility 0.25s linear; visibility: hidden; } .fs-light.fs-lightbox-loading .fs-lightbox-loading_icon, .fs-light.fs-lightbox-ready.fs-lightbox-loading .fs-lightbox-thumbnails, .fs-light.fs-lightbox-ready.fs-lightbox-loading .fs-lightbox-tools { opacity: 1; visibility: visible; } .fs-light.fs-lightbox-mobile { background: #141A1E; border-radius: 0; padding: 40px 0 0; } .fs-light.fs-lightbox-mobile .fs-lightbox-loading_icon { top: 0; bottom: 0; } .fs-light.fs-lightbox-mobile .fs-lightbox-close { height: 40px; width: 40px; top: 0; right: 0; background: #141A1E; border-radius: 0; } .fs-light.fs-lightbox-mobile .fs-lightbox-close:before { color: #78909C; font-size: 28px; font-weight: 700; line-height: 36px; } .fs-light.fs-lightbox-mobile .fs-lightbox-loading_icon:before { border-color: rgba(144, 164, 174, 0.25); } .fs-light.fs-lightbox-mobile .fs-lightbox-loading_icon:after { border-top-color: #90A4AE; } .fs-light.fs-lightbox-mobile .fs-lightbox-container { background: #141A1E; } .fs-light.fs-lightbox-mobile .fs-lightbox-content { background-color: #141A1E; padding: 0 15px; } .fs-light.fs-lightbox-mobile .fs-lightbox-tools { background-color: #263238; } .fs-light.fs-lightbox-mobile .fs-lightbox-control { width: 50px; height: 100%; min-height: 50px; background: #263238; border-radius: 0; box-shadow: none; } .fs-light.fs-lightbox-mobile .fs-lightbox-control_previous { left: 0; } .fs-light.fs-lightbox-mobile .fs-lightbox-control_previous:before { border-right-color: #90A4AE; margin-left: 19px; } .fs-light.fs-lightbox-mobile .fs-lightbox-control_next { right: 0; } .fs-light.fs-lightbox-mobile .fs-lightbox-control_next:before { border-left-color: #90A4AE; margin-right: 19px; } .no-touchevents .fs-light.fs-lightbox-mobile .fs-lightbox-control, .no-touchevents .fs-light.fs-lightbox-mobile:hover .fs-lightbox-control { opacity: 1; visibility: visible; } .fs-light.fs-lightbox-mobile .fs-lightbox-control_disabled, .no-touchevents .fs-light.fs-lightbox-mobile .fs-lightbox-control_disabled, .no-touchevents .fs-light.fs-lightbox-mobile:hover .fs-lightbox-control_disabled { cursor: default !important; opacity: 0; visibility: hidden; } .fs-light.fs-lightbox-mobile .fs-lightbox-meta { padding: 15px 65px; } .fs-light.fs-lightbox-mobile .fs-lightbox-position { color: #90A4AE; font-size: 12px; margin: 0 0 5px; padding: 0 15px 0 0; } .fs-light.fs-lightbox-mobile .fs-lightbox-caption p { color: #CFD8DC; font-size: 14px; line-height: 1.6; margin: 0; padding: 0; } .fs-light.fs-lightbox-mobile.fs-lightbox-inline .fs-lightbox-content, .fs-light.fs-lightbox-mobile.fs-lightbox-iframe .fs-lightbox-content { height: 100%; } .fs-light.fs-lightbox-mobile .fs-lightbox-thumbnail_item:first-child { margin-left: 15px; } .fs-light.fs-lightbox-mobile .fs-lightbox-thumbnail_item:last-child { margin-right: 15px; } .fs-light.fs-lightbox-mobile.fs-lightbox-touch .fs-lightbox-tools { width: auto; position: static; background: transparent; } .fs-light.fs-lightbox-mobile.fs-lightbox-touch .fs-lightbox-controls { width: 100%; height: 50px; position: fixed; right: 0; bottom: 0; left: 0; z-index: 105; background-color: #263238; padding: 0 65px; } .fs-light.fs-lightbox-mobile.fs-lightbox-touch .fs-lightbox-toggle { background: transparent; color: #90A4AE; display: inline-block; font-size: 12px; line-height: 50px; } .fs-light.fs-lightbox-mobile.fs-lightbox-touch .fs-lightbox-meta { z-index: 104; background: #37474F; box-shadow: 0 0 25px #141A1E; padding: 15px 15px 65px; transition: transform 0.25s ease, opacity 0.25s linear 0.25s, visibility 0.25s linear 0.25s; } .fs-light.fs-lightbox-touch .fs-lightbox-thumbnails { width: 100%; height: 130px; z-index: 104; background: #37474F; box-shadow: 0 0 25px #141A1E; padding: 15px 0 65px; transition: transform 0.25s ease, opacity 0.25s linear 0.25s, visibility 0.25s linear 0.25s; } .fs-light.fs-lightbox-mobile.fs-lightbox-touch .fs-lightbox-thumbnail_container { height: 100px; } .fs-light.fs-lightbox-touch .fs-lightbox-thumbnail_item:first-child { margin-left: 15px; } .fs-light.fs-lightbox-touch .fs-lightbox-thumbnail_item:last-child { margin-right: 15px; } /** * @theme * @name Light * @component Navigation */ .fs-light.fs-navigation-enabled { margin: 0; } .fs-navigation, .fs-navigation:after, .fs-navigation:before, .fs-navigation *, .fs-navigation *:after, .fs-navigation *:before { box-sizing: border-box; transition: none; user-select: none !important; } .fs-light.fs-navigation-toggle-nav.fs-navigation-enabled { background: #fff; border: 1px solid #607D8B; border-width: 0 1px 1px; border-radius: 0 0 2px 2px; padding: 20px; } .fs-light.fs-navigation-toggle-handle.fs-navigation-enabled { width: 100%; background: #fff; border: 1px solid #607D8B; border-radius: 2px; color: #263238; cursor: pointer; display: block; font-size: 14px; height: 40px; line-height: 40px; margin: 0; padding: 0 45px 0 15px; position: relative; user-select: none; } .fs-light.fs-navigation-toggle-handle.fs-navigation-open { border-radius: 2px 2px 0 0; } .fs-light.fs-navigation-push-nav.fs-navigation-enabled, .fs-light.fs-navigation-reveal-nav.fs-navigation-enabled, .fs-light.fs-navigation-overlay-nav.fs-navigation-enabled { background: #fff; padding: 20px; } .fs-light.fs-navigation-push-nav.fs-navigation-enabled, .fs-light.fs-navigation-reveal-nav.fs-navigation-enabled { visibility: hidden; } .fs-light.fs-navigation-reveal-nav.fs-navigation-animated { transition: visibility 0.001s linear 0.2s; } .fs-light.fs-navigation-push-nav.fs-navigation-animated, .fs-light.fs-navigation-overlay-nav.fs-navigation-animated { transition: transform 0.2s ease, visibility 0.001s linear 0.2s; } .fs-light.fs-navigation-push-nav.fs-navigation-enabled, .fs-light.fs-navigation-reveal-nav.fs-navigation-enabled { z-index: 0; } .fs-light.fs-navigation-push-left-nav.fs-navigation-enabled, .fs-light.fs-navigation-overlay-left-nav.fs-navigation-enabled { transform: translateX(-270px); } .csstransforms3d .fs-light.fs-navigation-push-left-nav.fs-navigation-enabled, .csstransforms3d .fs-light.fs-navigation-overlay-left-nav.fs-navigation-enabled { transform: translate3D(-270px, 0, 0); } .fs-light.fs-navigation-push-right-nav.fs-navigation-enabled, .fs-light.fs-navigation-overlay-right-nav.fs-navigation-enabled { transform: translateX(270px); } .csstransforms3d .fs-light.fs-navigation-push-right-nav.fs-navigation-enabled, .csstransforms3d .fs-light.fs-navigation-overlay-right-nav.fs-navigation-enabled { transform: translate3D(270px, 0, 0); } .fs-light.fs-navigation-overlay-nav.fs-navigation-enabled { z-index: 3; } .fs-light.fs-navigation-overlay-left-nav.fs-navigation-open { box-shadow: 2px 0 2px rgba(0, 0, 0, 0.15); } .fs-light.fs-navigation-overlay-right-nav.fs-navigation-open { box-shadow: -2px 0 2px rgba(0, 0, 0, 0.15); } .fs-light.fs-navigation-reveal-nav.fs-navigation-open { visibility: visible; transition: visibility 0.001s ease; } .fs-light.fs-navigation-push-nav.fs-navigation-open, .fs-light.fs-navigation-overlay-nav.fs-navigation-open { transform: translateX(0); transition: transform 0.2s ease, visibility 0.001s ease; visibility: visible; } .csstransforms3d .fs-light.fs-navigation-push-nav.fs-navigation-open, .csstransforms3d .fs-light.fs-navigation-overlay-nav.fs-navigation-open { transform: translate3D(0, 0, 0); } .fs-light.fs-navigation-push-handle.fs-navigation-enabled, .fs-light.fs-navigation-reveal-handle.fs-navigation-enabled, .fs-light.fs-navigation-overlay-handle.fs-navigation-enabled { background: #fff; border: 1px solid #607D8B; border-radius: 2px; color: #263238; cursor: pointer; display: block; font-size: 14px; height: 40px; line-height: 40px; margin: 0; padding: 0 45px 0 15px; position: relative; user-select: none; } .fs-light.fs-navigation-overlay-content:before { background: #fff; background: rgba(255, 255, 255, 0.75); opacity: 0; transition: opacity 0.2s ease, visibility 0.2s ease; visibility: hidden; } .fs-light.fs-navigation-overlay-content.fs-navigation-open:before { opacity: 1; visibility: visible; } .fs-light.fs-navigation-reveal-content.fs-navigation-enabled, .fs-light.fs-navigation-push-content.fs-navigation-enabled { z-index: 1; transform: translateX(0); } .csstransforms3d .fs-light.fs-navigation-reveal-content.fs-navigation-enabled, .csstransforms3d .fs-light.fs-navigation-push-content.fs-navigation-enabled { transform: translate3D(0, 0, 0); } .fs-light.fs-navigation-reveal-content.fs-navigation-animated, .fs-light.fs-navigation-push-content.fs-navigation-animated { transition: transform 0.2s ease; } .fs-light.fs-navigation-reveal-left-content.fs-navigation-enabled, .fs-light.fs-navigation-push-left-content.fs-navigation-enabled { box-shadow: -2px 0 2px rgba(0, 0, 0, 0.15); } .fs-light.fs-navigation-reveal-right-content.fs-navigation-enabled, .fs-light.fs-navigation-push-right-content.fs-navigation-enabled { box-shadow: 2px 0 2px rgba(0, 0, 0, 0.15); } .fs-light.fs-navigation-reveal-left-content.fs-navigation-open, .fs-light.fs-navigation-push-left-content.fs-navigation-open { transform: translateX(270px); } .csstransforms3d .fs-light.fs-navigation-reveal-left-content.fs-navigation-open, .csstransforms3d .fs-light.fs-navigation-push-left-content.fs-navigation-open { transform: translate3D(270px, 0, 0); } .fs-light.fs-navigation-reveal-right-content.fs-navigation-open, .fs-light.fs-navigation-push-right-content.fs-navigation-open { transform: translateX(-270px); } .csstransforms3d .fs-light.fs-navigation-reveal-right-content.fs-navigation-open, .csstransforms3d .fs-light.fs-navigation-push-right-content.fs-navigation-open { transform: translate3D(-270px, 0, 0); } .fs-light.fs-navigation-handle.fs-navigation-enabled { position: relative; } .fs-light.fs-navigation-handle.fs-navigation-enabled:after { height: 3px; width: 15px; position: absolute; top: 0; right: 15px; bottom: 0; background: #607D8B; box-shadow: 0 5px 0 #607D8B, 0 -5px 0 #607D8B; content: ''; display: block; margin: auto 0; } .fs-light.fs-navigation-handle.fs-navigation-open:after { width: 15px; height: 15px; background: transparent; border: none; box-shadow: none; color: #607D8B; content: "\00d7"; font-size: 22px; font-weight: 700; line-height: 13px; text-align: center; } /** * @theme * @name Light * @component Number */ .fs-number.fs-light { position: relative; border-radius: 2px; margin: 0 0 10px 0; } .fs-light .fs-number-element { width: 100%; height: 40px; background: #fff; border: 1px solid #546E7A; border-radius: 2px; color: #263238; font-size: 15px; margin: 0; padding: 0 40px 0 15px; } .fs-light .fs-number-arrow { width: 25px; height: 50%; position: absolute; right: 1px; z-index: 1; background: #fff; border: 2px solid #fff; border-radius: 4px; text-indent: 200%; white-space: nowrap; } .no-opacity .fs-light .fs-number-arrow { text-indent: -999999px; } .fs-light .fs-number-arrow:after { width: 0; height: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ''; display: block; margin: auto; } .no-touchevents .fs-light .fs-number-arrow:hover { background: #CFD8DC; } .fs-light .fs-number-arrow.fs-number-up { top: 1px; } .fs-light .fs-number-arrow.fs-number-up:after { border-bottom: 5px solid #546E7A; } .fs-light .fs-number-arrow.fs-number-down { bottom: 1px; } .fs-light .fs-number-arrow.fs-number-down:after { border-top: 5px solid #546E7A; } .fs-light.fs-number-focus .fs-number-element, .no-touchevents .fs-light:hover .fs-number-element { border-color: #263238; } .fs-light.fs-number-focus .fs-number-arrow.fs-number-up:after, .no-touchevents .fs-light:hover .fs-number-arrow.fs-number-up:after { border-bottom-color: #263238; } .fs-light.fs-number-focus .fs-number-arrow.fs-number-down:after, .no-touchevents .fs-light:hover .fs-number-arrow.fs-number-down:after { border-top-color: #263238; } .fs-light.fs-number-disabled, .no-touchevents .fs-light.fs-number-disabled:hover { opacity: 0.5; } .fs-light.fs-number-disabled .fs-number-element, .no-touchevents .fs-light.fs-number-disabled:hover .fs-number-element { border-color: #546E7A; } .fs-light.fs-number-disabled .fs-number-arrow, .no-touchevents .fs-light.fs-number-disabled:hover .fs-number-arrow { background: #fff; } .fs-light.fs-number-disabled .fs-number-arrow.fs-number-up:after, .no-touchevents .fs-light.fs-number-disabled:hover .fs-number-arrow.fs-number-up:after { border-bottom-color: #546E7A; } .fs-light.fs-number-disabled .fs-number-arrow.fs-number-down:after, .no-touchevents .fs-light.fs-number-disabled:hover .fs-number-arrow.fs-number-down:after { border-top-color: #546E7A; } /** * @theme * @name Light * @component Pagination */ .fs-pagination.fs-light { position: relative; background: #fff; border: 1px solid #546E7A; border-radius: 2px; margin: 0 0 10px 0; } .fs-pagination.fs-light .fs-pagination-pages { text-align: center; } .fs-pagination.fs-light .fs-pagination-page, .fs-pagination.fs-light .fs-pagination-ellipsis, .fs-pagination.fs-light .fs-pagination-control, .fs-pagination-mobile.fs-light .fs-pagination-position { color: #546E7A; font-size: 14px; text-decoration: none; } .fs-pagination.fs-light .fs-pagination-page, .fs-pagination.fs-light .fs-pagination-ellipsis { height: 30px; line-height: 30px; margin: 5px 0; padding: 0 7px; } .fs-pagination.fs-light .fs-pagination-control, .fs-pagination-mobile.fs-light .fs-pagination-position { height: 40px; line-height: 40px; } .fs-pagination.fs-light .fs-pagination-page { border-radius: 2px; } .no-touchevents .fs-light .fs-pagination-page:hover { color: #263238; } .fs-pagination.fs-light .fs-pagination-active { color: #263238; background: #CFD8DC; } .fs-pagination.fs-light .fs-pagination-control { width: 40px; position: relative; background: #fff; border: 2px solid #fff; border-radius: 4px; display: block; overflow: hidden; text-indent: 200%; white-space: nowrap; } .fs-pagination.fs-light .fs-pagination-control:before { height: 0px; width: 0px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ''; } .fs-pagination.fs-light .fs-pagination-control_previous { float: left; } .fs-pagination.fs-light .fs-pagination-control_previous:before { border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 10.5px solid #263238; border-left: none; margin-left: 12.3px; margin-right: auto; } .fs-pagination.fs-light .fs-pagination-control_next { float: right; } .fs-pagination.fs-light .fs-pagination-control_next:before { border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10.5px solid #263238; border-right: none; margin-right: 12.3px; margin-left: auto; } .no-touchevents .fs-pagination.fs-light .fs-pagination-control:hover { background: #CFD8DC; } .fs-pagination-mobile.fs-light .fs-pagination-position { text-align: center; } .fs-pagination-mobile.fs-light .fs-pagination-current, .fs-pagination-mobile.fs-light .fs-pagination-total { color: #263238; } /** * @theme * @name Light * @component Range */ .fs-range.fs-light .fs-range-track { height: 20px; background: #fff; border: 1px solid #546E7A; border-radius: 2px; margin: 10px 0; } .fs-range.fs-light .fs-range-fill { background: #90A4AE; } .fs-range.fs-light .fs-range-marker { width: 30px; height: 30px; position: relative; background: #546E7A; border-radius: 2px; margin: -6px 0 0 -15px; } .fs-range.fs-light .fs-range-marker:after { width: 2px; height: 10px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; box-shadow: 3px 0 0 #fff, -3px 0 0 #fff; content: ''; margin: auto; } .fs-light.fs-range-focus .fs-range-track, .no-touchevents .fs-light:hover .fs-range-track { border-color: #263238; } .fs-light.fs-range-focus .fs-range-marker, .no-touchevents .fs-light:hover .fs-range-marker { background: #263238; } .fs-range.fs-light .fs-range-label { color: #263238; font-size: 14px; line-height: 38px; } .fs-light.fs-range-vertical { width: 60px; height: 300px; } .fs-light.fs-range-vertical .fs-range-track { width: 20px; height: 75%; margin: 0 auto; } .fs-light.fs-range-vertical .fs-range-marker { margin: -15px 0 0 -6px; } .fs-light.fs-range-disabled .fs-range-marker { cursor: default; } /** * @theme * @name Light * @component Scrollbar */ .fs-scrollbar.fs-light { background: #fff; border: 1px solid #546E7A; border-radius: 2px; } .fs-scrollbar.fs-light .fs-scrollbar-bar { width: 20px; background: #fff; border: 1px solid #546E7A; border-radius: 0 2px 2px 0; border-width: 0 0 0 1px; } .fs-scrollbar.fs-light .fs-scrollbar-track { background: #fff; border-radius: 0 2px 2px 0; } .fs-scrollbar.fs-light .fs-scrollbar-handle { width: 12px; height: 24px; right: 4px; background: #546E7A; border: 1px solid #fff; border-radius: 10px; } .fs-light.fs-scrollbar-horizontal .fs-scrollbar-content { padding: 0 0 20px 0; } .fs-light.fs-scrollbar-horizontal .fs-scrollbar-bar { width: 100%; height: 20px; border-width: 1px 0 0 0; } .fs-light.fs-scrollbar-horizontal .fs-scrollbar-handle { width: 24px; height: 12px; bottom: 4px; } .fs-light.fs-scrollbar-setup .fs-scrollbar-content, .fs-light.fs-scrollbar-active .fs-scrollbar-content { padding: 20px; } /** * @theme * @name Light * @component Tabs */ .fs-light.fs-tabs-tab.fs-tabs-enabled, .fs-light.fs-tabs-tab_mobile { background: #B0BEC5; border: 1px solid #546E7A; border-radius: 2px; color: #263238; display: block; float: left; font-size: 14px; margin: 0 5px 0 0; padding: 10px 20px; text-transform: uppercase; text-decoration: none; } .no-touchevents .fs-light.fs-tabs-tab.fs-tabs-enabled:hover, .no-touchevents .fs-light.fs-tabs-tab_mobile:hover { background: #CFD8DC; } .fs-light.fs-tabs-tab.fs-tabs-active, .fs-light.fs-tabs-tab_mobile.fs-tabs-active, .no-touchevents .fs-light.fs-tabs-tab.fs-tabs-active:hover, .no-touchevents .fs-light.fs-tabs-tab_mobile.fs-tabs-active:hover { background: #fff; color: #263238; } .fs-light.fs-tabs-tab.fs-tabs-mobile { display: none; } .fs-light.fs-tabs-tab.fs-tabs-tab_mobile { width: 100%; border-radius: 2px; display: none; float: none; margin: 10px 0; } .fs-light.fs-tabs-tab_mobile.fs-tabs-mobile { display: block; } .fs-light.fs-tabs-tab_mobile.fs-tabs-active { border-radius: 2px 2px 0 0; margin: 10px 0 0; } .fs-light.fs-tabs-content.fs-tabs-mobile { border-radius: 0 0 2px 2px; } /** * @theme * @name Light * @component Tooltip */ .fs-tooltip.fs-light { z-index: 10; transition: opacity 0.15s linear; } .fs-tooltip.fs-light .fs-tooltip-content { background: #263238; border-radius: 2px; color: #fff; float: left; font-size: 12px; margin: 0; padding: 10px 15px; position: relative; } .fs-tooltip.fs-light .fs-tooltip-caret { width: 0; height: 0; content: ''; display: block; margin: 0; position: absolute; } .fs-light.fs-tooltip-right .fs-tooltip-caret { top: 0; left: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #263238; } .fs-light.fs-tooltip-left .fs-tooltip-caret { top: 0; right: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #263238; } .fs-light.fs-tooltip-top .fs-tooltip-caret, .fs-light.fs-tooltip-bottom .fs-tooltip-caret { display: block; float: none; margin: 0 auto; } .fs-light.fs-tooltip-top .fs-tooltip-caret { bottom: -5px; left: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #263238; } .fs-light.fs-tooltip-bottom .fs-tooltip-caret { top: -5px; left: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #263238; } /** * @theme * @name Light * @component Upload */ .fs-upload.fs-light .fs-upload-target { background: #fff; border: 3px dashed #607D8B; border-radius: 2px; color: #455A64; font-size: 14px; margin: 0; padding: 25px; text-align: center; transition: background 0.15s linear, border 0.15s linear, color 0.15s linear, opacity 0.15s linear; } .fs-light.fs-upload-dropping .fs-upload-target, .no-touchevents .fs-light:hover .fs-upload-target { background: #CFD8DC; border-color: #546E7A; color: #263238; } .fs-light.fs-upload-disabled { opacity: 0.5; } .fs-light.fs-upload-disabled .fs-upload-target, .no-touchevents .fs-light.fs-upload-disabled:hover .fs-upload-target, .fs-light.fs-upload-disabled.fs-upload-dropping .fs-upload-target, .no-touchevents .fs-light.fs-upload-disabled.fs-upload-dropping:hover .fs-upload-target { background: #fff; border-color: #607D8B; color: #455A64; }