Changeset 339 for Dev/branches/rest-dojo-ui/client/rft/css/layout.css

Timestamp:

06/04/12 18:09:33 (13 years ago)

Author:

tjcschipper

Message:

• 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:

• Dev/branches/rest-dojo-ui/client/rft/css/layout.css (modified) (6 diffs)

Dev/branches/rest-dojo-ui/client/rft/css/layout.css

@@ -9 +9 @@
     background-color: #333333;
 }
-.gamelab {
+.claro {
     font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
     color: #ffffff;
@@ -15 +15 @@
 
 /* Headings */
-.gamelab h1 {   
+.claro h1 {   
     /* Main logo */
     float: left;
@@ -28 +28 @@
     -moz-user-select: none;
 }
-.gamelab h2 {
+.claro h2 {
     /* Content pane title */
     font-size: 22px;
@@ -35 +35 @@
     padding: 0;
 }
-.gamelab h2 .rftIcon {
+.claro h2 .rftIcon {
     float: left;
     width: 32px;
@@ -42 +42 @@
     margin-right: 8px;
 }
-.gamelab h3 {
+.claro h3 {
     /* Section headers */
     font-size: 18px;
 }
-.gamelab h4 {
+.claro h4 {
     /* Small text headers/paragraph headers */
     font-size: 16px;
@@ -137 +137 @@
     width: 190px;
 }
+
+
+/* Tabs */
+.claro .dijitTabContainerLeft-tabs {
+    border: none;
+}
+.claro .dijitTabContainerLeft-tabs .dijitTab {
+    margin: 4px 0;
+    width: 200px;
+    height: 30px;
+}
+.claro .dijitTab {
+    color: #999999;
+    border: 1px solid #999999;
+    transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    -o-transition: all 0.3s;
+}
+.claro .dijitTab.dijitTabHover {
+    color: #ffffff;
+    transition: all 0.1s;
+    -moz-transition: all 0.1s;
+    -webkit-transition: all 0.1s;
+    -o-transition: all 0.1s;
+}
+.claro .dijitTab.dijitTabActive {
+    color: #0072bc;
+    transition: all 0.1s;
+    -moz-transition: all 0.1s;
+    -webkit-transition: all 0.1s;
+    -o-transition: all 0.1s;
+    /* The delay on clicking is wrong, needs to be quicker! */
+}
+.claro .dijitTab.dijitTabChecked {
+    color: #ffffff;
+    border: 1px solid transparent;
+    transition: all 0.1s;
+    -moz-transition: all 0.1s;
+    -webkit-transition: all 0.1s;
+    -o-transition: all 0.1s;
+}
+
+.claro .dijitTabContainer.blue .dijitTab.dijitTabChecked {
+    background-color: #0072bc;
+}
+.claro .dijitTabContainer.orange .dijitTab.dijitTabChecked {
+    background-color: #ff5b12;
+}
+.claro .dijitTabContainer.red .dijitTab.dijitTabChecked {
+    background-color: #8c0310;
+}
+.claro .dijitTabContainer.purple .dijitTab.dijitTabChecked {
+    background-color: #6529b7;
+}
+.claro .dijitTabContainer.green .dijitTab.dijitTabChecked {
+    background-color: #3aa605;
+}
+
+.claro .dijitTabContainer.blue .dijitTab.dijitTabActive {
+    color: #0072bc;
+}
+.claro .dijitTabContainer.orange .dijitTab.dijitTabActive {
+    color: #ff5b12;
+}
+.claro .dijitTabContainer.red .dijitTab.dijitTabActive {
+    color: #8c0310;
+}
+.claro .dijitTabContainer.purple .dijitTab.dijitTabActive {
+    color: #6529b7;
+}
+.claro .dijitTabContainer.green .dijitTab.dijitTabActive {
+    color: #3aa605;
+}