]>
git.wh0rd.org - tt-rss.git/blob - lib/dijit/themes/claro/Menu.css
3 There are three areas of styling for the Menu:
6 There are three types of menus:
10 All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
11 .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
12 .dijitMenuTable - for padding - also affects Select widget
15 .dijitMenuBar - for border, margins, padding, background-color of the menu bar
16 .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem)
18 3. Menu items - items in the menu.
19 .dijitMenuItem - for color
20 .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected
21 .dijitMenuItemActive - for background-color of an active (mousedown) menu item
22 td.dijitMenuItemIconCell - for padding around a menu item's icon
23 td.dijitMenuItemLabel - for padding around a menu item's label
24 .dijitMenuSeparatorTop - for border, top border, of the separator
25 .dijitMenuSeparatorBottom - for bottom margin of the separator
27 Styles specific to ComboBox and FilteringSelect widgets:
28 .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
29 .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
32 .claro .dijitMenuBar {
33 border : 1px solid
#b5bcc7 ;
36 background-color : #efefef ;
37 background-image : url
( "images/standardGradient.png" );
38 background-repeat : repeat-x
;
39 background-image : - moz-linear-gradient
( rgba
( 255 , 255 , 255 , 0.7 ) 0 %, rgba
( 255 , 255 , 255 , 0 ) 100 %);
40 background-image : - webkit-linear-gradient
( rgba
( 255 , 255 , 255 , 0.7 ) 0 %, rgba
( 255 , 255 , 255 , 0 ) 100 %);
41 background-image : - o-linear-gradient
( rgba
( 255 , 255 , 255 , 0.7 ) 0 %, rgba
( 255 , 255 , 255 , 0 ) 100 %);
42 background-image : linear-gradient
( rgba
( 255 , 255 , 255 , 0.7 ) 0 %, rgba
( 255 , 255 , 255 , 0 ) 100 %);
43 _background-image : none
;
46 background-color : #ffffff ;
47 border : 1px solid
#759dc0 ;
48 /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
52 .dj_ie6 .claro .dijitMenu {
54 /* above -1px makes top/bottom borders disappear on IE6 */
57 .claro .dijitMenuItem {
60 .claro .dijitMenuBar .dijitMenuItem {
61 padding : 6px 10px 7px ;
64 .claro .dijitMenuBar .dijitMenuItemHover, .claro .dijitMenuBar .dijitMenuItemSelected {
65 border : solid
1px #759dc0 ;
68 /* this prevents jiggling upon hover of a menu item */
69 .claro .dijitMenuTable {
70 border-collapse : separate
;
74 .claro .dijitMenuItem td {
77 /* hover over a MenuItem or MenuBarItem */
78 . claro
. dijitSelectMenu
. dijitMenuItemHover td
,
79 . claro
. dijitSelectMenu
. dijitMenuItemSelected td
,
80 . claro
. dijitMenuItemHover
,
81 .claro .dijitMenuItemSelected {
82 background-color : #abd6ff ;
83 background-image : url
( "images/standardGradient.png" );
84 background-repeat : repeat-x
;
85 background-image : - moz-linear-gradient
( rgba
( 255 , 255 , 255 , 0.7 ) 0 %, rgba
( 255 , 255 , 255 , 0 ) 100 %);
86 background-image : - webkit-linear-gradient
( rgba
( 255 , 255 , 255 , 0.7 ) 0 %, rgba
( 255 , 255 , 255 , 0 ) 100 %);
87 background-image : - o-linear-gradient
( rgba
( 255 , 255 , 255 , 0.7 ) 0 %, rgba
( 255 , 255 , 255 , 0 ) 100 %);
88 background-image : linear-gradient
( rgba
( 255 , 255 , 255 , 0.7 ) 0 %, rgba
( 255 , 255 , 255 , 0 ) 100 %);
89 _background-image : none
;
91 .claro .dijitMenuItemActive {
92 background-image : url
( "images/activeGradient.png" );
93 background-repeat : repeat-x
;
94 background-image : - moz-linear-gradient
( rgba
( 190 , 190 , 190 , 0.98 ) 0px , rgba
( 255 , 255 , 255 , 0.65 ) 3px , rgba
( 255 , 255 , 255 , 0 ) 100 %);
95 background-image : - webkit-linear-gradient
( rgba
( 190 , 190 , 190 , 0.98 ) 0px , rgba
( 255 , 255 , 255 , 0.65 ) 3px , rgba
( 255 , 255 , 255 , 0 ) 100 %);
96 background-image : - o-linear-gradient
( rgba
( 190 , 190 , 190 , 0.98 ) 0px , rgba
( 255 , 255 , 255 , 0.65 ) 3px , rgba
( 255 , 255 , 255 , 0 ) 100 %);
97 background-image : linear-gradient
( rgba
( 190 , 190 , 190 , 0.98 ) 0px , rgba
( 255 , 255 , 255 , 0.65 ) 3px , rgba
( 255 , 255 , 255 , 0 ) 100 %);
98 _background-image : none
;
100 . dj_ie
. claro
. dijitMenuActive
. dijitMenuItemHover
,
101 . dj_ie
. claro
. dijitMenuActive
. dijitMenuItemSelected
,
102 . dj_ie
. claro
. dijitMenuPassive
. dijitMenuItemHover
,
103 .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
108 .claro td.dijitMenuItemIconCell {
112 .claro td.dijitMenuItemLabel {
116 .claro .dijitMenuExpand {
119 background-image : url
( "images/spriteArrows.png" );
120 background-position : - 14px 0 ;
123 .claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
126 .claro .dijitMenuSeparatorTop {
129 /* prevents spacing above/below separator */
131 border-bottom : 1px solid
#b5bcc7 ;
133 .claro .dijitMenuSeparatorBottom {
137 /* the checked menu item */
138 .claro .dijitCheckedMenuItemIconChar {
141 .claro .dijitCheckedMenuItemIcon {
142 background-image : url
( "form/images/checkboxRadioButtonStates.png" );
143 background-repeat : no-repeat
;
144 background-position : - 15px 50 %;
148 .dj_ie6 .claro .dijitCheckedMenuItemIcon {
149 background-image : url
( "form/images/checkboxAndRadioButtons_IE6.png" );
151 .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
152 background-position : 0 50 %;
155 .claro .dijitComboBoxMenu {
157 background-image : none
;
159 .claro .dijitSelectMenu .dijitMenuItem td, .claro .dijitComboBoxMenu .dijitMenuItem {
161 border-width : 1px 0 1px 0 ;
163 border-color : #ffffff ;
165 .claro .dijitSelectMenu .dijitMenuItemSelected td, .claro .dijitComboBoxMenu .dijitMenuItemSelected {
167 border-color : #759dc0 ;
168 background-color : #abd6ff ;
170 .claro .dijitSelectMenu .dijitMenuItemHover td, .claro .dijitComboBoxMenu .dijitMenuItemHover {
172 border-color : #769dc0 ;
173 background-color : #abd6ff ;
175 .claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
176 background-color : #7dbdfa ;
177 /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
180 .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {