ttrss/lib/dijit/themes/claro/Menu.css

183 lines
6.5 KiB
CSS
Raw Normal View History

2011-11-08 16:40:44 +00:00
/* Menu
2011-11-08 16:40:44 +00:00
There are three areas of styling for the Menu:
1. The menu
There are three types of menus:
2013-03-18 06:26:24 +00:00
i) Context Menu
ii) Drop down Menu
2011-11-08 16:40:44 +00:00
iii) Navigation Menu
All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
.dijitMenuTable - for padding - also affects Select widget
2. The menu bar
.dijitMenuBar - for border, margins, padding, background-color of the menu bar
.dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem)
3. Menu items - items in the menu.
.dijitMenuItem - for color
.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected
2013-03-18 06:26:24 +00:00
.dijitMenuItemActive - for background-color of an active (mousedown) menu item
2011-11-08 16:40:44 +00:00
td.dijitMenuItemIconCell - for padding around a menu item's icon
td.dijitMenuItemLabel - for padding around a menu item's label
.dijitMenuSeparatorTop - for border, top border, of the separator
.dijitMenuSeparatorBottom - for bottom margin of the separator
Styles specific to ComboBox and FilteringSelect widgets:
.dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
.dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
*/
.claro .dijitMenuBar {
2011-11-08 16:40:44 +00:00
border: 1px solid #b5bcc7;
margin: 0;
padding: 0;
background-color: #efefef;
2013-03-18 06:26:24 +00:00
background-image: url("images/standardGradient.png");
2011-11-08 16:40:44 +00:00
background-repeat: repeat-x;
2013-03-18 06:26:24 +00:00
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
_background-image: none;
}
.claro .dijitMenu {
2011-11-08 16:40:44 +00:00
background-color: #ffffff;
2012-08-14 14:59:10 +00:00
border: 1px solid #759dc0;
2011-11-08 16:40:44 +00:00
/* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
margin: -1px 0;
}
.dj_ie6 .claro .dijitMenu {
margin: 0;
/* above -1px makes top/bottom borders disappear on IE6 */
}
2013-03-18 06:26:24 +00:00
.claro .dijitMenuItem {
color: #000000;
}
2011-11-08 16:40:44 +00:00
.claro .dijitMenuBar .dijitMenuItem {
padding: 6px 10px 7px;
margin: -1px;
}
2013-03-18 06:26:24 +00:00
.claro .dijitMenuBar .dijitMenuItemHover, .claro .dijitMenuBar .dijitMenuItemSelected {
border: solid 1px #759dc0;
padding: 5px 9px 6px;
}
2011-11-08 16:40:44 +00:00
/* this prevents jiggling upon hover of a menu item */
.claro .dijitMenuTable {
2011-11-08 16:40:44 +00:00
border-collapse: separate;
border-spacing: 0 0;
padding: 0;
}
.claro .dijitMenuItem td {
padding: 1px;
}
2013-03-18 06:26:24 +00:00
/* hover over a MenuItem or MenuBarItem */
.claro .dijitSelectMenu .dijitMenuItemHover td,
.claro .dijitSelectMenu .dijitMenuItemSelected td,
.claro .dijitMenuItemHover,
.claro .dijitMenuItemSelected {
2011-11-08 16:40:44 +00:00
background-color: #abd6ff;
2013-03-18 06:26:24 +00:00
background-image: url("images/standardGradient.png");
background-repeat: repeat-x;
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
_background-image: none;
2011-11-08 16:40:44 +00:00
}
2013-03-18 06:26:24 +00:00
.claro .dijitMenuItemActive {
background-image: url("images/activeGradient.png");
background-repeat: repeat-x;
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%);
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%);
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%);
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
_background-image: none;
}
.dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
2011-11-08 16:40:44 +00:00
padding-top: 6px;
padding-bottom: 5px;
margin-top: -3px;
}
.claro td.dijitMenuItemIconCell {
2011-11-08 16:40:44 +00:00
padding: 2px;
margin: 0 0 0 4px;
}
.claro td.dijitMenuItemLabel {
2011-11-08 16:40:44 +00:00
padding-top: 5px;
padding-bottom: 5px;
}
.claro .dijitMenuExpand {
2011-11-08 16:40:44 +00:00
width: 7px;
height: 7px;
2012-08-14 14:59:10 +00:00
background-image: url("images/spriteArrows.png");
2011-11-08 16:40:44 +00:00
background-position: -14px 0;
margin-right: 3px;
}
.claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
2011-11-08 16:40:44 +00:00
opacity: 1;
}
.claro .dijitMenuSeparatorTop {
2011-11-08 16:40:44 +00:00
height: auto;
margin-top: 1px;
/* prevents spacing above/below separator */
border-bottom: 1px solid #b5bcc7;
}
2011-11-08 16:40:44 +00:00
.claro .dijitMenuSeparatorBottom {
height: auto;
margin-bottom: 1px;
}
2011-11-08 16:40:44 +00:00
/* the checked menu item */
.claro .dijitCheckedMenuItemIconChar {
2011-11-08 16:40:44 +00:00
display: none;
}
.claro .dijitCheckedMenuItemIcon {
2012-08-14 14:59:10 +00:00
background-image: url("form/images/checkboxRadioButtonStates.png");
2011-11-08 16:40:44 +00:00
background-repeat: no-repeat;
background-position: -15px 50%;
width: 15px;
height: 16px;
}
.dj_ie6 .claro .dijitCheckedMenuItemIcon {
2012-08-14 14:59:10 +00:00
background-image: url("form/images/checkboxAndRadioButtons_IE6.png");
}
.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
2011-11-08 16:40:44 +00:00
background-position: 0 50%;
}
2011-11-08 16:40:44 +00:00
/*ComboBox Menu*/
.claro .dijitComboBoxMenu {
2011-11-08 16:40:44 +00:00
margin-left: 0;
background-image: none;
}
2013-03-18 06:26:24 +00:00
.claro .dijitSelectMenu .dijitMenuItem td, .claro .dijitComboBoxMenu .dijitMenuItem {
2011-11-08 16:40:44 +00:00
padding: 2px;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #ffffff;
}
2013-03-18 06:26:24 +00:00
.claro .dijitSelectMenu .dijitMenuItemSelected td, .claro .dijitComboBoxMenu .dijitMenuItemSelected {
2012-08-14 14:59:10 +00:00
color: #000000;
border-color: #759dc0;
background-color: #abd6ff;
}
2013-03-18 06:26:24 +00:00
.claro .dijitSelectMenu .dijitMenuItemHover td, .claro .dijitComboBoxMenu .dijitMenuItemHover {
2011-11-08 16:40:44 +00:00
color: #000000;
border-color: #769dc0;
background-color: #abd6ff;
}
.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
2012-08-14 14:59:10 +00:00
background-color: #7dbdfa;
2011-11-08 16:40:44 +00:00
/* TODO: why is this a different color than normal .dijitMenuItemSelected? */
}
.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
2011-11-08 16:40:44 +00:00
font-style: italic;
}