1/******************************************************************** 2Screen Styles for the Wrap Plugin (additional to all.css) 3********************************************************************/ 4 5.dokuwiki { 6 7/* box 8********************************************************************/ 9 10.wrap_box { 11 background: @ini_background_alt; 12 color: @ini_text; 13} 14div.wrap_box, 15div.wrap_danger, 16div.wrap_warning, 17div.wrap_caution, 18div.wrap_notice, 19div.wrap_safety { 20 padding: 1em 1em .5em; 21 margin-bottom: 1.5em; 22 overflow: hidden; 23} 24span.wrap_box, 25span.wrap_danger, 26span.wrap_warning, 27span.wrap_caution, 28span.wrap_notice, 29span.wrap_safety { 30 padding: 0 .3em; 31} 32 33/*____________ notes with icons ____________*/ 34 35/* general styles for all note divs */ 36div.wrap_info, 37div.wrap_important, 38div.wrap_alert, 39div.wrap_tip, 40div.wrap_help, 41div.wrap_todo, 42div.wrap_download { 43 padding: 1em 1em .5em 70px; 44 margin-bottom: 1.5em; 45 min-height: 68px; 46 background-position: 10px 50%; 47 background-repeat: no-repeat; 48 color: inherit; 49 overflow: hidden; 50} 51/* general styles for all note spans */ 52span.wrap_info, 53span.wrap_important, 54span.wrap_alert, 55span.wrap_tip, 56span.wrap_help, 57span.wrap_todo, 58span.wrap_download { 59 padding: 0 2px 0 20px; 60 min-height: 20px; 61 background-position: 2px 50%; 62 background-repeat: no-repeat; 63 color: inherit; 64} 65 66/* sorry for icons glued to the right side, but there is currently no way 67 to make this look good without adjusting the images themselves */ 68[dir=rtl] div.wrap_info, 69[dir=rtl] div.wrap_important, 70[dir=rtl] div.wrap_alert, 71[dir=rtl] div.wrap_tip, 72[dir=rtl] div.wrap_help, 73[dir=rtl] div.wrap_todo, 74[dir=rtl] div.wrap_download { 75 padding: 1em 60px .5em 1em; 76 background-position: right 50%; 77} 78[dir=rtl] span.wrap_info, 79[dir=rtl] span.wrap_important, 80[dir=rtl] span.wrap_alert, 81[dir=rtl] span.wrap_tip, 82[dir=rtl] span.wrap_help, 83[dir=rtl] span.wrap_todo, 84[dir=rtl] span.wrap_download { 85 padding: 0 18px 0 2px; 86 background-position: right 50%; 87} 88 89/*____________ info ____________*/ 90.wrap_info { background-color: #d1d7df; } 91.wrap__dark.wrap_info { background-color: #343e4a; } 92div.wrap_info { background-image: url(images/note/48/info.png); } 93span.wrap_info { background-image: url(images/note/16/info.png); } 94 95/*____________ important ____________*/ 96.wrap_important { background-color: #ffd39f; } 97.wrap__dark.wrap_important { background-color: #6c3b00; } 98div.wrap_important { background-image: url(images/note/48/important.png); } 99span.wrap_important { background-image: url(images/note/16/important.png); } 100 101/*____________ alert ____________*/ 102.wrap_alert { background-color: #ffbcaf; } 103.wrap__dark.wrap_alert { background-color: #6b1100; } 104div.wrap_alert { background-image: url(images/note/48/alert.png); } 105span.wrap_alert { background-image: url(images/note/16/alert.png); } 106 107/*____________ tip ____________*/ 108.wrap_tip { background-color: #fff79f; } 109.wrap__dark.wrap_tip { background-color: #4a4400; } 110div.wrap_tip { background-image: url(images/note/48/tip.png); } 111span.wrap_tip { background-image: url(images/note/16/tip.png); } 112 113/*____________ help ____________*/ 114.wrap_help { background-color: #dcc2ef; } 115.wrap__dark.wrap_help { background-color: #3c1757; } 116div.wrap_help { background-image: url(images/note/48/help.png); } 117span.wrap_help { background-image: url(images/note/16/help.png); } 118 119/*____________ todo ____________*/ 120.wrap_todo { background-color: #c2efdd; } 121.wrap__dark.wrap_todo { background-color: #17573e; } 122div.wrap_todo { background-image: url(images/note/48/todo.png); } 123span.wrap_todo { background-image: url(images/note/16/todo.png); } 124 125/*____________ download ____________*/ 126.wrap_download { background-color: #d6efc2; } 127.wrap__dark.wrap_download { background-color: #345717; } 128div.wrap_download { background-image: url(images/note/48/download.png); } 129span.wrap_download { background-image: url(images/note/16/download.png); } 130 131 132/*____________ safety notes ____________*/ 133 134.wrap_danger { 135 background-color: #c00; 136 color: #fff; 137} 138.wrap_warning { 139 background-color: #f60; 140 color: #000; 141} 142.wrap_caution { 143 background-color: #ff0; 144 color: #000; 145} 146.wrap_notice { 147 background-color: #06f; 148 color: #fff; 149} 150.wrap_safety { 151 background-color: #090; 152 color: #fff; 153} 154 155.wrap_danger *, 156.wrap_warning *, 157.wrap_caution *, 158.wrap_notice *, 159.wrap_safety * { 160 color: inherit !important; 161} 162 163 164/* mark 165********************************************************************/ 166 167.wrap_hi { 168 background-color: #ff9; 169 overflow: hidden; 170} 171.wrap__dark.wrap_hi { 172 background-color: #4e4e0d; 173} 174 175 176/* miscellaneous 177********************************************************************/ 178 179/*____________ spoiler ____________*/ 180 181.wrap_spoiler { 182 background-color: @ini_background !important; 183 color: @ini_background !important; 184 border: 1px dotted red; 185} 186 187/*____________ only print ____________*/ 188 189.wrap_onlyprint { 190 display: none; 191} 192 193/*____________ tabs ____________*/ 194/* in addition to template styles */ 195 196.plugin_wrap.tabs { 197 margin-bottom: 1.4em; 198} 199 200/*____________ button-style link ____________*/ 201 202.wrap_button a:link, 203.wrap_button a:visited { 204 background-color: @ini_background_alt; 205} 206.wrap_button a:link:hover, 207.wrap_button a:visited:hover, 208.wrap_button a:link:focus, 209.wrap_button a:visited:focus, 210.wrap_button a:link:active, 211.wrap_button a:visited:active { 212 background-color: @ini_background_neu; 213} 214 215} /* /.dokuwiki */ 216