source: Dev/branches/rest-dojo-ui/client/rft/css/layout.css @ 396

Last change on this file since 396 was 396, checked in by tjcschipper, 13 years ago
  • Modifiers property on LineWithActions? and selectors is gone! Yay! Colour handling now happens through a combination of up to four CSS classes.

    "red/blue/orange/green/purple/etc": These do not do anything in themselves, they just mark a certain element as being of that colour.
    "inheritBgColor": Any element that has this class assigned will adjust its color to the color class of their parents. A 'div.blue' has no colour itself, but a 'div.inheritBgColor' within that div will turn blue. It also adjusts text colour to white.
    "bg": Any element with this property will also take on any colour class assigned to itself. This overrides 'inheritBgColor' if the element has both classes, so you could still make an orange button in a 'blue' container if you wanted. If the element itself does not have a colour class, it will stay transparent. This also adjusts text colour to white.
    "light": This class modifies the inherited/set colour to its lighter version (see RFT Design Sheet). For example, it can be used when placing a blue BlockButton? on an already blue LineWithActions?: adding the light class will differentiate the button from the background.

For examples of how to implement/derive more specific style rules using these classes, see rftButtons.css.

  • Changed all widgets still using the 'modifiers' to assign proper colour classes where necessary. (For instance, changed Selector.js to always set its main buttons to "light".)
