1/** 2 * @file clock/style.css 3 * @brief Default styles for the "clock" plugin 4 */ 5 6#clock_wrapper { 7 padding: 0; 8 --clock-border: 2px solid gray; 9 --clock-border-radius: 2px; 10 --clock-text-font-size: inherit; 11 --clock-binary-font-size: large; 12 --clock-binary-digit0: '○'; 13 --clock-binary-digit1: '●'; 14} 15 16#clock_wrapper > div > #dw_clock_object { 17 min-width: 6em; 18 margin: 0 auto; 19 padding: 4px; 20 border: var(--clock-border); 21 border-radius: var(--clock-border-radius); 22} 23 24/** 25 * --------------------------------------------------------------------- 26 * Style #0 : plain 27 * Description : pretty plain 28 * Features : 29 * With this style the face itself is not stulized, only some layout 30 * attributes are given as well as default style for the helpbar. 31 */ 32#clock_wrapper > div.text { 33 text-align: center; 34} 35 36#clock_wrapper > div.text > #dw_clock_object { 37 font-size: var(--clock-text-font-size); 38} 39 40/* 41 * text clock styles 42 * */ 43 44#clock_wrapper > div.text > #dw_clock_object.plain { 45 display: block; 46 font-family: monospace; 47 text-align: center; 48 color: __text__; 49 border: 4px inset __text_alt__; 50 background-color: __background_alt__; 51 } 52 53 54/** 55 * --------------------------------------------------------------------- 56 * Style #2 : aradio 57 * Description : some description 58 * Features : a clock using a digital clock font in yellow face in a 59 * black background and minor shadow. 60 * 61 * ---Warning--- 62 * This style makes use of CSS3 @font-face specification, 63 * which is only supported by decent (or incredible, like Opera) web browsers. 64 * **Check the plugin page for support and indications** 65 * 66 * For full experience, it is _recommended_ to make the typeface available 67 * to clients via a direct download link, and source that URL from here. 68 * Take into consideration the licensing of the typeface, and offer a 69 * fallback or switch if it is now available at last as Freeware. 70 * ---End Warning--- 71 */ 72 73@font-face { 74 font-family: 'Atomic Clock Radio'; 75 src: local('Atomic Clock Radio'); 76 /* src: url(path/to/your/copy/of/atomicclockradio.ttf) format('truetype'); */ 77 } 78 79#clock_wrapper > div.text > #dw_clock_object.aradio { 80 padding: 4px; 81 padding-right: 1em; 82 background-color: #c4c8ee; 83 border: 2px solid #b6b6d8; 84 font-family: "Atomic Clock Radio", fantasy; 85 font-size: 14pt; 86 text-align: right; 87 letter-spacing: 0.6pt; 88 text-shadow: -2px 1px #884446; 89 color: #848861; 90 } 91 92#clock_wrapper > div.text > #dw_clock_object.aradio span.sep { 93 color: #808080; 94 font-weight: bold; 95 } 96 97/** 98 * style: tv24 99 * a clock using a digital clock font with yellow face in a black background and a shadow, degrading to monospace if the digital clock is unavailable. 100 * 101 * This style uses four font fallbacks: 'LCDRegular', 'LCD', 'Segment7Standard' and 'dseg7classic'. They are not provided here, they must be available either client-side or provided via an external source (eg.: via usertsyle.css). 102 * 103 */ 104 105#clock_wrapper > div.text > #dw_clock_object.tv24 { 106 min-width: 8em; 107 background-color: black; 108 border: 2px solid navy; 109 line-height: 20pt; 110 text-align: center; 111 font-family: "LCDRegular", 'LCD', "Segment7Standard", "Digital Readout", "DSEG7 Classic", monospace; 112 font-size: 14pt; 113 text-shadow: 2px 2px #404020; 114 letter-spacing: 0.2em; 115 color: yellow; 116} 117 118#dw_clock_object.text > div.tv24 .info { 119 position: absolute; 120 right: 0; 121 bottom: 0; 122 border: 2px solid black; 123} 124 125#dw_clock_object .face.tv24 .info:hover { 126 border: 2px solid __existing__; 127} 128 129/** 130 * --------------------------------------------------------------------- 131 * Style #4 : bluebox 132 * Description : "24"-like digital clock 133 * Features : a blue box with a white typeface, shadows. 134 * 135 * 136 * ---Warning--- 137 * This style makes use of CSS3 @font-face specification, 138 * which is only supported by decent (or incredible, like Opera) web browsers. 139 * **Check the plugin page for support and indications** 140 * 141 * For full experience, it is _recommended_ to make the typeface available 142 * to clients via a direct download link, and source that URL from here. 143 * Take into consideration the licensing of the typeface, and offer a 144 * fallback or switch if it is now available at last as Freeware. 145 * ---End Warning--- 146 */ 147#dw_clock_object .face.bluebox { 148 width: 75%; 149 max-width: 8em; 150 background-color: #2222aa; 151 border: 4px solid navy; 152 border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; 153 line-height: 20pt; 154 text-align: center; 155 font-family: "Liberation", "Helvetica", cursive; 156 font-size: 14pt; 157 text-shadow: -1px 2px #80c080; 158 text-shadow: 2px -1px #882222; 159 letter-spacing: 0.2em; 160 color: #e0f0e0; 161} 162 163 164 165/* 166 * Helpbar styling 167 * */ 168#clock_wrapper p.helpbar { 169 margin: 0 2em; 170 padding: 0 0.5em; 171 background-color: __background_alt__; 172 border: 1px solid __existing__; 173 border-radius: 6px; 174 font-size: 90%; 175 } 176 177 178