Changeset 411


Ignore:
Timestamp:
10/10/12 17:45:49 (13 years ago)
Author:
tjcschipper
Message:
  • LESS is finally ready for use. Some small visual bugs remain.
Location:
Dev/branches/rest-dojo-ui/client
Files:
17 added
17 deleted
20 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/index.html

    r410 r411  
    22<html>
    33    <head>
    4         <title>Research Facilitator Tool</title>
     4        <title>QED</title>
    55        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    66        <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
    77    </head>
    8     <body class="dijitReset claro">
     8    <body class="dijitReset claro" id="rft">
    99        <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false, isDebug: true"></script>
    1010        <script type="text/javascript" src="rft/run.js"></script>
    1111        <div id="content" class="page" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="width: 100%; height: 100%;">
    1212            <div class="topbar" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
    13                 <a href="#!/"><h1>ResearchTool</h1></a>
     13                <a href="#!/"><h1>QED</h1></a>
    1414                <div data-dojo-type="rft/ui/MainMenu"></div>
    1515            </div>

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/colors.less

    r403 r411  
    2020
    2121                .hoverColorMixin (@color) {
    22                         &.bgColorHover:hover {
     22                        &.hoverBgColor:hover {
    2323                                background-color: @@color !important;
    2424                                &.light {
    … …  
    2727                                }
    2828                        }
    29                         .bgColorHover:hover {
     29                        .hoverBgColor:hover {
    3030                                background-color: @@color;
    3131                                &.light {
    … …  
    3737
    3838                .hoverTextColorMixin (@color) {
    39                         &.textColorHover:hover {
     39                        &.hoverTextColor:hover {
    4040                                color: @@color !important;
    4141                                &.light {
    … …  
    4444                                }
    4545                        }
    46                         .textColorHover:hover {
     46                        .hoverTextColor:hover {
    4747                                color: @@color;
    4848                                &.light {

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/colors2.less

    r409 r411  
    1616
    1717// Variables/Colour scheme parameters
    18 @blue: #0000ff;
    19 @blue_light: #7777ff;
    20 @red: #ff0000;
    21 @red_light: #ff7777;
    22 @green: #00ff00;
    23 @green_light: #77ff77;
    24 @orange: #ff7700;
    25 @orange_light: #ffaa77;
    26 @purple: #ff00ff;
    27 @purple_light: #ffaaff;
    28 @text: #ffffff;
    29 @black: #000000;
     18.textColor (@color) {
     19        color: @@color;
     20}
     21.textColorH (@color) {
     22        color: @@color;
     23        &.doesHover:hover {
     24                @colorName: "@{color}_light";
     25                color: @@colorName;
     26        }
     27}
     28.hoverTextColor (@color) {
     29        &:hover {
     30                color: @@color;
    3031
    31 .colorMixin (@color) {
     32        }
     33}
     34.bgColor (@color) {
     35        background-color: @@color;
     36}
     37.bgColorH (@color) {
     38        background-color: @@color;
     39        &.doesHover:hover {
     40                @colorName: "@{color}_light";
     41                background-color: @@colorName;
     42        }
     43}
     44.hoverBgColor (@color) {
     45        &:hover {
     46                background-color: @@color;
     47
     48        }
     49}
     50
     51
     52// Private color mixin is used to assign the colour classes below, don't use this in external CSS!
     53.privateColorMixin (@color) {
    3254        &.textColor {   //Change text colour to C-Class
    3355                color: @@color;
    … …  
    4365                        @colorName: "@{color}_light";
    4466                        background-color: @@colorName;
    45                         color: @black;
     67                        color: @darkest;
    4668                }
    4769        }
    … …  
    5880
    5981                .blue {
    60                         .colorMixin("blue");
     82                        .privateColorMixin("blue");
    6183                }
    6284                .red {
    63                         .colorMixin("red");
     85                        .privateColorMixin("red");
    6486                }
    6587                .orange {
    66                         .colorMixin("orange");
     88                        .privateColorMixin("orange");
    6789                }
    6890                .green {
    69                         .colorMixin("green");
     91                        .privateColorMixin("green");
    7092                }
    7193                .purple {
    72                         .colorMixin("purple");
     94                        .privateColorMixin("purple");
    7395                }
    7496
    … …  
    81103                        transition: background-color 0.2s;
    82104                }
    83 
    84105        }
    85106}

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

    r403 r411  
    1414                font-size: @font_size;
    1515                color: @darkest;
     16
     17                .dijitBorderContainer, .dijitContentPane, .dijitTabContainer, .dijitTabPaneWrapper {
     18                        background: transparent;
     19                        border: none;
     20                }               
     21
    1622
    1723                h1 {
    … …  
    164170                        overflow: hidden;
    165171
    166                         &.dijitTabHover {
    167                                 .transition (0.1s);
    168                                 color: @text;
    169                                 border-color: @text;
    170                         }
    171 
    172                         &.dijitTabActive {
    173                                 .transition (0.1s);
    174                                 color: @headers;
    175                         }
    176 
    177                         &.dijitTabChecked {
    178                                 .transition (0.1s);
    179                                 color: @text;
    180                                 border: 1px solid transparent;
    181                         }
     172                       
     173
     174                       
    182175                }
    183176
    … …  
    187180
    188181                        .dijitTab {
    189                                 margin: @std_offset 0;
     182                                margin: @std_offset;
    190183                                width: 200px;
    191184                                min-height: @tab_height;
    … …  
    197190                                        width: 190px;
    198191                                }
    199                         }
     192
     193                                &.dijitTabChecked {
     194                                        .transition (0.1s);
     195                                        color: @text;
     196                                        border: 1px solid transparent;
     197
     198                                        &.dijitTabHover {
     199                                                border: 1px solid transparent;
     200                                        }
     201                                }
     202
     203                                &.dijitTabHover {
     204                                        .transition (0.1s);
     205                                        color: @text;
     206                                        border-color: @text;
     207                                }
     208
     209                                &.dijitTabActive {
     210                                        .transition (0.1s);
     211                                        color: @headers;
     212                                }
     213                        }
     214
    200215                }
    201216                //Tab colour settings
    … …  
    203218                .blue .dijitTabChecked,
    204219                div.blue.dijitTabChecked {
    205                         background-color: @blue;
     220                        .bgColor ("blue");
    206221                }
    207222                &.green .dijitTabChecked,
    208223                .green .dijitTabChecked,
    209224                div.green.dijitTabChecked {
    210                         background-color: @green;
     225                        .bgColor ("green");
    211226                }
    212227                &.red .dijitTabChecked,
    213228                .red .dijitTabChecked,
    214229                div.red.dijitTabChecked {
    215                         background-color: @red;
     230                        .bgColor ("red");
    216231                }
    217232                &.orange .dijitTabChecked,
    218233                .orange .dijitTabChecked,
    219234                div.orange.dijitTabChecked {
    220                         background-color: @orange;
     235                        .bgColor ("orange");
    221236                }
    222237                &.purple .dijitTabChecked,
    223238                .purple .dijitTabChecked,
    224239                div.purple.dijitTabChecked {
    225                         background-color: @purple;
     240                        .bgColor ("purple");
    226241                }
    227242

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/main.css

    r409 r411  
     1/* Menu.css */
     2@import "external.css";
     3DESCRIPTION {
     4  /*
     5How to use colour system:
     6Apply a combination of at most 1 "colour" class and one or more "modifier" classes.
     7Colour classes: Red, Blue, Green, Orange, Purple
     8Modifer classes:
     9- textColor: Change the font colour of element to the "colour" class combined with.
     10- bgColor: Change the background colour to the "colour" class combined with.
     11- doesHover: If present in combination with one of the above two modifiers,
     12the element will shift it's background- or text colour to a lighter version on hover.
     13- hoverTextColor: Same as .textColor, but only affects elements being hovered over.
     14- hoverBgColor: Same as .bgColor, but only affects elements being hovered over.
     15NOTE: .doesHover does nothing in combination with the above two modifiers!
     16*/
     17
     18}
     19#rft.claro .blue.textColor {
     20  color: #0072bc;
     21}
     22#rft.claro .blue.textColor.doesHover:hover {
     23  color: #0794d1;
     24}
     25#rft.claro .blue.bgColor {
     26  background-color: #0072bc;
     27  color: #ffffff;
     28}
     29#rft.claro .blue.bgColor.doesHover:hover {
     30  background-color: #0794d1;
     31  color: #111111;
     32}
     33#rft.claro .blue.hoverTextColor:hover {
     34  color: #0072bc;
     35}
     36#rft.claro .blue.hoverBgColor:hover {
     37  background-color: #0072bc;
     38}
     39#rft.claro .red.textColor {
     40  color: #8c0310;
     41}
     42#rft.claro .red.textColor.doesHover:hover {
     43  color: #bd0013;
     44}
     45#rft.claro .red.bgColor {
     46  background-color: #8c0310;
     47  color: #ffffff;
     48}
     49#rft.claro .red.bgColor.doesHover:hover {
     50  background-color: #bd0013;
     51  color: #111111;
     52}
     53#rft.claro .red.hoverTextColor:hover {
     54  color: #8c0310;
     55}
     56#rft.claro .red.hoverBgColor:hover {
     57  background-color: #8c0310;
     58}
     59#rft.claro .orange.textColor {
     60  color: #ff5b12;
     61}
     62#rft.claro .orange.textColor.doesHover:hover {
     63  color: #ff9140;
     64}
     65#rft.claro .orange.bgColor {
     66  background-color: #ff5b12;
     67  color: #ffffff;
     68}
     69#rft.claro .orange.bgColor.doesHover:hover {
     70  background-color: #ff9140;
     71  color: #111111;
     72}
     73#rft.claro .orange.hoverTextColor:hover {
     74  color: #ff5b12;
     75}
     76#rft.claro .orange.hoverBgColor:hover {
     77  background-color: #ff5b12;
     78}
     79#rft.claro .green.textColor {
     80  color: #3aa605;
     81}
     82#rft.claro .green.textColor.doesHover:hover {
     83  color: #79ca0a;
     84}
     85#rft.claro .green.bgColor {
     86  background-color: #3aa605;
     87  color: #ffffff;
     88}
     89#rft.claro .green.bgColor.doesHover:hover {
     90  background-color: #79ca0a;
     91  color: #111111;
     92}
     93#rft.claro .green.hoverTextColor:hover {
     94  color: #3aa605;
     95}
     96#rft.claro .green.hoverBgColor:hover {
     97  background-color: #3aa605;
     98}
     99#rft.claro .purple.textColor {
     100  color: #6529b7;
     101}
     102#rft.claro .purple.textColor.doesHover:hover {
     103  color: #993dec;
     104}
     105#rft.claro .purple.bgColor {
     106  background-color: #6529b7;
     107  color: #ffffff;
     108}
     109#rft.claro .purple.bgColor.doesHover:hover {
     110  background-color: #993dec;
     111  color: #111111;
     112}
     113#rft.claro .purple.hoverTextColor:hover {
     114  color: #6529b7;
     115}
     116#rft.claro .purple.hoverBgColor:hover {
     117  background-color: #6529b7;
     118}
     119#rft.claro .textColor,
     120#rft.claro .hoverTextColor {
     121  transition: color 0.2s;
     122}
     123#rft.claro .bgColor,
     124#rft.claro .hoverBgColor {
     125  transition: background-color 0.2s;
     126}
     127/* This stylesheet compensates for the restoration of the claro style to its original specs. (21-6-2012)
     128 * These changes should be moved to relevant stylesheets as soon as possible!
     129*/
     130/* Menu.css */
     131.claro .topbar .dijitMenuitem {
     132  width: 90px;
     133  background-image: none;
     134  background-position: top;
     135  text-align: center;
     136}
     137.claro .dijitMenuPassive .dijitMenuItemHover,
     138.claro .dijitMenuPassive .dijitMenuItemSelected {
     139  background-color: transparent;
     140  color: #ffffff;
     141  border: none;
     142  padding: 0 4px;
     143}
     144.claro .dijitMenuPassive .dijitMenuItemActive {
     145  background-position: top;
     146}
     147/* layout/BorderContainer.css */
     148.claro .dijitSplitContainer-child,
     149.claro .dijitBorderContainer-child {
     150  border: none;
     151}
     152.claro .dijitTabContainerTop-dijitContentPane,
     153.claro .dijitTabContainerLeft-dijitContentPane,
     154.claro .dijitTabContainerBottom-dijitContentPane,
     155.claro .dijitTabContainerRight-dijitContentPane,
     156.claro .dijitAccordionContainer-dijitContentPane {
     157  background-color: transparent;
     158}
     159.claro .dijitSplitContainer-dijitContentPane,
     160.claro .dijitBorderContainer-dijitContentPane {
     161  background-color: transparent;
     162}
     163/* layout/TabContainer.css */
     164.claro .dijitTabPaneWrapper {
     165  background: transparent;
     166}
     167.claro .dijitTabInnerDiv {
     168  background-color: transparent;
     169  color: #999999;
     170  border: none;
     171}
     172.claro .dijitTabContent {
     173  border: none;
     174}
     175.claro .dijitTabHover .dijitTabInnerDiv {
     176  background-color: transparent;
     177  color: #ffffff;
     178}
     179.claro .dijitTabActive .dijitTabInnerDiv {
     180  color: #0072bc;
     181}
     182.claro .dijitTabChecked .dijitTabInnerDiv {
     183  background-color: transparent;
     184  color: #ffffff;
     185}
     186.claro .dijitTabContent {
     187  border: 1px solid #999999;
     188}
     189.claro .dijitTabHover .dijitTabContent {
     190  border-color: #ffffff;
     191}
     192.claro .dijitTabActive .dijitTabContent {
     193  border-color: transparent;
     194}
     195.claro .dijitTabChecked .dijitTabContent {
     196  color: #ffffff;
     197  border-color: #0072bc;
     198}
     199/*lefttabs*/
     200.claro .dijitTabContainerLeft-tabs .dijitTab {
     201  border-width: 1px;
     202  left: 0;
     203  margin-bottom: 4px;
     204  margin-right: 8px;
     205}
     206.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
     207  border: none;
     208  background: transparent;
     209  background-image: none;
     210  background-position: top;
     211  background-repeat: no-repeat;
     212}
     213.claro .dijitTabContainerLeft-tabs .dijitTabContent {
     214  padding: 3px 8px 4px 8px;
     215  background-image: none;
     216}
     217.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
     218  padding-right: 8px;
     219  background-image: none;
     220}
     221.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
     222  -webkit-box-shadow: none;
     223  -moz-box-shadow: none;
     224  box-shadow: none;
     225}
     226.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
     227.claro .dijitTabContainerLeft-tabs .dijitTabContent {
     228  -moz-border-radius: 0;
     229  border-radius: 0;
     230  border: none;
     231}
    1232*:focus {
    2233  outline: none;
    … …  
    13244  color: #111111;
    14245}
     246#rft.claro .dijitBorderContainer,
     247#rft.claro .dijitContentPane,
     248#rft.claro .dijitTabContainer,
     249#rft.claro .dijitTabPaneWrapper {
     250  background: transparent;
     251  border: none;
     252}
    15253#rft.claro h1 {
    16   margin: 0;
     254  margin: 0 0 0 0;
    17255  padding: 0 10px 8px 10px;
    18256  float: left;
    … …  
    28266}
    29267#rft.claro h2 {
    30   margin: 0;
    31   padding: 0;
     268  margin: 0 0 0 0;
     269  padding: 0 0 0 0;
    32270  color: #999999;
    33271  font-size: 22px;
    … …  
    38276  height: 32px;
    39277  margin: 0;
     278  padding: 0 0 0 0;
    40279  background-image: url('images/icons/rftIcons32.png');
    41280  margin-right: 8px;
    42281}
    43282#rft.claro h3 {
    44   margin: 0;
     283  margin: 0 0 0 0;
    45284  font-size: 18px;
    46285  margin-bottom: 4px;
    … …  
    77316}
    78317#rft.claro .dijitContentPane.page {
    79   margin: 0;
    80   padding: 0;
     318  margin: 0 0 0 0;
     319  padding: 0 0 0 0;
    81320}
    82321#rft.claro .dijitContentPane.content {
    83   margin: 0;
    84   padding: 0;
     322  margin: 0 0 0 0;
     323  padding: 0 0 0 0;
    85324  display: block;
    86325  clear: both;
    … …  
    134373  overflow: hidden;
    135374}
    136 #rft.claro .dijitTab.dijitTabHover {
     375#rft.claro .dijitTabContainerLeft-tabs {
     376  border: none;
     377  padding: 4px;
     378}
     379#rft.claro .dijitTabContainerLeft-tabs .dijitTab {
     380  margin: 4px;
     381  width: 200px;
     382  min-height: 30px;
     383  border: 1px solid #999999;
     384}
     385#rft.claro .dijitTabContainerLeft-tabs .dijitTab .dijitTabContent {
     386  min-height: 30px;
     387  line-height: 30px;
     388  width: 190px;
     389}
     390#rft.claro .dijitTabContainerLeft-tabs .dijitTab.dijitTabChecked {
    137391  -webkit-transition: all 0.1s;
    138392  -moz-transition: all 0.1s;
    … …  
    141395  transition: all 0.1s;
    142396  color: #ffffff;
     397  border: 1px solid transparent;
     398}
     399#rft.claro .dijitTabContainerLeft-tabs .dijitTab.dijitTabChecked.dijitTabHover {
     400  border: 1px solid transparent;
     401}
     402#rft.claro .dijitTabContainerLeft-tabs .dijitTab.dijitTabHover {
     403  -webkit-transition: all 0.1s;
     404  -moz-transition: all 0.1s;
     405  -o-transition: all 0.1s;
     406  -ms-transition: all 0.1s;
     407  transition: all 0.1s;
     408  color: #ffffff;
    143409  border-color: #ffffff;
    144410}
    145 #rft.claro .dijitTab.dijitTabActive {
     411#rft.claro .dijitTabContainerLeft-tabs .dijitTab.dijitTabActive {
    146412  -webkit-transition: all 0.1s;
    147413  -moz-transition: all 0.1s;
    … …  
    151417  color: #999999;
    152418}
    153 #rft.claro .dijitTab.dijitTabChecked {
    154   -webkit-transition: all 0.1s;
    155   -moz-transition: all 0.1s;
    156   -o-transition: all 0.1s;
    157   -ms-transition: all 0.1s;
    158   transition: all 0.1s;
    159   color: #ffffff;
    160   border: 1px solid transparent;
    161 }
    162 #rft.claro .dijitTabContainerLeft-tabs {
    163   border: none;
    164   padding: 4px;
    165 }
    166 #rft.claro .dijitTabContainerLeft-tabs .dijitTab {
    167   margin: 4px 0;
    168   width: 200px;
    169   min-height: 30px;
    170   border: 1px solid #999999;
    171 }
    172 #rft.claro .dijitTabContainerLeft-tabs .dijitTab .dijitTabContent {
    173   min-height: 30px;
    174   line-height: 30px;
    175   width: 190px;
    176 }
    177419#rft.claro.blue .dijitTabChecked,
    178420#rft.claro .blue .dijitTabChecked,
    … …  
    220462#rft.claro .floatRight {
    221463  float: right;
    222   margin: 0;
     464  margin: 0 0 0 0;
    223465}
    224466#rft.claro .rftLineListView {
    … …  
    230472  overflow: auto;
    231473}
    232 #rft.claro .bgColor {
    233   -webkit-transition-property: background-color 0.2s;
    234   -moz-transition-property: background-color 0.2s;
    235   -o-transition-property: background-color 0.2s;
    236   -ms-transition-property: background-color 0.2s;
    237   transition-property: background-color 0.2s;
    238 }
    239 #rft.claro .blue.bgColor,
    240 #rft.claro.blue.bgColor {
    241   background-color: #0072bc !important;
    242 }
    243 #rft.claro .blue.bgColor.light,
    244 #rft.claro.blue.bgColor.light {
    245   background-color: #0794d1 !important;
    246 }
    247 #rft.claro .blue .bgColor,
    248 #rft.claro.blue .bgColor {
    249   background-color: #0072bc;
    250 }
    251 #rft.claro .blue .bgColor.light,
    252 #rft.claro.blue .bgColor.light {
    253   background-color: #0794d1;
    254 }
    255 #rft.claro .blue.bgColorHover:hover,
    256 #rft.claro.blue.bgColorHover:hover {
    257   background-color: #0072bc !important;
    258 }
    259 #rft.claro .blue.bgColorHover:hover.light,
    260 #rft.claro.blue.bgColorHover:hover.light {
    261   background-color: #0794d1 !important;
    262 }
    263 #rft.claro .blue .bgColorHover:hover,
    264 #rft.claro.blue .bgColorHover:hover {
    265   background-color: #0072bc;
    266 }
    267 #rft.claro .blue .bgColorHover:hover.light,
    268 #rft.claro.blue .bgColorHover:hover.light {
    269   background-color: #0794d1;
    270 }
    271 #rft.claro .green.bgColor,
    272 #rft.claro.green.bgColor {
    273   background-color: #3aa605 !important;
    274 }
    275 #rft.claro .green.bgColor.light,
    276 #rft.claro.green.bgColor.light {
    277   background-color: #79ca0a !important;
    278 }
    279 #rft.claro .green .bgColor,
    280 #rft.claro.green .bgColor {
    281   background-color: #3aa605;
    282 }
    283 #rft.claro .green .bgColor.light,
    284 #rft.claro.green .bgColor.light {
    285   background-color: #79ca0a;
    286 }
    287 #rft.claro .green.bgColorHover:hover,
    288 #rft.claro.green.bgColorHover:hover {
    289   background-color: #3aa605 !important;
    290 }
    291 #rft.claro .green.bgColorHover:hover.light,
    292 #rft.claro.green.bgColorHover:hover.light {
    293   background-color: #79ca0a !important;
    294 }
    295 #rft.claro .green .bgColorHover:hover,
    296 #rft.claro.green .bgColorHover:hover {
    297   background-color: #3aa605;
    298 }
    299 #rft.claro .green .bgColorHover:hover.light,
    300 #rft.claro.green .bgColorHover:hover.light {
    301   background-color: #79ca0a;
    302 }
    303 #rft.claro .orange.bgColor,
    304 #rft.claro.orange.bgColor {
    305   background-color: #ff5b12 !important;
    306 }
    307 #rft.claro .orange.bgColor.light,
    308 #rft.claro.orange.bgColor.light {
    309   background-color: #ff9140 !important;
    310 }
    311 #rft.claro .orange .bgColor,
    312 #rft.claro.orange .bgColor {
    313   background-color: #ff5b12;
    314 }
    315 #rft.claro .orange .bgColor.light,
    316 #rft.claro.orange .bgColor.light {
    317   background-color: #ff9140;
    318 }
    319 #rft.claro .orange.bgColorHover:hover,
    320 #rft.claro.orange.bgColorHover:hover {
    321   background-color: #ff5b12 !important;
    322 }
    323 #rft.claro .orange.bgColorHover:hover.light,
    324 #rft.claro.orange.bgColorHover:hover.light {
    325   background-color: #ff9140 !important;
    326 }
    327 #rft.claro .orange .bgColorHover:hover,
    328 #rft.claro.orange .bgColorHover:hover {
    329   background-color: #ff5b12;
    330 }
    331 #rft.claro .orange .bgColorHover:hover.light,
    332 #rft.claro.orange .bgColorHover:hover.light {
    333   background-color: #ff9140;
    334 }
    335 #rft.claro .red.bgColor,
    336 #rft.claro.red.bgColor {
    337   background-color: #8c0310 !important;
    338 }
    339 #rft.claro .red.bgColor.light,
    340 #rft.claro.red.bgColor.light {
    341   background-color: #bd0013 !important;
    342 }
    343 #rft.claro .red .bgColor,
    344 #rft.claro.red .bgColor {
    345   background-color: #8c0310;
    346 }
    347 #rft.claro .red .bgColor.light,
    348 #rft.claro.red .bgColor.light {
    349   background-color: #bd0013;
    350 }
    351 #rft.claro .red.bgColorHover:hover,
    352 #rft.claro.red.bgColorHover:hover {
    353   background-color: #8c0310 !important;
    354 }
    355 #rft.claro .red.bgColorHover:hover.light,
    356 #rft.claro.red.bgColorHover:hover.light {
    357   background-color: #bd0013 !important;
    358 }
    359 #rft.claro .red .bgColorHover:hover,
    360 #rft.claro.red .bgColorHover:hover {
    361   background-color: #8c0310;
    362 }
    363 #rft.claro .red .bgColorHover:hover.light,
    364 #rft.claro.red .bgColorHover:hover.light {
    365   background-color: #bd0013;
    366 }
    367 #rft.claro .purple.bgColor,
    368 #rft.claro.purple.bgColor {
    369   background-color: #6529b7 !important;
    370 }
    371 #rft.claro .purple.bgColor.light,
    372 #rft.claro.purple.bgColor.light {
    373   background-color: #993dec !important;
    374 }
    375 #rft.claro .purple .bgColor,
    376 #rft.claro.purple .bgColor {
    377   background-color: #6529b7;
    378 }
    379 #rft.claro .purple .bgColor.light,
    380 #rft.claro.purple .bgColor.light {
    381   background-color: #993dec;
    382 }
    383 #rft.claro .purple.bgColorHover:hover,
    384 #rft.claro.purple.bgColorHover:hover {
    385   background-color: #6529b7 !important;
    386 }
    387 #rft.claro .purple.bgColorHover:hover.light,
    388 #rft.claro.purple.bgColorHover:hover.light {
    389   background-color: #993dec !important;
    390 }
    391 #rft.claro .purple .bgColorHover:hover,
    392 #rft.claro.purple .bgColorHover:hover {
    393   background-color: #6529b7;
    394 }
    395 #rft.claro .purple .bgColorHover:hover.light,
    396 #rft.claro.purple .bgColorHover:hover.light {
    397   background-color: #993dec;
    398 }
    399474#rft.claro .rftIcon {
    400   margin: 0;
    401   padding: 0;
     475  margin: 0 0 0 0;
     476  padding: 0 0 0 0;
    402477  float: left;
    403478  display: inline-block;
    … …  
    406481  background-repeat: no-repeat;
    407482}
    408 #rft.claro .rftIcon.rftMainIcon {
    409   width: 32px;
    410   height: 32px;
    411   margin: 0;
    412   background-image: url('images/icons/rftIcons32.png');
    413 }
    414 #rft.claro .rftIcon.rftMidIcon {
    415   width: 24px;
    416   height: 24px;
    417   margin: 0px 0;
    418   background-image: url('images/icons/rftIcons16.png');
    419 }
    420 #rft.claro .rftIcon.rftSmallIcon {
    421   width: 16px;
    422   height: 16px;
    423   margin: 4px 0;
    424   background-image: url('images/icons/rftIcons16.png');
    425 }
    426483#rft .rftIconApplication {
    427484  background-position: 0px 0px;
    … …  
    577634  background-position: -1920px 0px;
    578635}
    579 #rft .claro .rftSelector {
    580   margin: 0;
    581   padding: 0;
     636#rft.claro .rftSelector {
     637  margin: 0 0 0 0;
     638  padding: 0 0 0 0;
    582639  margin: 4px;
    583640}
    584 #rft .claro .rftSelector .rftLineWithButtons {
    585   margin: 0;
    586   padding: 0;
    587 }
    588 #rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor {
    589   margin: 0;
    590   padding: 0;
     641#rft.claro .rftSelector .rftLineWithActions {
     642  margin: 0 0 0 0;
     643  padding: 0 0 0 0;
     644}
     645#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator {
     646  margin: 0 0 0 0;
     647  padding: 0 0 0 0;
    591648  float: left;
    592649  width: 8px;
    593650  height: 24px;
    594 }
    595 #rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor.conflict {
     651  background-color: #bedead;
     652}
     653#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator.conflict {
    596654  background-color: #ff0000;
    597655}
    598 #rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor.pending {
     656#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator.pending {
    599657  background-color: #ff8000;
    600658}
    601 #rft .claro .rftSelector .rftSelectorSelected .rftSelectorColor.success {
     659#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator.success {
    602660  background-color: #00ff00;
    603661}
    604 #rft .claro .rftSelector .rftSelectorOptions .rftLineWithButtons,
    605 #rft .claro .rftSelector .rftSelectorSelected .rftLineWithButtons {
     662#rft.claro .rftSelector .rftSelectorOptions .rftLineWithActions,
     663#rft.claro .rftSelector .rftSelectorSelected .rftLineWithActions {
    606664  background-color: #ffffff;
    607665  color: #111111;
    608666}
    609 #rft.claro .rftLineWithButtons {
     667#rft.claro .rftLineWithActions {
    610668  border: none;
    611669  background-image: none;
    … …  
    617675  white-space: nowrap;
    618676  margin: 4px 0;
    619 }
    620 #rft.claro .rftLineWithButtons.dojoDndItem {
     677  color: #ffffff;
     678}
     679#rft.claro .rftLineWithActions.dojoDndItem {
    621680  -webkit-transition: all 0.2s;
    622681  -moz-transition: all 0.2s;
    … …  
    625684  transition: all 0.2s;
    626685}
    627 #rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemBefore {
     686#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemBefore {
    628687  margin-top: 6px;
    629688  border-top: 6px solid #ffffff;
    630689}
    631 #rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemAfter {
     690#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemAfter {
    632691  margin-bottom: 6px;
    633692  border-bottom: 6px solid #ffffff;
    634693}
    635 #rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemover,
    636 #rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemAnchor {
     694#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemover,
     695#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemAnchor {
    637696  background-image: none;
    638697  border: none;
    639698  padding: 2px;
    640 }
    641 #rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemover *,
    642 #rft.claro .rftLineWithButtons.dojoDndItem.dojoDndItemAnchor * {
    643699  background-color: rgba(255, 255, 255, 0.1);
    644700}
    645 #rft.claro .rftLineWithButtons .rftLineWithButtonsTitle {
     701#rft.claro .rftLineWithActions .rftLineWithActionsTitle {
    646702  float: left;
    647703  margin: 0 8px;
    … …  
    650706  word-wrap: break-word;
    651707}
    652 #rft.claro .rftLineWithButtons .rftLineWithButtonsButtons {
    653   margin: 0;
    654   padding: 0;
     708#rft.claro .rftLineWithActions .rftLineWithActionsButtons {
     709  margin: 0 0 0 0;
     710  padding: 0 0 0 0;
    655711  line-height: 24px;
    656712  height: 24px;
    … …  
    659715  float: left;
    660716}
    661 #rft.claro .dojoDndSourceMoved .rftLineWithButtons.dojoDndItemAnchor {
     717#rft.claro .dojoDndSourceMoved .rftLineWithActions.dojoDndItemAnchor {
    662718  height: 0;
    663719}
    … …  
    692748  height: 32px;
    693749  margin: 0;
     750  padding: 0 0 0 0;
    694751  background-image: url('images/icons/rftIcons32.png');
    695752  float: left;
    … …  
    702759  box-shadow: none;
    703760  border-radius: 0;
    704   margin: 0;
    705   padding: 0;
     761  margin: 0 0 0 0;
     762  padding: 0 0 0 0;
    706763  -webkit-transition: all 0.3s;
    707764  -moz-transition: all 0.3s;
    … …  
    728785  height: 32px;
    729786  margin: 0;
     787  padding: 0 0 0 0;
    730788  background-image: url('images/icons/rftIcons32.png');
    731789  margin: 0 8px;
    … …  
    733791#rft.claro .rftIndexMenuButton.oneHeight {
    734792  height: 100px;
     793  width: 400px;
    735794}
    736795#rft.claro .rftIndexMenuButton.oneHeight .dijitButtonNode {
    … …  
    739798#rft.claro .rftIndexMenuButton.twoHeight {
    740799  height: 200px;
     800  width: 400px;
    741801}
    742802#rft.claro .rftIndexMenuButton.twoHeight .dijitButtonNode {
    … …  
    745805#rft.claro .rftIndexMenuButton.fourHeight {
    746806  height: 400px;
     807  width: 400px;
    747808}
    748809#rft.claro .rftIndexMenuButton.fourHeight .dijitButtonNode {
    … …  
    781842}
    782843#rft.claro .rftIndexMenuButton.rftIndexMenuButtonActive {
    783   width: 32px;
    784   height: 32px;
    785   margin: 0;
    786   background-image: url('images/icons/rftIcons32b.png');
    787844  -webkit-transition: all 0.3s;
    788845  -moz-transition: all 0.3s;
    … …  
    793850  background: #ffffff;
    794851}
     852#rft.claro .rftIndexMenuButton.rftIndexMenuButtonActive .rftIcon {
     853  width: 32px;
     854  height: 32px;
     855  margin: 0;
     856  padding: 0 0 0 0;
     857  background-image: url('images/icons/rftIcons32b.png');
     858}
    795859#rft.claro .dijitMenuPopup .dijitMenu {
    796860  border: none;
    … …  
    800864  border-radius: 0;
    801865  color: #999999;
     866  background-color: #333333;
    802867  border: none;
    803868}
    … …  
    809874  box-shadow: none;
    810875  border-radius: 0;
    811   background-color: transparent;
     876  background-color: #333333;
    812877}
    813878#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover .dijitMenuItemLabel,
    … …  
    815880#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected .dijitMenuItemLabel {
    816881  color: #ffffff;
     882}
     883#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.red,
     884#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.red,
     885#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.red {
     886  background-color: #8c0310;
     887}
     888#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.blue,
     889#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.blue,
     890#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.blue {
     891  background-color: #0072bc;
     892}
     893#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.green,
     894#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.green,
     895#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.green {
     896  background-color: #3aa605;
     897}
     898#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.orange,
     899#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.orange,
     900#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.orange {
     901  background-color: #ff5b12;
     902}
     903#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.purple,
     904#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.purple,
     905#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.purple {
     906  background-color: #6529b7;
    817907}
    818908#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem .rftIcon {
    … …  
    820910  height: 16px;
    821911  margin: 4px 0;
     912  padding: 0 0 0 0;
    822913  background-image: url('images/icons/rftIcons16.png');
    823   margin: 0;
     914  margin: 0 0 0 0;
    824915  margin-right: 8px;
    825916}
    … …  
    828919  height: 16px;
    829920  margin: 4px 0;
     921  padding: 0 0 0 0;
    830922  background-image: url('images/icons/rftIcons16b.png');
    831923}
    … …  
    873965}
    874966#rft.claro .dojoxTitleGroup .dijitTitlePane {
    875   margin: 0;
     967  margin: 0 0 0 0;
    876968}
    877969#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitle {
    … …  
    881973  box-shadow: none;
    882974  border-radius: 0;
    883   margin: 0;
     975  margin: 0 0 0 0;
    884976  background-color: #ff5b12;
    885977  border: none;
    … …  
    901993}
    902994#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitleFocus {
    903   margin: 0;
     995  margin: 0 0 0 0;
    904996}
    905997#rft.claro .rftSurveyListView .rftSurveyListViewContent {
    … …  
    9441036  width: 24px;
    9451037  height: 24px;
    946   margin: 0px 0;
    947   background-image: url('images/icons/rftIcons16.png');
     1038  margin: 0 0 0 0;
     1039  padding: 0 0 0 0;
     1040  background-image: url('images/icons/rftIcons24.png');
    9481041}
    9491042#rft.claro .rftLargeButton .dijitButtonNode .dijitButtonText {
    9501043  line-height: 24px;
    951   margin: 0;
     1044  margin: 0 0 0 0;
    9521045  padding-left: 8px;
    9531046}
    … …  
    9551048  width: 24px;
    9561049  height: 24px;
    957   margin: 0px 0;
    958   background-image: url('images/icons/rftIcons16b.png');
     1050  margin: 0 0 0 0;
     1051  padding: 0 0 0 0;
     1052  background-image: url('images/icons/rftIcons24b.png');
    9591053}
    9601054#rft.claro .rftLargeButton.rftLargeButtonHover .dijitButtonNode,
    … …  
    9921086  box-shadow: none;
    9931087  border-radius: 0;
    994   margin: 0;
     1088  margin: 0 0 0 0;
    9951089  height: 24px;
    9961090  line-height: 24px;
     1091  vertical-align: top;
    9971092}
    9981093#rft.claro .rftBlockButton .dijitButtonNode {
    … …  
    10071102  -ms-transition: all 0.3s;
    10081103  transition: all 0.3s;
     1104  line-height: 24px;
     1105  vertical-align: top;
    10091106  height: 24px;
    10101107  padding: 0 4px;
    … …  
    10141111}
    10151112#rft.claro .rftBlockButton .dijitButtonNode .rftIcon {
    1016   width: 24px;
    1017   height: 24px;
    1018   margin: 0px 0;
     1113  width: 16px;
     1114  height: 16px;
     1115  margin: 4px 0;
     1116  padding: 0 0 0 0;
    10191117  background-image: url('images/icons/rftIcons16.png');
    10201118}
    … …  
    10291127#rft.claro .rftBlockButton.rftBlockButtonHover .rftIcon,
    10301128#rft.claro .rftBlockButton.rftBlockButtonActive .rftIcon {
    1031   width: 24px;
    1032   height: 24px;
    1033   margin: 0px 0;
     1129  vertical-align: top;
     1130  width: 16px;
     1131  height: 16px;
     1132  margin: 4px 0;
     1133  padding: 0 0 0 0;
    10341134  background-image: url('images/icons/rftIcons16b.png');
    1035 }
    1036 #rft.claro .blue.rftBlockButtonHover .dijitButtonNode {
    1037   background-color: #0072bc;
    1038 }
    1039 #rft.claro .blue.rftBlockButtonHover.light .dijitButtonNode {
    1040   background-color: #0794d1;
    1041 }
    1042 #rft.claro .blue .rftBlockButtonHover .dijitButtonNode {
    1043   background-color: #0072bc;
    1044 }
    1045 #rft.claro .blue .rftBlockButtonHover.light .dijitButtonNode {
    1046   background-color: #0794d1;
    1047 }
    1048 #rft.claro .blue.light .rftBlockButtonHover .dijitButtonNode {
    1049   background-color: #0794d1;
    1050 }
    1051 #rft.claro .green.rftBlockButtonHover .dijitButtonNode {
    1052   background-color: #3aa605;
    1053 }
    1054 #rft.claro .green.rftBlockButtonHover.light .dijitButtonNode {
    1055   background-color: #79ca0a;
    1056 }
    1057 #rft.claro .green .rftBlockButtonHover .dijitButtonNode {
    1058   background-color: #3aa605;
    1059 }
    1060 #rft.claro .green .rftBlockButtonHover.light .dijitButtonNode {
    1061   background-color: #79ca0a;
    1062 }
    1063 #rft.claro .green.light .rftBlockButtonHover .dijitButtonNode {
    1064   background-color: #79ca0a;
    1065 }
    1066 #rft.claro .orange.rftBlockButtonHover .dijitButtonNode {
    1067   background-color: #ff5b12;
    1068 }
    1069 #rft.claro .orange.rftBlockButtonHover.light .dijitButtonNode {
    1070   background-color: #ff9140;
    1071 }
    1072 #rft.claro .orange .rftBlockButtonHover .dijitButtonNode {
    1073   background-color: #ff5b12;
    1074 }
    1075 #rft.claro .orange .rftBlockButtonHover.light .dijitButtonNode {
    1076   background-color: #ff9140;
    1077 }
    1078 #rft.claro .orange.light .rftBlockButtonHover .dijitButtonNode {
    1079   background-color: #ff9140;
    1080 }
    1081 #rft.claro .red.rftBlockButtonHover .dijitButtonNode {
    1082   background-color: #8c0310;
    1083 }
    1084 #rft.claro .red.rftBlockButtonHover.light .dijitButtonNode {
    1085   background-color: #bd0013;
    1086 }
    1087 #rft.claro .red .rftBlockButtonHover .dijitButtonNode {
    1088   background-color: #8c0310;
    1089 }
    1090 #rft.claro .red .rftBlockButtonHover.light .dijitButtonNode {
    1091   background-color: #bd0013;
    1092 }
    1093 #rft.claro .red.light .rftBlockButtonHover .dijitButtonNode {
    1094   background-color: #bd0013;
    1095 }
    1096 #rft.claro .purple.rftBlockButtonHover .dijitButtonNode {
    1097   background-color: #6529b7;
    1098 }
    1099 #rft.claro .purple.rftBlockButtonHover.light .dijitButtonNode {
    1100   background-color: #993dec;
    1101 }
    1102 #rft.claro .purple .rftBlockButtonHover .dijitButtonNode {
    1103   background-color: #6529b7;
    1104 }
    1105 #rft.claro .purple .rftBlockButtonHover.light .dijitButtonNode {
    1106   background-color: #993dec;
    1107 }
    1108 #rft.claro .purple.light .rftBlockButtonHover .dijitButtonNode {
    1109   background-color: #993dec;
    11101135}
    11111136#rft.claro .rftInlineButton {
    … …  
    11151140}
    11161141#rft.claro .rftInlineButton .dijitButtonNode {
    1117   margin: 0;
    1118   padding: 0;
     1142  margin: 0 0 0 0;
     1143  padding: 0 0 0 0;
    11191144  border: none;
    11201145  background-image: none;
    … …  
    11301155  height: 16px;
    11311156  margin: 4px 0;
     1157  padding: 0 0 0 0;
    11321158  background-image: url('images/icons/rftIcons16.png');
    11331159}
    … …  
    11361162  height: 16px;
    11371163  margin: 4px 0;
     1164  padding: 0 0 0 0;
    11381165  background-image: url('images/icons/rftIcons16.png');
    11391166}
    … …  
    11421169  height: 16px;
    11431170  margin: 4px 0;
     1171  padding: 0 0 0 0;
    11441172  background-image: url('images/icons/rftIcons16b.png');
    11451173}
    … …  
    11481176  height: 16px;
    11491177  margin: 4px 0;
     1178  padding: 0 0 0 0;
    11501179  background-image: url('images/icons/rftIcons16b.png');
    11511180}
    … …  
    11541183  height: 16px;
    11551184  margin: 4px 0;
     1185  padding: 0 0 0 0;
    11561186  background-image: url('images/icons/rftIcons16b.png');
    11571187}
    … …  
    11631193  height: 32px;
    11641194  margin: 0;
     1195  padding: 0 0 0 0;
    11651196  background-image: url('images/icons/rftIcons32.png');
    11661197  float: left;
    11671198  margin: 20px 8px;
    11681199}
    1169 #rft.claro .rftObjectBox .rftLineWithButtons {
    1170   margin: 0;
    1171   padding: 0;
     1200#rft.claro .rftObjectBox .rftLineWithActions {
     1201  margin: 0 0 0 0;
     1202  padding: 0 0 0 0;
    11721203}
    11731204#rft.claro .rftSessionObject {
    1174   margin: 0;
    1175   padding: 0;
     1205  margin: 0 0 0 0;
     1206  padding: 0 0 0 0;
    11761207  width: 100px;
    11771208  height: 100px;
    … …  
    11841215  height: 32px;
    11851216  margin: 0;
     1217  padding: 0 0 0 0;
    11861218  background-image: url('images/icons/rftIcons32.png');
    11871219  margin: 8px 34px 0 34px;
    11881220}
    11891221#rft.claro .rftSessionObject label {
    1190   margin: 0;
    1191   padding: 0;
     1222  margin: 0 0 0 0;
     1223  padding: 0 0 0 0;
    11921224  float: left;
    11931225  clear: both;
    … …  
    12151247  background-color: #bd0013;
    12161248}
     1249#rft.claro .rftObjectBox {
     1250  padding: 0 0 0 0;
     1251  color: #ffffff;
     1252}
     1253#rft.claro .rftObjectBox .typeIcon.rftIcon {
     1254  width: 32px;
     1255  height: 32px;
     1256  margin: 0;
     1257  padding: 0 0 0 0;
     1258  background-image: url('images/icons/rftIcons32.png');
     1259}
     1260#rft.claro .rftObjectBox .rftLineWithActions {
     1261  background-color: #3aa605;
     1262}
     1263#rft.claro .page_questions .rftSelector .rftSelectorCategory .rftLineWithActions {
     1264  background-color: #ff5b12;
     1265}
     1266#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftLineWithActions {
     1267  background-color: #ffffff;
     1268  color: #111111;
     1269}
     1270#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton {
     1271  background-color: #ff00ff;
     1272}
     1273#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton .dijitButtonNode {
     1274  background-color: #ff5b12;
     1275}
     1276#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton.dijitHover .dijitButtonNode {
     1277  background-color: #ffffff;
     1278}
     1279#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton.dijitActive .dijitButtonNode {
     1280  background-color: #ff9140;
     1281}

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/main.less

    r409 r411  
     1// Setup up compilation context and shared functionality
    12@import "variables.less";
    23@import "mixins.less";
     4@import "colors2.less";
     5
     6// Link to dijit/claro/dojox css
     7@import "external.css";
     8@import "claroOverride.less";
     9
     10// RFT specific styling
    311@import "layout.less";
    4 @import "colors.less";
    512@import "rftIcons.less";
    613@import "rftSelector.less";
    … …  
    1219@import "rftObjectBox.less";
    1320@import "sessionEditor.less";
     21@import "sessions.less";
     22
     23// Page specific stylesheets!
     24@import "pages/questions.less";

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/menus.less

    r409 r411  
    33                //Index menu
    44                .rftIndexMenuBlock {
    5                         width: @im_blockwidth;
    6                         height: @im_blockheight;
     5                        width: @indexmenu_blockwidth;
     6                        height: @indexmenu_blockheight;
    77                        background: @base1;
    88                        float: left;
    9                         margin: @im_blockmargin;
     9                        margin: @indexmenu_blockmargin;
    1010                        overflow: hidden;
    1111
    1212                        &:hover .rftIndexMenuMask {
    13                                 margin-top: -@im_blockheight;
     13                                margin-top: -@indexmenu_blockheight;
    1414                        }
    1515                }
    1616                .rftIndexMenuMask {
    17                         width: @im_blockwidth;
    18                         height: @im_blockheight;
     17                        width: @indexmenu_blockwidth;
     18                        height: @indexmenu_blockheight;
    1919                        background: @base1;
    2020                        color: @headers;
    … …  
    2323                        .label {
    2424                                color: @headers;
    25                                 font-size: @im_font_size;
    26                                 height: @im_font_size;
    27                                 line-height: @im_font_size;
    28                                 margin-top: (@im_blockheight - @im_font_size) / 2;
     25                                font-size: @indexmenu_font_size;
     26                                height: @indexmenu_font_size;
     27                                line-height: @indexmenu_font_size;
     28                                margin-top: (@indexmenu_blockheight - @indexmenu_font_size) / 2;
    2929                                float: left;
    3030                        }
    … …  
    3333                                .setIcon(32px);
    3434                                float: left;
    35                                 margin: ((@im_blockheight - @im_font_size)/2) 8px 0 8px;
     35                                margin: ((@indexmenu_blockheight - @indexmenu_font_size)/2) 8px 0 8px;
    3636                        }
    3737                }
    … …  
    6666
    6767                        .indexMenuMixin (@number) when (@number > 0){
    68                                 @height: @im_blockheight / @number;
     68                                @height: @indexmenu_blockheight / @number;
    6969                                height: @height;
     70                                width: @indexmenu_blockwidth;
    7071                               
    7172                                .dijitButtonNode {
    … …  
    8687                        &.rftIndexMenuButtonHover {
    8788                                color: @text;
    88                                 .transition(0.1s);
     89                                .transition (0.1s);
    8990                                .dijitButtonText {
    9091                                        color: @text;
    … …  
    110111
    111112                        &.rftIndexMenuButtonActive {
    112                                 .setIcon (32px, black);
     113                                .rftIcon {
     114                                        .setIcon (32px, black);
     115                                }
    113116                                .transition(0.3s);
    114117                                color: @darkest;
    … …  
    125128                                .flatShading;
    126129                                color: @headers;
     130                                background-color: @base;
    127131                                border: none;
    128132
    … …  
    130134                                        color: @headers;
    131135                                        .flatShading;
    132                                         background-color: transparent;
     136                                        background-color: @base;
    133137
    134138                                        &.dijitMenuItemHover,
    … …  
    138142                                                        color: @text;
    139143                                                }
     144
     145                                                &.red {
     146                                                        background-color: @red;
     147                                                }
     148                                                &.blue {
     149                                                        background-color: @blue;
     150                                                }
     151                                                &.green {
     152                                                        background-color: @green;
     153                                                }
     154                                                &.orange {
     155                                                        background-color: @orange;
     156                                                }
     157                                                &.purple {
     158                                                        background-color: @purple;
     159                                                }
     160
    140161                                        }
    141162

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/mixins.less

    r409 r411  
    2828
    2929.noMargin () {
    30         margin: 0;
     30        margin: 0 0 0 0;
    3131}
    3232
    3333.noPadding () {
    34         padding: 0;
     34        padding: 0 0 0 0;
    3535}
    3636//------------------------------------------
    3737//ICONS
    3838
    39 .setIconSize (@size, @b) when (@size =< 24px) {
     39.setIconSize (@size, @b) when (@size < 24px) {
    4040        width: @size;
    4141        height: @size;
    4242        margin: ((24px - @size) / 2) 0;
     43        .noPadding ();
    4344        background-image: url('images/icons/rftIcons16@{b}.png');
    4445}
    4546
    46 .setIconSize (@size, @b) when (@size > 24px) and (@size < 32) {
    47         width: @size;
    48         height: @size;
    49         margin: 0;
     47.setIconSize (@size, @b) when (@size >= 24px) and (@size < 32) {
     48        width: 24px;
     49        height: 24px;
     50        .noMargin ();
     51        .noPadding ();
    5052        background-image: url('images/icons/rftIcons24@{b}.png');
    5153}
    5254
    5355.setIconSize (@size, @b) when (@size >= 32px) {
    54         width: @size;
    55         height: @size;
     56        width: 32px;
     57        height: 32px;
    5658        margin: 0;
     59        .noPadding ();
    5760        background-image: url('images/icons/rftIcons32@{b}.png');
    5861}
    … …  
    6871}
    6972//------------------------------------------
     73
     74//Old colour settings
     75//TODO: I AM NOT SURE IF THIS ACTUALLY WORKS! THOROUGHLY TEST WHEN APPLIED TO PAGES!!!!
     76// Oke, wat. Deze shit is echt niet te snappen. :P Gewoon maar weer de oude meuk erin hangen?
     77.blockButtonColorMixin (@color) {
     78        .dijitButtonNode {
     79                background-color: @@color;
     80        }
     81
     82        &.dijitHover {
     83                .dijitButtonNode {
     84                        background-color: @text;
     85                }
     86        }
     87        &.dijitActive {
     88                .dijitButtonNode {
     89                        @colorName: "@{color}_light";
     90                        background-color: @@colorName;
     91                }
     92        }
     93
     94}

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftButtons.less

    r409 r411  
    4747                }
    4848
    49                 //colors
     49                //colors on hover
    5050                span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
    5151                .blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
    52                         color: #0794d1;
     52                        color: @blue_light;
    5353                }
    5454                span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
    5555                .orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
    56                         color: #ff9140;
     56                        color: @orange_light;
    5757                }
    5858                span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
    5959                .green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
    60                         color: #79ca0a;
     60                        color: @green_light;
    6161                }
    6262                span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
    6363                .red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
    64                         color: #bd0013;
     64                        color: @red_light;
    6565                }
    6666                span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
    6767                .purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
    68                         color: #993dec;
     68                        color: @purple_light;
    6969                }
    7070
    … …  
    7676                        height: @button_block_height;
    7777                        line-height: @button_block_height;
     78                        vertical-align: top;
    7879
    7980                        .dijitButtonNode {
    8081                                .flatShading;
    8182                                .transition (0.3s);
     83                                line-height: @button_block_height;
     84                                vertical-align: top;
    8285                                height: @button_block_height;
    8386                                padding: 0 @std_offset;
    … …  
    8790
    8891                                .rftIcon {
    89                                         .setIcon(24px);
     92                                        .setIcon(16px);
    9093                                }
    9194                        }
    … …  
    9598                                .transition (0.1s);
    9699                                .rftIcon {
    97                                         .setIcon(24px, black);
     100                                        vertical-align: top;
     101                                        .setIcon(16px, black);
    98102                                }
    99103                        }
     104
     105                        //Disabled because this is presumably useless
     106                        // &.blue {
     107                        //      .blockButtonColorMixin ("blue");
     108                        // }
     109                        // &.green {
     110                        //      .blockButtonColorMixin ("green");
     111                        // }
     112                        // &.orange {
     113                        //      .blockButtonColorMixin ("orange");
     114                        // }
     115                        // &.red {
     116                        //      .blockButtonColorMixin ("red");
     117                        // }
     118                        // &.purple {
     119                        //      .blockButtonColorMixin ("purple");
     120                        // }
    100121                }
    101122
    102                 //Old colour settings
    103                 //TODO: I AM NOT SURE IF THIS ACTUALLY WORKS! THOROUGHLY TEST WHEN APPLIED TO PAGES!!!!
    104                 // Oke, wat. Deze shit is echt niet te snappen. :P Gewoon maar weer de oude meuk erin hangen?
    105                 .buttonColorMixin (@color) {
    106                         &.rftBlockButtonHover {
    107                                 .dijitButtonNode {
    108                                         background-color: @@color;
    109                                 }
    110                                 &.light {
    111                                         .dijitButtonNode {
    112                                                 @colorName: "@{color}_light";
    113                                                 background-color: @@colorName;
    114                                         }
    115                                 }
    116                         }
    117                         .rftBlockButtonHover {
    118                                 .dijitButtonNode {
    119                                         background-color: @@color;
    120                                 }
    121                                 &.light {
    122                                         .dijitButtonNode {
    123                                                 @colorName: "@{color}_light";
    124                                                 background-color: @@colorName;
    125                                         }
    126                                 }
    127                         }
    128                         &.light {
    129                                 .rftBlockButtonHover {
    130                                         .dijitButtonNode {
    131                                                 @colorName: "@{color}_light";
    132                                                 background-color: @@colorName;
    133                                         }
    134                                 }
    135                         }
    136                 }
     123               
    137124
    138                 .blue {
    139                         .buttonColorMixin ("blue");
    140                 }
    141                 .green {
    142                         .buttonColorMixin ("green");
    143                 }
    144                 .orange {
    145                         .buttonColorMixin ("orange");
    146                 }
    147                 .red {
    148                         .buttonColorMixin ("red");
    149                 }
    150                 .purple {
    151                         .buttonColorMixin ("purple");
    152                 }
     125               
    153126
    154127

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftIcons.less

    r403 r411  
    99                        background-repeat: no-repeat;
    1010
    11                         &.rftMainIcon {
    12                                 .setIcon(@icon_mainSize);
    13                         }
    14                         &.rftMidIcon {
    15                                 .setIcon(@icon_midSize);
    16                         }
    17                         &.rftSmallIcon {
    18                                 .setIcon(@icon_smallSize);
    19                         }
     11                        //Probably not needed anymore! Commenting out to see if code breaks
     12                        // &.rftMainIcon {
     13                        //      .setIcon(@icon_mainSize);
     14                        // }
     15                        // &.rftMidIcon {
     16                        //      .setIcon(@icon_midSize);
     17                        // }
     18                        // &.rftSmallIcon {
     19                        //      .setIcon(@icon_smallSize);
     20                        // }
    2021
    2122                }
    … …  
    6162                background-position: -384px 0px;
    6263        }
    63        
    64         //Actions
     64                //Actions
    6565        .rftIconAccept {
    6666                background-position: -416px 0px;
    … …  
    153153                background-position: -1344px 0px;
    154154        }
    155 
    156155        //Arrows
    157156        .rftIconFullArrowUp {

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftLineWithActions.less

    r403 r411  
    44        &.claro {
    55
    6                 .rftLineWithButtons {
     6                .rftLineWithActions {
    77                        .flatShading();
    88                        position: relative;
    … …  
    1010                        white-space: nowrap;
    1111                        margin: @std_offset 0;
     12                        color: @text;
    1213
    1314                        &.dojoDndItem {
    … …  
    2627                                        border: none;
    2728                                        padding: 2px;
    28                                         * {
    29                                                 background-color: fade(#fff, 10%);      // Not sure if this will work.
    30                                                 // This is an attempt to lighten the rftLWB's colour by overlaying with transparent white.
    31                                         }
     29                                        background-color: fade(#fff, 10%);      // Not sure if this will work.
     30                                        // This is an attempt to lighten the rftLWA's colour by overlaying with transparent white.
    3231                                }
    3332                        }
    3433
    35                         .rftLineWithButtonsTitle {
     34                        .rftLineWithActionsTitle {
    3635                                float: left;
    3736                                margin: 0 8px;
    … …  
    4140                        }
    4241
    43                         .rftLineWithButtonsButtons {
     42                        .rftLineWithActionsButtons {
    4443                                .noOffset();
    4544                                line-height: @std_height;
    … …  
    5049                        }
    5150                }
    52                
     51
     52                // Make the currently lineWithActions draggable "wipe out" when dragging, so only the Avatar is visible!
    5353                .dojoDndSourceMoved {
    54                         .rftLineWithButtons.dojoDndItemAnchor {
     54                        .rftLineWithActions.dojoDndItemAnchor {
    5555                                height: 0;
    5656                        }

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftObjectBox.less

    r409 r411  
    1111                        }
    1212
    13                         .rftLineWithButtons {
     13                        .rftLineWithActions {
    1414                                .noOffset;
    1515                        }

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftSelector.less

    r403 r411  
    66
    77#rft {
    8         .claro {
     8        &.claro {
    99               
    1010                .rftSelector {
    … …  
    1212                        margin: @std_offset;
    1313
    14                         .rftLineWithButtons {
     14                        .rftLineWithActions {
    1515                                .noOffset;
    1616                        }
    … …  
    1818                        .rftSelectorSelected {
    1919                                // Operation indicator styling
    20                                 .rftSelectorColor {
     20                                .rftSelectorIndicator {
    2121                                        .noOffset;
    2222                                        float: left;
    2323                                        width: @indicatorWidth;
    2424                                        height: @std_height;
     25                                        background-color: #bedead;
    2526
    2627                                        &.conflict {
    … …  
    3839                        .rftSelectorOptions, .rftSelectorSelected {
    3940
    40                                 .rftLineWithButtons {
     41                                .rftLineWithActions {
    4142                                        background-color: @text;
    4243                                        color: @darkest;

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/variables.less

    r409 r411  
    4141
    4242// IndexMenu
    43 @im_blockheight: 400px;
    44 @im_blockwidth: 400px;
    45 @im_blockmargin: 16px;
    46 @im_font_size: 32px;
     43@indexmenu_blockheight: 400px;
     44@indexmenu_blockwidth: 400px;
     45@indexmenu_blockmargin: 16px;
     46@indexmenu_font_size: 32px;
    4747
    4848// Mainmenu

  • Dev/branches/rest-dojo-ui/client/rft/css/main.css

    r407 r411  
    1 @import url('external.css');
    2 @import url('claroOverride.css');
     1/* Menu.css */
     2@import "external.css";
     3DESCRIPTION {
     4  /*
     5How to use colour system:
     6Apply a combination of at most 1 "colour" class and one or more "modifier" classes.
     7Colour classes: Red, Blue, Green, Orange, Purple
     8Modifer classes:
     9- textColor: Change the font colour of element to the "colour" class combined with.
     10- bgColor: Change the background colour to the "colour" class combined with.
     11- doesHover: If present in combination with one of the above two modifiers,
     12the element will shift it's background- or text colour to a lighter version on hover.
     13- hoverTextColor: Same as .textColor, but only affects elements being hovered over.
     14- hoverBgColor: Same as .bgColor, but only affects elements being hovered over.
     15NOTE: .doesHover does nothing in combination with the above two modifiers!
     16*/
    317
    4 @import url('layout.css');
    5 @import url('general.css');
    6 
    7 @import url('rftLineWithButtons.css');
    8 @import url('rftButtons.css');
    9 @import url('rftIcons.css');
    10 @import url('rftSelector.css');
    11 @import url('rftObjectBox.css');
    12 @import url('sessionEditor.css');
    13 @import url('surveyEditor.css');
     18}
     19#rft.claro .blue.textColor {
     20  color: #0072bc;
     21}
     22#rft.claro .blue.textColor.doesHover:hover {
     23  color: #0794d1;
     24}
     25#rft.claro .blue.bgColor {
     26  background-color: #0072bc;
     27  color: #ffffff;
     28}
     29#rft.claro .blue.bgColor.doesHover:hover {
     30  background-color: #0794d1;
     31  color: #111111;
     32}
     33#rft.claro .blue.hoverTextColor:hover {
     34  color: #0072bc;
     35}
     36#rft.claro .blue.hoverBgColor:hover {
     37  background-color: #0072bc;
     38}
     39#rft.claro .red.textColor {
     40  color: #8c0310;
     41}
     42#rft.claro .red.textColor.doesHover:hover {
     43  color: #bd0013;
     44}
     45#rft.claro .red.bgColor {
     46  background-color: #8c0310;
     47  color: #ffffff;
     48}
     49#rft.claro .red.bgColor.doesHover:hover {
     50  background-color: #bd0013;
     51  color: #111111;
     52}
     53#rft.claro .red.hoverTextColor:hover {
     54  color: #8c0310;
     55}
     56#rft.claro .red.hoverBgColor:hover {
     57  background-color: #8c0310;
     58}
     59#rft.claro .orange.textColor {
     60  color: #ff5b12;
     61}
     62#rft.claro .orange.textColor.doesHover:hover {
     63  color: #ff9140;
     64}
     65#rft.claro .orange.bgColor {
     66  background-color: #ff5b12;
     67  color: #ffffff;
     68}
     69#rft.claro .orange.bgColor.doesHover:hover {
     70  background-color: #ff9140;
     71  color: #111111;
     72}
     73#rft.claro .orange.hoverTextColor:hover {
     74  color: #ff5b12;
     75}
     76#rft.claro .orange.hoverBgColor:hover {
     77  background-color: #ff5b12;
     78}
     79#rft.claro .green.textColor {
     80  color: #3aa605;
     81}
     82#rft.claro .green.textColor.doesHover:hover {
     83  color: #79ca0a;
     84}
     85#rft.claro .green.bgColor {
     86  background-color: #3aa605;
     87  color: #ffffff;
     88}
     89#rft.claro .green.bgColor.doesHover:hover {
     90  background-color: #79ca0a;
     91  color: #111111;
     92}
     93#rft.claro .green.hoverTextColor:hover {
     94  color: #3aa605;
     95}
     96#rft.claro .green.hoverBgColor:hover {
     97  background-color: #3aa605;
     98}
     99#rft.claro .purple.textColor {
     100  color: #6529b7;
     101}
     102#rft.claro .purple.textColor.doesHover:hover {
     103  color: #993dec;
     104}
     105#rft.claro .purple.bgColor {
     106  background-color: #6529b7;
     107  color: #ffffff;
     108}
     109#rft.claro .purple.bgColor.doesHover:hover {
     110  background-color: #993dec;
     111  color: #111111;
     112}
     113#rft.claro .purple.hoverTextColor:hover {
     114  color: #6529b7;
     115}
     116#rft.claro .purple.hoverBgColor:hover {
     117  background-color: #6529b7;
     118}
     119#rft.claro .textColor,
     120#rft.claro .hoverTextColor {
     121  transition: color 0.2s;
     122}
     123#rft.claro .bgColor,
     124#rft.claro .hoverBgColor {
     125  transition: background-color 0.2s;
     126}
     127/* This stylesheet compensates for the restoration of the claro style to its original specs. (21-6-2012)
     128 * These changes should be moved to relevant stylesheets as soon as possible!
     129*/
     130/* Menu.css */
     131.claro .topbar .dijitMenuitem {
     132  width: 90px;
     133  background-image: none;
     134  background-position: top;
     135  text-align: center;
     136}
     137.claro .dijitMenuPassive .dijitMenuItemHover,
     138.claro .dijitMenuPassive .dijitMenuItemSelected {
     139  background-color: transparent;
     140  color: #ffffff;
     141  border: none;
     142  padding: 0 4px;
     143}
     144.claro .dijitMenuPassive .dijitMenuItemActive {
     145  background-position: top;
     146}
     147/* layout/BorderContainer.css */
     148.claro .dijitSplitContainer-child,
     149.claro .dijitBorderContainer-child {
     150  border: none;
     151}
     152.claro .dijitTabContainerTop-dijitContentPane,
     153.claro .dijitTabContainerLeft-dijitContentPane,
     154.claro .dijitTabContainerBottom-dijitContentPane,
     155.claro .dijitTabContainerRight-dijitContentPane,
     156.claro .dijitAccordionContainer-dijitContentPane {
     157  background-color: transparent;
     158}
     159.claro .dijitSplitContainer-dijitContentPane,
     160.claro .dijitBorderContainer-dijitContentPane {
     161  background-color: transparent;
     162}
     163/* layout/TabContainer.css */
     164.claro .dijitTabPaneWrapper {
     165  background: transparent;
     166}
     167.claro .dijitTabInnerDiv {
     168  background-color: transparent;
     169  color: #999999;
     170  border: none;
     171}
     172.claro .dijitTabContent {
     173  border: none;
     174}
     175.claro .dijitTabHover .dijitTabInnerDiv {
     176  background-color: transparent;
     177  color: #ffffff;
     178}
     179.claro .dijitTabActive .dijitTabInnerDiv {
     180  color: #0072bc;
     181}
     182.claro .dijitTabChecked .dijitTabInnerDiv {
     183  background-color: transparent;
     184  color: #ffffff;
     185}
     186.claro .dijitTabContent {
     187  border: 1px solid #999999;
     188}
     189.claro .dijitTabHover .dijitTabContent {
     190  border-color: #ffffff;
     191}
     192.claro .dijitTabActive .dijitTabContent {
     193  border-color: transparent;
     194}
     195.claro .dijitTabChecked .dijitTabContent {
     196  color: #ffffff;
     197  border-color: #0072bc;
     198}
     199/*lefttabs*/
     200.claro .dijitTabContainerLeft-tabs .dijitTab {
     201  border-width: 1px;
     202  left: 0;
     203  margin-bottom: 4px;
     204  margin-right: 8px;
     205}
     206.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
     207  border: none;
     208  background: transparent;
     209  background-image: none;
     210  background-position: top;
     211  background-repeat: no-repeat;
     212}
     213.claro .dijitTabContainerLeft-tabs .dijitTabContent {
     214  padding: 3px 8px 4px 8px;
     215  background-image: none;
     216}
     217.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
     218  padding-right: 8px;
     219  background-image: none;
     220}
     221.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
     222  -webkit-box-shadow: none;
     223  -moz-box-shadow: none;
     224  box-shadow: none;
     225}
     226.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
     227.claro .dijitTabContainerLeft-tabs .dijitTabContent {
     228  -moz-border-radius: 0;
     229  border-radius: 0;
     230  border: none;
     231}
     232*:focus {
     233  outline: none;
     234}
     235html,
     236body {
     237  width: 100%;
     238  height: 100%;
     239  background-color: #333333;
     240}
     241#rft.claro {
     242  font-family: 'Segoe UI', Helvetica, Verdana, Arial, sans-serif;
     243  font-size: 13px;
     244  color: #111111;
     245}
     246#rft.claro .dijitBorderContainer,
     247#rft.claro .dijitContentPane,
     248#rft.claro .dijitTabContainer,
     249#rft.claro .dijitTabPaneWrapper {
     250  background: transparent;
     251  border: none;
     252}
     253#rft.claro h1 {
     254  margin: 0 0 0 0;
     255  padding: 0 10px 8px 10px;
     256  float: left;
     257  clear: left;
     258  font-size: 48px;
     259  color: #999999;
     260  line-height: 48px;
     261  font-weight: normal;
     262  -webkit-user-select: none;
     263  -moz-user-select: none;
     264  -ms-user-select: none;
     265  user-select: none;
     266}
     267#rft.claro h2 {
     268  margin: 0 0 0 0;
     269  padding: 0 0 0 0;
     270  color: #999999;
     271  font-size: 22px;
     272  line-height: 30px;
     273}
     274#rft.claro h2 .rftIcon {
     275  width: 32px;
     276  height: 32px;
     277  margin: 0;
     278  padding: 0 0 0 0;
     279  background-image: url('images/icons/rftIcons32.png');
     280  margin-right: 8px;
     281}
     282#rft.claro h3 {
     283  margin: 0 0 0 0;
     284  font-size: 18px;
     285  margin-bottom: 4px;
     286}
     287#rft.claro h4 {
     288  font-size: 16px;
     289}
     290#rft.claro .topbar {
     291  overflow-y: hidden;
     292}
     293#rft.claro .topbar .dijitMenuBar {
     294  border: none;
     295  background-image: none;
     296  -webkit-box-shadow: none;
     297  box-shadow: none;
     298  border-radius: 0;
     299  background-color: transparent;
     300  float: right;
     301  clear: right;
     302  margin-top: 16px;
     303}
     304#rft.claro .topbar .breadcrumbs {
     305  color: #999999;
     306}
     307#rft.claro .topbar .breadcrumbs .breadcrumb {
     308  font-size: 13px;
     309}
     310#rft.claro .topbar .breadcrumbs .breadcrumb.breadcrumbCurrent {
     311  color: #ffffff;
     312  font-size: 15px;
     313}
     314#rft.claro .topbar .breadcrumbs .breadcrumb.breadcrumbHover {
     315  color: #0072bc;
     316}
     317#rft.claro .dijitContentPane.page {
     318  margin: 0 0 0 0;
     319  padding: 0 0 0 0;
     320}
     321#rft.claro .dijitContentPane.content {
     322  margin: 0 0 0 0;
     323  padding: 0 0 0 0;
     324  display: block;
     325  clear: both;
     326  background-color: #555555;
     327  background-image: -webkit-gradient(50% 50%, circle, #666666 1%, #444444 100%);
     328  -moz-background-image: gradient(50% 50%, circle, #666666 1%, #444444 100%);
     329  -o-background-image: gradient(50% 50%, circle, #666666 1%, #444444 100%);
     330  -ms-background-image: gradient(50% 50%, circle, #666666 1%, #444444 100%);
     331  background-image: gradient(50% 50%, circle, #666666 1%, #444444 100%);
     332}
     333#rft.claro .dijitContentPane.content .dijitBorderContainer {
     334  padding: 4px;
     335}
     336#rft.claro .loginLabel {
     337  float: left;
     338  clear: left;
     339  width: 100px;
     340}
     341#rft.claro .loginInput {
     342  width: 150px;
     343}
     344#rft.claro .rftMultipleChoiceWidget {
     345  display: table;
     346}
     347#rft.claro .rftMultipleChoiceWidget .row {
     348  display: table-row;
     349}
     350#rft.claro .rftMultipleChoiceWidget .rowBox {
     351  display: table-cell;
     352}
     353#rft.claro .rftMultipleChoiceWidget .rowText {
     354  display: table-cell;
     355  width: 100px;
     356}
     357#rft.claro .rftMultipleChoiceWidget .rowBtn {
     358  display: table-cell;
     359  width: 30px;
     360}
     361#rft.claro .verticalTabList {
     362  width: 190px;
     363}
     364#rft.claro .dijitTab {
     365  -webkit-transition: all 0.2s;
     366  -moz-transition: all 0.2s;
     367  -o-transition: all 0.2s;
     368  -ms-transition: all 0.2s;
     369  transition: all 0.2s;
     370  background-color: transparent;
     371  padding: 4px 8px;
     372  color: #999999;
     373  overflow: hidden;
     374}
     375#rft.claro .dijitTabContainerLeft-tabs {
     376  border: none;
     377  padding: 4px;
     378}
     379#rft.claro .dijitTabContainerLeft-tabs .dijitTab {
     380  margin: 4px;
     381  width: 200px;
     382  min-height: 30px;
     383  border: 1px solid #999999;
     384}
     385#rft.claro .dijitTabContainerLeft-tabs .dijitTab .dijitTabContent {
     386  min-height: 30px;
     387  line-height: 30px;
     388  width: 190px;
     389}
     390#rft.claro .dijitTabContainerLeft-tabs .dijitTab.dijitTabChecked {
     391  -webkit-transition: all 0.1s;
     392  -moz-transition: all 0.1s;
     393  -o-transition: all 0.1s;
     394  -ms-transition: all 0.1s;
     395  transition: all 0.1s;
     396  color: #ffffff;
     397  border: 1px solid transparent;
     398}
     399#rft.claro .dijitTabContainerLeft-tabs .dijitTab.dijitTabChecked.dijitTabHover {
     400  border: 1px solid transparent;
     401}
     402#rft.claro .dijitTabContainerLeft-tabs .dijitTab.dijitTabHover {
     403  -webkit-transition: all 0.1s;
     404  -moz-transition: all 0.1s;
     405  -o-transition: all 0.1s;
     406  -ms-transition: all 0.1s;
     407  transition: all 0.1s;
     408  color: #ffffff;
     409  border-color: #ffffff;
     410}
     411#rft.claro .dijitTabContainerLeft-tabs .dijitTab.dijitTabActive {
     412  -webkit-transition: all 0.1s;
     413  -moz-transition: all 0.1s;
     414  -o-transition: all 0.1s;
     415  -ms-transition: all 0.1s;
     416  transition: all 0.1s;
     417  color: #999999;
     418}
     419#rft.claro.blue .dijitTabChecked,
     420#rft.claro .blue .dijitTabChecked,
     421#rft.claro div.blue.dijitTabChecked {
     422  background-color: #0072bc;
     423}
     424#rft.claro.green .dijitTabChecked,
     425#rft.claro .green .dijitTabChecked,
     426#rft.claro div.green.dijitTabChecked {
     427  background-color: #3aa605;
     428}
     429#rft.claro.red .dijitTabChecked,
     430#rft.claro .red .dijitTabChecked,
     431#rft.claro div.red.dijitTabChecked {
     432  background-color: #8c0310;
     433}
     434#rft.claro.orange .dijitTabChecked,
     435#rft.claro .orange .dijitTabChecked,
     436#rft.claro div.orange.dijitTabChecked {
     437  background-color: #ff5b12;
     438}
     439#rft.claro.purple .dijitTabChecked,
     440#rft.claro .purple .dijitTabChecked,
     441#rft.claro div.purple.dijitTabChecked {
     442  background-color: #6529b7;
     443}
     444#rft.claro fieldset {
     445  border: none;
     446}
     447#rft.claro fieldset.align input,
     448#rft.claro fieldset.align .dijitTextBox,
     449#rft.claro fieldset.align textarea {
     450  margin-left: 0;
     451}
     452#rft.claro fieldset.align label {
     453  color: #ffffff;
     454  display: inline-block;
     455  width: 100px !important;
     456}
     457#rft.claro .newline {
     458  float: left;
     459  clear: left;
     460  display: block;
     461}
     462#rft.claro .floatRight {
     463  float: right;
     464  margin: 0 0 0 0;
     465}
     466#rft.claro .rftLineListView {
     467  max-width: 200px;
     468  max-height: 500px;
     469}
     470#rft.claro .rftLineListView .rftLineListViewContent {
     471  width: auto;
     472  overflow: auto;
     473}
     474#rft.claro .rftIcon {
     475  margin: 0 0 0 0;
     476  padding: 0 0 0 0;
     477  float: left;
     478  display: inline-block;
     479  border: none;
     480  background-color: transparent;
     481  background-repeat: no-repeat;
     482}
     483#rft .rftIconApplication {
     484  background-position: 0px 0px;
     485}
     486#rft .rftIconDashboard {
     487  background-position: -32px 0px;
     488}
     489#rft .rftIconSession {
     490  background-position: -64px 0px;
     491}
     492#rft .rftIconSessionActive {
     493  background-position: -96px 0px;
     494}
     495#rft .rftIconSessionTemplate {
     496  background-position: -128px 0px;
     497}
     498#rft .rftIconSurvey {
     499  background-position: -160px 0px;
     500}
     501#rft .rftIconQuestion {
     502  background-position: -192px 0px;
     503}
     504#rft .rftIconQuestionFill {
     505  background-position: -224px 0px;
     506}
     507#rft .rftIconRespondent {
     508  background-position: -256px 0px;
     509}
     510#rft .rftIconAnswer {
     511  background-position: -288px 0px;
     512}
     513#rft .rftIconAnswerSet {
     514  background-position: -320px 0px;
     515}
     516#rft .rftIconGameData {
     517  background-position: -352px 0px;
     518}
     519#rft .rftIconUser {
     520  background-position: -384px 0px;
     521}
     522#rft .rftIconAccept {
     523  background-position: -416px 0px;
     524}
     525#rft .rftIconCancel {
     526  background-position: -448px 0px;
     527}
     528#rft .rftIconPlus {
     529  background-position: -480px 0px;
     530}
     531#rft .rftIconMinus {
     532  background-position: -512px 0px;
     533}
     534#rft .rftIconIncrease {
     535  background-position: -544px 0px;
     536}
     537#rft .rftIconDecrease {
     538  background-position: -576px 0px;
     539}
     540#rft .rftIconDelete {
     541  background-position: -608px 0px;
     542}
     543#rft .rftIconHome {
     544  background-position: -640px 0px;
     545}
     546#rft .rftIconPreview {
     547  background-position: -672px 0px;
     548}
     549#rft .rftIconSave {
     550  background-position: -704px 0px;
     551}
     552#rft .rftIconDiscard {
     553  background-position: -736px 0px;
     554}
     555#rft .rftIconProperties {
     556  background-position: -768px 0px;
     557}
     558#rft .rftIconUndo {
     559  background-position: -800px 0px;
     560}
     561#rft .rftIconRedo {
     562  background-position: -832px 0px;
     563}
     564#rft .rftIconBack {
     565  background-position: -864px 0px;
     566}
     567#rft .rftIconForward {
     568  background-position: -896px 0px;
     569}
     570#rft .rftIconRefresh {
     571  background-position: -928px 0px;
     572}
     573#rft .rftIconHelp {
     574  background-position: -960px 0px;
     575}
     576#rft .rftIconInspect {
     577  background-position: -992px 0px;
     578}
     579#rft .rftIconTag {
     580  background-position: -1024px 0px;
     581}
     582#rft .rftIconImage {
     583  background-position: -1056px 0px;
     584}
     585#rft .rftIconEdit {
     586  background-position: -1088px 0px;
     587}
     588#rft .rftIconLock {
     589  background-position: -1120px 0px;
     590}
     591#rft .rftIconUnlock {
     592  background-position: -1152px 0px;
     593}
     594#rft .rftIconPreset {
     595  background-position: -1184px 0px;
     596}
     597#rft .rftIconTextBlock {
     598  background-position: -1216px 0px;
     599}
     600#rft .rftIconPageBreak {
     601  background-position: -1248px 0px;
     602}
     603#rft .rftIconExternal {
     604  background-position: -1280px 0px;
     605}
     606#rft .rftIconInput {
     607  background-position: -1312px 0px;
     608}
     609#rft .rftIconPublish {
     610  background-position: -1344px 0px;
     611}
     612#rft .rftIconFullArrowUp {
     613  background-position: -1696px 0px;
     614}
     615#rft .rftIconFullArrowDown {
     616  background-position: -1728px 0px;
     617}
     618#rft .rftIconFullArrowLeft {
     619  background-position: -1760px 0px;
     620}
     621#rft .rftIconFullArrowRight {
     622  background-position: -1792px 0px;
     623}
     624#rft .rftIconHalfArrowUp {
     625  background-position: -1824px 0px;
     626}
     627#rft .rftIconHalfArrowDown {
     628  background-position: -1856px 0px;
     629}
     630#rft .rftIconHalfArrowLeft {
     631  background-position: -1888px 0px;
     632}
     633#rft .rftIconHalfArrowRight {
     634  background-position: -1920px 0px;
     635}
     636#rft.claro .rftSelector {
     637  margin: 0 0 0 0;
     638  padding: 0 0 0 0;
     639  margin: 4px;
     640}
     641#rft.claro .rftSelector .rftLineWithActions {
     642  margin: 0 0 0 0;
     643  padding: 0 0 0 0;
     644}
     645#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator {
     646  margin: 0 0 0 0;
     647  padding: 0 0 0 0;
     648  float: left;
     649  width: 8px;
     650  height: 24px;
     651  background-color: #bedead;
     652}
     653#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator.conflict {
     654  background-color: #ff0000;
     655}
     656#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator.pending {
     657  background-color: #ff8000;
     658}
     659#rft.claro .rftSelector .rftSelectorSelected .rftSelectorIndicator.success {
     660  background-color: #00ff00;
     661}
     662#rft.claro .rftSelector .rftSelectorOptions .rftLineWithActions,
     663#rft.claro .rftSelector .rftSelectorSelected .rftLineWithActions {
     664  background-color: #ffffff;
     665  color: #111111;
     666}
     667#rft.claro .rftLineWithActions {
     668  border: none;
     669  background-image: none;
     670  -webkit-box-shadow: none;
     671  box-shadow: none;
     672  border-radius: 0;
     673  position: relative;
     674  height: 24px;
     675  white-space: nowrap;
     676  margin: 4px 0;
     677  color: #ffffff;
     678}
     679#rft.claro .rftLineWithActions.dojoDndItem {
     680  -webkit-transition: all 0.2s;
     681  -moz-transition: all 0.2s;
     682  -o-transition: all 0.2s;
     683  -ms-transition: all 0.2s;
     684  transition: all 0.2s;
     685}
     686#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemBefore {
     687  margin-top: 6px;
     688  border-top: 6px solid #ffffff;
     689}
     690#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemAfter {
     691  margin-bottom: 6px;
     692  border-bottom: 6px solid #ffffff;
     693}
     694#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemover,
     695#rft.claro .rftLineWithActions.dojoDndItem.dojoDndItemAnchor {
     696  background-image: none;
     697  border: none;
     698  padding: 2px;
     699  background-color: rgba(255, 255, 255, 0.1);
     700}
     701#rft.claro .rftLineWithActions .rftLineWithActionsTitle {
     702  float: left;
     703  margin: 0 8px;
     704  overflow: hidden;
     705  white-space: nowrap;
     706  word-wrap: break-word;
     707}
     708#rft.claro .rftLineWithActions .rftLineWithActionsButtons {
     709  margin: 0 0 0 0;
     710  padding: 0 0 0 0;
     711  line-height: 24px;
     712  height: 24px;
     713  position: absolute;
     714  right: 0;
     715  float: left;
     716}
     717#rft.claro .dojoDndSourceMoved .rftLineWithActions.dojoDndItemAnchor {
     718  height: 0;
     719}
     720#rft.claro .rftIndexMenuBlock {
     721  width: 400px;
     722  height: 400px;
     723  background: #444444;
     724  float: left;
     725  margin: 16px;
     726  overflow: hidden;
     727}
     728#rft.claro .rftIndexMenuBlock:hover .rftIndexMenuMask {
     729  margin-top: -400px;
     730}
     731#rft.claro .rftIndexMenuMask {
     732  width: 400px;
     733  height: 400px;
     734  background: #444444;
     735  color: #999999;
     736  margin-top: 0;
     737}
     738#rft.claro .rftIndexMenuMask .label {
     739  color: #999999;
     740  font-size: 32px;
     741  height: 32px;
     742  line-height: 32px;
     743  margin-top: 184px;
     744  float: left;
     745}
     746#rft.claro .rftIndexMenuMask .rftIcon {
     747  width: 32px;
     748  height: 32px;
     749  margin: 0;
     750  padding: 0 0 0 0;
     751  background-image: url('images/icons/rftIcons32.png');
     752  float: left;
     753  margin: 184px 8px 0 8px;
     754}
     755#rft.claro .rftIndexMenuButton {
     756  border: none;
     757  background-image: none;
     758  -webkit-box-shadow: none;
     759  box-shadow: none;
     760  border-radius: 0;
     761  margin: 0 0 0 0;
     762  padding: 0 0 0 0;
     763  -webkit-transition: all 0.3s;
     764  -moz-transition: all 0.3s;
     765  -o-transition: all 0.3s;
     766  -ms-transition: all 0.3s;
     767  transition: all 0.3s;
     768  line-height: 32px;
     769  border: none;
     770}
     771#rft.claro .rftIndexMenuButton .dijitButtonNode {
     772  border: none;
     773  color: #999999;
     774  font-size: 22px;
     775}
     776#rft.claro .rftIndexMenuButton .dijitButtonNode .dijitButtonContents {
     777  vertical-align: top;
     778}
     779#rft.claro .rftIndexMenuButton .dijitButtonNode .dijitButtonContents .dijitButtonText {
     780  padding-bottom: 10px;
     781  line-height: 20px;
     782}
     783#rft.claro .rftIndexMenuButton .dijitButtonNode .dijitButtonContents .rftIcon {
     784  width: 32px;
     785  height: 32px;
     786  margin: 0;
     787  padding: 0 0 0 0;
     788  background-image: url('images/icons/rftIcons32.png');
     789  margin: 0 8px;
     790}
     791#rft.claro .rftIndexMenuButton.oneHeight {
     792  height: 100px;
     793  width: 400px;
     794}
     795#rft.claro .rftIndexMenuButton.oneHeight .dijitButtonNode {
     796  margin: 38px 0 0 0;
     797}
     798#rft.claro .rftIndexMenuButton.twoHeight {
     799  height: 200px;
     800  width: 400px;
     801}
     802#rft.claro .rftIndexMenuButton.twoHeight .dijitButtonNode {
     803  margin: 88px 0 0 0;
     804}
     805#rft.claro .rftIndexMenuButton.fourHeight {
     806  height: 400px;
     807  width: 400px;
     808}
     809#rft.claro .rftIndexMenuButton.fourHeight .dijitButtonNode {
     810  margin: 188px 0 0 0;
     811}
     812#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover {
     813  color: #ffffff;
     814  -webkit-transition: all 0.1s;
     815  -moz-transition: all 0.1s;
     816  -o-transition: all 0.1s;
     817  -ms-transition: all 0.1s;
     818  transition: all 0.1s;
     819}
     820#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover .dijitButtonText {
     821  color: #ffffff;
     822  -webkit-transition: all 0.1s;
     823  -moz-transition: all 0.1s;
     824  -o-transition: all 0.1s;
     825  -ms-transition: all 0.1s;
     826  transition: all 0.1s;
     827}
     828#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.blue {
     829  background-color: #0072bc;
     830}
     831#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.red {
     832  background-color: #8c0310;
     833}
     834#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.green {
     835  background-color: #3aa605;
     836}
     837#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.orange {
     838  background-color: #ff5b12;
     839}
     840#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.purple {
     841  background-color: #6529b7;
     842}
     843#rft.claro .rftIndexMenuButton.rftIndexMenuButtonActive {
     844  -webkit-transition: all 0.3s;
     845  -moz-transition: all 0.3s;
     846  -o-transition: all 0.3s;
     847  -ms-transition: all 0.3s;
     848  transition: all 0.3s;
     849  color: #111111;
     850  background: #ffffff;
     851}
     852#rft.claro .rftIndexMenuButton.rftIndexMenuButtonActive .rftIcon {
     853  width: 32px;
     854  height: 32px;
     855  margin: 0;
     856  padding: 0 0 0 0;
     857  background-image: url('images/icons/rftIcons32b.png');
     858}
     859#rft.claro .dijitMenuPopup .dijitMenu {
     860  border: none;
     861  background-image: none;
     862  -webkit-box-shadow: none;
     863  box-shadow: none;
     864  border-radius: 0;
     865  color: #999999;
     866  background-color: #333333;
     867  border: none;
     868}
     869#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem {
     870  color: #999999;
     871  border: none;
     872  background-image: none;
     873  -webkit-box-shadow: none;
     874  box-shadow: none;
     875  border-radius: 0;
     876  background-color: #333333;
     877}
     878#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover .dijitMenuItemLabel,
     879#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive .dijitMenuItemLabel,
     880#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected .dijitMenuItemLabel {
     881  color: #ffffff;
     882}
     883#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.red,
     884#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.red,
     885#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.red {
     886  background-color: #8c0310;
     887}
     888#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.blue,
     889#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.blue,
     890#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.blue {
     891  background-color: #0072bc;
     892}
     893#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.green,
     894#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.green,
     895#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.green {
     896  background-color: #3aa605;
     897}
     898#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.orange,
     899#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.orange,
     900#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.orange {
     901  background-color: #ff5b12;
     902}
     903#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover.purple,
     904#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive.purple,
     905#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemSelected.purple {
     906  background-color: #6529b7;
     907}
     908#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem .rftIcon {
     909  width: 16px;
     910  height: 16px;
     911  margin: 4px 0;
     912  padding: 0 0 0 0;
     913  background-image: url('images/icons/rftIcons16.png');
     914  margin: 0 0 0 0;
     915  margin-right: 8px;
     916}
     917#rft.claro .dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemActive .rftIcon {
     918  width: 16px;
     919  height: 16px;
     920  margin: 4px 0;
     921  padding: 0 0 0 0;
     922  background-image: url('images/icons/rftIcons16b.png');
     923}
     924#rft.claro .dijitMenuBar .rftMainMenuButton {
     925  border: none;
     926  background-image: none;
     927  -webkit-box-shadow: none;
     928  box-shadow: none;
     929  border-radius: 0;
     930  -webkit-transition: all 0.1s;
     931  -moz-transition: all 0.1s;
     932  -o-transition: all 0.1s;
     933  -ms-transition: all 0.1s;
     934  transition: all 0.1s;
     935  border: none;
     936  height: 30px;
     937  width: auto;
     938  background: transparent;
     939  color: #999999;
     940  text-align: center;
     941  font-size: 24px;
     942  line-height: 30px;
     943  padding: 0 4px;
     944  margin: 0 5px;
     945}
     946#rft.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover,
     947#rft.claro .dijitMenuBar .rftMainMenuButton.dijitMenuitemActive {
     948  -webkit-transition: all 0.1s;
     949  -moz-transition: all 0.1s;
     950  -o-transition: all 0.1s;
     951  -ms-transition: all 0.1s;
     952  transition: all 0.1s;
     953}
     954#rft.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemHover {
     955  color: #ffffff;
     956  font-size: 26px;
     957}
     958#rft.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemActive {
     959  color: #0072bc;
     960  font-size: 26px;
     961}
     962#rft.claro .dijitMenuBar .rftMainMenuButton.dijitMenuItemSelected {
     963  font-size: 26px;
     964  color: #ffffff;
     965}
     966#rft.claro .dojoxTitleGroup .dijitTitlePane {
     967  margin: 0 0 0 0;
     968}
     969#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitle {
     970  border: none;
     971  background-image: none;
     972  -webkit-box-shadow: none;
     973  box-shadow: none;
     974  border-radius: 0;
     975  margin: 0 0 0 0;
     976  background-color: #ff5b12;
     977  border: none;
     978  padding: 0 4px;
     979  height: 24px;
     980}
     981#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitle.dijitTitlePaneTitleHover,
     982#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitle.dijitTitlePaneTitleFocused {
     983  background-color: #ff9140;
     984}
     985#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTextNode {
     986  color: #ffffff;
     987  font-size: 13px;
     988  line-height: 24px;
     989}
     990#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneContentOuter {
     991  background-color: #444444;
     992  border: none;
     993}
     994#rft.claro .dojoxTitleGroup .dijitTitlePane .dijitTitlePaneTitleFocus {
     995  margin: 0 0 0 0;
     996}
     997#rft.claro .rftSurveyListView .rftSurveyListViewContent {
     998  min-height: 300px;
     999  background: #444444;
     1000  overflow: auto;
     1001}
     1002#rft.claro .rftLargeButton {
     1003  border: none;
     1004  background-image: none;
     1005  -webkit-box-shadow: none;
     1006  box-shadow: none;
     1007  border-radius: 0;
     1008  margin-right: 16px;
     1009  height: 24px;
     1010}
     1011#rft.claro .rftLargeButton*,
     1012#rft.claro .rftLargeButton * {
     1013  -webkit-user-select: none;
     1014  -moz-user-select: none;
     1015  -ms-user-select: none;
     1016  user-select: none;
     1017}
     1018#rft.claro .rftLargeButton .dijitButtonNode {
     1019  border: none;
     1020  background-image: none;
     1021  -webkit-box-shadow: none;
     1022  box-shadow: none;
     1023  border-radius: 0;
     1024  border: none;
     1025  height: 24px;
     1026  background: transparent;
     1027  color: #999999;
     1028  font-size: 20px;
     1029  -webkit-transition: all 0.3s;
     1030  -moz-transition: all 0.3s;
     1031  -o-transition: all 0.3s;
     1032  -ms-transition: all 0.3s;
     1033  transition: all 0.3s;
     1034}
     1035#rft.claro .rftLargeButton .dijitButtonNode .rftIcon {
     1036  width: 24px;
     1037  height: 24px;
     1038  margin: 0 0 0 0;
     1039  padding: 0 0 0 0;
     1040  background-image: url('images/icons/rftIcons24.png');
     1041}
     1042#rft.claro .rftLargeButton .dijitButtonNode .dijitButtonText {
     1043  line-height: 24px;
     1044  margin: 0 0 0 0;
     1045  padding-left: 8px;
     1046}
     1047#rft.claro .rftLargeButton.black .dijitButtonNode .rftIcon {
     1048  width: 24px;
     1049  height: 24px;
     1050  margin: 0 0 0 0;
     1051  padding: 0 0 0 0;
     1052  background-image: url('images/icons/rftIcons24b.png');
     1053}
     1054#rft.claro .rftLargeButton.rftLargeButtonHover .dijitButtonNode,
     1055#rft.claro .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     1056  -webkit-transition: all 0.1s;
     1057  -moz-transition: all 0.1s;
     1058  -o-transition: all 0.1s;
     1059  -ms-transition: all 0.1s;
     1060  transition: all 0.1s;
     1061}
     1062#rft.claro span.blue.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
     1063#rft.claro .blue .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     1064  color: #0794d1;
     1065}
     1066#rft.claro span.orange.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
     1067#rft.claro .orange .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     1068  color: #ff9140;
     1069}
     1070#rft.claro span.green.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
     1071#rft.claro .green .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     1072  color: #79ca0a;
     1073}
     1074#rft.claro span.red.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
     1075#rft.claro .red .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     1076  color: #bd0013;
     1077}
     1078#rft.claro span.purple.rftLargeButton.rftLargeButtonActive .dijitButtonNode,
     1079#rft.claro .purple .rftLargeButton.rftLargeButtonActive .dijitButtonNode {
     1080  color: #993dec;
     1081}
     1082#rft.claro .rftBlockButton {
     1083  border: none;
     1084  background-image: none;
     1085  -webkit-box-shadow: none;
     1086  box-shadow: none;
     1087  border-radius: 0;
     1088  margin: 0 0 0 0;
     1089  height: 24px;
     1090  line-height: 24px;
     1091  vertical-align: top;
     1092}
     1093#rft.claro .rftBlockButton .dijitButtonNode {
     1094  border: none;
     1095  background-image: none;
     1096  -webkit-box-shadow: none;
     1097  box-shadow: none;
     1098  border-radius: 0;
     1099  -webkit-transition: all 0.3s;
     1100  -moz-transition: all 0.3s;
     1101  -o-transition: all 0.3s;
     1102  -ms-transition: all 0.3s;
     1103  transition: all 0.3s;
     1104  line-height: 24px;
     1105  vertical-align: top;
     1106  height: 24px;
     1107  padding: 0 4px;
     1108  border: none;
     1109  color: #ffffff;
     1110  font-size: 13px;
     1111}
     1112#rft.claro .rftBlockButton .dijitButtonNode .rftIcon {
     1113  width: 16px;
     1114  height: 16px;
     1115  margin: 4px 0;
     1116  padding: 0 0 0 0;
     1117  background-image: url('images/icons/rftIcons16.png');
     1118}
     1119#rft.claro .rftBlockButton.rftBlockButtonHover,
     1120#rft.claro .rftBlockButton.rftBlockButtonActive {
     1121  -webkit-transition: all 0.1s;
     1122  -moz-transition: all 0.1s;
     1123  -o-transition: all 0.1s;
     1124  -ms-transition: all 0.1s;
     1125  transition: all 0.1s;
     1126}
     1127#rft.claro .rftBlockButton.rftBlockButtonHover .rftIcon,
     1128#rft.claro .rftBlockButton.rftBlockButtonActive .rftIcon {
     1129  vertical-align: top;
     1130  width: 16px;
     1131  height: 16px;
     1132  margin: 4px 0;
     1133  padding: 0 0 0 0;
     1134  background-image: url('images/icons/rftIcons16b.png');
     1135}
     1136#rft.claro .rftInlineButton {
     1137  float: right;
     1138  height: 24px;
     1139  width: 24px;
     1140}
     1141#rft.claro .rftInlineButton .dijitButtonNode {
     1142  margin: 0 0 0 0;
     1143  padding: 0 0 0 0;
     1144  border: none;
     1145  background-image: none;
     1146  -webkit-box-shadow: none;
     1147  box-shadow: none;
     1148  border-radius: 0;
     1149  width: 24px;
     1150  height: 24px;
     1151  border: none;
     1152}
     1153#rft.claro .rftInlineButton .rftIcon {
     1154  width: 16px;
     1155  height: 16px;
     1156  margin: 4px 0;
     1157  padding: 0 0 0 0;
     1158  background-image: url('images/icons/rftIcons16.png');
     1159}
     1160#rft.claro .rftInlineButton.white .rftIcon {
     1161  width: 16px;
     1162  height: 16px;
     1163  margin: 4px 0;
     1164  padding: 0 0 0 0;
     1165  background-image: url('images/icons/rftIcons16.png');
     1166}
     1167#rft.claro .rftInlineButton.black .rftIcon {
     1168  width: 16px;
     1169  height: 16px;
     1170  margin: 4px 0;
     1171  padding: 0 0 0 0;
     1172  background-image: url('images/icons/rftIcons16b.png');
     1173}
     1174#rft.claro .rftInlineButton.rftInlineButtonHover.white {
     1175  width: 16px;
     1176  height: 16px;
     1177  margin: 4px 0;
     1178  padding: 0 0 0 0;
     1179  background-image: url('images/icons/rftIcons16b.png');
     1180}
     1181#rft.claro .rftInlineButton.rftInlineButtonHover.black {
     1182  width: 16px;
     1183  height: 16px;
     1184  margin: 4px 0;
     1185  padding: 0 0 0 0;
     1186  background-image: url('images/icons/rftIcons16b.png');
     1187}
     1188#rft.claro .rftObjectBox {
     1189  margin: 8px 0;
     1190}
     1191#rft.claro .rftObjectBox .rftIcon {
     1192  width: 32px;
     1193  height: 32px;
     1194  margin: 0;
     1195  padding: 0 0 0 0;
     1196  background-image: url('images/icons/rftIcons32.png');
     1197  float: left;
     1198  margin: 20px 8px;
     1199}
     1200#rft.claro .rftObjectBox .rftLineWithActions {
     1201  margin: 0 0 0 0;
     1202  padding: 0 0 0 0;
     1203}
     1204#rft.claro .rftSessionObject {
     1205  margin: 0 0 0 0;
     1206  padding: 0 0 0 0;
     1207  width: 100px;
     1208  height: 100px;
     1209  background: #999999;
     1210  margin: 8px;
     1211  display: inline-block;
     1212}
     1213#rft.claro .rftSessionObject .rftIcon {
     1214  width: 32px;
     1215  height: 32px;
     1216  margin: 0;
     1217  padding: 0 0 0 0;
     1218  background-image: url('images/icons/rftIcons32.png');
     1219  margin: 8px 34px 0 34px;
     1220}
     1221#rft.claro .rftSessionObject label {
     1222  margin: 0 0 0 0;
     1223  padding: 0 0 0 0;
     1224  float: left;
     1225  clear: both;
     1226  width: 100px;
     1227  text-align: center;
     1228  color: #ffffff;
     1229  overflow: hidden;
     1230}
     1231#rft.claro .rftSessionObject.blue {
     1232  background-color: #0072bc;
     1233}
     1234#rft.claro .rftSessionObject.blue.selected {
     1235  background-color: #0794d1;
     1236}
     1237#rft.claro .rftSessionObject.green {
     1238  background-color: #3aa605;
     1239}
     1240#rft.claro .rftSessionObject.green.selected {
     1241  background-color: #79ca0a;
     1242}
     1243#rft.claro .rftSessionObject.red {
     1244  background-color: #8c0310;
     1245}
     1246#rft.claro .rftSessionObject.red.selected {
     1247  background-color: #bd0013;
     1248}
     1249#rft.claro .rftObjectBox {
     1250  padding: 0 0 0 0;
     1251  color: #ffffff;
     1252}
     1253#rft.claro .rftObjectBox .typeIcon.rftIcon {
     1254  width: 32px;
     1255  height: 32px;
     1256  margin: 0;
     1257  padding: 0 0 0 0;
     1258  background-image: url('images/icons/rftIcons32.png');
     1259}
     1260#rft.claro .rftObjectBox .rftLineWithActions {
     1261  background-color: #3aa605;
     1262}
     1263#rft.claro .page_questions .rftSelector .rftSelectorCategory .rftLineWithActions {
     1264  background-color: #ff5b12;
     1265}
     1266#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftLineWithActions {
     1267  background-color: #ffffff;
     1268  color: #111111;
     1269}
     1270#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton {
     1271  background-color: #ff00ff;
     1272}
     1273#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton .dijitButtonNode {
     1274  background-color: #ff5b12;
     1275}
     1276#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton.dijitHover .dijitButtonNode {
     1277  background-color: #ffffff;
     1278}
     1279#rft.claro .page_questions .rftSelector .rftSelectorSelected .rftBlockButton.dijitActive .dijitButtonNode {
     1280  background-color: #ff9140;
     1281}

  • Dev/branches/rest-dojo-ui/client/rft/pages/questions.html

    r407 r411  
    1 <div class="blue">
     1<div class="blue page_questions">
    22
    33    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">

  • Dev/branches/rest-dojo-ui/client/rft/pages/questions.js

    r410 r411  
    1818            this.questionBrowser = new TabbedQuestionBrowser({
    1919                region: 'center',
    20                 'class': 'blue',
     20                'class': 'orange',
    2121                itemActions: {
    2222                    Edit: {

  • Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js

    r407 r411  
    1313    return declare([_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
    1414        templateString: templateString,
    15         baseClass: 'rftLineWithButtons',
     15        baseClass: 'rftLineWithActions',
    1616        title: '',
    1717        selectable: false,
    … …  
    2727            this.inherited(arguments);
    2828            this._setupActions();
    29             domClass.add(this.domNode, "inheritBgColor bg");
    3029            this.refresh();
    3130        },
    … …  
    3938                    properties = lang.mixin({
    4039                        baseClass: 'rftBlockButton',
    41                         "class": "inheritBgColor light",
    4240                        label: "Default",
    4341                        iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,

  • Dev/branches/rest-dojo-ui/client/rft/ui/templates/LineWithActionsWidget.html

    r355 r411  
    1 <div class="${baseClass} inheritBgColor">
     1<div class="${baseClass}">
    22    <span class="${baseClass}Title" data-dojo-attach-point="titleNode"></span>
    3     <span class="${baseClass}Buttons" data-dojo-attach-point="buttonsNode"></span>
     3    <span class="${baseClass}Buttons dijitReset" data-dojo-attach-point="buttonsNode"></span>
    44</div>

  • Dev/branches/rest-dojo-ui/client/rft/ui/templates/Selector.html

    r350 r411  
    44    </div>
    55    <div class="${baseClass}Selected">
    6         <div class="${baseClass}Color" data-dojo-attach-point="selectedColorNode"></div>
     6        <div class="${baseClass}Indicator" data-dojo-attach-point="selectedColorNode"></div>
    77        <div class="${baseClass}Item" data-dojo-attach-point="selectedItemNode"></div>
    88    </div>
Note: See TracChangeset for help on using the changeset viewer.