styles.css

/* h5ai v0.30.0 - https://larsjung.de/h5ai/ */ @charset "utf-8"; /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100% } #sidebar img, #search img, #sidebar-toggle img, .header img { filter: invert(1); } body { margin: 0 } main { display: block } h1 { font-size: 2em; margin: .67em 0 } hr { box-sizing: content-box; height: 0; overflow: visible } pre { font-family: monospace, monospace; font-size: 1em } a { background-color: transparent } abbr[title] { border-bottom: 0; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted } b, strong { font-weight: bolder } code, kbd, samp { font-family: monospace, monospace; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -0.25em } sup { top: -0.5em } img { border-style: none } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 } button, input { overflow: visible } button, select { text-transform: none } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0 } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText } fieldset { padding: .35em .75em .625em } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } progress { vertical-align: baseline } textarea { overflow: auto } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0 } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px } [type="search"]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } details { display: block } summary { display: list-item } template { display: none } [hidden] { display: none } ::-moz-selection { color: #fff; background: #ff4081; text-shadow: none } ::selection { color: #fff; background: #ff4081; text-shadow: none } *:focus { outline: 0 } code, pre { font-family: "Ubuntu Mono", "Monaco", "Lucida Sans Typewriter", "monospace"; font-size: 15px; font-weight: normal; color: rgb(255, 255, 255) } audio, canvas, iframe, img, svg, video { vertical-align: middle } textarea { resize: vertical } .hidden { display: none !important } .invisible { visibility: hidden } .clearfix:before, .clearfix:after { content: " "; display: table } .clearfix:after { clear: both } .raised { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5) } .popup { box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.5) } .rounded { border-radius: 2px } .clear-appearance { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none } .eased-transition { transition: all .2s ease-in-out } .flex-base { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: flex-start; align-items: stretch } .flex-column { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: flex-start; align-items: stretch; flex-direction: column } .flex-row { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: flex-start; align-items: stretch; flex-direction: row } .el-button { border-radius: 2px; transition: all .2s ease-in-out; color: #fff; background: #42a5f5; cursor: pointer; text-decoration: none } .el-button:hover { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5) } .el-input { border-radius: 2px; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; background: #fff; border: 0; outline: 0; background: #fafafa; border: 1px solid rgba(0, 0, 0, 0.05) } #cm-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 200 } #cm-overlay .cm-panel { box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.5); border-radius: 2px; display: block; position: absolute; left: 100px; top: 100px; color: rgb(255, 255, 255); background: #fff; z-index: 10; overflow: auto; min-width: 200px } #cm-overlay .cm-panel ul { margin: 0; padding: 0; list-style: none; text-align: left } #cm-overlay .cm-label { padding: 8px 16px; white-space: nowrap; font-weight: bold } #cm-overlay .cm-entry { padding: 8px 16px; white-space: nowrap; cursor: pointer } #cm-overlay .cm-entry:hover { color: #42a5f5; background: rgba(0, 0, 0, 0.03) } #cm-overlay .cm-icon { position: relative; top: -2px } #cm-overlay .cm-icon img { width: 20px; height: 20px } #cm-overlay .cm-icon.no-icon { opacity: 0 } #cm-overlay .cm-text { margin: 0 0 0 12px } #cm-overlay .cm-sep { height: 1px; margin: 8px 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, 0.08) } #crumbbar { overflow: hidden; height: 48px; font-size: 16px; padding: 0 8px } #crumbbar a, #crumbbar a:active, #crumbbar a:visited { color: rgb(255, 255, 255); cursor: pointer; text-decoration: none } #crumbbar a.active, #crumbbar a:active.active, #crumbbar a:visited.active { font-weight: bold } #crumbbar a:hover, #crumbbar a:active:hover, #crumbbar a:visited:hover { color: #42a5f5 } #crumbbar a:focus, #crumbbar a:active:focus, #crumbbar a:visited:focus { outline: 0 } #crumbbar .crumb { transition: all .2s ease-in-out; display: inline-block } #crumbbar .sep { width: 24px; height: 24px; padding: 12px 0; line-height: 48px; display: inline-block; vertical-align: top } #crumbbar .crumb:first-of-type .sep { width: 0 } #crumbbar .label { line-height: 48px; display: inline-block; vertical-align: top; padding: 0 8px } #crumbbar .hint { width: 20px; height: 20px; padding: 16px 0 0 0; line-height: 48px; display: inline-block; vertical-align: top; position: relative; top: -2px } #content-header, #content-footer { margin: 16px; padding: 8px; color: rgb(255, 255, 255) } #content-header a, #content-footer a, #content-header a:active, #content-footer a:active, #content-header a:visited, #content-footer a:visited { color: #42a5f5; text-decoration: none; cursor: pointer } #content-header a:hover, #content-footer a:hover, #content-header a:active:hover, #content-footer a:active:hover, #content-header a:visited:hover, #content-footer a:visited:hover { color: #212121 } #content-header h1, #content-footer h1, #content-header h2, #content-footer h2, #content-header h3, #content-footer h3, #content-header h4, #content-footer h4, #content-header h5, #content-footer h5, #content-header h6, #content-footer h6, #content-header p, #content-footer p { margin: .1em 0 } #filter input { display: none; border: 0; font-size: 16px; color: rgb(255, 255, 255); background: transparent; outline: 0; width: 160px; padding: 0 12px 0 4px; line-height: 48px; vertical-align: top } #filter.active input { display: inline-block } #filter.pending input { color: rgba(255, 255, 255, 0.26) } #info { overflow: auto; flex: 0 0 auto; order: 99; padding: 32px 32px 32px 48px; white-space: nowrap; overflow-x: hidden; width: 240px } #info .icon { width: 240px; height: 180px } #info .icon img { border-radius: 2px; display: block; overflow: hidden; margin: 0 auto; width: 180px; height: 180px } #info .icon .thumb { width: 240px } #info .block { border-top: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05); margin: 0 0 24px 0; padding: 24px 0 } #info .label { font-size: 16px; margin-bottom: 16px } #info .time, #info .size, #info .content { line-height: 20px; height: 20px } #info .qrcode { margin: 0 auto; width: 200px } #info .qrcode img { display: block } #pv-content-aud { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5); position: absolute; max-width: 100%; max-height: 100% } #pv-content-img { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5); position: absolute; image-orientation: from-image; max-width: 100%; max-height: 100%; background-color: #f8f8f8; background-image: -webkit-linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8), -webkit-linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8); background-size: 60px 60px; background-position: 0 0, 30px 30px } #pv-content-img.loading { opacity: .5; margin-top: 32px; width: 240px; height: 240px; border-radius: 1000px; overflow: hidden } #pv-content-txt { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5); box-sizing: border-box; max-width: 960px; text-align: left; background: #fff; margin: 0 auto; padding: 8px; overflow: auto } #pv-content-txt a, #pv-content-txt a:active, #pv-content-txt a:visited { color: #2080ff; text-decoration: none; cursor: pointer } #pv-content-txt a:hover, #pv-content-txt a:active:hover, #pv-content-txt a:visited:hover { color: #68a9ff } pre#pv-content-txt code { line-height: 1.2em } div#pv-content-txt { font-size: 1.1em; padding: 8px 24px } div#pv-content-txt code { color: #008200 } #pv-content-vid { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5); position: absolute; max-width: 100%; max-height: 100% } #pv-content-vid:-webkit-full-screen { top: auto !important; left: auto !important } #pv-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background: rgba(0, 0, 0, 0.5); transition: background-color .3s ease-in-out; text-align: center } #pv-overlay.fullscreen { background: #212121 } #pv-container { position: absolute } #pv-spinner { position: absolute } #pv-spinner .back { width: 240px; height: 240px; margin: -120px -120px; border-radius: 120px; opacity: .5; overflow: hidden } #pv-spinner .spinner { width: 100px; height: 100px; margin: -50px -50px } #pv-prev-area, #pv-next-area { position: absolute; top: 50%; cursor: pointer } #pv-prev-area img, #pv-next-area img { transition: all .2s ease-in-out; display: block; width: 48px; height: 48px; margin: -36px 0; padding: 12px; opacity: .5 } #pv-prev-area:hover img, #pv-next-area:hover img { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5); opacity: 1; background: rgba(27, 27, 27, 0.8) } #pv-prev-area { left: 0 } #pv-prev-area img { border-radius: 0 8px 8px 0; padding-left: 48px } #pv-next-area { right: 0 } #pv-next-area img { border-radius: 8px 0 0 8px; padding-right: 48px } #pv-buttons { list-style: none; list-style-image: none; margin: 0; padding: 0 } #pv-buttons img { position: relative; width: 24px; height: 24px; padding: 12px } #pv-buttons .bar-label { transition: all .2s ease-in-out; display: block; color: #fff; height: 48px; line-height: 48px; padding: 0 12px; opacity: .7 } #pv-buttons .bar-button { transition: all .2s ease-in-out; display: block; line-height: 48px; opacity: .7; cursor: pointer } #pv-buttons .bar-button:hover { opacity: 1; background: rgba(255, 255, 255, 0.1) } #pv-buttons .bar-left { float: left } #pv-buttons .bar-right { float: right } #pv-bottombar { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5); position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; background: #1b1b1b; height: 48px } #pv-overlay.fullscreen #pv-bottombar { opacity: .5 } @media only screen and (max-width:700px) { #pv-prev-area, #pv-next-area { display: none !important } } #search input { display: none; border: 0; font-size: 16px; color: rgb(255, 255, 255); background: transparent; outline: 0; width: 160px; padding: 0 12px 0 4px; line-height: 48px; vertical-align: top } #search.active input { display: inline-block } #search.pending input { color: rgb(255, 255, 255) } #selection-rect { position: absolute; left: 0; top: 0; z-index: 2; border: 1px dashed rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.1) } html.drag-select, html.drag-select * { cursor: move !important; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } html.drag-select #view .item:hover, html.drag-select * #view .item:hover { box-shadow: none !important } #view .selector { display: none; position: absolute; left: 0; top: 0; width: 22px; height: 22px; background: #42a5f5; cursor: pointer; border-radius: 0 0 2px 0; opacity: .6 } #view .selector:hover { opacity: .8 } #view .selector img { width: 100%; height: 100% } #view .item:hover .selector { display: block } #view .item.selected:not(.selecting), #view .item.selecting:not(.selected) { color: #fff; background: #42a5f5 } #view .item.selected:not(.selecting) .selector, #view .item.selecting:not(.selected) .selector { display: block; opacity: 1 } #view .item.selected:not(.selecting):hover, #view .item.selecting:not(.selected):hover { color: #fff; background: #42a5f5 } #view .no-match { display: none; margin-top: 36px; text-align: center; color: rgba(0, 0, 0, 0.05); font-size: 5em; font-weight: bold } #tree { overflow: auto; flex: 0 0 auto; order: 1; padding: 32px 32px 32px 16px; white-space: nowrap; max-width: 250px; overflow-x: hidden } #tree a, #tree a:active, #tree a.visited { display: block; margin-left: 20px; padding: 3px 0; text-decoration: none; color: rgb(255, 255, 255) } #tree a:hover, #tree a:active:hover, #tree a.visited:hover { color: #42a5f5 } #tree .active>a { font-weight: bold } #tree .indicator { display: block; float: left; padding: 3px 0; position: relative; top: -2px; cursor: pointer } #tree .indicator img { width: 20px; height: 20px; zoom: 1 } #tree .item { clear: left } #tree .item.open>.indicator img { transform: rotate(90deg) } #tree .item.unknown>.indicator { opacity: .3 } #tree .item.none>.indicator { opacity: 0; cursor: inherit } #tree .item.unknown>.content, #tree .item.none>.content, #tree .item.closed>.content { display: none } #tree .icon { position: relative; top: -2px } #tree .icon img { width: 20px; height: 20px } #tree .label { margin: 0 0 0 4px } #tree .content { margin: 0; padding: 0 0 0 20px } #tree .summary { color: rgba(0, 0, 0, 0.26); padding: 0 0 0 8px } #root.info #content { flex: 1 1 auto; order: 50; color: rgb(255, 255, 255); text-align: center } #root.info code { margin: 0 .2em; padding: 2px 4px; border-radius: 4px; letter-spacing: .05em; background: #fafafa; border: 1px solid rgba(0, 0, 0, 0.05); font-size: .9em } #root.info #header a { transition: all .2s ease-in-out; font-size: 4em; font-weight: 300; margin: .8em 0 0 0; color: rgb(255, 255, 255); text-decoration: none } #root.info #header a:hover { color: #42a5f5 } #root.info #support { margin: 24px auto; padding: 18px 0 6px 0; width: 292px; background: #fafafa; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 4px } #root.info #support input[type="image"] { border: 0; width: 100px; padding: 12px 48px } #root.info #pass { border-radius: 2px; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; background: #fff; border: 0; outline: 0; background: #fafafa; border: 1px solid rgba(0, 0, 0, 0.05); display: inline-block; margin: 8px; padding: 0 12px; line-height: 28px; width: 200px; vertical-align: top } #root.info #login, #root.info #logout { border-radius: 2px; transition: all .2s ease-in-out; color: #fff; background: #42a5f5; cursor: pointer; text-decoration: none; display: inline-block; margin: 8px; padding: 0 12px; line-height: 28px; vertical-align: top } #root.info #login:hover, #root.info #logout:hover { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5) } #root.info #hint { margin: 12px auto; width: 320px } #root.info #tests { display: inline-block; text-align: left; list-style-type: none; margin: 48px 0; padding: 0 } #root.info #tests .test { background: #fff; margin: 12px 0 0 0; padding: 8px 12px 12px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.05) } #root.info #tests .label { display: inline-block; width: 250px; font-size: 1.4em } #root.info #tests .result { display: inline-block; width: 250px; text-align: right; font-size: 1.4em; font-weight: bold } #root.info #tests .result.passed { color: #4caf50 } #root.info #tests .result.failed { color: #f44336 } #root.info #tests .info { margin: 4px 0 0 0 } #content { overflow: auto; flex: 1 1 auto; order: 50; position: relative } #fallback { display: none; max-width: 960px; margin: 16px auto; padding: 32px 16px } #fallback table { display: block; width: 100%; border-collapse: collapse; background: #fff } #fallback th, #fallback td { padding: 6px; text-align: left; border: 0; border-bottom: 1px solid #f0f0f0 } #fallback th { color: #aaa; font-weight: normal; line-height: 36px } #fallback td { overflow: hidden; white-space: nowrap } #fallback a, #fallback a:active, #fallback a:visited { display: block; color: inherit; text-decoration: none; cursor: pointer } #fallback a:hover, #fallback a:active:hover, #fallback a:visited:hover { color: #42a5f5 } #fallback .fb-i { width: 20px; padding-left: 12px } #fallback .fb-i img { width: 20px; height: 20px; position: relative; top: -1px } #fallback .fb-n { width: 682px; max-width: 682px } #fallback .fb-d { text-align: right; width: 160px; min-width: 160px } #fallback .fb-s { text-align: right; width: 70px; min-width: 70px; padding-right: 12px } #fallback-hints { display: none; overflow: hidden; text-align: right; background: #fafafa; border-bottom: 1px solid rgba(0, 0, 0, 0.05) } #fallback-hints a, #fallback-hints a:active, #fallback-hints a:visited { transition: all .2s ease-in-out; display: inline-block; line-height: 48px; color: rgba(0, 0, 0, 0.54); text-decoration: none; outline: 0 } #fallback-hints a:hover, #fallback-hints a:active:hover, #fallback-hints a:visited:hover { color: #42a5f5 } #fallback-hints .backlink { margin: 0 16px } #fallback-hints .noJsMsg, #fallback-hints .noBrowserMsg { display: none; margin: 0 16px; color: #f44336 } html.no-js #root, html.no-browser #root { position: static; overflow: auto } html.no-js #fallback, html.no-browser #fallback, html.no-js #fallback-hints, html.no-browser #fallback-hints { display: block } html.no-js .noJsMsg { display: inline !important } html.no-browser .noBrowserMsg { display: inline !important } #mainrow { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: flex-start; align-items: stretch; flex-direction: row; flex: 1 1 auto; order: 50; height: 0 } #notification { position: fixed; left: 50%; width: 200px; margin-left: -100px; z-index: 100; padding: 3px 6px 6px 6px; color: #fff; background: rgba(0, 0, 0, 0.2); border-radius: 0 0 4px 4px; text-align: center; overflow: hidden } #root { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: flex-start; align-items: stretch; flex-direction: column; position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; line-height: 1.4 } #root, input, select { font-family: "Ubuntu", "Roboto", "Helvetica", "Arial", "sans-serif"; font-size: 13px; font-weight: normal; color: rgb(255, 255, 255) } #sidebar { overflow-x: hidden; overflow-y: auto; flex: 0 0 auto; order: 0; background: #fafafa; border-right: 1px solid rgba(0, 0, 0, 0.05); padding: 16px; position: absolute; top: 48px; min-height: 100%; z-index: 1 } #sidebar .block { display: block; margin: 0 0 24px 0; width: 168px } #sidebar .block h1 { font-size: 1em; margin: 2px 0 6px 0 } #sidebar .button { border-radius: 2px; transition: all .2s ease-in-out; display: inline-block; margin: 4px; color: rgb(255, 255, 255); cursor: pointer } #sidebar .button:hover { background: rgba(0, 0, 0, 0.03) } #sidebar .button.active { background: rgba(0, 0, 0, 0.03); box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.4) } #sidebar .button img { width: 24px; height: 24px; padding: 12px } #sidebar .select { border-radius: 2px; background: transparent; overflow: hidden; outline: 0; width: 160px; margin: 4px; line-height: 48px } #sidebar input, #sidebar select { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; background: transparent; width: 100%; border: 0 solid #000; cursor: pointer; outline: 0 } #sidebar input:hover, #sidebar select:hover { background: rgba(0, 0, 0, 0.03) } #sidebar select { width: 187px; padding: 0 8px; height: 48px; line-height: 48px } #sidebar input[type='range'] { border-radius: 2px; width: 144px; margin: 4px; padding: 8px; vertical-align: middle; height: 32px; line-height: 32px } #sidebar .range-track { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; border-width: 0; border-radius: 20px; background: #e0e0e0; height: 6px } #sidebar .range-thumb { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; border-width: 0; border-radius: 20px; background: #616161; width: 16px; height: 16px } #sidebar input[type='range']::-webkit-slider-runnable-track { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; border-width: 0; border-radius: 20px; background: #e0e0e0; height: 6px } #sidebar input[type='range']::-moz-range-track { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; border-width: 0; border-radius: 20px; background: #e0e0e0; height: 6px } #sidebar input[type='range']::-ms-track { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; border-width: 0; border-radius: 20px; background: #e0e0e0; height: 6px } #sidebar input[type='range']::-ms-fill-lower { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; border-width: 0; border-radius: 20px; background: #e0e0e0; height: 6px } #sidebar input[type='range']::-ms-fill-upper { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; border-width: 0; border-radius: 20px; background: #e0e0e0; height: 6px } #sidebar input[type='range']::-webkit-slider-thumb { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; border-width: 0; border-radius: 20px; background: #616161; width: 16px; height: 16px; margin-top: -5px } #sidebar input[type='range']::-moz-range-thumb { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; border-width: 0; border-radius: 20px; background: #616161; width: 16px; height: 16px } #sidebar input[type='range']::-ms-thumb { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; border-width: 0; border-radius: 20px; background: #616161; width: 16px; height: 16px } #sidebar #view-size { display: block } #topbar { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: flex-start; align-items: stretch; flex-direction: row; overflow: hidden; flex: 0 0 auto; order: 1; background: #fafafa; border-bottom: 1px solid rgba(0, 0, 0, 0.05); z-index: 1 } #toolbar { overflow: hidden; flex: 0 0 auto; order: 1; height: 48px } #toolbar .tool { transition: all .2s ease-in-out; display: inline-block; cursor: pointer } #toolbar .tool img { display: inline-block; width: 24px; height: 24px; padding: 12px } #toolbar .tool:hover { background: rgba(0, 0, 0, 0.03) } #flowbar { overflow: hidden; flex: 1 1 auto; order: 2; height: 48px } #backlink { transition: all .2s ease-in-out; display: block; flex: 0 0 auto; order: 99; text-align: center; padding: 6px 12px; overflow: hidden; height: 36px } #backlink, #backlink:active, #backlink:visited { color: rgba(0, 0, 0, 0.26); cursor: pointer; text-decoration: none } #backlink:hover { color: #42a5f5; background: rgba(0, 0, 0, 0.03) } #backlink:focus { outline: 0 } #backlink div { line-height: 18px; white-space: nowrap } #view.view-details { margin: 32px } #view.view-details .header { position: relative; white-space: nowrap; display: list-item; border-bottom: 1px solid rgb(255 255 255 / 30%); ; border-radius: 2px 2px 0 0 } #view.view-details .header .label, #view.view-details .header .date, #view.view-details .header .size { transition: all .2s ease-in-out; line-height: 24px; padding: 0 8px 16px 8px; opacity: .8; outline: 0 } #view.view-details .header .label:hover, #view.view-details .header .date:hover, #view.view-details .header .size:hover { opacity: 1; color: #42a5f5 } #view.view-details .header .sort { display: none; position: relative; top: -2px; width: 20px; height: 20px; padding: 0 4px } #view.view-details .header .ascending .sort { display: inline } #view.view-details .header .descending .sort { display: inline; transform: rotate(180deg); zoom: 1 } #view.view-details .item { overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, 0.07) } #view.view-details .item:hover { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5); z-index: 1 } #view.view-details .item:last-child { border-radius: 0 0 2px 2px } #view.view-details .square { display: inline-block; position: absolute; left: 16px; top: -1px; padding: 8px } #view.view-details .square .thumb { border-radius: 2px; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2) } #view.view-details .label, #view.view-details .date, #view.view-details .size { padding: 0 8px } #view.view-details .date { position: absolute; right: 116px; top: 0 } #view.view-details .size { position: absolute; right: 16px; top: 0 } #view.view-details .item .label, #view.view-details .item .date, #view.view-details .item .size { line-height: 30px } #view.view-details .square { width: 16px; height: 16px } #view.view-details .square img { width: 16px; height: 16px } #view.view-details .label { margin: 0 246px 0 48px } #view.view-details.width-0 .label { margin-right: 4px } #view.view-details.width-0 .date { display: none } #view.view-details.width-0 .size { display: none } #view.view-details.width-1 .label { margin-right: 64px } #view.view-details.width-1 .date { display: none } #view.view-grid { margin: 28px } #view.view-grid .item { border-radius: 2px; overflow: hidden; float: left; margin: 8px } #view.view-grid .item:hover { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5) } #view.view-grid .square { display: inline-block; vertical-align: top } #view.view-grid .label { display: inline-block; vertical-align: top; width: 180px; padding: 0 8px } #view.view-grid .date, #view.view-grid .size { display: none } #view.view-grid .label { line-height: 48px } #view.view-grid .square { width: 48px; height: 48px } #view.view-grid .square img { width: 48px; height: 48px } #view.view-icons { margin: 28px } #view.view-icons .item { border-radius: 2px; overflow: hidden; float: left; margin: 8px } #view.view-icons .item:hover { box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5) } #view.view-icons .landscape { display: block; background: #fafafa } #view.view-icons .label { padding: 0 6px; line-height: 24px; text-align: center } #view.view-icons .date, #view.view-icons .size { display: none } #view.view-icons .item { width: 128px } #view.view-icons .landscape { width: 128px; height: 96px } #view.view-icons .landscape img { width: 96px; height: 96px } #view.view-icons .landscape .thumb { width: 128px } #view a, #view a:active, #view a:visited { display: block; color: inherit; cursor: pointer; text-decoration: none } #view ul { margin: 0; padding: 0; list-style: none } #view .header { display: none } #view .item { position: relative; white-space: nowrap; background: #fff } #view .item:hover { color: #42a5f5; background: #fafafa } #view .folder-parent .date, #view .folder-parent .size { display: none } #view .icon { display: none; text-align: center } #view .icon img { position: relative; top: 50%; transform: translateY(-50%) } #view .icon .thumb { max-width: none; max-height: none } #view .label { display: block; overflow: hidden; text-align: left; text-overflow: ellipsis } #view .date { text-align: right; width: 130px } #view .size { text-align: right; width: 80px } #view #view-hint { display: block; margin-top: 36px; text-align: center; color: rgb(255 255 255 / 5%); font-size: 5em; font-weight: bold } @media only screen and (max-width:700px) { #crumbbar .crumb:not(.active) { display: none } #crumbbar .crumb.active .sep { width: 0 } #tree, #info { display: none !important } } @media print { *, *:before, *:after, *:first-letter, *:first-line { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important } #toolbar, #sidebar, #tree, #info { display: none !important } } #pv-content-aud, #view.view-details .item:hover { box-shadow: unset } #content, #mainrow, #sidebar, #topbar, #view .item { background-color: #1d1f21 } #backlink, #backlink:active, #backlink:visited, #content-footer, #content-header, #crumbbar a, #crumbbar a:active, #crumbbar a:visited, #root, #tree a, #tree a.visited, #tree a:active, input, select { color: #e9e9e9 } #tree a.visited:hover, #tree a:active:hover, #tree a:hover { color: #fff } #view.view-details .item { border-bottom: 1px solid #343638 } #view .item:hover { background: #343638; color: #fff } #view .item, a { transition: all .3s ease } #sidebar { border-right: 3px solid #343638 } #view.view-icons .landscape { background: #272727 } #pv-content-txt { background: #252525; color: #fff; padding: 15px 20px } #pv-content-aud { width: 86%; top: 44.8vh !important } .fullscreen #pv-content-aud { top: 47.3vh !important } audio { filter: invert(1) } audio::-webkit-media-controls-panel { color: #fff; background: #d0d0d0 } audio::-webkit-media-controls-current-time-display { color: #000 } audio::-webkit-media-controls-time-remaining-display { color: #000 } #root.info #header a { color: #eee } #root.info #login, #root.info #logout, #root.info #pass { background: #343638 } #root.info #support, #root.info #tests .test { background: #d7d9db; border-radius: 5px } ::-webkit-scrollbar { width: 12px; height: 12px; background-color: #1d1f21 } ::-webkit-scrollbar-corner { background-color: #1d1f21 } ::-webkit-scrollbar-track { background-color: #1d1f21 } ::-webkit-scrollbar-thumb { background: #343638 } ::-webkit-scrollbar:horizontal { height: 12px } ::selection { color: #fff; background-color: #ffffff57 } ::-moz-selection { color: #fff; background-color: #ffffff57 }