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