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

Last change on this file since 342 was 342, checked in by tjcschipper, 13 years ago
  • Fixed callbacks/actions in LineWithActionsWidgetThijs?.js. Previously an onClick event would not fire the correct callback. They were also incorrectly bound to the context of the widget, so the this keyword referred to the properties object instead of the LineWithActions?.
  • Changed a bunch of stuff in CSS files, general layout.
  • Added another mockup page to show the Session selection page.
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    margin: 0 0 4px 0;
48}
49.claro h4 {
50    /* Small text headers/paragraph headers */
51    font-size: 16px;
52}
53
54/* Topbar  */
55.topbar {
56    overflow-y: hidden;
57}
58.topbar .dijitMenuBar {
59    float: right;
60    clear: right;
61    margin-top: 16px;
62}
63
64/* Breadcrumbs */
65.claro .breadcrumbs {
66    float: left;
67    clear: left;
68    width: 100%;
69    text-align: center;
70    height: 16px;
71    line-height: 16px;
72    margin: 0 0 4px 0;
73}
74.claro .breadcrumbs .breadcrumb {
75    color: #999999;
76    font-size: 13px;
77}
78.claro .breadcrumbs .breadcrumb.breadcrumbCurrent {
79    color: #ffffff;
80    font-size: 14px;
81}
82.claro .breadcrumbs .breadcrumb.breadcrumbHover {
83    color: #0072bc;
84}
85
86/* Content */
87.claro .dijitContentPane.page {
88    padding: 0;
89}
90.claro .content.dijitContentPane {
91    display: block;
92    clear: both;
93    padding: 0;
94    background-color: #555555;
95    /* Background gradient time! */
96    background: -webkit-radial-gradient(
97        50% 50%,
98        circle,
99        #666666 1%,
100        #444444 100%
101        );
102    background: -moz-radial-gradient(
103        50% 50%,
104        circle,
105        #666666 1%,
106        #444444 100%
107        );
108}
109.claro .content.dijitContentPane .dijitBorderContainer {
110    padding: 2px;
111}
112
113/* General */
114.loginLabel {
115    float: left;
116    clear: left;
117    width: 100px;
118}
119.loginInput {
120    float: left;
121    clear: right;
122    width: 150px;
123}
124.rftMultipleChoiceWidget {
125    display: table;
126}
127.rftMultipleChoiceWidget .row {
128    display: table-row;
129}
130.rftMultipleChoiceWidget .rowBox {
131    display: table-cell;
132}
133.rftMultipleChoiceWidget .rowText {
134    display: table-cell;
135    width: 100px;
136}
137.rftMultipleChoiceWidget .rowBtn {
138    display: table-cell;
139    width: 30px;
140}
141.verticalTabList {
142    width: 190px;
143}
144
145/* Tabs */
146.claro .dijitTabContainerLeft-tabs {
147    border: none;
148    padding: 4px 16px 4px 4px;
149}
150.claro .dijitTabContainerLeft-tabs .dijitTab {
151    margin: 4px 0;
152    width: 200px;
153    min-height: 30px;
154}
155.claro .dijitTab {
156    padding: 2px 8px;
157    color: #999999;
158    border: 1px solid #999999;
159    white-space: normal;
160    overflow: hidden;
161    transition: all 0.3s;
162    -moz-transition: all 0.3s;
163    -webkit-transition: all 0.3s;
164    -o-transition: all 0.3s;
165}
166.claro .dijitTabContainerLeft-tabs .dijitTab .dijitTabContent {
167    height: 48px;
168    line-height: 24px;
169    width: 190px;
170}
171
172.claro .dijitTab.dijitTabHover {
173    color: #ffffff;
174    transition: all 0.1s;
175    -moz-transition: all 0.1s;
176    -webkit-transition: all 0.1s;
177    -o-transition: all 0.1s;
178}
179.claro .dijitTab.dijitTabActive {
180    color: #0072bc;
181    transition: all 0.1s;
182    -moz-transition: all 0.1s;
183    -webkit-transition: all 0.1s;
184    -o-transition: all 0.1s;
185    /* The delay on clicking is wrong, needs to be quicker! */
186}
187.claro .dijitTab.dijitTabChecked {
188    color: #ffffff;
189    border: 1px solid transparent;
190    transition: all 0.1s;
191    -moz-transition: all 0.1s;
192    -webkit-transition: all 0.1s;
193    -o-transition: all 0.1s;
194}
195
196.claro .dijitTabContainer.blue .dijitTab.dijitTabChecked {
197    background-color: #0072bc;
198}
199.claro .dijitTabContainer.orange .dijitTab.dijitTabChecked {
200    background-color: #ff5b12;
201}
202.claro .dijitTabContainer.red .dijitTab.dijitTabChecked {
203    background-color: #8c0310;
204}
205.claro .dijitTabContainer.purple .dijitTab.dijitTabChecked {
206    background-color: #6529b7;
207}
208.claro .dijitTabContainer.green .dijitTab.dijitTabChecked {
209    background-color: #3aa605;
210}
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}
Note: See TracBrowser for help on using the repository browser.