/* ../../../../../tmp/tmp-2449-obkFTQqltwLG/obsidian-spaced-repetition/src/ui/styles.css */ .sr-bg-blue, .sr-bg-yellow, .sr-bg-green, .sr-bg-red { color: #ffffff !important; } .sr-bg-green { background-color: hsl(122, 39%, 49%) !important; } .sr-bg-blue { background-color: hsl(207, 90%, 54%) !important; } .sr-bg-red { background-color: hsl(14, 100%, 63%) !important; } .sr-bg-yellow { background-color: hsl(38, 88%, 58%) !important; } .sr-deck-container .sr-tree-item-row:hover .sr-bg-green, .sr-response-button.sr-bg-green:hover { background-color: hsl(122, 39%, 44%) !important; } .sr-deck-container .sr-tree-item-row:hover .sr-bg-blue, .sr-response-button.sr-bg-blue:hover { background-color: hsl(207, 90%, 49%) !important; } .sr-deck-container .sr-tree-item-row:hover .sr-bg-red, .sr-response-button.sr-bg-red:hover { background-color: hsl(14, 100%, 58%) !important; } .sr-deck-container .sr-tree-item-row:hover .sr-bg-yellow, .sr-response-button.sr-bg-yellow:hover { background-color: hsl(38, 88%, 53%) !important; } .sr-is-hidden { display: none !important; } .sr-hide-by-scaling { scale: 0; user-select: none; cursor: default; opacity: 0; &.hide-height { height: 0 !important; } &.hide-width { width: 0 !important; } &.hide-margin { margin: 0 !important; } &.hide-padding { padding: 0 !important; } } .sr-centered { display: flex; justify-content: center; align-items: center; flex-direction: column; } .sr-button { cursor: pointer; } .sr-button:disabled { cursor: not-allowed; } .sr-flex-spacer { flex-grow: 1; } .sr-view { --view-padding: var(--size-4-3); display: flex; flex-direction: column; } .is-mobile .sr-view { --view-padding: var(--size-4-2); } @media only screen and (orientation: landscape) and (max-height: 400px) { .is-phone .sr-tab-view { --view-padding: var(--size-4-1); } } #sr-modal-view { & .modal-close-button, & .modal-header { display: none; } & .sr-modal-content { overflow: visible; padding: 0; } } .is-mobile #sr-modal-view { padding-top: max(var(--safe-area-inset-top), calc(var(--view-padding) * 2)) !important; padding-right: max(var(--safe-area-inset-right), var(--view-padding)) !important; padding-left: max(var(--safe-area-inset-left), var(--view-padding)) !important; padding-bottom: max(var(--safe-area-inset-bottom), calc(var(--view-padding) * 2)) !important; } .sr-tab-view { --bottom-statusbar-clearance: var(--size-4-8); padding-top: 0 !important; padding-right: var(--view-padding) !important; padding-left: var(--view-padding) !important; padding-bottom: max(var(--view-padding), var(--bottom-statusbar-clearance), var(--safe-area-inset-bottom)) !important; } .sr-tab-view-content.sr-center-view { margin: auto; } .sr-container { --container-gap: var(--size-4-4); gap: var(--container-gap); display: flex; flex-direction: column; width: 100%; height: 100%; } .is-phone .sr-container { --container-gap: var(--size-4-3); --phone-button-size: 44px; & .sr-button { width: var(--phone-button-size); height: var(--phone-button-size); } } @media only screen and (orientation: landscape) { .is-phone .sr-container { --container-gap: var(--size-4-2); --phone-button-size: 30px; } } @media only screen and (orientation: landscape) and (max-height: 400px) { .is-phone .sr-container { --container-gap: var(--size-4-1); } } @media only screen and (orientation: portrait) and (max-width: 340px) { .is-phone .sr-container { --phone-button-size: 25px !important; } } .sr-deck-container { & .sr-header { gap: var(--container-gap); display: flex; flex-direction: column; justify-content: center; align-items: center; } & .sr-title-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; & .sr-title { font-size: var(--font-ui-large); font-weight: var(--font-semibold); text-align: center; line-height: var(--line-height-tight); } } & .sr-header-stats-container { display: flex; flex-wrap: wrap; gap: var(--size-4-2); justify-content: center; align-items: center; & .sr-header-stats-count { display: flex; justify-items: center; align-items: center; color: #ffffff; padding: var(--size-4-1); & > *:first-child { min-width: 10ch; } & > *:last-child { min-width: 3ch; text-align: right; } } } & > hr { margin: 2px 0px; } .sr-scroll-wrapper { height: 100px; overflow: hidden; flex-grow: 1; display: flex; & .sr-content { overflow-x: hidden; overflow-y: auto; flex-grow: 1; } } & .sr-tree-item-row { padding-top: 2px; padding-bottom: 2px; margin-bottom: 0; &.is-disabled { cursor: not-allowed; opacity: 0.6; } } & .sr-tree-stats-container { display: flex; gap: var(--size-4-1); } & .sr-tree-stats-count { display: flex; justify-content: center; align-items: center; min-width: calc(3ch + var(--size-4-1) * 2); padding: var(--size-4-1); text-align: center; color: #ffffff !important; } } .is-mobile .sr-deck-container .sr-header-stats-count, .is-mobile .sr-deck-container .sr-tree-stats-count { border-radius: var(--tag-radius); height: 21px; } @media only screen and (orientation: landscape) { .is-phone .sr-deck-container .sr-header .sr-button { padding: 0; } } .sr-card-container { & .sr-controls { display: flex; width: 100%; align-items: center; justify-content: center; gap: var(--size-4-4); } & .sr-reset-button.mod-warning { --interactive-warning-hover: #fdf6f6; color: var(--text-error); background-color: var(--interactive-normal); &:hover { background-color: var(--interactive-warning-hover); } } & .sr-main-wrapper { gap: var(--container-gap); display: flex; flex-direction: column; width: 100%; height: 100%; } & .sr-deck-progress-info { display: flex; flex-wrap: wrap; gap: var(--size-4-1) var(--size-4-4); } & .sr-horizontal-back-button, & .sr-horizontal-flex-spacer, & .sr-horizontal-close-button { display: none; padding: 0; } & .sr-horizontal-back-button { margin-left: var(--size-4-4); } & .sr-chosen-deck-info, & .sr-current-deck-info { display: flex; gap: var(--size-4-3); justify-content: center; align-items: center; flex-wrap: nowrap; color: var(--text-muted); text-wrap: nowrap; font-weight: bold; & .sr-chosen-deck-name, & .sr-current-deck-name { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; } & .sr-chosen-deck-counter-wrapper, & .sr-current-deck-counter-wrapper { display: flex; justify-content: center; align-items: center; gap: var(--size-4-3); & .sr-chosen-deck-counter-divider, & .sr-current-deck-counter-divider { display: flex; border: 1px solid var(--text-faint); padding: 1ch 0; } & .sr-chosen-deck-card-counter-wrapper, & .sr-current-deck-card-counter-wrapper, & .sr-chosen-deck-subdeck-counter-wrapper { display: flex; justify-content: center; align-items: center; gap: 0.5ch; & .sr-chosen-deck-card-counter-icon, & .sr-chosen-deck-subdeck-counter-icon, & .sr-current-deck-card-counter-icon { display: flex; justify-content: center; align-items: center; & svg { --icon-size: 16px; --icon-stroke: 2.5px; } } } } } & .sr-context { font-style: italic; color: var(--text-faint); display: block; word-break: break-word; } & .sr-scroll-wrapper { height: 100px; overflow: hidden; flex-grow: 1; display: flex; & .sr-content { font-size: var(--font-text-size); overflow-x: hidden; overflow-y: auto; user-select: text; flex-grow: 1; word-break: break-word; } } & .sr-content p { margin-top: 0; } & .sr-content > ul, & .sr-content > ol { padding-left: var(--size-4-6); } & .sr-content hr { backdrop-filter: invert(40%); border-top-style: dashed; margin: 1rem 0; } & .sr-content .cloze-input { height: 1.4rem; } } .is-phone .sr-card-container .sr-controls { gap: var(--size-4-3); } @media only screen and (orientation: landscape) { .is-phone .sr-card-container { flex-direction: row; .sr-controls { width: unset !important; flex-direction: column; justify-content: center; gap: var(--size-4-2); & > *:first-child, & > *:last-child { display: none; } & .sr-button { padding: 0; } } & .sr-horizontal-flex-spacer, & .sr-horizontal-close-button, & .sr-horizontal-back-button { display: inline-flex; } & .sr-chosen-deck-info > *, & .sr-current-deck-info > * { font-size: medium; } & .sr-content hr { margin: 2px 0; } } } @media only screen and (orientation: portrait) and (max-width: 650px) { .is-phone .sr-chosen-deck-name, .is-phone .sr-current-deck-name { max-width: 15ch; } } @media only screen and (orientation: portrait) and (max-width: 550px) { .is-phone .sr-chosen-deck-name, .is-phone .sr-current-deck-name { max-width: 10ch; } } @media only screen and (orientation: landscape) and (max-height: 490px) { .is-phone .sr-card-container .sr-content { & hr { margin: var(--size-4-1) 0; } & p { margin-block-start: 0.25rem; margin-block-end: 0.25rem; } } } @media only screen and (orientation: portrait) and (max-width: 440px) { .is-phone .sr-chosen-deck-name, .is-phone .sr-current-deck-name { max-width: 8ch; } } @media only screen and (orientation: portrait) and (max-width: 410px) { .is-phone .sr-chosen-deck-name, .is-phone .sr-current-deck-name { max-width: 6ch; } } .sr-response { display: flex; gap: var(--size-4-4); & .sr-response-button { height: 48px; flex-grow: 1; margin: auto; line-height: 48px; text-align: center; cursor: pointer; user-select: none; } } @media only screen and (orientation: landscape) and (max-height: 490px) { .is-phone .sr-response-button { height: 32px !important; } } @media only screen and (orientation: portrait) and (max-width: 340px) { .is-mobile .sr-response-button { height: 32px !important; } } body:not(.is-phone) .sr-response { padding: var(--size-2-2) 0; } body:not(.is-mobile) .sr-response-button.sr-show-answer-button, body:not(.is-mobile) .sr-response-button.sr-again-button, body:not(.is-mobile) .sr-response-button.sr-hard-button, body:not(.is-mobile) .sr-response-button.sr-good-button, body:not(.is-mobile) .sr-response-button.sr-easy-button { position: relative; &::after { position: absolute; right: 4px; bottom: 4px; height: 0.8rem; background-color: rgb(0 0 0 / 0%); border-radius: var(--input-radius); line-height: 1; padding: 2px 4px; padding-top: 3px; font-size: x-small; box-shadow: inset 1px 1px rgb(255 255 255 / 20%), inset -1px -1px rgb(0 0 0 / 20%); color: #f7f7f7; font-family: var(--font-monospace); } } body:not(.is-mobile) .sr-response-button.sr-show-answer-button::after { content: "Space"; } body:not(.is-mobile) .sr-response-button.sr-again-button::after { content: "0"; } body:not(.is-mobile) .sr-response-button.sr-hard-button::after { content: "1"; } body:not(.is-mobile) .sr-response-button.sr-good-button::after { content: "2"; } body:not(.is-mobile) .sr-response-button.sr-easy-button::after { content: "3"; } .sr-edit-modal { height: 80%; } .sr-edit-view { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size-4-4); } .sr-edit-view .sr-input { flex-grow: 1; width: 100%; resize: none; } .sr-edit-view .sr-response { display: grid; grid-template-columns: auto auto auto; width: 100%; margin-top: 0; } .sr-edit-view .sr-response-button { width: 100%; } .sr-edit-view .sr-response-button.sr-dummy-button { opacity: 0; cursor: default; } .sr-confirmation-modal-header { text-align: start; margin-left: unset; } .sr-note-review-page { display: flex; flex-direction: column; gap: var(--size-4-4); .tree-item.mod-root > .tree-item-children { padding-inline-start: 0; margin-inline-start: 0; border-inline-start: none; } & .tree-item-self:hover { background-color: var(--background-modifier-hover); border-radius: var(--input-radius); } .nav-file-title { display: flex; align-items: center; justify-content: space-between; } .nav-file-title-content { display: flex; align-items: center; justify-content: flex-start; flex-grow: 1; } .sr-review-context-btn { &:hover { background-color: var(--background-modifier-hover); cursor: pointer; } } } .sr-note-review-header { display: flex; flex-direction: column; gap: var(--size-4-2); padding: var(--size-4-2); border-bottom: 1px solid var(--background-modifier-border); } .sr-note-review-header-title-wrapper { display: flex; align-items: center; gap: var(--size-4-2); } .sr-note-review-header-title-icon { display: flex; justify-content: center; align-items: center; } .sr-note-review-header-title { font-size: var(--font-ui-large); font-weight: var(--font-semibold); } .sr-note-review-header-subtitle-wrapper { display: flex; justify-content: flex-start; align-items: center; gap: var(--size-4-2); font-size: var(--font-ui-small); color: var(--text-faint); } .sr-status-bar-item { display: flex; align-items: center; justify-content: center; gap: var(--size-4-1); &.mod-clickable { --cursor: pointer; } } .sr-settings-tab { overflow: hidden; } .is-phone .modal.mod-settings .sr-settings-tab { padding-bottom: max(var(--safe-area-inset-bottom), var(--size-4-4)); } .sr-main-page { & .sr-settings-page-title-icon { display: flex; justify-content: center; align-items: center; } & .sr-settings-page-title { display: flex; align-items: center; gap: var(--size-4-2); } } .sr-settings-tab { & .sr-main-page { & .setting-item { flex-direction: row !important; align-items: center !important; & .setting-item-info { align-self: unset !important; } & .setting-item-control { width: unset !important; justify-content: flex-end !important; } } } } .is-phone .modal .sr-settings-tab { & .sr-settings-page-title-wrapper { font-size: var(--font-ui-normal); padding-left: var(--size-4-2); border-left: 1px solid var(--background-modifier-border); } & .sr-settings-page-header { padding: var(--size-4-2); border: unset; background-color: var(--setting-items-background); border-radius: var(--setting-items-radius); } } .sr-settings-page { display: flex; flex-direction: column; gap: var(--size-4-4); height: 100%; width: 100%; overflow: hidden; & button { cursor: pointer; } } .sr-settings-page-header { display: flex; align-items: center; gap: var(--size-4-2); padding-bottom: var(--size-4-2); border-bottom: 1px solid var(--background-modifier-border); cursor: pointer; } .sr-settings-page-title-setting { cursor: pointer; } .sr-settings-page-title-wrapper { display: flex; justify-content: center; align-items: center; gap: var(--size-4-2); font-size: var(--font-ui-large); } .sr-settings-page-title-icon { display: flex; justify-content: center; align-items: center; } .sr-settings-page-content { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; height: 100%; } body:not(.is-phone) .sr-settings-page-content { padding-right: var(--size-4-1); } .sr-statistics-page { display: flex; flex-direction: column; gap: var(--size-4-4); } .sr-setting-override > .setting-item-name, .sr-setting-override > .setting-item-control, .sr-setting-override > .setting-item-info { display: none; } .sr-chart-container, .sr-chart-canvas-container { height: 100%; width: 100%; position: relative; } .gridjs *, .gridjs :after, .gridjs :before { box-sizing: border-box; } .gridjs-wrapper { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-color: #e5e7eb; border-style: solid; border-radius: 8px 8px 0 0; border-width: 1px 1px 0 1px; display: block; overflow: auto; position: relative; width: 100%; z-index: 1; height: calc(45px * 10 + 54px); } .gridjs-wrapper:nth-last-of-type(2) { border-bottom-width: 1px; border-radius: 8px; } .gridjs-search-input { width: 100%; } .gridjs-footer button, .gridjs-head button { background-color: transparent; background-image: none; border: none; cursor: pointer; margin: 0; outline: none; padding: 0; } .gridjs-temp { position: relative; } .gridjs-head { margin-bottom: 5px; padding: 5px 1px; width: 100%; } .gridjs-head:after { clear: both; content: ""; display: block; } .gridjs-head:empty { border: none; padding: 0; } .gridjs-container { color: #000; display: inline-block; overflow: hidden; padding: 2px; position: relative; z-index: 0; } .gridjs-footer { background-color: #fff; border-style: solid; border-width: 0px 1px 1px 1px; border-color: #e5e7eb; border-radius: 0 0 8px 8px; border-top: 1px solid #e5e7eb; display: block; padding: 12px 24px; position: relative; width: 100%; z-index: 5; } .gridjs-footer:empty { border: none; padding: 0; } input.gridjs-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border: 1px solid #d2d6dc; border-radius: 5px; font-size: 14px; line-height: 1.45; outline: none; padding: 10px 13px; } input.gridjs-input:focus { border-color: #9bc2f7; box-shadow: 0 0 0 3px rgba(149, 189, 243, 0.5); } .gridjs-pagination { color: #3d4044; display: flex; justify-content: center; align-items: center; } .gridjs-pagination:after { clear: both; content: ""; display: block; } .gridjs-pagination .gridjs-summary { float: left; margin-top: 5px; } .gridjs-pagination .gridjs-pages { display: flex; justify-content: center; align-items: center; gap: var(--size-4-2); } .is-mobile .gridjs-pagination .gridjs-pages { gap: 0; } .is-mobile .gridjs-pagination .gridjs-pages button { border-right: none; border-radius: 0; } .gridjs-pagination .gridjs-pages button:last-child { border-bottom-right-radius: 6px; border-top-right-radius: 6px; border-right: 1px solid #d2d6dc; } .gridjs-pagination .gridjs-pages button:first-child { border-bottom-left-radius: 6px; border-top-left-radius: 6px; } .gridjs-pagination .gridjs-pages button { background-color: #fff; border: 1px solid #d2d6dc; outline: none; padding: 5px 14px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .gridjs-pagination .gridjs-pages button:focus { border-right: 1px solid #d2d6dc; box-shadow: 0 0 0 2px rgba(149, 189, 243, 0.5); margin-right: -1px; position: relative; } .gridjs-pagination .gridjs-pages button:hover { background-color: #f7f7f7; color: #3c4257; outline: none; } .gridjs-pagination .gridjs-pages button:disabled, .gridjs-pagination .gridjs-pages button:hover:disabled, .gridjs-pagination .gridjs-pages button[disabled] { background-color: #fff; color: #6b7280; cursor: default; } .gridjs-pagination .gridjs-pages button.gridjs-spread { background-color: #fff; box-shadow: none; cursor: default; } .gridjs-pagination .gridjs-pages button.gridjs-currentPage { background-color: #f7f7f7; font-weight: 700; } .gridjs-pagination .gridjs-pages button:last-child:focus { margin-right: 0; } button.gridjs-sort { background-color: transparent; background-position-x: center; background-repeat: no-repeat; background-size: contain; border: none; cursor: pointer; float: right; height: 24px; margin: 0; outline: none; padding: 0; width: 13px; } button.gridjs-sort-neutral { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDEuOTk4IiBoZWlnaHQ9IjQwMS45OTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMS45OTggNDAxLjk5OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTczLjA5MiAxNjQuNDUyaDI1NS44MTNjNC45NDkgMCA5LjIzMy0xLjgwNyAxMi44NDgtNS40MjQgMy42MTMtMy42MTYgNS40MjctNy44OTggNS40MjctMTIuODQ3cy0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2IDUuNDI0QzIxMC4yMzIgMS44MTIgMjA1Ljk1MSAwIDIwMC45OTkgMHMtOS4yMzMgMS44MTItMTIuODUgNS40MjRMNjAuMjQyIDEzMy4zMzFjLTMuNjE3IDMuNjE3LTUuNDI0IDcuOTAxLTUuNDI0IDEyLjg1IDAgNC45NDggMS44MDcgOS4yMzEgNS40MjQgMTIuODQ3IDMuNjIxIDMuNjE3IDcuOTAyIDUuNDI0IDEyLjg1IDUuNDI0ek0zMjguOTA1IDIzNy41NDlINzMuMDkyYy00Ljk1MiAwLTkuMjMzIDEuODA4LTEyLjg1IDUuNDIxLTMuNjE3IDMuNjE3LTUuNDI0IDcuODk4LTUuNDI0IDEyLjg0N3MxLjgwNyA5LjIzMyA1LjQyNCAxMi44NDhMMTg4LjE0OSAzOTYuNTdjMy42MjEgMy42MTcgNy45MDIgNS40MjggMTIuODUgNS40MjhzOS4yMzMtMS44MTEgMTIuODQ3LTUuNDI4bDEyNy45MDctMTI3LjkwNmMzLjYxMy0zLjYxNCA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDggMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDctMy42MTQtMy42MTYtNy44OTktNS40Mi0xMi44NDgtNS40MnoiLz48L3N2Zz4=); background-position-y: center; opacity: 0.3; } button.gridjs-sort-asc { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuMzYyIiBoZWlnaHQ9IjI5Mi4zNjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI5Mi4zNjIgMjkyLjM2MSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI4Ni45MzUgMTk3LjI4NyAxNTkuMDI4IDY5LjM4MWMtMy42MTMtMy42MTctNy44OTUtNS40MjQtMTIuODQ3LTUuNDI0cy05LjIzMyAxLjgwNy0xMi44NSA1LjQyNEw1LjQyNCAxOTcuMjg3QzEuODA3IDIwMC45MDQgMCAyMDUuMTg2IDAgMjEwLjEzNHMxLjgwNyA5LjIzMyA1LjQyNCAxMi44NDdjMy42MjEgMy42MTcgNy45MDIgNS40MjUgMTIuODUgNS40MjVoMjU1LjgxM2M0Ljk0OSAwIDkuMjMzLTEuODA4IDEyLjg0OC01LjQyNSAzLjYxMy0zLjYxMyA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDdzLTEuODE0LTkuMjMtNS40MjctMTIuODQ3eiIvPjwvc3ZnPg==); background-position-y: 35%; background-size: 10px; } button.gridjs-sort-desc { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuMzYyIiBoZWlnaHQ9IjI5Mi4zNjIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI5Mi4zNjIgMjkyLjM2MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI4Ni45MzUgNjkuMzc3Yy0zLjYxNC0zLjYxNy03Ljg5OC01LjQyNC0xMi44NDgtNS40MjRIMTguMjc0Yy00Ljk1MiAwLTkuMjMzIDEuODA3LTEyLjg1IDUuNDI0QzEuODA3IDcyLjk5OCAwIDc3LjI3OSAwIDgyLjIyOGMwIDQuOTQ4IDEuODA3IDkuMjI5IDUuNDI0IDEyLjg0N2wxMjcuOTA3IDEyNy45MDdjMy42MjEgMy42MTcgNy45MDIgNS40MjggMTIuODUgNS40MjhzOS4yMzMtMS44MTEgMTIuODQ3LTUuNDI4TDI4Ni45MzUgOTUuMDc0YzMuNjEzLTMuNjE3IDUuNDI3LTcuODk4IDUuNDI3LTEyLjg0NyAwLTQuOTQ4LTEuODE0LTkuMjI5LTUuNDI3LTEyLjg1eiIvPjwvc3ZnPg==); background-position-y: 65%; background-size: 10px; } button.gridjs-sort:focus { outline: none; } table.gridjs-table { border-collapse: collapse; display: table; margin: 0; max-width: 100%; overflow: auto; padding: 0; table-layout: fixed; text-align: left; width: 100%; } .gridjs-tbody, td.gridjs-td { background-color: #fff; } td.gridjs-td { overflow: hidden; border: 1px solid #e5e7eb; box-sizing: border-box; padding: 12px 24px; max-height: calc(45px - 24px); text-overflow: ellipsis; text-wrap-mode: nowrap; } td.gridjs-td:first-child { border-left: none; } td.gridjs-td:last-child { border-right: none; } td.gridjs-message { text-align: center; } th.gridjs-th { background-color: #f9fafb; border: 1px solid #e5e7eb; border-top: none; box-sizing: border-box; color: #6b7280; outline: none; padding: 14px 24px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; } th.gridjs-th .gridjs-th-content { float: left; overflow: hidden; text-overflow: ellipsis; width: 100%; } th.gridjs-th-sort { cursor: pointer; } th.gridjs-th-sort .gridjs-th-content { width: calc(100% - 15px); } th.gridjs-th-sort:focus, th.gridjs-th-sort:hover { background-color: #e5e7eb; } th.gridjs-th-fixed { box-shadow: 0 1px 0 0 #e5e7eb; position: sticky; } @supports (-moz-appearance: none) { th.gridjs-th-fixed { box-shadow: 0 0 0 1px #e5e7eb; } } th.gridjs-th:first-child { border-left: none; } th.gridjs-th:last-child { border-right: none; } .gridjs-tr { border: none; } .gridjs-tr-selected td { background-color: #ebf5ff; } .gridjs-tr:last-child td { border-bottom: 0; } .gridjs-loading-bar { background-color: #fff; opacity: 0.5; z-index: 10; } .gridjs-loading-bar, .gridjs-loading-bar:after { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .gridjs-loading-bar:after { animation: shimmer 2s infinite; background-image: linear-gradient( 90deg, hsla(0, 0%, 80%, 0), hsla(0, 0%, 80%, 0.2) 20%, hsla(0, 0%, 80%, 0.5) 60%, hsla(0, 0%, 80%, 0)); content: ""; transform: translateX(-100%); } @keyframes shimmer { to { transform: translateX(100%); } } .gridjs-td .gridjs-checkbox { cursor: pointer; display: block; margin: auto; } .gridjs-resizable { bottom: 0; position: absolute; right: 0; top: 0; width: 5px; } .gridjs-resizable:hover { background-color: #9bc2f7; cursor: ew-resize; }