/* Grid */ .htk-grid { margin: auto; border-collapse: collapse; } .htk-grid > thead > tr, .htk-grid > tfoot > tr { background-color: #009688; vertical-align: middle; height: 3em; } .htk-grid th { color: white; cursor: pointer; font-weight: normal; padding: 0 0.4em; } .htk-grid th:hover { background-color: rgba(1, 1, 1, 0.2); } .htk-grid tr { height: 3.5em; } .htk-grid > tfoot a, .htk-grid > thead a { color: black; } .htk-grid tr.pair-row { background-color: transparent; } .htk-grid > tbody tr { border-top: 1px solid #DDD; } .htk-grid > tbody tr:first-child { border-top: none; } .htk-grid > tbody td { margin: 0; padding: 0 0.5em; } .htk-grid th, .htk-grid td { text-align: left; } .htk-grid td:first-child, .htk-grid th:first-child { padding-left: 1em; } .htk-grid td:last-child, .htk-grid th:last-child { padding-right: 1em; } .htk-grid .message { padding: 1.5em; text-align: center; } .htk-grid .message > * { display: inline-block; vertical-align: middle; padding-right: 0.8em; } .htk-grid .message > img { height: 1.8em; } /* Grid cells */ th.cell-spin { text-align: right; } td.cell-spin { width: 2.5em; text-align: right; } th.cell-check, th.cell-radio { text-align: center; } td.cell-button { max-width: 1px; text-align: center; } td.cell-button > button { margin: 0; padding: 0.5em; border: none; background-color: transparent; border-radius: 0.1em; } td.cell-button > button:hover { background-color: rgba(1, 1, 1, 0.1); } td.cell-button img { height: 1.5em; display: block; margin: auto; } td.cell-image { text-align: center; } td.cell-image .htk-image { max-width: 2.5em; max-height: 2.5em; display: block; margin: auto; } /* Select */ .htk-select { width: 100%; height: 2em; text-align: left; } .htk-select-menu { height: 100%; max-height: 80em; overflow: auto; min-width: 14em; } .htk-select-menu tbody > tr { border-top: none; height: 2.5em; } .htk-select-menu td.message { padding: 1em; } .htk-select-menu tr:hover { background-color: rgba(1, 1, 1, 0.1); cursor: pointer; } .htk-select-menu td { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Button */ .htk-button > span { margin-left: .5em; } /* Repater */ .htk-repeater > .message { padding: 1.5em; text-align: center; } .htk-repeater > .message > * { vertical-align: middle; } .htk-repeater > .message > img, .htk-repeater > .message > .htk-spinner { display: inline-block; padding-right: .8em; height: 1.8em; } /* Calendar */ .htk-calendar { width: 20em; background-color: white; border: none; } .htk-calendar table { border-collapse: collapse; } .htk-calendar thead tr, .htk-calendar tfoot tr { background-color: #009688; color: white; font-weight: normal; vertical-align: middle; text-align: center; height: 3em; } .htk-calendar thead span { color: white; } .htk-calendar thead tr { border-bottom: none; } .htk-calendar tfoot tr { border-top: none; } .htk-calendar th.button:hover { cursor: pointer; background-color: rgba(1, 1, 1, 0.2); } .htk-calendar col { width: 14.2%; } .htk-calendar tr { height: 2em; } .htk-calendar tbody td { text-align: right; } .htk-calendar tbody td > div { height: 2em; width: 2em; line-height: 2em; text-align: center; border-radius: 2em; padding: 0.3em; margin: 0 auto; color: #555; } .htk-calendar div.disabled { color: #999; } .htk-calendar div.today { font-weight: bold; color: black; } .htk-calendar div.selected { color: white; background-color: #009688; } .htk-calendar div.enabled:hover { cursor: pointer; background-color: #008678; color: white; } /* Image */ .htk-image { position: relative; overflow: hidden; } .htk-image.clickable:hover { cursor: pointer; opacity: 0.85; } .htk-image > img { display: block; height: 100%; width: 100%; } .htk-image > button { position: absolute; top: 0; left: 0; margin: 0; padding: .15em; display: none; } .htk-image:hover > button { display: block; } .htk-image > button > img { display: block; height: 1.2em; height: 1.2em; } /* Full image */ .htk-full-image img { display: block; cursor: pointer; } .htk-full-image .htk-spinner { background-color: #FFF; margin: .6em; display: block; } /* Image editor */ .htk-image-editor { width: 20em; margin: 0 auto; } .htk-image-editor h2 { color: white; background-color: #009688; text-align: left; font-size: 1.3em; line-height: 1.7em; font-weight: normal; padding: 0.6em 0.8em; margin: 0; } .htk-image-editor iframe { display: none; } .htk-image-editor form { padding: 1.5em; } .htk-image-editor .footer { margin-top: 2em; } .htk-image-editor .footer > .htk-spinner { padding-right: 1.2em; height: 1.3em; width: 1.3em; } .htk-image-editor .footer > .htk-spinner, .htk-image-editor .footer > input { float: right; } /* Toast */ .htk-toast { z-index: 210; display: block; position: fixed; left: 50%; top: 4em; width: 21em; margin-left: -10.5em; text-align: center; overflow: auto; max-height: 40em; overflow: visible; } .htk-toast > div { margin: .5em 0; padding: .5em 2%; border-radius: 0.1em; box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6); width: 96%; opacity: 0; transform: translateZ(0) translateY(-1em); -webkit-transform: translateZ(0) translateY(-1em); transition-property: opacity, transform; transition-duration: 200ms; transition-timing-function: ease-out; } .htk-toast > div.show { opacity: 1; transform: translateZ(0) translateY(0em); -webkit-transform: translateZ(0) translateY(0em); } .htk-toast > .message { background-color: #BBFFBB; color: #363; } .htk-toast > .warning { background-color: #FFE0B2; color: #C30; } .htk-toast > .error { background-color: #FFCDD2; color: #A00; } /* Popup */ .htk-background { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 190; background-color: rgba(1, 1, 1, 0.7); opacity: 0; transition: opacity 200ms ease-in-out; } .htk-popup { z-index: 200; display: block; position: fixed; overflow: hidden; background-color: white; border-radius: 0.15em; box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6); box-sizing: content-box; } .htk-popup.modal { position: absolute; font-size: 1.2em; top: 50%; left: 50%; } .htk-popup > * { border-radius: 0.1em; } /* Dialog */ .htk-dialog { padding: 1.5em; max-width: 20em; font-weight: normal; color: #555; } .htk-dialog p { margin: 0; } .htk-dialog img { float: left; height: 3em; margin-top: 0; margin-right: 1em; } .htk-dialog p { padding: 0; } .htk-dialog .button-bar > button { float: right; margin-left: 1em; margin-top: .5em; } /* Assistant */ .htk-assistant > div { display: none; } .htk-assistant > div > h2 { text-align: center; font-style: italic; font-weight: normal; font-size: 1.5em; padding: 0; margin: 0; margin-bottom: 1em; } .htk-assistant * { color: #555; } /* Assistant bar */ .htk-assistant-bar { margin: 0 auto; position: relative; } .htk-assistant-bar img { cursor: pointer; } .htk-assistant-bar > img { position: absolute; width: 1.8em; top: 0; padding: .3em; border-radius: 0.1em; margin: -0.3 0; } .htk-assistant-bar > img:hover { background-color: rgba(1,1,1,0.1); } .htk-assistant-bar > img.previous, .htk-assistant-bar > img.next { margin: -0.3em; } .htk-assistant-bar > img.previous { left: 0; } .htk-assistant-bar > img.next { right: 0; } .htk-assistant-bar > div { margin: 0 auto; } .htk-assistant-bar > div > img { padding: .3em .2em; width: 1.3em; display: inline-block; } .htk-assistant-bar > div > img:hover { opacity: .7; } /* Search entry */ .htk-search-entry { background-color: white; height: 2.2em; } .htk-search-entry > * { display: inline-block; vertical-align: middle; } .htk-search-entry > img { margin: 0; height: 1.5em; margin: 0 .4em; } .htk-search-entry > .entry { margin: 0; border: none; width: 8em; box-shadow: none; } .htk-search-entry > .entry:focus { background-color: initial; } /* Loader */ .htk-spinner { width: 1.8em; height: 1.8em; position: relative; display: inline-block; } .htk-spinner > .spinner { left: 0; position: absolute; width: inherit; height: inherit; box-sizing: border-box; border-radius: 50%; border: .3em solid transparent; border-top-color: #666; border-left-color: #666; animation: spinner 1s linear infinite; -webkit-animation: spinner 1s linear infinite; } .htk-spinner.dark > .spinner { border-top-color: white; border-left-color: white; } @keyframes spinner { to {transform: rotate(360deg);} } @-webkit-keyframes spinner { to {-webkit-transform: rotate(360deg);} }