1/** 2 * This file provides the styles for the file uploader 3 * used in the media manager (both fullscreen and popup). 4 */ 5 6.qq-uploader { 7 position: relative; 8 width: 100%; 9} 10#mediamanager__page .qq-upload-list li { 11 display: grid; 12 grid-template-columns: 1.25rem auto 1rem; 13 grid-gap: 5px; 14 align-items: center; 15} 16#mediamanager__page .qq-upload-list li::before { 17 content: '\1F5CE'; 18 color: @ini_text; 19 font-size: 1.25rem; 20 display: inline-block; 21 width: 1.25rem; 22 height:1.5rem; 23 text-align: right; 24} 25 26#mediamanager__page .qq-upload-list li input[type="text"] { 27 font-family: @ini_mono_fonts; 28 font-size: @ini_alt_font_size; 29 background-color: transparent; 30 border: 1px solid transparent; 31 padding: .25em; 32 border-radius: 1.5pt; 33} 34#mediamanager__page .qq-upload-list li input[type="text"]:focus { 35 border-color: @ini_border; 36} 37 38.qq-uploader .error { 39 color: #f00; 40 background-color: #fff; 41} 42 43/* select file button */ 44 45.qq-upload-button, 46#mediamanager__upload_button { 47 display: inline-block; 48 text-decoration: none; 49 font-size: 1rem; 50 cursor: pointer; 51 margin: 1px 1px 5px; 52 padding: 2pt 20pt; 53 border: none 0; 54 color: #FFF; 55 cursor: pointer; 56} 57.qq-upload-button { 58 background-color: #15395B; 59} 60#mediamanager__upload_button { 61 background-color: #B71C1C; 62 padding: .4rem 2.5rem; 63} 64 65 66.qq-upload-button-focus { 67 outline: 1px dotted; 68} 69 70/* drop area */ 71 72.qq-upload-drop-area { 73 background: @ini_background_neu; 74 color: @ini_text_neu; 75 text-align: center; 76} 77 78.qq-upload-drop-area span { 79 padding: 2em .5em; 80} 81 82.qq-upload-drop-area-active { 83 position: fixed; 84 top: 0; left: 0; 85 width: 100vw; 86 height: 100vh; 87 min-height: 70px; 88 background: fadeout(@ini_background_alt, 10%);; 89 z-index: 99; 90} 91.qq-upload-drop-area-active span { 92 display: block; 93 position: absolute; 94 top: 50%; 95 width: 100%; 96 margin-top: -8px; 97 font-size: 120%; 98 color: #15395B; 99} 100/* list of files to upload */ 101 102div.qq-uploader ul { 103 margin: 0; 104 padding: 0; 105 list-style: none; 106} 107 108.qq-uploader li { 109 margin: 0 0 5px; 110 color: @ini_text; 111} 112 113.qq-uploader li span, 114.qq-uploader li input, 115.qq-uploader li a { 116 margin-right: 5px; 117} 118 119.qq-upload-file { 120 display: block; 121 font-weight: bold; 122} 123 124.qq-upload-spinner { 125 display: inline-block; 126 background: url("../../images/throbber.gif"); 127 width: 15px; 128 height: 15px; 129 vertical-align: text-bottom; 130} 131 132.qq-upload-size { 133 font-size: 85%; 134} 135.qq-upload-cancel { 136 font-size: 1rem; 137 line-height: 1.25; 138 width: 1em; height: 1.5em; 139 overflow: hidden; 140} 141.qq-upload-cancel::before { 142 content: '\1F5D9'; 143 display: inline-block; 144 width: 1em; 145 height: 1.5em; 146} 147 148 149.qq-upload-failed-text { 150 display: none; 151} 152.qq-upload-fail .qq-upload-failed-text { 153 display: inline; 154} 155 156.qq-action-container * { 157 vertical-align: middle; 158} 159.qq-overwrite-check input { 160 margin-left: 10px; 161} 162 163/* media tree overrides */ 164#media__tree ul li div.li { 165 display: grid; 166} 167#mediamanager__page .ui-resizable-e { 168 background-color: #EEE; 169} 170 171/* dark mode overrides */ 172@media (prefers-color-scheme: dark) { 173 174 body.darkmode { 175 .qq-upload-button { 176 background-color: #1976D2; 177 } 178 179 .qq-upload-drop-area { 180 background: @ini_background_neu_dark; 181 color: @ini_text_neu_dark; 182 } 183 184 .qq-upload-drop-area-active { 185 background: fadeout(@ini_background_alt_dark, 10%);; 186 } 187 .qq-upload-drop-area-active span { 188 color: #1976D2; 189 } 190 191 #mediamanager__page .qq-upload-list { 192 li::before { 193 color: @ini_text_dark; 194 } 195 li input[type="text"] { 196 color: @ini_text_dark; 197 } 198 li input[type="text"]:focus { 199 border-color: @ini_border_dark; 200 } 201 202 } 203 } 204}
