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

Last change on this file since 339 was 339, checked in by tjcschipper, 13 years ago
  • Switched away from using custom themes, this allows us to use the default Claro theme off of a CDN, then override the needed properties using our own, much smaller stylesheets. Retains graceful degradation of dijit style.
  • Made rftLineWithActions also work outside of the context of an rftSelector.css
  • Fixed some general layout issues
  • Redid the tabs styling
File size: 4.2 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.breadcrumbs {
65    float: left;
66    clear: left;
67    width: 100%;
68    text-align: center;
69    height: 16px;
70    line-height: 16px;
71}
72.breadcrumb {
73    color: #999999;
74    font-size: 13px;
75}
76.breadcrumbCurrent {
77    color: #ffffff;
78    font-size: 14px;
79}
80
81/* Content */
82.dijitContentPane.page {
83    padding: 0;
84}
85.content.dijitContentPane {
86    display: block;
87    clear: both;
88    padding: 0;
89    background-color: #555555;
90    /* Background gradient time! */
91    background: -webkit-radial-gradient(
92        50% 50%,
93        circle,
94        #666666 1%,
95        #444444 100%
96        );
97    background: -moz-radial-gradient(
98        50% 50%,
99        circle,
100        #666666 1%,
101        #444444 100%
102        );
103}
104.content.dijitContentPane .dijitBorderContainer {
105    padding: 2px;
106}
107
108/* General */
109.loginLabel {
110    float: left;
111    clear: left;
112    width: 100px;
113}
114.loginInput {
115    float: left;
116    clear: right;
117    width: 150px;
118}
119.rftMultipleChoiceWidget {
120    display: table;
121}
122.rftMultipleChoiceWidget .row {
123    display: table-row;
124}
125.rftMultipleChoiceWidget .rowBox {
126    display: table-cell;
127}
128.rftMultipleChoiceWidget .rowText {
129    display: table-cell;
130    width: 100px;
131}
132.rftMultipleChoiceWidget .rowBtn {
133    display: table-cell;
134    width: 30px;
135}
136.verticalTabList {
137    width: 190px;
138}
139
140
141/* Tabs */
142.claro .dijitTabContainerLeft-tabs {
143    border: none;
144}
145.claro .dijitTabContainerLeft-tabs .dijitTab {
146    margin: 4px 0;
147    width: 200px;
148    height: 30px;
149}
150.claro .dijitTab {
151    color: #999999;
152    border: 1px solid #999999;
153    transition: all 0.3s;
154    -moz-transition: all 0.3s;
155    -webkit-transition: all 0.3s;
156    -o-transition: all 0.3s;
157}
158.claro .dijitTab.dijitTabHover {
159    color: #ffffff;
160    transition: all 0.1s;
161    -moz-transition: all 0.1s;
162    -webkit-transition: all 0.1s;
163    -o-transition: all 0.1s;
164}
165.claro .dijitTab.dijitTabActive {
166    color: #0072bc;
167    transition: all 0.1s;
168    -moz-transition: all 0.1s;
169    -webkit-transition: all 0.1s;
170    -o-transition: all 0.1s;
171    /* The delay on clicking is wrong, needs to be quicker! */
172}
173.claro .dijitTab.dijitTabChecked {
174    color: #ffffff;
175    border: 1px solid transparent;
176    transition: all 0.1s;
177    -moz-transition: all 0.1s;
178    -webkit-transition: all 0.1s;
179    -o-transition: all 0.1s;
180}
181
182.claro .dijitTabContainer.blue .dijitTab.dijitTabChecked {
183    background-color: #0072bc;
184}
185.claro .dijitTabContainer.orange .dijitTab.dijitTabChecked {
186    background-color: #ff5b12;
187}
188.claro .dijitTabContainer.red .dijitTab.dijitTabChecked {
189    background-color: #8c0310;
190}
191.claro .dijitTabContainer.purple .dijitTab.dijitTabChecked {
192    background-color: #6529b7;
193}
194.claro .dijitTabContainer.green .dijitTab.dijitTabChecked {
195    background-color: #3aa605;
196}
197
198.claro .dijitTabContainer.blue .dijitTab.dijitTabActive {
199    color: #0072bc;
200}
201.claro .dijitTabContainer.orange .dijitTab.dijitTabActive {
202    color: #ff5b12;
203}
204.claro .dijitTabContainer.red .dijitTab.dijitTabActive {
205    color: #8c0310;
206}
207.claro .dijitTabContainer.purple .dijitTab.dijitTabActive {
208    color: #6529b7;
209}
210.claro .dijitTabContainer.green .dijitTab.dijitTabActive {
211    color: #3aa605;
212}
Note: See TracBrowser for help on using the repository browser.