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