1 2/*20260314a*/ 3/** 4 * Navigator Extras 5 * Optional styling for plugins and extended components. 6 * Contains some modified styles derived from the Wrap plugin (GPL 2.0). 7 * This file is therefore distributed under the GPL 2.0 license. 8 * 9 * Modifications for Navigator by: Tony Araujo 10 * 11 * Notes: 12 * - Provides theme‑consistent styling for Wrap plugin elements 13 * - Ensures plugin output matches Navigator’s typography and spacing 14 * - Safe to remove or extend without affecting core theme behavior 15 * 16 * Only the sections marked as “transposed from the Wrap plugin” are GPL‑derived. 17 * All other additions are original work but included under GPL 2.0 for consistency. 18 19/* ============================================================= 20 WRAP PLUGIN COLORS - New 21 ============================================================= */ 22 23/* modified styles go here*/ 24 25 /* Legacy syntax from older Navigator */ 26 27.dokuwiki .wrap_redtext { color: red; } 28.dokuwiki .wrap_violetext { color: #51158C; } 29.dokuwiki .wrap_bluetext { color: #0000B8; } 30.dokuwiki .wrap_greentext { color: green; } 31 32/*Newer syntax. wrap your text with <wrap red>TEXT</wrap> */ 33 34.dokuwiki .wrap_red { color: red; } 35.dokuwiki .wrap_violet { color: #51158C; } 36.dokuwiki .wrap_blue { color: #0000B8; } 37.dokuwiki .wrap_green { color: green; } 38.dokuwiki .wrap_yellow { color: yellow; } 39.dokuwiki .wrap_orange { color: orange; } 40.dokuwiki .wrap_ored { color: orangered; } 41 42/*================================================================= 43 Styles transposed from the Wrap plugin for current modification 44 Main purpose: To increase constrast between background and font colors 45 (for my tired eyes) 46=================================================================== */ 47 48 49 50 .dokuwiki { 51 52 /* box 53 ********************************************************************/ 54 55 .wrap_box { 56 background: @ini_background_alt; 57 color: @ini_text; 58 } 59 div.wrap_box, 60 div.wrap_danger, 61 div.wrap_warning, 62 div.wrap_caution, 63 div.wrap_notice, 64 div.wrap_safety { 65 padding: 1em 1em .5em; 66 margin-bottom: 1.5em; 67 overflow: hidden; 68 } 69 span.wrap_box, 70 span.wrap_danger, 71 span.wrap_warning, 72 span.wrap_caution, 73 span.wrap_notice, 74 span.wrap_safety { 75 padding: 0 .3em; 76 } 77 78 /*____________ notes with icons ____________*/ 79 80 /* general styles for all note divs */ 81 div.wrap_info, 82 div.wrap_important, 83 div.wrap_alert, 84 div.wrap_tip, 85 div.wrap_help, 86 div.wrap_todo, 87 div.wrap_download { 88 padding: 1em 1em .5em 70px; 89 margin-bottom: 1.5em; 90 min-height: 68px; 91 background-position: 10px 50%; 92 background-repeat: no-repeat; 93 color: inherit; 94 overflow: hidden; 95 } 96 /* general styles for all note spans */ 97 span.wrap_info, 98 span.wrap_important, 99 span.wrap_alert, 100 span.wrap_tip, 101 span.wrap_help, 102 span.wrap_todo, 103 span.wrap_download { 104 padding: 0 2px 0 20px; 105 min-height: 20px; 106 background-position: 2px 50%; 107 background-repeat: no-repeat; 108 color: inherit; 109 } 110 111 /* sorry for icons glued to the right side, but there is currently no way 112 to make this look good without adjusting the images themselves */ 113 [dir=rtl] div.wrap_info, 114 [dir=rtl] div.wrap_important, 115 [dir=rtl] div.wrap_alert, 116 [dir=rtl] div.wrap_tip, 117 [dir=rtl] div.wrap_help, 118 [dir=rtl] div.wrap_todo, 119 [dir=rtl] div.wrap_download { 120 padding: 1em 60px .5em 1em; 121 background-position: right 50%; 122 } 123 [dir=rtl] span.wrap_info, 124 [dir=rtl] span.wrap_important, 125 [dir=rtl] span.wrap_alert, 126 [dir=rtl] span.wrap_tip, 127 [dir=rtl] span.wrap_help, 128 [dir=rtl] span.wrap_todo, 129 [dir=rtl] span.wrap_download { 130 padding: 0 18px 0 2px; 131 background-position: right 50%; 132 } 133 134 /*____________ info ____________*/ 135 .wrap_info { background-color: #d1d7df; } 136 .wrap__dark.wrap_info { background-color: #343e4a; } 137 div.wrap_info { background-image: url(images/note/48/info.png); } 138 span.wrap_info { background-image: url(images/note/16/info.png); } 139 140 /*____________ important ____________*/ 141 .wrap_important { background-color: #ffd39f; } 142 .wrap__dark.wrap_important { background-color: #6c3b00; } 143 div.wrap_important { background-image: url(images/note/48/important.png); } 144 span.wrap_important { background-image: url(images/note/16/important.png); } 145 146 /*____________ alert ____________*/ 147 .wrap_alert { background-color: #ffbcaf; } 148 .wrap__dark.wrap_alert { background-color: #6b1100; } 149 div.wrap_alert { background-image: url(images/note/48/alert.png); } 150 span.wrap_alert { background-image: url(images/note/16/alert.png); } 151 152 /*____________ tip ____________*/ 153 .wrap_tip { background-color: #fff79f; } 154 .wrap__dark.wrap_tip { background-color: #4a4400; } 155 div.wrap_tip { background-image: url(images/note/48/tip.png); } 156 span.wrap_tip { background-image: url(images/note/16/tip.png); } 157 158 /*____________ help ____________*/ 159 .wrap_help { background-color: #dcc2ef; } 160 .wrap__dark.wrap_help { background-color: #3c1757; } 161 div.wrap_help { background-image: url(images/note/48/help.png); } 162 span.wrap_help { background-image: url(images/note/16/help.png); } 163 164 /*____________ todo ____________*/ 165 .wrap_todo { background-color: #c2efdd; } 166 .wrap__dark.wrap_todo { background-color: #17573e; } 167 div.wrap_todo { background-image: url(images/note/48/todo.png); } 168 span.wrap_todo { background-image: url(images/note/16/todo.png); } 169 170 /*____________ download ____________*/ 171 .wrap_download { background-color: #d6efc2; } 172 .wrap__dark.wrap_download { background-color: #345717; } 173 div.wrap_download { background-image: url(images/note/48/download.png); } 174 span.wrap_download { background-image: url(images/note/16/download.png); } 175 176 177 /*____________ safety notes ____________*/ 178 179 .wrap_danger { 180 background-color: #B30000; 181 color: #fff; 182 } 183 .wrap_warning { 184 background-color: #FF9D5C; 185 color: #000; 186 } 187 .wrap_caution { 188 background-color: #FFFF6B; 189 color: #000; 190 } 191 .wrap_notice { 192 background-color: #004EC2; 193 color: #fff; 194 } 195 .wrap_safety { 196 background-color: #006600; 197 color: #fff; 198 } 199 200 .wrap_danger *, 201 .wrap_warning *, 202 .wrap_caution *, 203 .wrap_notice *, 204 .wrap_safety * { 205 color: inherit !important; 206 } 207 208 209 /* mark 210 ********************************************************************/ 211 212 .wrap_hi { 213 background-color: #ff9; 214 overflow: hidden; 215 } 216 .wrap__dark.wrap_hi { 217 background-color: #4e4e0d; 218 } 219 220 221 /* miscellaneous 222 ********************************************************************/ 223 224 /*____________ spoiler ____________*/ 225 226 .wrap_spoiler { 227 background-color: @ini_background !important; 228 color: @ini_background !important; 229 border: 1px dotted red; 230 } 231 232 /*____________ only print ____________*/ 233 234 .wrap_onlyprint { 235 display: none; 236 } 237 238 /*____________ tabs ____________*/ 239 /* in addition to template styles */ 240 241 .plugin_wrap.tabs { 242 margin-bottom: 1.4em; 243 } 244 245 /*____________ button-style link ____________*/ 246 247 .wrap_button a:link, 248 .wrap_button a:visited { 249 background-color: @ini_background_alt; 250 } 251 .wrap_button a:link:hover, 252 .wrap_button a:visited:hover, 253 .wrap_button a:link:focus, 254 .wrap_button a:visited:focus, 255 .wrap_button a:link:active, 256 .wrap_button a:visited:active { 257 background-color: @ini_background_neu; 258 } 259 260} /* /.dokuwiki */ 261 262 263
