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

Last change on this file since 341 was 340, checked in by tjcschipper, 13 years ago
  • Fixed typo in rft/content.js description. No functionality touched, don't worry!;)
  • Some more markup and styling changes to make everything more consistent.
  • Created rft/ui/Breadcrumbs class, first draft of decoupled breadcrumbs system. Still needs a couple of fixes (see comments in file) and requires rft/content to expose "rft/content/goTo" event via connect.publish or topic.publish.
File size: 4.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: #ffffff;
14}
15
16/* Headings */
17.claro h1 {   
18    /* Main logo */
19    float: left;
20    clear: left;
21    font-size: 48px;
22    color: #999999;
23    margin: 0 10px 8px 10px;
24    padding: 0;
25    line-height: 48px;
26    font-weight: normal !important;
27    -webkit-user-select: none;
28    -moz-user-select: none;
29}
30.claro h2 {
31    /* Content pane title */
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}
48.claro h4 {
49    /* Small text headers/paragraph headers */
50    font-size: 16px;
51}
52
53/* Topbar  */
54.topbar {
55    overflow-y: hidden;
56}
57.topbar .dijitMenuBar {
58    float: right;
59    clear: right;
60    margin-top: 16px;
61}
62
63/* Breadcrumbs */
64.claro .breadcrumbs {
65    float: left;
66    clear: left;
67    width: 100%;
68    text-align: center;
69    height: 16px;
70    line-height: 16px;
71}
72.claro .breadcrumbs .breadcrumb {
73    color: #999999;
74    font-size: 13px;
75}
76.claro .breadcrumbs .breadcrumb.breadcrumbCurrent {
77    color: #ffffff;
78    font-size: 14px;
79}
80.claro .breadcrumbs .breadcrumb.breadcrumbHover {
81    color: #0072bc;
82}
83
84/* Content */
85.claro .dijitContentPane.page {
86    padding: 0;
87}
88.claro .content.dijitContentPane {
89    display: block;
90    clear: both;
91    padding: 0;
92    background-color: #555555;
93    /* Background gradient time! */
94    background: -webkit-radial-gradient(
95        50% 50%,
96        circle,
97        #666666 1%,
98        #444444 100%
99        );
100    background: -moz-radial-gradient(
101        50% 50%,
102        circle,
103        #666666 1%,
104        #444444 100%
105        );
106}
107.claro .content.dijitContentPane .dijitBorderContainer {
108    padding: 2px;
109}
110
111/* General */
112.loginLabel {
113    float: left;
114    clear: left;
115    width: 100px;
116}
117.loginInput {
118    float: left;
119    clear: right;
120    width: 150px;
121}
122.rftMultipleChoiceWidget {
123    display: table;
124}
125.rftMultipleChoiceWidget .row {
126    display: table-row;
127}
128.rftMultipleChoiceWidget .rowBox {
129    display: table-cell;
130}
131.rftMultipleChoiceWidget .rowText {
132    display: table-cell;
133    width: 100px;
134}
135.rftMultipleChoiceWidget .rowBtn {
136    display: table-cell;
137    width: 30px;
138}
139.verticalTabList {
140    width: 190px;
141}
142
143/* Tabs */
144.claro .dijitTabContainerLeft-tabs {
145    border: none;
146    padding: 4px 16px 4px 4px;
147}
148.claro .dijitTabContainerLeft-tabs .dijitTab {
149    margin: 4px 0;
150    width: 200px;
151    min-height: 30px;
152}
153.claro .dijitTab {
154    padding: 2px 8px;
155    color: #999999;
156    border: 1px solid #999999;
157    white-space: normal;
158    overflow: hidden;
159    transition: all 0.3s;
160    -moz-transition: all 0.3s;
161    -webkit-transition: all 0.3s;
162    -o-transition: all 0.3s;
163}
164.claro .dijitTabContainerLeft-tabs .dijitTab .dijitTabContent {
165    height: 48px;
166    line-height: 24px;
167    width: 190px;
168}
169
170.claro .dijitTab.dijitTabHover {
171    color: #ffffff;
172    transition: all 0.1s;
173    -moz-transition: all 0.1s;
174    -webkit-transition: all 0.1s;
175    -o-transition: all 0.1s;
176}
177.claro .dijitTab.dijitTabActive {
178    color: #0072bc;
179    transition: all 0.1s;
180    -moz-transition: all 0.1s;
181    -webkit-transition: all 0.1s;
182    -o-transition: all 0.1s;
183    /* The delay on clicking is wrong, needs to be quicker! */
184}
185.claro .dijitTab.dijitTabChecked {
186    color: #ffffff;
187    border: 1px solid transparent;
188    transition: all 0.1s;
189    -moz-transition: all 0.1s;
190    -webkit-transition: all 0.1s;
191    -o-transition: all 0.1s;
192}
193
194.claro .dijitTabContainer.blue .dijitTab.dijitTabChecked {
195    background-color: #0072bc;
196}
197.claro .dijitTabContainer.orange .dijitTab.dijitTabChecked {
198    background-color: #ff5b12;
199}
200.claro .dijitTabContainer.red .dijitTab.dijitTabChecked {
201    background-color: #8c0310;
202}
203.claro .dijitTabContainer.purple .dijitTab.dijitTabChecked {
204    background-color: #6529b7;
205}
206.claro .dijitTabContainer.green .dijitTab.dijitTabChecked {
207    background-color: #3aa605;
208}
209
210.claro .dijitTabContainer.blue .dijitTab.dijitTabActive {
211    color: #0072bc;
212}
213.claro .dijitTabContainer.orange .dijitTab.dijitTabActive {
214    color: #ff5b12;
215}
216.claro .dijitTabContainer.red .dijitTab.dijitTabActive {
217    color: #8c0310;
218}
219.claro .dijitTabContainer.purple .dijitTab.dijitTabActive {
220    color: #6529b7;
221}
222.claro .dijitTabContainer.green .dijitTab.dijitTabActive {
223    color: #3aa605;
224}
Note: See TracBrowser for help on using the repository browser.