1/** @file     progrecss/style.css
2 *  @brief    Default stylesheets for progrecss plugin
3 *  @author   Luis Machuca Bezzaza <luis [dot] machuca [at] gulix [dot] cl>
4 *  @version  1.8
5 *  @license  GPL v2
6 */
7/** This file provides three (3) default styles for the "progrecss"
8 *  (CSS-based progress bars) plugin for Dokuwiki.
9 */
10
11/**
12 * -------------------------------------------------------
13 *   PROGRECSS_DEFAULT: default bar model
14 * -------------------------------------------------------
15 *
16 * Features a block box themed with the link and background colors
17 * defined by the current theme; the gauge uses the color for
18 * existing links, and the caption is shown in small size font.
19 * Support : pretty much all browsers since 2005 should
20 *      display this correctly.
21 */
22
23.progrecss_default {
24	display: inline-block;
25	margin-right: 10px;
26	margin-bottom: 5px;
27	}
28
29.progrecss_default .border {
30	display: block;
31	height: 1.2em;
32	background-color: __text_alt__;
33	padding: 0;
34	border: 2px solid __text__;
35	border-radius: 4px;
36	}
37
38.progrecss_default .border .bar {
39	display: block;
40	height: 0.8em;
41	margin: 0;
42	padding: 0;
43    vertical-align: text-top;
44	background-color: __existing__;
45	border: 1px transparent __existing__;
46	border-bottom: 2px solid __existing__;
47	border-radius: 0 2px 2px 0 / 0 50% 50% 0;
48	color: #ffffff;
49	font-size: 66%;
50	}
51
52.progrecss_default .border .bar.inside {
53    text-align: center;
54    vertical-align: top;
55    }
56
57.progrecss_default .border .bar.before {
58    text-align: left;
59    padding-left: 1em;
60    }
61
62.progrecss_default .border .bar.after {
63    text-align: right;
64    padding-right: 1em;
65    }
66
67.progrecss_default .caption {
68	display: inline-block;
69	margin-left: 4px;
70	margin-right: 4px;
71	font-family: Helvetica, Arial;
72	font-size: 75%;
73	text-align: center;
74	}
75
76/**
77 * -------------------------------------------------------
78 *   PROGRECSS_GAUGE: rounder bar with label model
79 * -------------------------------------------------------
80 *
81 * Features a rounded box using the "missing link" colors for
82 * the current theme, plus a black background and white face.
83 * The caption is shown as a popup under the gauge when it is focused.
84 *
85 * Support : Firefox will support this flawlessly at least from
86 *     version 2.0 onwards. Other browsers (except IE) may have
87 *     minor presentation variances, such as Opera not supporting
88 *     "rounded" or IE displaying the caption below the gauge
89 *     and in a block of its own.
90 */
91
92.progrecss_gauge {
93    position: relative;
94	display: block;
95	margin-top: 0;
96	margin-bottom: 0;
97	border: 2px solid __missing__;
98	padding-left: 4px;
99	padding-right: 4px;
100	background-color: #eeeeee;
101	}
102
103.progrecss_gauge .border {
104	display: inline-block;
105	height: 1.2em;
106	margin: 0;
107	padding: 2px;
108	background-color: #ffffff;
109	}
110
111.progrecss_gauge .border .bar {
112	display: block;
113	height: 1.4em;
114	margin-top: -0.2em;
115	padding: 0;
116	background-color: #222222;
117	text-align: center;
118	font-size: 0.75em;
119	color: white;
120	}
121
122.progrecss_gauge .caption {
123    display: none;
124	}
125
126.progrecss_gauge:hover .caption {
127    position: inline-block;
128	display: block;
129	z-index: 99;
130	left: 0;
131	font-family: Helvetica, Arial, sans-serif;
132	font-size: 75%;
133	text-align: center;
134	margin-left: 1em;
135	margin-right: 1em;
136	background-color: __background_alt__;
137	border: 1px dotted black;
138	}
139
140
141/**
142 * -------------------------------------------------------
143 *   PROGRECSS_INLINE: inline bar model
144 * -------------------------------------------------------
145 *
146 * Features a bar running inline (thanks to "inline-block"), with the
147 * gauge located "on top" of the text using the combination of colors
148 * for existing/missing links, percentage is shown below.
149 * Caption is not displayed with this mode.
150 *
151 * Support : Opera 9.2 and later seem to be OK with this style, albeit
152 *     breaking lines strangely when an inline-block is last element of
153 *     the line. Firefox prior to 2.0 require a CSS fix but otherwise
154 *     seem to be OK. IE's support is untested but we all _know_ it is
155 *     completely broken (if any), and it is unsupported anyways.
156 */
157
158.progrecss_inline {
159  position: relative;
160  display: inline-block;
161  margin-top: 0;
162  margin-left: 1px;
163  margin-right: 1px;
164  line-height: 1.3em;
165  }
166
167.progrecss_inline .border {
168  display: inline-block;
169  height: 0.3em;
170  margin-top: 0em; /* this will break with very packed paragraphs */
171  margin-bottom: 0;
172  background-color: __missing__;
173  border: 0px solid inherit;
174  border-radius: 2px;
175  }
176
177.progrecss_inline .border .bar {
178  display: inline-block;
179  height: 0.1em;
180  background-color: __existing__;
181  border: 0;
182  text-align: center;
183  font-size: 75%;
184  color: gray;
185  }
186
187.progrecss_inline .caption {
188  display: block;
189  height: 1em;
190  visibility: hidden;
191  }
192
193.progrecss_inline:hover .caption {
194  display: block;
195  visibility: visible;
196  left: 0;
197  top: 0;
198  height: 100%;
199  padding: 4px;
200  padding-bottom: 0;
201  background-color: __background_alt__ !important;
202  border: 1px dotted __missing__;
203  color: __existing__ !important;
204  line-height: 1.1em;
205  font-size: 75%;
206  }
207
208
209/**
210 * end file
211 */
212