source: trunk/templates/dns.css@ 74

Last change on this file since 74 was 69, checked in by Kris Deugau, 14 years ago

/trunk

Changes for much nicer-looking, nifty collapsible tree for groups

  • CSS derived from http://www.thecssninja.com/css/css-tree-menu
  • HTML changes to match
  • Template changes to make the source more closely match the rendered display (and the real tree structure)
  • Minor source tweaks to work with the template changes

Still to ponder:

  • IE (CSS collapsing tree doesn't render correctly in IE 6 or 8, *may* work in 9, pretty much guaranteed to fail in < 6), experiments with <!-- [if IE]--> constructs show they don't work well in <head>
  • Tweaks to allow clicking a group name in the tree to switch to that group (currently the hidden checkbox seems to take over then entire name/line/label, making it easy to expand or collapse the group, but harder to use it for anything else)
File size: 4.6 KB
RevLine 
[2]1#debug {
2 background-color: #990066;
[24]3 padding: 2px;
[2]4}
5
6/* General settings */
7body {
8 font-family: Verdana, Helvetica, sans-serif;
9 font-size: 12px;
10 margin-left: 0px;
11 margin-right: 0px;
12/* background-color: #deadDD;*/
[39]13 background-color: #f8f8f8;
[2]14}
15hr {
16 background-color: #666;
17 height: 1px;
18 border: 0;
19}
[38]20img {
21 border: 0px;
22}
23fieldset {
24 border: none;
25 padding: 0px;
26 margin: 0px;
27}
[2]28
29table.login {
30 text-align: center;
31 border: thin solid #000000;
32 background-color: #CCCCFF;
33}
34table.list {
35 background-color: #F0F0F0;
36}
[38]37table.container {
38 background-color: #FFFFFF;
39 border: none;
40}
[2]41table.wholepage {
42 width: 100%;
43}
[65]44table.border {
45 border: thin solid #000000;
46}
[38]47
[2]48tr.row0 {
49 background-color: #FFFFFF;
50}
51tr.row1 {
52 background-color: #DDDDDD;
53}
54tr.tableheader {
55 background-color: #CCCCCC;
56 padding: 3px;
[48]57 text-align: left;
[2]58}
59tr.darkrowheader {
60 background-color: #CCCCCC;
61 padding: 3px;
62}
63tr.datalinelight {
64 background-color: #F0F0F0;
[48]65 text-align: left;
[2]66}
[38]67
[65]68th {
69 background-color: #F0F0F0;
70 font-size: 1.1em;
71 font-weight:normal;
72 padding: 4px;
73}
74
[2]75td.tblsubmit {
[38]76 background-color: #F0F0F0;
[2]77 text-align: center;
78}
79td.inputlabel {
80 text-align: right;
81 padding: 3px;
82}
[39]83td.datahead_l {
84 background-color: #F0F0F0;
85 border-bottom: 1px solid #666666;
86 text-align: left;
87}
88td.datahead_s {
89 background-color: #F0F0F0;
90 border-bottom: 1px solid #666666;
91 width: 1%;
92 white-space: nowrap;
93}
[59]94td.data_nowrap {
95 white-space: nowrap;
96}
[2]97td.data {
98 padding: 3px;
99}
100td.title {
101 text-align: center;
102}
103td.menu {
104 width: 200px;
105 white-space: nowrap;
106 border: thin solid #000000;
107 background-color: #ffccee;
108 vertical-align: top;
109}
110td.defaults {
111 background-color: #DDDDDD;
112}
[34]113td.errhead {
114 font-weight: bold;
115 font-size: 110%;
116 color: red;
117 background-color: #404040;
118 text-align: center;
119 padding: 3px;
120 border: solid 2px #FF0000;
121}
[33]122td.err {
123 border: solid 2px #FF0000;
124 color: red;
125 background-color: #e0e0e0;
126}
127td.warn {
128 border: solid 2px #FFFF00;
129 color: #333300;
130 background-color: #e0e0e0;
131}
[41]132td.leftthird {
133 width: 36%;
134 text-align: left;
135}
136td.rightthird {
137 width: 36%;
138 text-align: right;
139}
[65]140td.border {
141 background-color: #e0e0e0;
142 border: solid 1px #101010;
143 padding: 2px;
144}
145td.noaccess {
146 background-color: #ffe8e8;
147 color: #2f0000;
148}
[33]149
[2]150.meat {
151 align: center;
152 width: 100%;
153}
154input {
155 font-size: 10px;
156}
[65]157
[69]158
159/*
160 Pure CSS collapseable tree for groups
161 Adapted (mostly trimmed down) from http://www.thecssninja.com/css/css-tree-menu
162 Fails variously in IE
163*/
164
[65]165li.hassub {
[69]166 position: relative;
167 margin: 0 0 0 -40px;
168 padding: 0;
169 list-style: none;
[41]170}
171li.leaf {
[69]172 margin: 0;
173 padding: 0 0 0 15px; /* in px since this is to adjust for a fixed-size image */
[65]174}
[69]175li.hassub input {
176 position: absolute;
177 left: 0;
178 margin: 0;
179 opacity: 0;
180 filter:alpha(opacity=0); /* IE > 6, maybe */
181 z-index: 2;
182 cursor: pointer;
183 height: 1em;
184 width: 1em;
185 top: 0;
[65]186}
[69]187li.hassub input + ul {
188 background: url('../images/tree_closed.png') 0px -2px no-repeat;
189 margin-top: -0.95em; /* esplain to me, why this not 1em? O_o */
190 padding-top: 0.1em;
191 padding-left: 2.25em; /* ah-HA! use this to adjust the indent! watch for neg margin from li.hassub */
192 xdisplay: block;
193 height: 1em;
[65]194}
[69]195li.hassub input + ul > li {
196 height: 0;
197 overflow: hidden;
198 margin-left: -14px !important;
[41]199}
[69]200li.hassub label {
201 cursor: pointer;
202 display: block;
203 padding-left: 15px; /* in px as it ajusts for fixed-size image */
204}
205li.hassub input:checked + ul {
206 background: url('../images/tree_open.png') 0px 0px no-repeat;
207 margin-top: -1.2em;
208 padding-top: 1.1em;
209 height: auto;
210}
211li.hassub input:checked + ul > li {
212 height: auto;
213}
214
215
[2]216/* general classes */
217.errmsg {
218 font-weight: bold;
219 font-family: Verdana, Arial, Helvetica, sans-serif;
220 font-size:100%;
221 color: red;
222 background-color: #404040;
223 text-align: center;
224 border: thin solid #FFFFFF;
225 padding: 5px;
226 width: 70%;
227}
228.right {
229 right: 3px;
230}
[39]231.center {
232 text-align: center;
233}
[2]234
235#header {
236 border-bottom: thin solid #000000;
237 clear: both;
238 float: left;
239 width: 100%;
240}
241#footer {
242 border-top: thin solid #000000;
243 clear: both;
244}
245#contact {
246 font-size: 10px;
247 position: absolute;
248 right: 10px;
249 text-align: right;
250}
251
252#main {
253 position: relative;
254 float: right;
255 width: 100%;
256}
257#login {
258 margin-top: 50px;
259 margin-bottom: 50px;
260 padding: 3px;
261 border: thin solid #000000;
262}
263#tableholder {
264 padding: 2px;
265 background: #FFFFFF;
266 width: 70%;
267}
268#menu {
269 border-right: thin solid #000000;
270 margin-right: 5px;
[66]271 padding: 5px;
[2]272}
[39]273#soadetail {
274 text-align: left;
275}
276/* somewhat generic/reusable */
[41]277#datatablewrapper {
278 border: none;
[39]279 width: 98%;
[41]280 margin-left: 1%;
281 margin:right: 1%;
[39]282}
Note: See TracBrowser for help on using the repository browser.