관리-도구
편집 파일: style-rtl.css
@charset "UTF-8"; /** * Colors */ /** * Colors */ /** * Colors */ /** * Fonts & basic variables. */ /** * Grid System. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ */ /** * Dimensions. */ /** * Shadows. */ /** * Editor widths. */ /** * Block UI. */ /** * Border radii. */ /** * Block paddings. */ /** * Breakpoint mixins */ /** * Long content fade mixin * * Creates a fading overlay to signify that the content is longer * than the space allows. */ /** * Focus styles. */ /** * Applies editor left position to the selector passed as argument */ /** * Styles that are reused verbatim in a few places */ /** * Allows users to opt-out of animations via OS-level preferences. */ /** * Reset default styles for JavaScript UI based pages. * This is a WP-admin agnostic reset */ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ /** * Breakpoints & Media Queries */ :root { --wp-admin-theme-color: #007cba; --wp-admin-theme-color-darker-10: #006ba1; --wp-admin-theme-color-darker-20: #005a87; } body.admin-color-light { --wp-admin-theme-color: #0085ba; --wp-admin-theme-color-darker-10: #0073a1; --wp-admin-theme-color-darker-20: #006187; } body.admin-color-modern { --wp-admin-theme-color: #3858e9; --wp-admin-theme-color-darker-10: #2145e6; --wp-admin-theme-color-darker-20: #183ad6; } body.admin-color-blue { --wp-admin-theme-color: #096484; --wp-admin-theme-color-darker-10: #07526c; --wp-admin-theme-color-darker-20: #064054; } body.admin-color-coffee { --wp-admin-theme-color: #46403c; --wp-admin-theme-color-darker-10: #383330; --wp-admin-theme-color-darker-20: #2b2724; } body.admin-color-ectoplasm { --wp-admin-theme-color: #523f6d; --wp-admin-theme-color-darker-10: #46365d; --wp-admin-theme-color-darker-20: #3a2c4d; } body.admin-color-midnight { --wp-admin-theme-color: #e14d43; --wp-admin-theme-color-darker-10: #dd382d; --wp-admin-theme-color-darker-20: #d02c21; } body.admin-color-ocean { --wp-admin-theme-color: #627c83; --wp-admin-theme-color-darker-10: #576e74; --wp-admin-theme-color-darker-20: #4c6066; } body.admin-color-sunrise { --wp-admin-theme-color: #dd823b; --wp-admin-theme-color-darker-10: #d97426; --wp-admin-theme-color-darker-20: #c36922; } /* stylelint-disable block-closing-brace-newline-after */ /* stylelint-enable */ /** * Breakpoint mixins */ /* stylelint-disable block-closing-brace-newline-after */ /* stylelint-enable */ /** * Internal Dependencies */ .kkart-accordion-badge { background-color: #f0f0f0; border-radius: 20px; display: inline-block; text-align: center; font-style: normal; font-weight: 600; font-size: 14px; line-height: 27px; align-items: center; width: 32px; height: 28px; margin-right: 16px; } .kkart-accordion-card.is-panel-opened:not(:first-child) { margin-top: 20px; } .kkart-accordion-card.is-panel-opened:not(:last-child) { margin-bottom: 20px; } @keyframes slide-in-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } @keyframes slide-out-left { 0% { transform: translateX(100%); } 100% { transform: translateX(200%); } } @keyframes slide-in-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } @keyframes slide-out-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0%); } } /** The CSSTransition element creates a containing div without a class */ .kkart-slide-animation > div { width: 100%; white-space: nowrap; overflow: hidden; display: flex; } .kkart-slide-animation.animate-left .slide-enter-active { animation: slide-in-left; animation-duration: 200ms; } .kkart-slide-animation.animate-left .slide-exit-active { animation: slide-out-left; animation-duration: 200ms; } .kkart-slide-animation.animate-right .slide-enter-active { animation: slide-in-right; animation-duration: 200ms; } .kkart-slide-animation.animate-right .slide-exit-active { animation: slide-out-right; animation-duration: 200ms; } @media screen and (prefers-reduced-motion: reduce) { .kkart-slide-animation .slide-enter-active, .kkart-slide-animation .slide-exit-active { animation: none !important; } } .kkart-calendar { width: 100%; background-color: #f0f0f0; border-top: 1px solid #ccc; height: 396px; } .kkart-calendar.is-mobile { height: 100%; } .kkart-calendar__react-dates { width: 100%; overflow-x: hidden; } .kkart-calendar__react-dates .DayPicker { margin: 0 auto; } .kkart-calendar__react-dates .CalendarMonth_table { margin-top: 10px; } .kkart-calendar__react-dates .CalendarDay__selected_span { background: #007cba; background: var(--wp-admin-theme-color); border: 1px solid #ccc; } .kkart-calendar__react-dates .CalendarDay__selected_span:hover { background: #006ba1; background: var(--wp-admin-theme-color-darker-10); border: 1px solid #f0f0f0; } .kkart-calendar__react-dates .CalendarDay__selected { background: #005a87; background: var(--wp-admin-theme-color-darker-20); border: 1px solid #ccc; } .kkart-calendar__react-dates .CalendarDay__selected:hover { background: #006ba1; background: var(--wp-admin-theme-color-darker-10); border: 1px solid #f0f0f0; } .kkart-calendar__react-dates .CalendarDay__hovered_span { background: #006ba1; background: var(--wp-admin-theme-color-darker-10); border: 1px solid #f0f0f0; color: #fff; } .kkart-calendar__react-dates .CalendarDay__hovered_span:hover { color: #fff; background: #007cba; background: var(--wp-admin-theme-color); } .kkart-calendar__react-dates .CalendarDay__blocked_out_of_range { color: #ccc; } .kkart-calendar__react-dates .DayPicker_transitionContainer, .kkart-calendar__react-dates .CalendarMonthGrid, .kkart-calendar__react-dates .CalendarMonth, .kkart-calendar__react-dates .DayPicker { background-color: #f0f0f0; } .kkart-calendar__react-dates .DayPicker_weekHeader_li { color: #757575; } .kkart-calendar__react-dates .DayPickerNavigation_button:focus { outline: 2px solid #bfe7f3; } .kkart-calendar__react-dates.is-core-datepicker .components-datetime__date { padding-right: 0; } .kkart-calendar__react-dates.is-core-datepicker .CalendarDay__default { background-color: transparent; } .kkart-calendar__react-dates.is-core-datepicker .CalendarDay__selected { background: #533582; border: none; } .kkart-calendar__inputs { padding: 1em; width: 100%; max-width: 500px; display: -ms-grid; display: grid; -ms-grid-columns: 43% 14% 43%; grid-template-columns: 43% 14% 43%; margin: 0 auto; } .kkart-calendar__inputs .components-base-control { margin: 0; } .kkart-calendar__inputs-to { display: flex; align-items: center; justify-content: center; -ms-grid-column: 2; grid-column-start: 2; } .kkart-calendar__input { position: relative; } .kkart-calendar__input .dashicons-calendar { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; } .kkart-calendar__input .dashicons-calendar path { fill: #757575; } .kkart-calendar__input:first-child { -ms-grid-column: 1; grid-column-start: 1; } .kkart-calendar__input:last-child { -ms-grid-column: 3; grid-column-start: 3; } .kkart-calendar__input.is-empty .dashicons-calendar path { fill: #757575; } .kkart-calendar__input.is-error .dashicons-calendar path { fill: #d94f4f; } .kkart-calendar__input.is-error .kkart-calendar__input-text { border: 1px solid #d94f4f; box-shadow: inset 0 0 8px #d94f4f; } .kkart-calendar__input.is-error .kkart-calendar__input-text:focus { box-shadow: inset 0 0 8px #d94f4f, 0 0 6px rgba(30, 140, 190, 0.8); } .kkart-calendar__input .kkart-calendar__input-text { color: #757575; border-radius: 3px; padding: 10px 30px 10px 10px; width: 100%; font-size: 13px; font-size: 0.8125rem; } .kkart-calendar__input .kkart-calendar__input-text:-ms-input-placeholder { color: #757575; } .kkart-calendar__input .kkart-calendar__input-text::placeholder { color: #757575; } .kkart-filters-date__content.is-mobile .kkart-calendar__input-error .components-popover__content { height: initial; } .kkart-calendar__input-error { display: none; } .is-error .kkart-calendar__input-text:focus + span .kkart-calendar__input-error { display: block; left: 50% !important; position: absolute; top: auto !important; } .kkart-calendar__input-error .components-popover__content { background-color: #757575; color: #fff; padding: 0.5em; border: none; } .kkart-calendar__input-error.components-popover .components-popover__content { min-width: 100px; width: 100px; text-align: center; } .kkart-calendar__input-error.components-popover:not(.no-arrow):not(.is-mobile).is-bottom::before { border-bottom-color: #757575; z-index: 1; top: -6px; } .kkart-calendar__input-error.components-popover:not(.no-arrow):not(.is-mobile).is-top::after { border-top-color: #757575; z-index: 1; top: 0; } .kkart-calendar__date-picker-title { font-size: 12px; font-size: 0.75rem; font-weight: 100; text-transform: uppercase; text-align: center; color: #757575; width: 100%; margin: 0; padding: 1em; background-color: #fff; } .kkart-card { margin-bottom: 24px; background: #fff; border-radius: 3px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); transition: box-shadow 0.2s cubic-bezier(0.4, 1, 0.4, 1); } @media (max-width: 782px) { .kkart-card { margin-bottom: 12px; width: auto; } } .kkart-card.is-inactive { background-color: #f6f7f7; box-shadow: none; } .kkart-card__header { padding: 16px; display: -ms-grid; display: grid; align-items: center; border-top-right-radius: 3px; border-top-right-radius: 4px; } .has-action .kkart-card__header { -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; } .has-menu .kkart-card__header { -ms-grid-columns: auto 24px; grid-template-columns: auto 24px; } .has-menu.has-action .kkart-card__header { grid-gap: 12px; -ms-grid-columns: auto 1fr 24px; grid-template-columns: auto 1fr 24px; } .kkart-card__header-item { -ms-grid-row-align: center; } .kkart-card__header-item:nth-child(1) { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 1; grid-column-end: 2; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; } .kkart-card__header-item:nth-child(2) { -ms-grid-column: 2; grid-column-start: 2; -ms-grid-column-span: 1; grid-column-end: 3; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; } .kkart-card__header-item:nth-child(3) { -ms-grid-column: 3; grid-column-start: 3; -ms-grid-column-span: 1; grid-column-end: 4; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; } .kkart-card__action, .kkart-card__menu { text-align: left; } .kkart-card__body { padding: 16px; } .kkart-ellipsis-menu__toggle { padding: 0; } .kkart-card__title { margin: 0; font-size: 24px; font-size: 1.5rem; line-height: 1.2; font-weight: 400; } .kkart-card__description { font-size: 16px; font-size: 1rem; line-height: 1.5; color: #646970; margin-top: 12px; margin-bottom: 0; font-weight: 400; } .kkart-chart { margin-top: -16px; margin-bottom: 24px; background: #fff; border: 1px solid #ccc; border-top: 0; } @media (max-width: 782px) { .kkart-chart { margin-right: -16px; margin-left: -16px; margin-bottom: 12px; border-right: none; border-left: none; width: auto; } } .kkart-chart .kkart-chart__header { min-height: 50px; border-bottom: 1px solid #ccc; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; width: 100%; } .kkart-chart .kkart-chart__header .kkart-chart__title { height: 18px; color: #24292d; font-size: 15px; font-weight: 600; line-height: 18px; margin-right: 16px; margin-left: 16px; } .kkart-chart .kkart-chart__body { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; width: 100%; } .kkart-chart .kkart-chart__body.kkart-chart__body-column { flex-direction: column; } .kkart-chart .kkart-chart__footer { width: 100%; } .kkart-chart-placeholder { animation: loading-fade 1.6s ease-in-out infinite; background-color: #f0f0f0; color: transparent; padding: 0; width: 100%; display: flex; align-items: center; justify-content: center; } .kkart-chart-placeholder::after { content: '\00a0'; } @media screen and (prefers-reduced-motion: reduce) { .kkart-chart-placeholder { animation: none; } } .kkart-chart-placeholder .components-spinner { margin: 0; } .kkart-chart__interval-select { align-items: start; border-left: 1px solid #ccc; display: flex; flex-direction: column; justify-content: center; margin: 0 auto 0 0; min-height: 50px; padding: 8px 16px 0 16px; } @media (max-width: 960px) { .kkart-chart__interval-select { width: 100%; order: 1; margin-top: -8px; margin-right: 0; padding-right: 8px; border-left: 0; min-height: 0; } } #wpbody .kkart-chart__interval-select .components-select-control__input { font-size: 13px; font-size: 0.8125rem; border: 0; box-shadow: none; } #wpbody .kkart-chart__interval-select .components-select-control__input:not(:disabled):not([aria-disabled='true']):focus { background-color: #fff; color: #1e1e1e; box-shadow: inset 0 0 0 1px #757575, inset 0 0 0 2px #fff; outline: 2px solid transparent; outline-offset: -2px; } .kkart-chart__types { padding: 0 8px; white-space: nowrap; } .kkart-chart__type-button { background: transparent !important; } .kkart-chart__type-button.components-button { color: #ccc; display: inline-flex; padding: 8px; } .kkart-chart__type-button.components-button.kkart-chart__type-button-selected { color: #757575; } @media (max-width: 960px) { .kkart-summary + .kkart-chart .kkart-chart__title { display: none; } .kkart-summary + .kkart-chart .kkart-chart__interval-select { width: auto; order: 0; margin-top: 0; } } /** * Internal Dependencies */ .kkart-legend.has-total { padding-bottom: 50px; position: relative; } .kkart-legend.kkart-legend__direction-column { border-left: 1px solid #ccc; min-width: 320px; } .kkart-chart__footer .kkart-legend.kkart-legend__direction-column { border-left: none; } .kkart-legend__list { color: #24292d; display: flex; height: 100%; margin: 0; } .kkart-legend__direction-column .kkart-legend__list { flex-direction: column; height: 300px; overflow: auto; } .kkart-chart__footer .kkart-legend__direction-column .kkart-legend__list { border-top: 1px solid #ccc; height: 100%; max-height: none; min-height: none; } .has-total.kkart-legend__direction-column .kkart-legend__list { height: 250px; } .kkart-chart__footer .has-total.kkart-legend__direction-column .kkart-legend__list { height: auto; max-height: 220px; min-height: none; } .kkart-legend__direction-row .kkart-legend__list { flex-direction: row; } .kkart-legend__item > button { display: flex; justify-content: center; align-items: center; background-color: #fff; color: #757575; cursor: pointer; display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; width: 100%; border: none; padding: 0; } .kkart-legend__item > button .kkart-legend__item-container { display: flex; flex-direction: row; flex-wrap: nowrap; position: relative; padding: 3px 24px 3px 0; font-size: 13px; -webkit-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .kkart-legend__item > button .kkart-legend__item-container:hover input ~ .kkart-legend__item-checkmark { background-color: #e0e0e0; } .kkart-legend__item > button .kkart-legend__item-container .kkart-legend__item-checkmark { border: 1px solid #ccc; position: absolute; top: 4px; right: 0; height: 16px; width: 16px; background-color: #fff; } .kkart-legend__item > button .kkart-legend__item-container .kkart-legend__item-checkmark::after { content: ''; position: absolute; display: none; } .kkart-legend__item > button .kkart-legend__item-container .kkart-legend__item-checkmark.kkart-legend__item-checkmark-checked { background-color: currentColor; border-color: currentColor; } .kkart-legend__item > button .kkart-legend__item-container .kkart-legend__item-checkmark.kkart-legend__item-checkmark-checked::after { display: block; right: 5px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); } .rtl .kkart-legend__item > button .kkart-legend__item-container .kkart-legend__item-checkmark.kkart-legend__item-checkmark-checked::after { transform: rotate(45deg) scaleX(-1); } .kkart-legend__item > button .kkart-legend__item-container .kkart-legend__item-total { margin-right: auto; font-weight: bold; } .kkart-legend__item > button:focus { outline: none; } .kkart-legend__item > button:focus .kkart-legend__item-container .kkart-legend__item-checkmark { outline: 2px solid #ccc; } .kkart-legend__item > button:hover { background-color: #f0f0f0; } .kkart-legend__direction-column .kkart-legend__item { margin: 0; padding: 0; } .kkart-legend__direction-column .kkart-legend__item > button { min-height: 36px; padding: 0 17px; text-align: right; } .kkart-legend__direction-column .kkart-legend__item:first-child { margin-top: 12px; } .kkart-legend__direction-column .kkart-legend__item:last-child::after { content: ''; display: block; height: 12px; width: 100%; } .kkart-legend__direction-row .kkart-legend__item { padding: 0; margin: 0; } .kkart-legend__direction-row .kkart-legend__item > button { padding: 0 17px; } .kkart-legend__direction-row .kkart-legend__item > button .kkart-legend__item-container { height: 50px; align-items: center; } .kkart-legend__direction-row .kkart-legend__item > button .kkart-legend__item-container .kkart-legend__item-checkmark { top: 17px; } .kkart-legend__direction-row .kkart-legend__item > button .kkart-legend__item-container .kkart-legend__item-title { margin-left: 17px; } .kkart-legend__total { align-items: center; background: #fff; border-top: 1px solid #ccc; bottom: 0; color: #757575; display: flex; height: 50px; justify-content: center; right: 0; position: absolute; left: 0; text-transform: uppercase; } .kkart-legend__total::before { background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); bottom: 100%; content: ''; height: 20px; right: 0; opacity: 0; pointer-events: none; position: absolute; left: 0; transition: opacity 0.3s; } .is-scrollable .kkart-legend__total::before { opacity: 1; } .kkart-chart__body-row .d3-chart__container { width: calc(100% - 320px); } .d3-chart__container { position: relative; width: 100%; } .d3-chart__container svg { overflow: visible; } .d3-chart__container .d3-chart__empty-message { align-items: center; bottom: 0; color: #757575; display: flex; font-size: 18px; font-size: 1.125rem; font-weight: bold; justify-content: center; right: 0; line-height: 1.5; margin: 0 auto; max-width: 50%; padding-bottom: 48px; pointer-events: none; position: absolute; left: 0; top: 0; text-align: center; } @media (max-width: 782px) { .d3-chart__container .d3-chart__empty-message { font-size: 13px; font-size: 0.8125rem; } } .d3-chart__container .d3-chart__tooltip { border: 1px solid #ccc; position: absolute; display: flex; min-width: 324px; height: auto; background-color: #fff; text-align: right; padding: 17px; box-shadow: 0 3px 20px 0 rgba(18, 24, 30, 0.1), 0 1px 3px 0 rgba(18, 24, 30, 0.1); flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; pointer-events: none; visibility: hidden; z-index: 1; } @media (max-width: 600px) { .d3-chart__container .d3-chart__tooltip { min-width: auto; width: calc(100% - 48px); } } .d3-chart__container .d3-chart__tooltip h4 { text-align: right; line-height: 18px; width: 100%; text-transform: uppercase; font-size: 11px; color: #757575; margin-top: 0; } .d3-chart__container .d3-chart__tooltip ul { list-style: none; margin-bottom: 2px; margin-top: 2px; font-size: 14px; } .d3-chart__container .d3-chart__tooltip ul li { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } .d3-chart__container .d3-chart__tooltip ul li.key-row { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } .d3-chart__container .d3-chart__tooltip ul li.key-row .key-container { width: 100%; min-width: 100px; } .d3-chart__container .d3-chart__tooltip ul li.key-row .key-container .key-color { display: inline-block; width: 16px; height: 16px; margin-left: 8px; } .d3-chart__container .d3-chart__tooltip ul li.key-row .key-container .key-key { margin-left: 6px; } .d3-chart__container .d3-chart__tooltip ul li.key-row .key-value { font-weight: 600; } .d3-chart__container .bargrouprect { shape-rendering: crispEdges; } .d3-chart__container .grid .tick line { stroke: #f0f0f0; stroke-width: 1; shape-rendering: crispEdges; } .d3-chart__container .grid .tick:first-child line { stroke: #757575; } .d3-chart__container .grid.with-positive-ticks .tick:last-child line { opacity: 0; } .d3-chart__container .tick { padding-top: 10px; stroke-width: 1; } .d3-chart__container .y-axis { text-anchor: start; } .d3-chart__container .y-axis.ticktext { fill: #757575; } .d3-chart__container .y-axis .tick text, .d3-chart__container .axis-month .tick text { font-size: 10px; } .d3-chart__container .focus-grid line { stroke: rgba(0, 0, 0, 0.1); stroke-width: 1px; } .d3-chart__container .barfocus { fill: rgba(0, 0, 0, 0.1); } .d3-base { background: transparent; overflow-x: auto; overflow-y: hidden; position: relative; width: 100%; height: 100%; } .kkart-count { border: 1px solid; border-radius: 10px; padding: 0 8px; font-weight: bold; } .kkart-page .kkart-dropdown-button { background-color: #fff; position: relative; border: 1px solid #f0f0f0; color: #757575; border-radius: 4px; padding: 0 0 0 40px; width: 100%; height: auto; } .kkart-page .kkart-dropdown-button::after { content: ''; background: transparent url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat left 0 top 55%; position: absolute; left: 14px; width: 32px; height: 48px; transition: transform ease 0.2s; } @media screen and (prefers-reduced-motion: reduce) { .kkart-page .kkart-dropdown-button::after { transition: none; } } .kkart-page .kkart-dropdown-button.is-open::after { transform: translateX(-12px) translateY(2px) rotate(-180deg); } .kkart-page .kkart-dropdown-button:hover, .kkart-page .kkart-dropdown-button:active, .kkart-page .kkart-dropdown-button.is-open { background-color: #f0f0f0; } .kkart-page .kkart-dropdown-button.is-multi-line .kkart-dropdown-button__labels { flex-direction: column; } .kkart-page .kkart-dropdown-button:not(:focus):not(.is-open) { border-color: #757575; } .kkart-dropdown-button__labels { text-align: right; padding: 8px 12px; min-height: 48px; display: flex; align-items: center; width: 100%; justify-content: space-around; } @media (max-width: 400px) { .kkart-dropdown-button__labels { min-height: 46px; } } .kkart-dropdown-button__labels span { width: 100%; text-align: right; } .kkart-dropdown-button__labels span:last-child { font-size: 12px; font-size: 0.75rem; margin: 0; } .kkart-dropdown-button__labels span:first-child { font-size: 13px; font-size: 0.8125rem; font-weight: 600; } @media (max-width: 400px) { .kkart-dropdown-button__labels span:last-child { font-size: 10px; font-size: 0.625rem; } .kkart-dropdown-button__labels span:first-child { font-size: 12px; font-size: 0.75rem; } } .kkart-ellipsis-menu { text-align: center; } .kkart-ellipsis-menu__toggle { justify-content: center; vertical-align: middle; width: 24px; } .kkart-ellipsis-menu__toggle .dashicon { transform: rotate(-90deg); } .kkart-ellipsis-menu__popover { text-align: right; } .kkart-ellipsis-menu__popover:not(.is-mobile)::before, .kkart-ellipsis-menu__popover:not(.is-mobile)::after { margin-right: -16px; } .kkart-ellipsis-menu__popover .components-popover__content { width: 182px; padding: 2px; } .kkart-ellipsis-menu__popover .kkart-ellipsis-menu__content { width: 100%; } .kkart-ellipsis-menu__popover .kkart-ellipsis-menu__title, .kkart-ellipsis-menu__popover .kkart-ellipsis-menu__item { padding: 4px 12px; } .kkart-ellipsis-menu__popover .kkart-ellipsis-menu__item { cursor: pointer; color: #757575; } .kkart-ellipsis-menu__popover .kkart-ellipsis-menu__item:focus { box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff; outline: 2px solid transparent; outline-offset: -2px; } .kkart-ellipsis-menu__popover .kkart-ellipsis-menu__item .components-form-toggle { margin-left: 8px; } .kkart-ellipsis-menu__popover .components-base-control__label, .kkart-ellipsis-menu__popover .kkart-ellipsis-menu__title { color: #1e1e1e; padding-top: 8px; padding-bottom: 8px; font-size: 15px; font-size: 0.9375rem; margin-bottom: 4px; } .kkart-ellipsis-menu__popover .components-toggle-control .components-base-control__field { margin: 4px 0; } .kkart-ellipsis-menu__popover .components-base-control { margin: 0; } .kkart-empty-content { margin-bottom: 16px; text-align: center; } .kkart-empty-content .kkart-empty-content__illustration { max-width: 100%; } .kkart-empty-content .kkart-empty-content__actions .components-button + .components-button { margin-right: 16px; } .kkart-filters-advanced { margin: 24px 0; } .kkart-filters-advanced .kkart-card__header { padding: 8px 16px; } .kkart-filters-advanced .kkart-card__body { padding: 0; } .kkart-filters-advanced .components-select-control__input { height: 38px; padding: 0 8px 0 0; margin: 0; } .kkart-filters-advanced .components-base-control__field { margin-bottom: 0; } @media (max-width: 782px) { .kkart-filters-advanced { margin: 16px 0; border: 1px solid #ccc; } } @media (max-width: 400px) { .kkart-filters-advanced { margin: 12px 0; } } .kkart-filters-advanced__title-select { width: 70px; display: inline-block; margin: 0 8px; } .kkart-filters-advanced__list { margin: 0; } .kkart-filters-advanced__list-item { padding: 0 0 0 16px; margin: 0; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 40px; grid-template-columns: 1fr 40px; background-color: #f0f0f0; border-bottom: 1px solid #ccc; } .kkart-filters-advanced__list-item:hover { background-color: #e0e0e0; } .kkart-filters-advanced__list-item .kkart-filters-advanced__line-item:nth-child(1) { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 1; grid-column-end: 2; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; } .kkart-filters-advanced__list-item .kkart-filters-advanced__line-item:nth-child(2) { -ms-grid-column: 2; grid-column-start: 2; -ms-grid-column-span: 1; grid-column-end: 3; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; } .kkart-filters-advanced__list-item fieldset { padding: 8px 16px 8px 8px; } .kkart-filters-advanced__list-item .kkart-filters-advanced__remove { width: 40px; height: 38px; -ms-grid-row-align: center; align-self: center; color: #757575; padding: 8px; } @media (max-width: 400px) { .kkart-filters-advanced__list-item .kkart-filters-advanced__remove { position: absolute; top: 0; left: 4px; } } .kkart-filters-advanced__list-item .components-form-token-field { border-radius: 4px; } @media (max-width: 400px) { .kkart-filters-advanced__list-item { display: block; position: relative; padding: 8px 0 0 8px; } } .kkart-filters-advanced__add-filter { padding: 12px; margin: 0; color: #7f54b3; display: block; background-color: #f0f0f0; border-bottom: 1px solid #ccc; } .kkart-filters-advanced__add-filter:hover { background-color: #e0e0e0; } .kkart-filters-advanced__add-filter div div { display: inline-block; } .kkart-filters-advanced__add-filter .components-popover:not(.is-mobile) .components-popover__content { min-width: 180px; } .kkart-filters-advanced__add-filter .components-popover__content > div { width: 100%; } .kkart-filters-advanced__fieldset { display: flex; align-items: center; } .kkart-filters-advanced__fieldset > div { padding: 0 4px; } @media (max-width: 782px) { .kkart-filters-advanced__fieldset > div { width: 100%; padding: 4px 0; } } @media (max-width: 782px) { .kkart-filters-advanced__fieldset { display: block; } } .kkart-filters-advanced__fieldset.is-english { display: -ms-grid; display: grid; -ms-grid-columns: 100px 150px 1fr; grid-template-columns: 100px 150px 1fr; } .kkart-filters-advanced__fieldset.is-english .kkart-filters-advanced__fieldset-item:nth-child(1) { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 1; grid-column-end: 2; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; } .kkart-filters-advanced__fieldset.is-english .kkart-filters-advanced__fieldset-item:nth-child(2) { -ms-grid-column: 2; grid-column-start: 2; -ms-grid-column-span: 1; grid-column-end: 3; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; } .kkart-filters-advanced__fieldset.is-english .kkart-filters-advanced__fieldset-item:nth-child(3) { -ms-grid-column: 3; grid-column-start: 3; -ms-grid-column-span: 1; grid-column-end: 4; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; } .kkart-filters-advanced__fieldset.is-english .kkart-filters-advanced__fieldset-item:nth-child(1) { display: flex; align-items: center; } .kkart-filters-advanced__fieldset.is-english .kkart-filters-advanced__fieldset-item .components-base-control__field { margin-bottom: 0; } @media (max-width: 782px) { .kkart-filters-advanced__fieldset.is-english { display: block; } } .kkart-filters-advanced__rule { width: 150px; } .kkart-filters-advanced__input { width: 100%; } .kkart-filters-advanced__input.kkart-search.kkart-select-control .kkart-select-control__control { height: 38px; } .kkart-filters-advanced__add-filter-dropdown { display: inline-block; } .kkart-filters-advanced__add-button { align-items: center; color: #757575; padding: 8px; } .kkart-filters-advanced__add-button svg { fill: currentColor; margin: 0 0 0 6px; } .kkart-filters-advanced__add-button.components-icon-button:not(:disabled):not([aria-disabled='true']):not(.is-default):hover { color: #af7dd1; } .kkart-filters-advanced__add-button:not(:disabled):not([aria-disabled='true']):focus { color: #7f54b3; background-color: transparent; } .kkart-filters-advanced__controls { padding: 8px 16px; display: flex; align-items: center; } .kkart-filters-advanced__controls .components-button { margin-left: 16px; } .kkart-filters-advanced__add-dropdown { padding: 8px 0; } .kkart-filters-advanced__add-dropdown li { margin: 0; } .kkart-filters-advanced__add-dropdown .components-button { width: 100%; padding: 8px; } .kkart-filters-advanced__add-dropdown .components-button:hover { background-color: #e0e0e0; } .kkart-filters-advanced__add-dropdown .components-button:not(:disabled):not([aria-disabled='true']):focus { background-color: #f0f0f0; box-shadow: none; } .kkart-filters-advanced__input-range { align-items: center; display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .kkart-filters-advanced__input-range.is-between { -ms-grid-columns: 1fr 36px 1fr; grid-template-columns: 1fr 36px 1fr; } .kkart-filters-advanced__input-range input { height: 38px; margin: 0; } .kkart-filters-advanced__input-range .separator { text-align: center; } .kkart-filters-advanced__attribute-fieldset { align-items: center; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 20px 1fr; grid-template-columns: 1fr 20px 1fr; } .kkart-filters-advanced__attribute-fieldset .kkart-filters-advanced__attribute-field-separator { padding: 0 6px; } .kkart-filters-date__content.is-mobile .components-popover__header { border: none; height: 0; } .kkart-filters-date__content.is-mobile .components-popover__close { transform: translateY(22px); } .kkart-filters-date__content.is-mobile .components-tab-panel__tab-content { height: calc(100% - 46px); overflow: auto; } .kkart-filters-date__tabs { height: calc(100% - 42px); border-top: 1px solid #ccc; } .kkart-filters-date__tabs .components-tab-panel__tabs { display: flex; justify-content: space-between; } .kkart-filters-date__tabs .components-tab-panel__tabs .components-button { display: block; text-align: center; width: 50%; } .kkart-filters-date__tabs .components-tab-panel__tab-content { display: flex; flex-direction: column; align-items: center; } .kkart-filters-date__tabs:nth-child(1) { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 1; grid-column-end: 2; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; } .kkart-filters-date__tabs:nth-child(2) { -ms-grid-column: 2; grid-column-start: 2; -ms-grid-column-span: 1; grid-column-end: 3; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: 2; } .kkart-filters-date__text { font-size: 12px; font-size: 0.75rem; font-weight: 100; text-transform: uppercase; text-align: center; color: #757575; width: 100%; margin: 0; padding: 1em; background-color: #fff; } .kkart-filters-date__content-controls { display: flex; flex-direction: column; width: 100%; align-items: center; padding-bottom: 1em; background-color: #fff; } .kkart-filters-date__content-controls.is-custom { border-top: 1px solid #ccc; } .kkart-filters-date__button-group { padding-top: 1em; display: flex; justify-content: center; width: 100%; } .kkart-filters-date__button-group .kkart-filters-date__button { justify-content: center; width: 40%; height: 34px; margin: 0 12px; } .kkart-filters-filter__content.is-mobile .components-popover__header-title { font-size: 12px; font-size: 0.75rem; font-weight: 100; text-transform: uppercase; text-align: center; color: #757575; } .kkart-filters-filter__content.is-mobile .kkart-filters-filter__content-list-item:last-child { border-bottom: 1px solid #ccc; } .kkart-filters-filter__content-list { margin: 0; width: 100%; min-width: 100%; } .kkart-filters-filter__content-list-item { border: 1px solid transparent; border-bottom: 1px solid #ccc; margin: 0; } .kkart-filters-filter__content-list-item:last-child { border-bottom: 1px solid transparent; } .kkart-filters-filter__content-list-item.is-selected .kkart-filters-filter__button { background-color: #fff; } .kkart-filters-filter__content-list-item.is-selected .kkart-filters-filter__button.components-button:not(:disabled):not([aria-disabled='true']):focus { background-color: #fff; } .kkart-filters-filter__content-list-item.is-selected .kkart-filters-filter__button::before { content: ''; width: 8px; height: 8px; background-color: #7f54b3; position: absolute; top: 50%; right: 1em; transform: translate(-50%, -50%); } .kkart-filters-filter__content-list-item .kkart-filters-filter__button { position: relative; align-items: center; display: flex; width: 100%; padding: 1em 3em 1em 1em; background-color: #f0f0f0; text-align: right; } .kkart-filters-filter__content-list-item .kkart-filters-filter__button.components-button { color: #757575; } .kkart-filters-filter__content-list-item .kkart-filters-filter__button:hover { background-color: #e0e0e0; color: #757575; } .kkart-filters-filter__content-list-item .kkart-filters-filter__button.components-button:not(:disabled):not([aria-disabled='true']):focus { background-color: #f0f0f0; } .kkart-filters-filter__content-list-item .kkart-filters-filter__button svg { position: absolute; right: 1em; } .kkart-filters .components-base-control__field { margin-bottom: 0; } @media (max-width: 400px) { .kkart-filters { margin-right: -8px; margin-left: -8px; } } .kkart-filters__basic-filters { display: flex; margin-bottom: 24px; } @media (max-width: 1280px) { .kkart-filters__basic-filters { flex-direction: column; } } @media (max-width: 782px) { .kkart-filters__basic-filters { margin-bottom: 16px; } } .kkart-filters-filter { width: 25%; padding: 0 12px; min-height: 82px; display: flex; flex-direction: column; justify-content: flex-end; } .kkart-filters-filter:first-child { padding-right: 0; } .kkart-filters-filter:last-child { padding-left: 0; } @media (max-width: 1440px) { .kkart-filters-filter { width: 33.3%; } } @media (max-width: 1280px) { .kkart-filters-filter { width: 50%; padding: 0; min-height: 78px; } } @media (max-width: 782px) { .kkart-filters-filter { width: 100%; } } .kkart-filters-label { margin: 7px 0; display: block; } @media (max-width: 1280px) { .kkart-filters-label { margin: 5px 0; } } .kkart-filters-date__content .components-popover__content, .kkart-filters-filter__content .components-popover__content { width: 320px; border: 1px solid #ccc; background-color: #fff; } .kkart-filters-date__content .kkart-calendar__input-error .components-popover__content, .kkart-filters-filter__content .kkart-calendar__input-error .components-popover__content { background-color: #757575; } .kkart-filters-date__content.is-mobile .components-popover__content, .kkart-filters-filter__content.is-mobile .components-popover__content { width: 100%; height: 100%; border: none; } .kkart-filters__compare .kkart-card__body { padding: 0; } .kkart-filters__compare-body { padding: 16px; background-color: #f0f0f0; border-bottom: 1px solid #f0f0f0; } .kkart-filters__compare-footer { padding: 16px; display: flex; align-items: center; } .kkart-filters__compare-footer .components-button { margin-left: 16px; } .kkart-filters-filter__search .kkart-search__autocomplete-results { position: static; } .kkart-filters-filter__search .kkart-search__inline-container { overflow: hidden; } .kkart-filters-filter__search .kkart-search__inline-container:not(.is-active) { border: none; } .kkart-filters-advanced__list-item .components-base-control + .components-base-control { margin-bottom: 0; } .kkart-flag span { vertical-align: middle; } .kkart-flag .kkart-flag__fallback { background: #f0f0f0; color: transparent; width: 24px; height: 18px; display: block; overflow: hidden; } .kkart-gravatar { border-radius: 50%; } .kkart-image-upload .kkart-image-upload__image-preview { font-size: 16px; margin-left: 2em; } .kkart-image-upload .kkart-image-upload__image-preview img { max-width: 240px; height: auto; } .kkart-image-upload .kkart-image-upload__add-image { margin: 16px 0; } .kkart-image-upload.has-image { display: flex; align-items: center; } .kkart-list { margin: 0; padding: 0; } .kkart-list__item { display: flex; align-items: center; margin-bottom: 0; background-color: #fff; } .kkart-list__item.has-action { cursor: pointer; } .kkart-list__item > .kkart-list__item-inner { text-decoration: none; width: 100%; display: flex; align-items: center; padding: 16px 24px; } .kkart-list__item > .kkart-list__item-inner:focus { box-shadow: inset 0 0 0 1px #006088, inset 0 0 0 2px #fff; } .kkart-list__item .kkart-list__item-title { color: #1d2327; } .kkart-list__item .kkart-list__item-content { margin-top: 4px; display: block; font-size: 14px; line-height: 20px; color: #50575d; } .kkart-list__item .kkart-list__item-before { margin-left: 20px; display: flex; align-items: center; } .kkart-list__item .kkart-list__item-after { margin-right: 16px; display: flex; align-items: center; margin-right: auto; } .kkart-list__item:not(:first-child) { border-top: 1px solid #f0f0f0; } .kkart-list__item:hover { background-color: #f0f0f0; } .kkart-list__item:hover .kkart-list__item-title { color: color(#007cba shade(20%)); color: color(var(--wp-admin-theme-color) shade(20%)); } .kkart-list__item:hover .kkart-list__item-before > svg { fill: color(#007cba shade(20%)); fill: color(var(--wp-admin-theme-color) shade(20%)); } .kkart-list__item .kkart-list__item-title { color: #007cba; color: var(--wp-admin-theme-color); } .kkart-list__item .kkart-list__item-before > svg { fill: #007cba; fill: var(--wp-admin-theme-color); } .kkart-list__item .kkart-list__item-after > svg { fill: #1e1e1e; } .kkart-list__item.is-complete .kkart-task__icon { background-color: #007cba; background-color: var(--wp-admin-theme-color); } .kkart-list__item.is-complete .kkart-list__item-title { color: #757575; } .kkart-list__item.is-complete .kkart-list__item-content { display: none; } .kkart-list__item-title { color: #2c3338; } .kkart-list__item-content { color: #646970; } .kkart-list__item-enter { opacity: 0; max-height: 0; transform: translateX(-50%); } .kkart-list__item-enter-active { opacity: 1; max-height: 100vh; transform: translateX(0%); transition: opacity 500ms, transform 500ms, max-height 500ms; } .kkart-list__item-exit { opacity: 1; max-height: 100vh; transform: translateX(0%); } .kkart-list__item-exit-active { opacity: 0; max-height: 0; transform: translateX(-50%); transition: opacity 500ms, transform 500ms, max-height 500ms; } .kkart-order-status { display: flex; align-items: center; } .kkart-order-status__indicator { min-width: 16px; width: 16px; height: 16px; display: block; background: #ccc; margin-left: 8px; border-radius: 50%; border: 3px solid #f0f0f0; } .kkart-order-status__indicator.is-processing { background: #4ab866; border-color: #93d5a4; } .kkart-order-status__indicator.is-on-hold { background: #ffb900; border-color: #ffd566; } .kkart-pagination { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; } @media (max-width: 782px) { .kkart-pagination { flex-direction: column; } } .kkart-pagination input { border-radius: 4px; } .kkart-pagination__page-arrows { display: flex; flex-direction: row; } .kkart-pagination__page-arrows-buttons { display: inline-flex; align-items: baseline; border: 1px solid #b5bfc9; border-radius: 4px; background: #f0f2f4; } .kkart-pagination__page-arrows-buttons .components-button:not(:disabled):not([aria-disabled='true']) { color: #24292d; height: 30px; width: 32px; justify-content: center; } .kkart-pagination__page-arrows-buttons .components-button:not(:disabled):not([aria-disabled='true']):hover { color: #757575; } .kkart-pagination__page-arrows-buttons button:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 2px solid #d3d9de; } .kkart-pagination__page-arrows-buttons button:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .kkart-pagination__page-arrows-buttons .kkart-pagination__link { padding: 4px; } .kkart-pagination__page-arrows-label { margin-top: 8px; margin-left: 8px; } .kkart-pagination__page-picker { margin-right: 16px; } @media (max-width: 782px) { .kkart-pagination__page-picker { margin-top: 16px; margin-right: 0; } } .kkart-pagination__page-picker .kkart-pagination__page-picker-input { margin-right: 8px; width: 60px; height: 34px; box-shadow: none; } .kkart-pagination__per-page-picker { margin-right: 16px; } @media (max-width: 782px) { .kkart-pagination__per-page-picker { margin-top: 16px; margin-right: 0; } } .kkart-pagination__per-page-picker .components-base-control { margin-bottom: 0; } .kkart-pagination__per-page-picker .components-base-control .components-base-control__field { display: flex; flex-direction: row; align-items: baseline; margin-bottom: 0; } .kkart-pagination__per-page-picker .components-base-control .components-select-control__input { width: 60px; height: 34px; box-shadow: none; } .kkart-pagination__per-page-picker .components-base-control .components-base-control__label { margin-left: 8px; } .kkart-pagination__page-picker-input.has-error, .kkart-pagination__page-picker-input.has-error:focus { border-color: #d94f4f; box-shadow: 0 0 2px #d94f4f; } .kkart-pill { border: 1px solid #757575; border-radius: 28px; color: #757575; display: inline-block; padding: 4px 8px; } @media (max-width: 320px) { .kkart-pill { font-size: 11px; } } .kkart-product-image { border-radius: 50%; } .kkart-rating { position: relative; vertical-align: middle; display: inline-block; overflow: hidden; white-space: nowrap; } .kkart-rating .gridicon { fill: #e0e0e0; } .kkart-rating .kkart-rating__star-outline { position: absolute; right: 0; top: 0; white-space: nowrap; overflow: hidden; } .kkart-rating .kkart-rating__star-outline .gridicon { fill: #757575; } .kkart-search.kkart-select-control { position: relative; } .kkart-search.kkart-select-control i.material-icons-outlined { position: absolute; top: 9px; right: 10px; color: #ccc; font-size: 20px; } .kkart-search.kkart-select-control:not(.has-inline-tags) .kkart-tag { margin: 8px 0 0 6px; } .kkart-search.kkart-select-control .kkart-select-control__control { height: auto; border: 1px solid #ccc; font-size: 13px; width: 100%; padding: 3px 36px 3px 2px; border-radius: 4px; border-color: #757575; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .kkart-search.kkart-select-control .kkart-select-control__control.is-active { border-color: #007cba; border-color: var(--wp-admin-theme-color); } .kkart-search.kkart-select-control .components-base-control .kkart-select-control__control-input { margin: 0; font-size: 13px; min-height: auto; } .kkart-search.kkart-select-control .components-base-control .kkart-select-control__control-input[type='number']::-webkit-outer-spin-button, .kkart-search.kkart-select-control .components-base-control .kkart-select-control__control-input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .kkart-search.kkart-select-control .components-base-control .components-base-control__label { font-size: 13px; color: #72777c; margin: 0; width: calc(100% - 36px); top: 50%; right: 36px; } .kkart-search.kkart-select-control .is-active.components-base-control .components-base-control__label, .kkart-search.kkart-select-control .with-value.components-base-control .components-base-control__label, .kkart-search.kkart-select-control.has-inline-tags .has-tags.components-base-control .components-base-control__label { display: none; } .kkart-search.kkart-select-control .components-base-control .kkart-select-control__tags { margin: 0; } .kkart-search.kkart-select-control .components-base-control .kkart-tag { max-height: 24px; } .kkart-search.kkart-select-control .kkart-select-control__listbox { border: 1px solid #ccc; top: 38px; } .kkart-search.kkart-select-control.is-static-results .kkart-select-control__listbox { position: static; } .kkart-search.kkart-select-control .kkart-select-control__option { margin-bottom: 0; display: flex; flex-direction: row; flex-grow: 1; flex-shrink: 0; align-items: center; padding: 12px; color: #7f54b3; text-align: right; background: #f0f0f0; border-bottom: 1px solid #f0f0f0; font-size: 13px; min-height: 43px; } .kkart-search.kkart-select-control .kkart-select-control__option:last-of-type { border-bottom: none; } .kkart-search.kkart-select-control .kkart-select-control__option:hover { box-shadow: none; color: #7f54b3; background: #e0e0e0; } .kkart-search.kkart-select-control .kkart-select-control__option.is-selected, .kkart-search.kkart-select-control .kkart-select-control__option:focus, .kkart-search.kkart-select-control .kkart-select-control__option:active { color: #7f54b3; background: #fff; box-shadow: inset 0 0 0 1px #e0e0e0, inset 0 0 0 2px #24292d; } .kkart-search.kkart-select-control .kkart-select-control__option .kkart-search__result-thumbnail { margin-left: 12px; } .kkart-search__result-name { text-decoration: underline; } .kkart-search-list { width: 100%; padding: 0 0 16px; text-align: right; } .kkart-search-list__selected { margin: 16px 0; padding: 16px 0 0; min-height: 76px; border-top: 1px solid #f0f0f0; } .kkart-search-list__selected .kkart-search-list__selected-header { margin-bottom: 8px; } .kkart-search-list__selected .kkart-search-list__selected-header button { margin-right: 12px; } .kkart-search-list__selected .kkart-tag__text { max-width: 13em; } .kkart-search-list__selected ul { list-style: none; } .kkart-search-list__selected ul li { float: right; } .kkart-search-list__search { margin: 16px 0; padding: 16px 0 0; border-top: 1px solid #f0f0f0; } .kkart-search-list__search .components-base-control__field { margin-bottom: 16px; } .kkart-search-list__list { padding: 0; max-height: 17em; overflow-x: hidden; overflow-y: auto; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; } .kkart-search-list__list.is-loading { padding: 12px 0; text-align: center; border: none; } .kkart-search-list__list.is-not-found { padding: 12px 0; text-align: center; border: none; } .kkart-search-list__list.is-not-found .kkart-search-list__not-found-icon, .kkart-search-list__list.is-not-found .kkart-search-list__not-found-text { display: inline-block; } .kkart-search-list__list.is-not-found .kkart-search-list__not-found-icon { margin-left: 16px; } .kkart-search-list__list.is-not-found .kkart-search-list__not-found-icon .gridicon { vertical-align: top; margin-top: -1px; } .kkart-search-list__list .components-spinner { float: none; margin: 0 auto; } .kkart-search-list__list .components-menu-group__label { clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ overflow-wrap: normal !important; word-wrap: normal !important; } .kkart-search-list__list > [role='menu'] { border: 1px solid #f0f0f0; border-bottom: none; } .kkart-search-list__list .kkart-search-list__item { display: flex; align-items: center; margin-bottom: 0; padding: 12px 16px; background: #fff; border-bottom: 1px solid #f0f0f0 !important; color: #757575; } .kkart-search-list__list .kkart-search-list__item:hover, .kkart-search-list__list .kkart-search-list__item:active, .kkart-search-list__list .kkart-search-list__item:focus { background: #f0f0f0; } .kkart-search-list__list .kkart-search-list__item:last-child { border-bottom: none !important; } .kkart-search-list__list .kkart-search-list__item .kkart-search-list__item-state { flex: 0 0 16px; margin-left: 8px; height: 24px; } .kkart-search-list__list .kkart-search-list__item .kkart-search-list__item-label { display: flex; flex: 1; } .kkart-search-list__list .kkart-search-list__item.depth-0 + .depth-1 { margin-top: -1px; } .kkart-search-list__list .kkart-search-list__item:not(.depth-0) { border-bottom: 0 !important; } .kkart-search-list__list .kkart-search-list__item:not(.depth-0) + .depth-0 { border-top: 1px solid #f0f0f0; } .kkart-search-list__list .kkart-search-list__item[class*='depth-'] .kkart-search-list__item-label::before { margin-left: 4px; content: "— — — — — "; } .kkart-search-list__list .kkart-search-list__item.depth-0 .kkart-search-list__item-label::before { margin-left: 0; content: ''; } .kkart-search-list__list .kkart-search-list__item.depth-1 .kkart-search-list__item-label::before { content: "— "; } .kkart-search-list__list .kkart-search-list__item.depth-2 .kkart-search-list__item-label::before { content: "— — "; } .kkart-search-list__list .kkart-search-list__item.depth-3 .kkart-search-list__item-label::before { content: "— — — "; } .kkart-search-list__list .kkart-search-list__item.depth-4 .kkart-search-list__item-label::before { content: "— — — — "; } .kkart-search-list__list .kkart-search-list__item .kkart-search-list__item-name { display: inline-block; } .kkart-search-list__list .kkart-search-list__item .kkart-search-list__item-prefix { display: none; color: #757575; } .kkart-search-list__list .kkart-search-list__item.is-searching .kkart-search-list__item-label, .kkart-search-list__list .kkart-search-list__item.is-skip-level .kkart-search-list__item-label { display: inline-block; } .kkart-search-list__list .kkart-search-list__item.is-searching .kkart-search-list__item-prefix, .kkart-search-list__list .kkart-search-list__item.is-skip-level .kkart-search-list__item-prefix { display: inline; } .kkart-search-list__list .kkart-search-list__item.is-searching .kkart-search-list__item-prefix::after, .kkart-search-list__list .kkart-search-list__item.is-skip-level .kkart-search-list__item-prefix::after { margin-left: 4px; content: ' ›'; } .kkart-search-list__list .kkart-search-list__item.is-searching .kkart-search-list__item-name { color: #1e1e1e; } .kkart-search-list__list .kkart-search-list__item .kkart-search-list__item-count { flex: 0 1 auto; padding: 2px 8px; border: 1px solid #f0f0f0; border-radius: 12px; font-size: 0.8em; line-height: 1.4; color: #757575; background: #fff; white-space: nowrap; } .components-panel .kkart-search-list { padding: 0; } .components-panel .kkart-search-list__selected { margin: 0 0 16px; padding: 0; border-top: none; min-height: 54px; } .components-panel .kkart-search-list__search { margin: 0 0 16px; padding: 0; border-top: none; } .kkart-section-header { padding: 13px; border-bottom: none; display: flex; justify-content: space-between; } @media (max-width: 782px) { .kkart-section-header { margin-right: -16px; margin-left: -16px; margin-bottom: 12px; border-right: none; border-left: none; width: auto; } } .kkart-section-header hr { -ms-grid-row-align: center; align-self: center; flex-grow: 1; height: 1px; margin: 0 10px; } @media (max-width: 782px) { .kkart-section-header.has-interval-select { position: relative; padding-bottom: 30px; } .kkart-section-header.has-interval-select .kkart-chart__interval-select { position: absolute; right: 0; bottom: 0; padding-right: 6px; } } .kkart-section-header__actions, .kkart-section-header__menu { text-align: left; } .kkart-section-header__actions { display: flex; flex-grow: 1; justify-content: flex-end; } .kkart-section-header__actions .components-base-control { padding-top: 0; min-height: 34px; } .kkart-section-header__actions .components-base-control .components-base-control__field { margin-bottom: 0; } .kkart-section-header__actions .components-base-control .components-base-control__field select { background: transparent; } .kkart-ellipsis-menu__toggle { padding: 0; } .kkart-section-header__menu { display: flex; flex-direction: column; justify-content: center; } .kkart-section-header__title { margin: 0 0 0 16px; padding: 3px 0; font-size: 18px; font-size: 1.125rem; line-height: 2.2; font-weight: 600; } .kkart-segmented-selection { width: 100%; color: #757575; } .kkart-segmented-selection__container { width: 100%; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; display: -ms-grid; display: grid; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #ccc; } .kkart-segmented-selection__item:nth-child(2n) { border-right: 1px solid #ccc; border-top: 1px solid #ccc; } .kkart-segmented-selection__item:nth-child(2n + 1) { border-top: 1px solid #ccc; } .kkart-segmented-selection__item:nth-child(-n + 2) { border-top: 0; } .kkart-segmented-selection__label { background-color: #f0f0f0; padding: 12px 36px 12px 12px; position: relative; display: block; height: 100%; } .kkart-segmented-selection__label:active { background-color: #e0e0e0; } .kkart-segmented-selection__label:hover { background-color: #e0e0e0; } .kkart-segmented-selection__input { opacity: 0; position: absolute; right: -9999px; } .kkart-segmented-selection__input:active + label .kkart-segmented-selection__label { background-color: #e0e0e0; } .kkart-segmented-selection__input:checked + label .kkart-segmented-selection__label { background-color: #fff; font-weight: 600; } .kkart-segmented-selection__input:checked + label .kkart-segmented-selection__label::before { content: ''; width: 8px; height: 8px; background-color: #007cba; background-color: var(--wp-admin-theme-color); position: absolute; top: 50%; transform: translate(20px, -50%); } .kkart-segmented-selection__input:focus + label .kkart-segmented-selection__label { box-shadow: inset 0 0 0 1px #24292d; } .kkart-select-control { position: relative; } .kkart-select-control .components-base-control { height: 56px; display: flex; align-items: center; border: 1px solid #a7aaad; border-radius: 3px; background: #fff; padding: 12px 16px; position: relative; } .kkart-select-control .components-base-control .kkart-select-control__tags { margin: 12px 0 0 4px; } .kkart-select-control .components-base-control .kkart-tag { max-height: 20px; } .kkart-select-control .components-base-control .components-base-control__field { display: flex; align-items: center; flex: 1; margin-bottom: 0; max-width: 100%; } .kkart-select-control .components-base-control .components-base-control__label { position: absolute; top: 50%; transform: translateY(-50%); color: #646970; font-size: 16px; } .kkart-select-control .components-base-control .kkart-select-control__control-input { font-size: 16px; border: 0; box-shadow: none; color: #2c3338; margin: 12px 0 0 0; padding-right: 0; padding-left: 0; width: 100%; line-height: 24px; text-align: right; letter-spacing: inherit; background: transparent; } .kkart-select-control .components-base-control .kkart-select-control__control-input::-webkit-search-cancel-button { display: none; } .kkart-select-control .components-base-control .kkart-select-control__control-input:focus { outline: none; } .kkart-select-control .components-base-control i { color: #636d75; margin-left: 12px; width: 24px; } .kkart-select-control .components-base-control.is-active { box-shadow: 0 0 0 1px #006088; border-color: #006088; } .kkart-select-control .components-base-control.with-value .components-base-control__label, .kkart-select-control .components-base-control.has-tags .components-base-control__label { font-size: 12px; margin-top: -12px; } .kkart-select-control .kkart-select-control__autofill-input { position: absolute; z-index: -1; } .kkart-select-control .kkart-select-control__tags { position: relative; margin: 12px 0; } .kkart-select-control .kkart-select-control__tags.has-clear { padding-left: 24px; } .kkart-select-control .kkart-tag { max-height: 24px; } .kkart-select-control .kkart-select-control__clear { position: absolute; left: 10px; top: calc(50% - 10px); } .kkart-select-control .kkart-select-control__clear > .dashicon { color: #c9c9c9; } .kkart-select-control .kkart-select-control__listbox { background: #fff; display: flex; flex-direction: column; align-items: stretch; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12), 0 6px 10px rgba(0, 0, 0, 0.14); border-radius: 3px; position: absolute; right: 0; left: 0; top: 57px; z-index: 10; overflow-y: auto; max-height: 350px; } .kkart-select-control .kkart-select-control__listbox.is-static { position: static; } .kkart-select-control .kkart-select-control__option { padding: 16px; min-height: 56px; font-size: 16px; text-align: right; } .kkart-select-control .kkart-select-control__option.is-selected, .kkart-select-control .kkart-select-control__option:hover { background: #f6f7f7; } .kkart-select-control.is-searchable .components-base-control__label { right: 52px; } .kkart-select-control.is-searchable .components-base-control.is-active .components-base-control__label { font-size: 12px; margin-top: -12px; } .kkart-stepper .kkart-stepper__steps { display: flex; justify-content: space-around; margin-bottom: 24px; } .kkart-stepper .kkart-stepper__step { padding: 8px; font-weight: 400; position: relative; } .kkart-stepper .kkart-stepper__step .kkart-stepper__step-label-wrapper { display: flex; text-align: right; border: 0; background-color: transparent; padding: 0; } .kkart-stepper .kkart-stepper__step .kkart-stepper__step-label-wrapper:focus { outline: none; box-shadow: none; } .kkart-stepper .kkart-stepper__step button.kkart-stepper__step-label-wrapper { cursor: pointer; } .kkart-stepper .kkart-stepper__step .kkart-stepper__step-text { width: 100%; } .kkart-stepper .kkart-stepper__step .kkart-stepper__step-label { color: #1e1e1e; line-height: 24px; font-size: 16px; } .kkart-stepper .kkart-stepper__step .kkart-stepper__step-description { display: none; font-size: 14px; color: #757575; font-weight: 400; margin-top: 2px; } .kkart-stepper .kkart-stepper__step .kkart-stepper__step-icon svg { display: none; } .kkart-stepper .kkart-stepper__step .kkart-spinner { display: block; margin-left: 12px; max-height: 24px; min-width: 24px; width: 24px; border-radius: 50%; background: #007cba; background: var(--wp-admin-theme-color); } .kkart-stepper .kkart-stepper__step .kkart-spinner__circle { stroke: #fff; } .kkart-stepper .kkart-stepper__step.is-active .kkart-stepper__step-icon, .kkart-stepper .kkart-stepper__step.is-complete .kkart-stepper__step-icon { background: #007cba; background: var(--wp-admin-theme-color); color: #fff; } .kkart-stepper .kkart-stepper__step.is-active .kkart-stepper__step-label, .kkart-stepper .kkart-stepper__step.is-complete .kkart-stepper__step-label { color: #1e1e1e; } .kkart-stepper .kkart-stepper__step.is-active .kkart-stepper__step-icon { font-weight: 600; } .kkart-stepper .kkart-stepper__step.is-active .kkart-stepper__step-label { font-weight: 600; margin: 0; } .kkart-stepper .kkart-stepper__step.is-complete .kkart-stepper__step-number { display: none; } .kkart-stepper .kkart-stepper__step.is-complete svg { display: inline; } .kkart-stepper .kkart-stepper__step-icon { font-size: 16px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; margin-left: 12px; background: #f0f0f0; color: #757575; border-radius: 50%; } .kkart-stepper .kkart-stepper__step-divider { align-self: flex-start; flex-grow: 1; border-bottom: 1px solid #f0f0f0; margin-top: 20px; } .kkart-stepper .kkart-stepper__step-divider:last-child { display: none; } @media (max-width: 782px) { .kkart-stepper .kkart-stepper__step-label { display: none; padding-top: 24px; } .kkart-stepper .kkart-stepper__step-icon { margin-left: 0; } } .kkart-stepper.is-vertical .kkart-stepper__steps { align-items: initial; flex-direction: column; margin-bottom: 0; } .kkart-stepper.is-vertical .kkart-stepper__step { padding-bottom: 36px; } .kkart-stepper.is-vertical .kkart-stepper__step::after { content: ''; position: absolute; right: 20px; top: 40px; height: calc(100% - 24px - 16px); border-right: 1px solid #f0f0f0; } .kkart-stepper.is-vertical .kkart-stepper__step:last-child { padding-bottom: 8px; } .kkart-stepper.is-vertical .kkart-stepper__step:last-child::after { display: none; } .kkart-stepper.is-vertical .kkart-stepper__step-label { display: initial; } .kkart-stepper.is-vertical .kkart-stepper__step-icon { margin-left: 12px; } .kkart-stepper.is-vertical .kkart-stepper__step-description { display: block; } .kkart-stepper.is-vertical .kkart-stepper_content { margin-top: 8px; margin-right: 36px; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(-270deg); } } @keyframes growAndShrink { 0%, 100% { stroke-dashoffset: 200; } 50% { stroke-dashoffset: 50; transform: rotate(-135deg); } 100% { transform: rotate(-450deg); } } .kkart-spinner { animation: rotate 2s linear infinite; width: 40px; min-width: 40px; height: 40px; max-height: 40px; } .kkart-spinner__circle { stroke-dasharray: 200; stroke-dashoffset: 0; transform-origin: center; animation: growAndShrink 2s ease-in-out infinite; stroke: #1d2327; } .kkart-summary { margin: 16px 0; display: -ms-grid; display: grid; border-width: 1px 1px 0 0; border-style: solid; border-color: #e0e0e0; background-color: #f0f0f0; box-shadow: inset 1px -1px 0 #e0e0e0; } @media (max-width: 782px) { .kkart-summary { border-width: 0; } .kkart-summary.is-placeholder { border-top: 0; } .kkart-summary .kkart-summary__item-container.is-placeholder { border-top: 1px solid #e0e0e0; } } .kkart-summary .components-popover:not(.components-tooltip) { position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; margin-top: 0 !important; margin-right: 0; } .kkart-summary .components-popover:not(.components-tooltip) .components-popover__header { display: none; } .kkart-summary .components-popover:not(.components-tooltip) .components-popover__content { position: static; right: auto; left: auto; margin: 0; width: 100%; max-width: 100% !important; max-height: 100% !important; box-shadow: none; border: none; transform: none; } .kkart-summary .components-popover:not(.components-tooltip) .components-popover__content .kkart-summary__item.is-selected { display: none; } .components-popover__content .kkart-summary { max-height: 100%; margin-top: 0; margin-bottom: 0; overflow-y: auto; border: none; } .kkart-summary .kkart-summary__item-value, .kkart-summary .kkart-summary__item-delta { flex: 1 0 auto; } .kkart-summary .kkart-summary__item-delta { flex: 0 1 auto; display: flex; } .kkart-summary, .kkart-summary.has-one-item, .kkart-summary.has-1-items { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .kkart-summary.has-2-items { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } .kkart-summary.has-2-items .kkart-summary__item-container:nth-of-type(2n) .kkart-summary__item { border-left-color: #e0e0e0; } .kkart-summary.has-2-items .kkart-summary__item-container:nth-of-type(2n + 1):nth-last-of-type(-n + 2) .kkart-summary__item, .kkart-summary.has-2-items .kkart-summary__item-container:nth-of-type(2n + 1):nth-last-of-type(-n + 2) ~ .kkart-summary__item-container .kkart-summary__item { border-bottom-color: #e0e0e0; } .kkart-summary.has-3-items { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } .kkart-summary.has-3-items .kkart-summary__item-container:nth-of-type(3n) .kkart-summary__item { border-left-color: #e0e0e0; } .kkart-summary.has-3-items .kkart-summary__item-container:nth-of-type(3n + 1):nth-last-of-type(-n + 3) .kkart-summary__item, .kkart-summary.has-3-items .kkart-summary__item-container:nth-of-type(3n + 1):nth-last-of-type(-n + 3) ~ .kkart-summary__item-container .kkart-summary__item { border-bottom-color: #e0e0e0; } .kkart-summary.has-4-items, .kkart-summary.has-7-items, .kkart-summary.has-8-items { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } .kkart-summary.has-4-items .kkart-summary__item-container:nth-of-type(4n) .kkart-summary__item, .kkart-summary.has-7-items .kkart-summary__item-container:nth-of-type(4n) .kkart-summary__item, .kkart-summary.has-8-items .kkart-summary__item-container:nth-of-type(4n) .kkart-summary__item { border-left-color: #e0e0e0; } .kkart-summary.has-4-items .kkart-summary__item-container:nth-of-type(4n + 1):nth-last-of-type(-n + 4) .kkart-summary__item, .kkart-summary.has-4-items .kkart-summary__item-container:nth-of-type(4n + 1):nth-last-of-type(-n + 4) ~ .kkart-summary__item-container .kkart-summary__item, .kkart-summary.has-7-items .kkart-summary__item-container:nth-of-type(4n + 1):nth-last-of-type(-n + 4) .kkart-summary__item, .kkart-summary.has-7-items .kkart-summary__item-container:nth-of-type(4n + 1):nth-last-of-type(-n + 4) ~ .kkart-summary__item-container .kkart-summary__item, .kkart-summary.has-8-items .kkart-summary__item-container:nth-of-type(4n + 1):nth-last-of-type(-n + 4) .kkart-summary__item, .kkart-summary.has-8-items .kkart-summary__item-container:nth-of-type(4n + 1):nth-last-of-type(-n + 4) ~ .kkart-summary__item-container .kkart-summary__item { border-bottom-color: #e0e0e0; } .kkart-summary.has-5-items { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); } .kkart-summary.has-5-items .kkart-summary__item-container:nth-of-type(5n) .kkart-summary__item { border-left-color: #e0e0e0; } .kkart-summary.has-5-items .kkart-summary__item-container:nth-of-type(5n + 1):nth-last-of-type(-n + 5) .kkart-summary__item, .kkart-summary.has-5-items .kkart-summary__item-container:nth-of-type(5n + 1):nth-last-of-type(-n + 5) ~ .kkart-summary__item-container .kkart-summary__item { border-bottom-color: #e0e0e0; } .kkart-summary.has-5-items .kkart-summary__item-value .kkart-summary__item-prev-label, .kkart-summary.has-5-items.is-placeholder .kkart-summary__item-prev-label { margin-left: calc(100% - 80px); } @media (min-width: 1441px) { .kkart-summary.has-6-items { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); } .kkart-summary.has-6-items .kkart-summary__item-container:nth-of-type(6n) .kkart-summary__item { border-left-color: #e0e0e0; } .kkart-summary.has-6-items .kkart-summary__item-container:nth-of-type(6n + 1):nth-last-of-type(-n + 6) .kkart-summary__item, .kkart-summary.has-6-items .kkart-summary__item-container:nth-of-type(6n + 1):nth-last-of-type(-n + 6) ~ .kkart-summary__item-container .kkart-summary__item { border-bottom-color: #e0e0e0; } .kkart-summary.has-6-items .kkart-summary__item-value .kkart-summary__item-prev-label, .kkart-summary.has-6-items.is-placeholder .kkart-summary__item-prev-label { margin-left: calc(100% - 80px); } .kkart-summary.has-9-items, .kkart-summary.has-10-items { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); } .kkart-summary.has-9-items .kkart-summary__item-container:nth-of-type(5n) .kkart-summary__item, .kkart-summary.has-10-items .kkart-summary__item-container:nth-of-type(5n) .kkart-summary__item { border-left-color: #e0e0e0; } .kkart-summary.has-9-items .kkart-summary__item-container:nth-of-type(5n + 1):nth-last-of-type(-n + 5) .kkart-summary__item, .kkart-summary.has-9-items .kkart-summary__item-container:nth-of-type(5n + 1):nth-last-of-type(-n + 5) ~ .kkart-summary__item-container .kkart-summary__item, .kkart-summary.has-10-items .kkart-summary__item-container:nth-of-type(5n + 1):nth-last-of-type(-n + 5) .kkart-summary__item, .kkart-summary.has-10-items .kkart-summary__item-container:nth-of-type(5n + 1):nth-last-of-type(-n + 5) ~ .kkart-summary__item-container .kkart-summary__item { border-bottom-color: #e0e0e0; } .kkart-summary.has-9-items .kkart-summary__item-value .kkart-summary__item-prev-label, .kkart-summary.has-9-items.is-placeholder .kkart-summary__item-prev-label, .kkart-summary.has-10-items .kkart-summary__item-value .kkart-summary__item-prev-label, .kkart-summary.has-10-items.is-placeholder .kkart-summary__item-prev-label { margin-left: calc(100% - 80px); } } @media (max-width: 1440px) { .kkart-summary.has-4-items .kkart-summary__item-value .kkart-summary__item-prev-label, .kkart-summary.has-4-items.is-placeholder .kkart-summary__item-prev-label, .kkart-summary.has-7-items .kkart-summary__item-value .kkart-summary__item-prev-label, .kkart-summary.has-7-items.is-placeholder .kkart-summary__item-prev-label, .kkart-summary.has-8-items .kkart-summary__item-value .kkart-summary__item-prev-label, .kkart-summary.has-8-items.is-placeholder .kkart-summary__item-prev-label { margin-left: calc(100% - 80px); } .kkart-summary.has-6-items, .kkart-summary.has-9-items { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } .kkart-summary.has-6-items .kkart-summary__item-container:nth-of-type(3n) .kkart-summary__item, .kkart-summary.has-9-items .kkart-summary__item-container:nth-of-type(3n) .kkart-summary__item { border-left-color: #e0e0e0; } .kkart-summary.has-6-items .kkart-summary__item-container:nth-of-type(3n + 1):nth-last-of-type(-n + 3) .kkart-summary__item, .kkart-summary.has-6-items .kkart-summary__item-container:nth-of-type(3n + 1):nth-last-of-type(-n + 3) ~ .kkart-summary__item-container .kkart-summary__item, .kkart-summary.has-9-items .kkart-summary__item-container:nth-of-type(3n + 1):nth-last-of-type(-n + 3) .kkart-summary__item, .kkart-summary.has-9-items .kkart-summary__item-container:nth-of-type(3n + 1):nth-last-of-type(-n + 3) ~ .kkart-summary__item-container .kkart-summary__item { border-bottom-color: #e0e0e0; } .kkart-summary.has-10-items { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } .kkart-summary.has-10-items .kkart-summary__item-container:nth-of-type(4n) .kkart-summary__item { border-left-color: #e0e0e0; } .kkart-summary.has-10-items .kkart-summary__item-container:nth-of-type(4n + 1):nth-last-of-type(-n + 4) .kkart-summary__item, .kkart-summary.has-10-items .kkart-summary__item-container:nth-of-type(4n + 1):nth-last-of-type(-n + 4) ~ .kkart-summary__item-container .kkart-summary__item { border-bottom-color: #e0e0e0; } .kkart-summary.has-10-items .kkart-summary__item-value .kkart-summary__item-prev-label, .kkart-summary.has-10-items.is-placeholder .kkart-summary__item-prev-label { margin-left: calc(100% - 80px); } .kkart-summary.has-9-items .kkart-summary__item-container:nth-of-type(5n) .kkart-summary__item, .kkart-summary.has-10-items .kkart-summary__item-container:nth-of-type(5n) .kkart-summary__item { border-left-color: #e0e0e0; } } @media (max-width: 960px) { .kkart-summary .kkart-summary__item { border-left-color: #e0e0e0; } } @media (max-width: 782px) { .kkart-summary .kkart-summary__item-container { margin-right: -16px; margin-left: -16px; width: auto; } .kkart-summary .kkart-summary__item-container .kkart-summary__item { border-left: none; } .kkart-summary .components-popover.components-popover { margin-right: -16px; margin-left: -16px; } .kkart-summary .components-popover.components-popover .kkart-summary__item-container { margin-right: 0; margin-left: 0; } } .kkart-summary__item-container { margin-bottom: 0; } .kkart-summary__item-container:last-of-type .kkart-summary__item { border-bottom-color: #e0e0e0 !important; } .kkart-summary__item-container.is-dropdown-button { padding: 0; list-style: none; border-left: 1px solid #e0e0e0; } .kkart-summary__item-container.is-dropdown-button .components-button { border-bottom: 1px solid #e0e0e0; text-align: right; display: block; } @media (max-width: 782px) { .kkart-summary__item-container.is-dropdown-button { border-left: none; } } .kkart-summary__item-container.is-placeholder .kkart-summary__item { height: 117px; } .kkart-summary__item-container.is-placeholder .kkart-summary__item-label { animation: loading-fade 1.6s ease-in-out infinite; background-color: #f0f0f0; color: transparent; display: inline-block; height: 20px; margin-top: 2.2px; max-width: 110px; width: 70%; } .kkart-summary__item-container.is-placeholder .kkart-summary__item-label::after { content: '\00a0'; } @media screen and (prefers-reduced-motion: reduce) { .kkart-summary__item-container.is-placeholder .kkart-summary__item-label { animation: none; } } .kkart-summary__item-container.is-placeholder .kkart-summary__item-data { justify-content: space-between; } .kkart-summary__item-container.is-placeholder .kkart-summary__item-value { animation: loading-fade 1.6s ease-in-out infinite; background-color: #f0f0f0; color: transparent; display: inline-block; height: 28px; width: 60px; max-width: 60px; } .kkart-summary__item-container.is-placeholder .kkart-summary__item-value::after { content: '\00a0'; } @media screen and (prefers-reduced-motion: reduce) { .kkart-summary__item-container.is-placeholder .kkart-summary__item-value { animation: none; } } .kkart-summary__item-container.is-placeholder .kkart-summary__item-delta { animation: loading-fade 1.6s ease-in-out infinite; background-color: #f0f0f0; color: transparent; width: 60px; border-radius: 2px; } .kkart-summary__item-container.is-placeholder .kkart-summary__item-delta::after { content: '\00a0'; } @media screen and (prefers-reduced-motion: reduce) { .kkart-summary__item-container.is-placeholder .kkart-summary__item-delta { animation: none; } } .kkart-summary__item { display: flex; flex-direction: column; height: 100%; padding: 24px; background-color: #fff; border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; line-height: 1.4em; text-decoration: none; color: #1e1e1e; } .kkart-summary__item.components-button { height: auto; padding: 16px; align-items: normal; } .kkart-summary__item:hover { background-color: #f0f0f0; color: #007cba; color: var(--wp-admin-theme-color); } .kkart-summary__item:hover .kkart-summary__item-label { color: #007cba; color: var(--wp-admin-theme-color); } .kkart-summary__item:active { background-color: #f0f0f0; } .kkart-summary__item:focus { box-shadow: inset 1px -1px 0 #757575, inset -1px 1px 0 #757575 !important; } .kkart-summary__item.is-selected:focus { box-shadow: inset 1px 1px 0 #757575, inset -1px 0 0 #757575, inset 0 -4px 0 #007cba !important; box-shadow: inset 1px 1px 0 #757575, inset -1px 0 0 #757575, inset 0 -4px 0 var(--wp-admin-theme-color) !important; } .is-dropdown-button .kkart-summary__item { position: relative; width: 100%; padding-left: 56px; } @media (max-width: 782px) { .is-dropdown-button .kkart-summary__item { border-left: none; } } .kkart-summary__item .kkart-summary__item-data { display: flex; justify-content: space-between; } .kkart-summary__item .kkart-summary__item-label { display: block; margin-bottom: 16px; color: #757575; } .kkart-summary__item .kkart-summary__item-value { margin-bottom: 4px; font-weight: 500; color: #1e1e1e; } .kkart-summary__item .kkart-summary__item-delta { padding: 5px; border-radius: 3px; height: -webkit-min-content; height: min-content; background-color: #f0f0f0; color: #1e1e1e; } .kkart-summary__item.is-selected { background: #fff; box-shadow: inset 0 -4px 0 #007cba; box-shadow: inset 0 -4px 0 var(--wp-admin-theme-color); } .kkart-summary__item.is-selected .kkart-summary__item-value { font-weight: 600; } .kkart-summary__item.is-selected .kkart-summary__item-delta { font-weight: 400; } .kkart-summary__item.is-good-trend .kkart-summary__item-delta { background-color: #4ab866; color: #fff; } .kkart-summary__item.is-bad-trend .kkart-summary__item-delta { background-color: #d94f4f; color: #fff; } .kkart-summary__item .kkart-summary__toggle { position: absolute; top: 44px; left: 16px; transition: transform ease 0.2s; } @media screen and (prefers-reduced-motion: reduce) { .kkart-summary__item .kkart-summary__toggle { transition: none; } } .is-dropdown-expanded .kkart-summary__item .kkart-summary__toggle { transform: rotate(180deg); } .components-popover__content .kkart-summary__item .kkart-summary__item-label { margin-bottom: 0; } .components-popover__content .kkart-summary__item .kkart-summary__item-value, .components-popover__content .kkart-summary__item .kkart-summary__item-delta { margin-bottom: 0; } .kkart-table .kkart-card__body { padding: 0; position: relative; } .kkart-table .kkart-card__action { justify-self: flex-end; margin: -13px 0; } .kkart-table .kkart-card__menu { justify-self: flex-end; } .kkart-table.is-empty { align-items: center; background: #f0f0f0; color: #757575; display: flex; height: calc(16px + 1.1375rem + 1px + ( 32px + 1.1375rem + 1px ) * 5); height: calc(16px + 1.1375rem + 1px + ( 32px + 1.1375rem + 1px ) * var(--number-of-rows)); justify-content: center; padding: 16px; text-align: center; } .kkart-table button.kkart-table__download-button { padding: 6px 12px; color: #000; text-decoration: none; align-items: center; } .kkart-table button.kkart-table__download-button svg { margin-left: 8px; height: 24px; width: 24px; } @media (max-width: 782px) { .kkart-table button.kkart-table__download-button svg { margin-left: 0; } .kkart-table button.kkart-table__download-button .kkart-table__download-button__label { display: none; } } .kkart-table .kkart-pagination { padding-top: 16px; padding-bottom: 16px; z-index: 1; background: #fff; position: relative; } .kkart-table__caption { font-size: 24px; font-size: 1.5rem; text-align: right; } .kkart-table__table { overflow-x: auto; } .kkart-table__table::after, .kkart-table__table::before { content: ''; position: absolute; top: 0; width: 60px; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 1; } .kkart-table__table::after { left: 0; background: linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff); } .kkart-table__table::before { right: 0; background: linear-gradient(-90deg, #fff, rgba(255, 255, 255, 0)); } .kkart-table__table.is-scrollable-right::after, .kkart-table__table.is-scrollable-left::before { opacity: 1; } .kkart-table__table table { border-collapse: collapse; width: 100%; } .kkart-table__table tr:hover, .kkart-table__table tr:focus-within { background-color: #e0e0e0; } .kkart-table__table tr:hover td, .kkart-table__table tr:hover th, .kkart-table__table tr:focus-within td, .kkart-table__table tr:focus-within th { background: transparent; } .kkart-table__header, .kkart-table__item, .kkart-table__empty-item { padding: 16px 24px; border-bottom: 1px solid #f0f0f0; } .kkart-table__header, .kkart-table__item { font-size: 13px; font-size: 0.8125rem; text-align: right; } .kkart-table__header > a:only-child, .kkart-table__item > a:only-child { display: block; } .kkart-table__header a:hover, .kkart-table__header a:focus, .kkart-table__item a:hover, .kkart-table__item a:focus { color: #533582; } .kkart-table__header .is-placeholder, .kkart-table__item .is-placeholder { animation: loading-fade 1.6s ease-in-out infinite; background-color: #f0f0f0; color: transparent; display: inline-block; height: 16px; max-width: 120px; width: 80%; } .kkart-table__header .is-placeholder::after, .kkart-table__item .is-placeholder::after { content: '\00a0'; } @media screen and (prefers-reduced-motion: reduce) { .kkart-table__header .is-placeholder, .kkart-table__item .is-placeholder { animation: none; } } .kkart-table__header:not(.is-left-aligned), .kkart-table__item:not(.is-left-aligned) { text-align: left; } .kkart-table__header:not(.is-left-aligned) button, .kkart-table__item:not(.is-left-aligned) button { justify-content: flex-end; } .kkart-table__header.is-numeric .is-placeholder, .kkart-table__item.is-numeric .is-placeholder { max-width: 40px; } .kkart-table__header .is-negative, .kkart-table__item .is-negative { color: #d94f4f; font-weight: bold; } .kkart-table__header.is-sorted, .kkart-table__item.is-sorted { background-color: #f0f0f0; } .kkart-table__header.is-checkbox-column, .kkart-table__item.is-checkbox-column { width: 33px; max-width: 33px; padding-left: 0; padding-right: 16px; } .kkart-table__header.is-checkbox-column + th, .kkart-table__item.is-checkbox-column + th { border-right: 0; } .kkart-table__empty-item { text-align: center; font-size: 18px; font-size: 1.125rem; color: #757575; font-weight: bold; } @media (max-width: 782px) { .kkart-table__empty-item { font-size: 13px; font-size: 0.8125rem; } } th.kkart-table__item { font-weight: normal; } .kkart-table__header { padding: 8px 24px; background-color: #f8f9fa; border-bottom: 1px solid #ccc; font-weight: bold; white-space: nowrap; } .kkart-table__header + .kkart-table__header { border-right: 1px solid #ccc; } .kkart-table__header.is-left-aligned.is-sortable { padding-right: 16px; } .kkart-table__header.is-left-aligned.is-sortable svg { display: inline-flex; order: 1; margin-right: 0; } .kkart-table__header .components-button.is-button { height: auto; width: 100%; padding: 8px 0 8px 24px; vertical-align: middle; line-height: 1; border: none; background: transparent !important; box-shadow: none !important; align-items: center; } .kkart-table__header .components-button.is-button:hover { box-shadow: none !important; } .kkart-table__header .components-button.is-button:active { box-shadow: none !important; } .kkart-table__header.is-sortable { padding: 0; } .kkart-table__header.is-sortable svg { visibility: hidden; margin-right: 4px; } .kkart-table__header.is-sortable.is-sorted .components-button svg, .kkart-table__header.is-sortable .components-button:hover svg, .kkart-table__header.is-sortable .components-button:focus svg { visibility: visible; } .kkart-table__summary { margin: 0; padding: 16px 0; text-align: center; z-index: 1; background: #fff; position: relative; } .kkart-table__summary-item { display: inline-block; margin-bottom: 0; margin-right: 8px; margin-left: 8px; } .kkart-table__summary-item .kkart-table__summary-label, .kkart-table__summary-item .kkart-table__summary-value { display: inline-block; } .kkart-table__summary-item .kkart-table__summary-label { margin-right: 4px; } .kkart-table__summary-item .kkart-table__summary-value { font-weight: 600; } .kkart-tag { display: inline-flex; margin: 1px 0 1px 4px; overflow: hidden; vertical-align: middle; } .kkart-tag .kkart-tag__text, .kkart-tag .kkart-tag__remove { display: inline-block; line-height: 24px; background: #f0f0f0; transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1); } .kkart-tag .kkart-tag__text { -ms-grid-row-align: center; align-self: center; padding: 0 8px; border-radius: 12px; color: #757575; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kkart-tag.has-remove .kkart-tag__text { padding: 0 8px 0 4px; border-radius: 0 12px 12px 0; } .kkart-tag .kkart-tag__remove { cursor: pointer; height: inherit; padding: 0 2px; border-radius: 12px 0 0 12px; color: #757575; line-height: 10px; text-indent: 0; height: 24px; } .kkart-tag .kkart-tag__remove:hover { color: #1e1e1e; } .muriel-input-text { background: #fff; border: 1px solid #a7aaad; border-radius: 3px; height: 56px; box-shadow: none; padding: 12px 12px 4px; position: relative; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .muriel-input-text:hover { border-color: #787c82; } .muriel-input-text label { color: #646970; font-size: 14px; line-height: 21px; } .muriel-input-text label.components-base-control__label { margin: 0; } .muriel-input-text .components-text-control__input, .muriel-input-text .components-text-control__input[type='text'], .muriel-input-text .components-text-control__input[type='tel'], .muriel-input-text .components-text-control__input[type='time'], .muriel-input-text .components-text-control__input[type='url'], .muriel-input-text .components-text-control__input[type='week'], .muriel-input-text .components-text-control__input[type='password'], .muriel-input-text .components-text-control__input[type='color'], .muriel-input-text .components-text-control__input[type='date'], .muriel-input-text .components-text-control__input[type='datetime'], .muriel-input-text .components-text-control__input[type='datetime-local'], .muriel-input-text .components-text-control__input[type='email'], .muriel-input-text .components-text-control__input[type='month'], .muriel-input-text .components-text-control__input[type='number'] { border: 0; box-shadow: none; font-size: 16px; line-height: 21px; margin: 0; padding: 0; min-height: 30px; } .muriel-input-text .components-text-control__input:focus, .muriel-input-text .components-text-control__input[type='text']:focus, .muriel-input-text .components-text-control__input[type='tel']:focus, .muriel-input-text .components-text-control__input[type='time']:focus, .muriel-input-text .components-text-control__input[type='url']:focus, .muriel-input-text .components-text-control__input[type='week']:focus, .muriel-input-text .components-text-control__input[type='password']:focus, .muriel-input-text .components-text-control__input[type='color']:focus, .muriel-input-text .components-text-control__input[type='date']:focus, .muriel-input-text .components-text-control__input[type='datetime']:focus, .muriel-input-text .components-text-control__input[type='datetime-local']:focus, .muriel-input-text .components-text-control__input[type='email']:focus, .muriel-input-text .components-text-control__input[type='month']:focus, .muriel-input-text .components-text-control__input[type='number']:focus { box-shadow: none; } .muriel-input-text.active { box-shadow: 0 0 0 2px #007cba; box-shadow: 0 0 0 2px var(--wp-admin-theme-color); border-color: transparent; } .muriel-input-text.active input { color: #2c3338; } .muriel-input-text.with-value .components-base-control__label { display: block; position: relative; top: -8px; width: 100%; font-size: 12px; } .muriel-input-text.with-value input { color: #2c3338; position: relative; top: -12px; } .muriel-input-text.empty label { display: none; } .muriel-input-text.empty input { color: #646970; } .muriel-input-text.has-error { box-shadow: none; } .muriel-input-text.disabled label { display: none; } .muriel-input-text.disabled input { color: #a7aaad; /* Placeholder styling: */ } .muriel-input-text.disabled input:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #a7aaad; opacity: 1; /* Firefox */ } .muriel-input-text.disabled input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #a7aaad; opacity: 1; /* Firefox */ } .muriel-input-text.disabled input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #a7aaad; } .muriel-input-text.disabled input::-ms-input-placeholder { /* Microsoft Edge */ color: #a7aaad; } .text-control-with-affixes { display: inline-flex; flex-direction: row; width: 100%; } .text-control-with-affixes input[type='email'], .text-control-with-affixes input[type='password'], .text-control-with-affixes input[type='url'], .text-control-with-affixes input[type='text'], .text-control-with-affixes input[type='number'] { flex-grow: 1; margin: 0; } .text-control-with-affixes input[type='email']:disabled, .text-control-with-affixes input[type='password']:disabled, .text-control-with-affixes input[type='url']:disabled, .text-control-with-affixes input[type='text']:disabled, .text-control-with-affixes input[type='number']:disabled { border-left-width: 0; } .text-control-with-affixes input[type='email']:disabled + .text-control-with-affixes__suffix, .text-control-with-affixes input[type='password']:disabled + .text-control-with-affixes__suffix, .text-control-with-affixes input[type='url']:disabled + .text-control-with-affixes__suffix, .text-control-with-affixes input[type='text']:disabled + .text-control-with-affixes__suffix, .text-control-with-affixes input[type='number']:disabled + .text-control-with-affixes__suffix { border-right: 1px solid #f0f0f0; } .text-control-with-affixes.text-control-with-prefix input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .text-control-with-affixes.text-control-with-suffix input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .text-control-with-affixes__prefix, .text-control-with-affixes__suffix { position: relative; background: #fff; border-width: 1px; border-style: solid; border-color: #757575; color: #757575; padding: 7px 14px; white-space: nowrap; flex: 1 0 auto; font-size: 14px; line-height: 1.5; } .disabled .text-control-with-affixes__prefix, .disabled .text-control-with-affixes__suffix { background: rgba(255, 255, 255, 0.5); border-color: rgba(222, 222, 222, 0.75); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); color: rgba(51, 51, 51, 0.5); } .text-control-with-affixes__prefix { border-left: none; border-radius: 0 4px 4px 0; } .text-control-with-affixes__prefix + input[type='email']:disabled, .text-control-with-affixes__prefix + input[type='password']:disabled, .text-control-with-affixes__prefix + input[type='url']:disabled, .text-control-with-affixes__prefix + input[type='text']:disabled, .text-control-with-affixes__prefix + input[type='number']:disabled { border-right-color: #f0f0f0; } .text-control-with-affixes__suffix { border-right: none; border-radius: 4px 0 0 4px; } .kkart-timeline ul { margin: 0; padding-right: 0; list-style-type: none; } .kkart-timeline ul li { margin-bottom: 0; } .kkart-timeline .kkart-timeline-group .kkart-timeline-group__title { color: #1d2327; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0 0 16px 0; display: inline-block; } .kkart-timeline .kkart-timeline-group hr { float: left; width: calc(100% - 40px); margin-bottom: 16px; border: 0.5px solid #e3dfe2; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__top-border { min-height: 16px; border-right: 1px solid #c3c4c7; margin: 0 12px; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__title { display: flex; align-items: center; flex-direction: row; justify-content: space-between; color: #2c3338; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__title * { font-size: 16px; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__headline { display: flex; align-items: center; flex-direction: row; margin: 8px 0; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__headline * { margin: 0; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__headline > * { padding: 0 16px; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__headline svg { fill: #fff; padding: 4px; background: #c3c4c7; border-radius: 9999px; box-sizing: content-box; width: 16px; height: 16px; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__headline svg.is-success { background: #4ab866; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__headline svg.is-warning { background: #ffb900; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__headline svg.is-error { background: #d94f4f; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__timestamp { font-size: 14px; line-height: 16px; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__body { display: flex; flex-direction: column; color: #50575e; margin: 0 12px; padding: 8px 36px; border-right: 1px solid #c3c4c7; } .kkart-timeline .kkart-timeline-item .kkart-timeline-item__body * { margin: 0; font-size: 14px; } .kkart-timeline ul :last-child.kkart-timeline-group hr:last-child { display: none; } .kkart-view-more-list { padding-right: 4px; margin: 0 4px 0 0; vertical-align: middle; } .kkart-view-more-list__popover { margin: 0; padding: 16px; text-align: right; } .kkart-view-more-list__popover__item { display: block; margin: 16px 0; } .kkart-view-more-list__popover__item:first-child { margin-top: 0; } .kkart-view-more-list__popover__item:last-child { margin-bottom: 0; } .kkart-web-preview { width: 100%; display: flex; align-items: center; justify-content: center; background: #f6f7f7; } .kkart-web-preview.is-loading .kkart-web-preview__iframe-wrapper { display: none; } .kkart-web-preview .kkart-web-preview__iframe-wrapper { width: 100%; } .kkart-web-preview iframe { width: 100%; height: 100%; min-height: 400px; } .kkart-badge { background-color: #f0f0f0; border-radius: 20px; display: inline-block; text-align: center; font-style: normal; font-weight: 600; font-size: 14px; line-height: 27px; align-items: center; width: 32px; height: 28px; }