/** * This file provides styles for the media manager popup * (mediamanager.php). */ /*____________ structure ____________*/ html.popup { overflow: auto; } #media__manager { height: 100%; overflow: hidden; } #mediamgr__aside { width: 30%; height: 100%; overflow: auto; position: absolute; left: 0; border-right: 1px solid @ini_border; } [dir=rtl] #mediamgr__aside { left: auto; right: 0; border-right-width: 0; border-left: 1px solid @ini_border; } #mediamgr__aside .pad { padding: .5em; } #mediamgr__content { width: 69.7%; height: 100%; overflow: auto; position: absolute; right: 0; } [dir=rtl] #mediamgr__content { right: auto; left: 0; } #mediamgr__content .pad { padding: .5em; } #media__manager h1, #media__manager h2 { font-size: 1.5em; margin-bottom: .5em; padding-bottom: .2em; border-bottom: 1px solid @ini_border; } /* left side ********************************************************************/ /*____________ options ____________*/ #media__opts { margin-bottom: .5em; } #media__opts input { margin-right: .3em; } [dir=rtl] #media__opts input { margin-right: 0; margin-left: .3em; } #media__opts label { } /*____________ tree ____________*/ #media__tree ul { padding-left: .2em; } [dir=rtl] #media__tree ul { padding-left: 0; padding-right: .2em; } #media__tree ul li { clear: left; list-style-type: none; list-style-image: none; margin-left: 0; } [dir=rtl] #media__tree ul li { clear: right; margin-right: 0; } #media__tree ul li img { float: left; padding: .5em .3em 0 0; } [dir=rtl] #media__tree ul li img { float: right; padding: .5em 0 0 .3em; } #media__tree ul li div.li { display: inline; } #media__tree ul li li { margin-left: 1.5em; } [dir=rtl] #media__tree ul li li { margin-left: 0; margin-right: 1.5em; } /* right side ********************************************************************/ /*____________ upload form ____________*/ /* upload info */ #media__content div.upload { font-size: .9em; margin-bottom: .5em; } #mediamanager__uploader { margin-bottom: 1em; } #mediamanager__uploader p { margin-bottom: .5em; } /*____________ file list ____________*/ #media__content img.load { margin: 1em auto; } #media__content .odd, #media__content .even { padding: .5em; } #media__content .odd { background-color: @ini_background_alt; } #media__content .even { } /* highlight newly uploaded or edited file */ #media__content #scroll__here { border: 1px dashed @ini_border; } /* link which inserts media file */ #media__content a.mediafile { margin-right: 1.5em; font-weight: bold; cursor: pointer; } [dir=rtl] #media__content a.mediafile { margin-right: 0; margin-left: 1.5em; } #media__content span.info { } #media__content img.btn { vertical-align: text-bottom; } /* info how to insert media, if JS disabled */ #media__content div.example { color: @ini_text_neu; margin-left: 1em; } #media__content div.detail { padding: .2em 0; } #media__content div.detail div.thumb { float: left; margin: 0 .5em 0 18px; } [dir=rtl] #media__content div.detail div.thumb { float: right; margin: 0 18px 0 .5em; } #media__content div.detail div.thumb a { display: block; cursor: pointer; } #media__content div.detail p { margin-bottom: 0; } /*____________ media search ____________*/ #dw__mediasearch { } #dw__mediasearch p { } #dw__mediasearch label { width: 100%; } #dw__mediasearch label span { display: block; } #dw__mediasearch input[type="text"] { background-color: @ini_background; color: @ini_text; border: @ini_border solid 1px; font-family: @ini_mono_fonts; font-size: @ini_alt_font_size; padding: .15em; margin: 0 .25rem; width: ~"calc(100% - 1.25rem)"; } #dw__mediasearch button { background-color: #004D40; color: #FFF; padding: .25rem 1rem; border: transparent none 0; cursor: pointer; font-size: 1rem; margin-top: .5em; } /* dark mode overrides */ @media (prefers-color-scheme: dark) { body.darkmode { #media__content .odd { background-color: @ini_background_dark; } #dw__mediasearch input[type="text"] { background-color: @ini_background_site_dark; color: @ini_text_dark; border-color: @ini_border_dark; } } }