1 2/* indicate special modes by using a different background and border */ 3body.mode_admin { 4 main { 5 & { 6 background-color: @ini_background_alt; 7 border: @ini_text_alt solid 2px; 8 color: @ini_text_alt; 9 } 10 #toc { 11 background-color: @ini_background_alt; 12 } 13 #navYouAreHere { 14 background-color: @ini_background; 15 padding: .25em .25em 0 .25em; 16 border-radius: .25em; 17 border: @ini_text_alt solid 2px; 18 } 19 table th { 20 background-color: @ini_background_neu; 21 } 22 } 23 div.ui-admin { 24 25 & { 26 display: grid; 27 grid-template-columns: 1fr 1fr; 28 } 29 30 h1.first-child, 31 div.level1 { 32 grid-column: 1 / span 2; 33 margin-bottom: 1em; 34 } 35 36 /* main task grouped in two columns */ 37 ul.admin_tasks { 38 grid-column: 2; 39 list-style-type: none; 40 font-size: 1.125em; 41 margin: 0; 42 } 43 ul.admin_tasks:first-of-type { 44 grid-row: 3 / span 4; 45 grid-column: 1; 46 } 47 ul.admin_plugins { 48 grid-row: 6; 49 grid-column: 2; 50 } 51 52 /* general menu item styling */ 53 ul { 54 padding: 0; 55 li { 56 margin: 0 0 1em 0; 57 font-weight: bold; 58 list-style-type: none; 59 white-space: nowrap; 60 61 a { 62 display: flex; 63 span { 64 display: inline-block; 65 66 &.icon { 67 width: 1.5em; 68 min-height: 1.5em; 69 margin: 0 0.5em; 70 vertical-align: top; 71 72 svg { 73 width: 1.5em; 74 height: 1.5em; 75 fill: @ini_link; 76 display: inline-block; 77 path { 78 fill: @ini_link; 79 } 80 } 81 } 82 83 &.prompt { 84 white-space: normal; 85 } 86 } 87 } 88 } 89 } 90 91 /* Security Warning */ 92 #security__check { 93 clear: both; 94 grid-row: 7; 95 grid-column: 1 / span 2; 96 } 97 98 /* DokuWiki version */ 99 #admin__version { 100 display: block; 101 box-sizing: border-box; 102 width: 100%; 103 max-height: 7em; 104 overflow: auto; 105 color: @ini_text_neu; 106 background: @ini_background_neu url('images/info.svg') .25em .5em no-repeat; 107 background-size: 1em; 108 padding: .25em 0 .25em 1.75em; 109 border: @ini_border 1px solid; 110 border-radius: .25em; 111 box-shadow: inset .5pt .5pt 1pt #00000088; 112 grid-row: 9; 113 grid-column: 1 / span 2; 114 } 115 } 116 117 /* user manager: */ 118 #user__manager { 119 button { 120 & { 121 background-color: @ini_background; 122 border: @ini_text solid 1px; 123 border-radius: .25em; 124 padding: .25em .5em; 125 cursor: pointer; 126 } 127 &#usrmgr__del { 128 background-color: #fcd; 129 color: @ini_text; 130 } 131 &[name="fn[add]"] { 132 background-color: #cdf; 133 color: @ini_text; 134 } 135 &[name="fn[start]"] { 136 border-radius: .5em 0 0 .5em; 137 } 138 &[name="fn[prev]"], 139 &[name="fn[next]"] { 140 border-radius: 0; 141 border-left-width: 0; 142 } 143 &[name="fn[last]"] { 144 border-radius: 0 .5em .5em 0; 145 border-left-width: 0; 146 } 147 } 148 } 149 150 /* extensions manager */ 151 #extension__list { 152 ul.extensionList { 153 li { 154 padding: .25em .5em; 155 border: transparent dashed 2pt; 156 border-radius: .25em; 157 } 158 li.update { 159 border-color: ini_focus_color; 160 } 161 } 162 } 163} 164 165/* style the extension manager items: */ 166body.dokuwiki #extension__manager { 167 form.install { box-sizing: border-box; width: 100%; padding: 1em 2em; background-color: #EEE; } 168 form.install .block { text-align: left; width: 100% } 169 form.install input[name=installurl] { 170 font-family: @ini_mono_fonts; 171 padding: .25em .25em .25em 24px; 172 border-radius: 10px; 173 background: @ini_background_site url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABdklEQVR4AWMgAVRo1zY3rGk41rC+rqvCBCJWBpPM4WoomLHtdtuv/t9Lfk263TtrQ0t7Oj9cbzZDc/W6s/8T7khD+P+F/8bv29PZlswJVVBu0vPuVZyNYHFZbmAqE1SR0cbjXR6pjGBO58am962Ta3e3ftqy6B5LCcMasOj7gInrm9jBzI4vTX+bfjT/7/4/p/w/zFXybUmt71u4wJzGfxP/t/xvA+KaP2XnQSKVFpWPav/U/6+HKJjz++OVJUDp1n9N/+r+19QyMCz1mPC/8X/X/26Igrn3GiUeL5n/v+F/8//6/9NOMTC0hDUDefP/L4MoOL6ickVeSQ1QqAGooPdBJE/lnloge/fhixBHftFd9bLkR83/+n/1QAXVP8qX1Pyv/L/s/12f/4xQNz8s3Pa/6X/Vvzqgour/5f/r/q//f2fmLy54WP7lfJN74eMSoKIyoNFz/5/+9ar+Px9aZL3Xfjvz7aO3/96+eLvsnSVE7CPhOAYA9nvIX0UoNU8AAAAASUVORK5CYII=') 3px center no-repeat; 174 width: calc(100% - 6em); 175 } 176 form.install input[name=overwrite] { width: auto; margin-left: 2em;} 177 form.install button[type=submit] { 178 border: #CCC solid 1.5pt; 179 padding: .5em .75em; 180 background-color: #cdf; 181 } 182 form.install button[type=submit]::before { 183 content: ' '; 184 display: inline-block; 185 position: relative; 186 top: .1em; 187 width: 1em; 188 height: 1em; 189 background: transparent url('images/editor/edit-save.svg') center bottom no-repeat; 190 margin-right: .25em; 191 } 192} 193 194/* dark mode overrides */ 195@media (prefers-color-scheme: dark) { 196 body.darkmode.mode_admin { 197 main { 198 & { 199 background-color: @ini_background_alt_dark; 200 border-color: @ini_text_alt_dark; 201 color: @ini_text_alt_dark; 202 } 203 #toc { 204 background-color: @ini_background_alt_dark; 205 border-left: @ini_text_alt_dark solid .5pt;; 206 } 207 #navYouAreHere { 208 background-color: @ini_background_dark; 209 border-color: @ini_text_alt_dark; 210 } 211 } 212 } 213 214 body.darkmode #extension__manager form.install { background-color: #39393D; } 215 body.darkmode #extension__manager form.install button[type=submit] { 216 color: #CDF; 217 background-color: #346; 218 border-color: #90909B; 219 } 220 body.darkmode #extension__manager form.install button[type=submit]::before { filter: invert(.9); } 221 body.darkmode div.ui-admin #admin__version { 222 color: @ini_text_neu_dark; 223 background-color: @ini_background_neu_dark; 224 } 225 226 body.darkmode div.ui-admin ul li a span.icon { 227 svg { 228 & { fill: @ini_link_dark; } 229 path { fill: @ini_link_dark; } 230 } 231 } 232 body.darkmode #extension__list ul.extensionList li.update { 233 border-color: ini_focus_color_dark; 234 } 235} 236/* below tablet size */ 237@media (max-width: @ini_tablet_width) { 238 body.dokuwiki div.ui-admin { display: block; } 239}