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