File size: 13.6 KB
Line 
1*:focus {
2    /* Disabled Chrome focus outlines! */
3    outline: none;
4}
5html,body {
6    width: 100%;
7    height: 100%;
8    font-size: 13px;
9    background-color: #333333;
10}
11.claro {
12    font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
13    color: #000000;
14}
15
16/* Headings */
17.claro h1 {   
18    float: left;
19    clear: left;
20    font-size: 48px;
21    color: #999999;
22    margin: 0 10px 8px 10px;
23    padding: 0;
24    line-height: 48px;
25    font-weight: normal !important;
26    -webkit-user-select: none;
27    -moz-user-select: none;
28}
29.claro h2 {
30    /* Content pane title */
31    color: #ffffff;
32    font-size: 22px;
33    line-height: 30px;
34    margin: 0;
35    padding: 0;
36}
37.claro h2 .rftIcon {
38    float: left;
39    width: 32px;
40    height: 32px;
41    background-image: url('images/icons/rftIcons32.png');
42    margin-right: 8px;
43}
44.claro h3 {
45    /* Section headers */
46    font-size: 18px;
47    margin: 0 0 4px 0;
48}
49.claro h4 {
50    /* Small text headers/paragraph headers */
51    font-size: 16px;
52}
53
54/* Topbar  */
55.claro .topbar {
56    overflow-y: hidden;
57}
58.claro .topbar .dijitMenuBar {
59    border: none;
60    background-color: transparent;
61    background-image: none;   
62    float: right;
63    clear: right;
64    margin-top: 16px;
65}
66
67/* Breadcrumbs */
68.claro .breadcrumbs {
69    float: left;
70    clear: left;
71    width: 100%;
72    text-align: center;
73    height: 16px;
74    line-height: 16px;
75    margin: 0 0 4px 0;
76}
77.claro .breadcrumbs .breadcrumb {
78    color: #999999;
79    font-size: 13px;
80}
81.claro .breadcrumbs .breadcrumb.breadcrumbCurrent {
82    color: #ffffff;
83    font-size: 14px;
84}
85.claro .breadcrumbs .breadcrumb.breadcrumbHover {
86    color: #0072bc;
87}
88
89/* Content */
90.claro .dijitContentPane.page {
91    padding: 0;
92}
93.claro .content.dijitContentPane {
94    display: block;
95    clear: both;
96    padding: 0;
97    background-color: #555555;
98    /* Background gradient time! */
99    background: -webkit-radial-gradient(
100        50% 50%,
101        circle,
102        #666666 1%,
103        #444444 100%
104        );
105    background: -moz-radial-gradient(
106        50% 50%,
107        circle,
108        #666666 1%,
109        #444444 100%
110        );
111}
112.claro .content.dijitContentPane .dijitBorderContainer {
113    padding: 2px;
114}
115
116/* General */
117.loginLabel {
118    float: left;
119    clear: left;
120    width: 100px;
121}
122.loginInput {
123    float: left;
124    clear: right;
125    width: 150px;
126}
127.rftMultipleChoiceWidget {
128    display: table;
129}
130.rftMultipleChoiceWidget .row {
131    display: table-row;
132}
133.rftMultipleChoiceWidget .rowBox {
134    display: table-cell;
135}
136.rftMultipleChoiceWidget .rowText {
137    display: table-cell;
138    width: 100px;
139}
140.rftMultipleChoiceWidget .rowBtn {
141    display: table-cell;
142    width: 30px;
143}
144.verticalTabList {
145    width: 190px;
146}
147
148/* Tabs */
149.claro .dijitTabContainerLeft-tabs {
150    border: none;
151    padding: 4px 16px 4px 4px;
152}
153.claro .dijitTabContainerLeft-tabs .dijitTab {
154    margin: 4px 0;
155    width: 200px;
156    min-height: 30px;
157}
158.claro .dijitTab {
159    padding: 2px 8px;
160    color: #999999;
161    border: 1px solid #999999;
162    white-space: normal;
163    overflow: hidden;
164    transition: all 0.3s;
165    -moz-transition: all 0.3s;
166    -webkit-transition: all 0.3s;
167    -o-transition: all 0.3s;
168}
169.claro .dijitTabContainerLeft-tabs .dijitTab .dijitTabContent {
170    height: 48px;
171    line-height: 24px;
172    width: 190px;
173}
174.claro .dijitTab.dijitTabHover {
175    color: #ffffff;
176    border-color: #ffffff;
177    transition: all 0.1s;
178    -moz-transition: all 0.1s;
179    -webkit-transition: all 0.1s;
180    -o-transition: all 0.1s;
181}
182.claro .dijitTab.dijitTabActive {
183    color: #0072bc;
184    transition: all 0.1s;
185    -moz-transition: all 0.1s;
186    -webkit-transition: all 0.1s;
187    -o-transition: all 0.1s;
188}
189.claro .dijitTab.dijitTabChecked {
190    color: #ffffff;
191    border: 1px solid transparent;
192    transition: all 0.1s;
193    -moz-transition: all 0.1s;
194    -webkit-transition: all 0.1s;
195    -o-transition: all 0.1s;
196}
197.claro .dijitTabContainer.blue .dijitTab.dijitTabChecked {
198    background-color: #0072bc;
199}
200.claro .dijitTabContainer.orange .dijitTab.dijitTabChecked {
201    background-color: #ff5b12;
202}
203.claro .dijitTabContainer.red .dijitTab.dijitTabChecked {
204    background-color: #8c0310;
205}
206.claro .dijitTabContainer.purple .dijitTab.dijitTabChecked {
207    background-color: #6529b7;
208}
209.claro .dijitTabContainer.green .dijitTab.dijitTabChecked {
210    background-color: #3aa605;
211}
212.claro .dijitTabContainer.blue .dijitTab.dijitTabActive {
213    color: #0072bc;
214}
215.claro .dijitTabContainer.orange .dijitTab.dijitTabActive {
216    color: #ff5b12;
217}
218.claro .dijitTabContainer.red .dijitTab.dijitTabActive {
219    color: #8c0310;
220}
221.claro .dijitTabContainer.purple .dijitTab.dijitTabActive {
222    color: #6529b7;
223}
224.claro .dijitTabContainer.green .dijitTab.dijitTabActive {
225    color: #3aa605;
226}
227
228/* Index Menu */
229.claro .rftIndexMenuBlock {
230    width: 400px;
231    height: 400px;
232    background: #444444;
233    float: left;
234    margin: 16px;
235    overflow: hidden;
236}
237.claro .rftIndexMenuMask {
238    height: 400px;
239    width: 400px;
240    background: #444444;
241    color: #999999;
242    margin-top: 0;
243}
244.claro .rftIndexMenuBlock:hover .rftIndexMenuMask {
245    margin-top: -400px;
246}
247.claro .rftIndexMenuMask .label {
248    color: #999999;
249    font-size: 32px;
250    line-height: 28px;
251    height: 32px;
252    margin: 184px 0;
253    float: left;
254}
255.claro .rftIndexMenuMask .rftIcon {
256    width: 32px;
257    height: 32px;
258    background-image: url('images/icons/rftIcons32.png');
259    margin: 184px 8px 0 8px;
260    float: left;
261}
262
263
264/* Inputs */
265fieldset {
266    border: none;
267}
268fieldset.align input,
269fieldset.align .dijitTextBox,
270fieldset.align textarea {
271    margin-left: 0;
272}
273fieldset.align label {
274    color: #ffffff;
275    display: inline-block;
276    width: 100px !important;
277}
278
279.claro .newline {
280    display: block;
281}
282
283/* Question editor/Survey Advanced editor */
284.claro .QuestionEditor .PreviewWindow {
285    /* Nothing yet, put preview window styling options here after we've decided on a format to follow! */
286}
287.claro .dijitAccordionContainer {
288    /* No styling for now, use this for margins and other layout-related business. This class does not affect the look of the AccordionContainer currently! */
289}
290.claro .dijitAccordionInnerContainer {
291    /* This contains a title and a childWrapper. The two of these make up one "item" in the Accordion element */
292    border: none;
293    border-color: #333333;
294    background-color: #0072bc;
295    margin-bottom: 0;
296}
297.claro .dijitAccordionInnerContainer {
298    background-color: transparent;
299}
300.claro .dijitAccordionTitle, .claro .dijitAccordionTitleSelected {
301    background-color: #0072bc;
302    background-image: none;
303    color: #ffffff;
304}
305.claro .dijitAccordionTitle .rftIcon {
306    width: 16px;
307    height: 16px;
308    background-image: url('images/icons/rftIcons16b.png');
309    margin: 0 4px 2px 0;
310}
311.claro .dijitAccordionTitleSelected .rftIcon {
312    background-image: url('images/icons/rftIcons16.png');
313}
314.claro .dijitAccordionContainer.blue .dijitAccordionTitle, .claro .dijitAccordionContainer.blue .dijitAccordionTitleSelected {
315    background-color: #0072bc;
316}
317.claro .dijitAccordionContainer.blue .dijitAccordionTitleHover {
318    background-color: #0794d1;
319}
320.claro .dijitAccordionContainer.orange .dijitAccordionTitle, .claro .dijitAccordionContainer.orange .dijitAccordionTitleSelected {
321    background-color: #ff5b12;
322}
323.claro .dijitAccordionContainer.orange .dijitAccordionTitleHover {
324    background-color: #ff9140;
325}
326.claro .dijitAccordionText {
327    color: #ffffff;
328}
329.claro .dijitAccordionContainer .dijitAccordionChildWrapper {
330    background-color: #444444;
331    border: none !important;
332    padding: 0;
333    margin: 0;
334}
335.claro .dijitAccordionContainer .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper,
336.claro .dijitAccordionContainer .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
337    border: none;
338    box-shadow: none;
339    -moz-box-shadow: none;
340    -webkit-box-shadow: none;
341    /* Override the box shadow and offset on hover */
342}
343
344/* DojoX.TitleGroup, replacement of AccordionContainer in Question Editor */
345.claro .dojoxTitleGroup {
346    /* No styling yet */
347}
348.claro .dojoxTitleGroup .dijitTitlePane {
349    margin: 0;
350}
351.claro .orange .dojoxTitleGroup .dijitTitlePaneTitle {
352    background-color: #ff5b12;
353    background-image: none;
354    border: none;
355    padding: 0 4px;
356    height: 24px;
357    margin: 0;
358}
359.claro .orange .dojoxTitleGroup .dijitTitlePaneTitleHover,
360.claro .ornage .dojoxTitleGroup .dijitTitlePanelTitleFocused {
361    background-color: #ff9140;
362}
363.claro .dojoxTitleGroup .dijitTitlePaneTextNode {
364    color: #ffffff;
365    font-size: 13px;
366    line-height: 24px;
367}
368.claro .dojoxTitleGroup .dijitTitlePaneContentOuter {
369    background-color: #444;
370    border: none;
371}
372.claro .dojoxTitleGroup .dijitTitlePaneTitleFocus {
373    margin: 0;
374}
375
376/****************************************************
377/*  Self- and Inherit Colours
378/***************************************************/
379
380/* InheritColours */
381.claro .inheritBgColor,
382.claro .bg {
383    transition: all 0.2s;
384    -moz-transition: all 0.2s;
385    -webkit-transition: all 0.2s;
386}
387
388.claro .blue .inheritBgColor {
389    background-color: #0072bc;
390    color: #ffffff;
391}
392.claro .blue.light .inheritBgColor,
393.claro .blue .light.inheritBgColor {
394    background-color: #0794d1;
395    color: #ffffff;
396}
397.claro .green .inheritBgColor {
398    background-color: #3aa605;
399    color: #ffffff;
400}
401.claro .green.light .inheritBgColor,
402.claro .green .light.inheritBgColor {
403    background-color: #79ca0a;
404    color: #ffffff;
405}
406.claro .orange .inheritBgColor {
407    background-color: #ff5b12;
408    color: #ffffff;
409}
410.claro .orange.light .inheritBgColor,
411.claro .orange .light.inheritBgColor {
412    background-color: #ff9140;
413    color: #ffffff;
414}
415.claro .red .inheritBgColor {
416    background-color: #8c0310;
417    color: #ffffff;
418}
419.claro .red.light .inheritBgColor,
420.claro .red .light.inheritBgColor {
421   background-color: #bd0013;
422   color: #ffffff;   
423}
424.claro .purple .inheritBgColor {
425    background-color: #6529b7;
426    color: #ffffff;
427}
428.claro .purple.light .inheritBgColor,
429.claro .purple .light.inheritBgColor {
430    background-color: #993dec;
431    color: #ffffff;
432}
433.claro .white .inheritBgColor {
434    background-color: #ffffff;
435    color: #000000;
436}
437.claro .black .inheritBgColor {
438    background-color: #000000;
439    color: #ffffff;
440}
441.claro .trans .inheritBgColor {
442    background: transparent;
443    color: #ffffff;
444}
445
446/*SelfColours! */
447.claro .blue.bg {
448    background-color: #0072bc;
449    color: #ffffff;
450}
451.claro .blue.light.bg {
452    background-color: #0794d1;
453    color: #ffffff;
454}
455.claro .green.bg {
456    background-color: #3aa605;
457    color: #ffffff;
458}
459.claro .green.light.bg {
460    background-color: #79ca0a;
461    color: #ffffff;
462}
463.claro .orange.bg {
464    background-color: #ff5b12;
465    color: #ffffff;
466}
467.claro .orange.light.bg {
468    background-color: #ff9140;
469    color: #ffffff;
470}
471.claro .red.bg {
472    background-color: #8c0310;
473    color: #ffffff;
474}
475.claro .red.light.bg {
476    background-color: #bd0013;
477    color: #ffffff;   
478}
479.claro .purple.bg {
480    background-color: #6529b7;
481    color: #ffffff;
482}
483.claro .purple.light.bg {
484    background-color: #993dec;
485    color: #ffffff;
486}
487.claro .white.bg {
488    background-color: #ffffff;
489    color: #000000;
490}
491.claro .black.bg {
492    background-color: #000000;
493    color: #ffffff;
494}
495.claro .trans.bg {
496    background: transparent;
497    color: #ffffff;
498}
499
500/*Dropdown menu on MenuBar */
501.claro .dijitMenuPopup {
502
503}
504.claro .dijitMenuPopup .dijitMenu {
505    border: none;
506    background-color: #333333;
507    background-image: none;
508    color: #999999;   
509}
510.claro .dijitMenuPopup .dijitMenu .dijitMenuItem {
511    color: #999999;
512    background-image: none;
513    background-color: transparent;
514}
515.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.blue,
516.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.blue {
517    background-color: #0072bc;
518}
519.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.orange,
520.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.orange {
521    background-color: #ff5b12;
522}
523.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.purple,
524.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.purple {
525    background-color: #6529b7;
526}
527.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.green,
528.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.green {
529    background-color: #3aa605;
530}
531.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover.red,
532.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected.red {
533    background-color: #8c0310;
534}
535.claro .dijitMenuPopup .dijitMenu .dijitMenuItemHover .dijitMenuItemLabel,
536.claro .dijitMenuPopup .dijitMenu .dijitMenuItemActive .dijitMenuItemLabel,
537.claro .dijitMenuPopup .dijitMenu .dijitMenuItemSelected .dijitMenuItemLabel {
538    color: #ffffff;
539}
540.claro .dijitMenuPopup .dijitMenu .dijitMenuItem .rftIcon {
541    height: 16px;
542    width: 16px;
543    margin: 0;
544    margin-right: 4px;
545    background-image: url('images/icons/rftIcons16.png');
546}
547.claro .dijitMenuPopup .dijitMenu .dijitMenuItemActive .rftIcon {
548    background-image: url('images/icons/rftIcons16b.png');
549}
550
551
552/* Alignment */
553.claro .floatRight {
554    float: right;
555    margin: 0;
556    padding: 0;
557}
558
559
560/* SurveyListView */
561.claro .rftSurveyListView {
562}
563.claro .rftSurveyListView .rftSurveyListViewContent {
564    height: 300px;
565    background: #444444;
566    overflow: auto;
567}
568.claro .rftSurveyListView .rftLineWithButtons .rftLineWithButtonsTitle {
569    max-width: 200px;
570    overflow: hidden;
571}
572
573/* AccountListView */
574.claro .rftAccountListView .rftLineWithButtons .rftLineWithButtonsTitle {
575    max-width: 400px;
576    overflow: auto;
577}
578/* Generic list with lines */
579.claro .rftLineListView {
580    max-width: 200px;
581    max-height: 500px;
582}
583.claro .rftLineListView .rftLineListViewContent {
584    max-width: 200px;
585    overflow: auto;
586}
587
588
589/* Two column tables */
590.labelsAndValues-labelCell {
591  padding-left: 5px;
592}
593.labelsAndValues-valueCell {
594  padding-left: 20px;
595}
Note: See TracBrowser for help on using the repository browser.