2 * @file toolbar.theme.css
5 font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
6 /* Set base font size to 13px based on root ems. */
8 -moz-tap-highlight-color: rgba(0,0,0,0);
9 -o-tap-highlight-color: rgba(0,0,0,0);
10 -webkit-tap-highlight-color: rgba(0,0,0,0);
11 tap-highlight-color: rgba(0,0,0,0);
12 -moz-touch-callout: none;
13 -o-touch-callout: none;
14 -webkit-touch-callout: none;
17 .toolbar .toolbar-item {
19 padding: 1em 1.3333em;
21 text-decoration: none;
23 .toolbar .toolbar-item:hover,
24 .toolbar .toolbar-item:focus {
25 text-decoration: underline;
31 .toolbar .toolbar-bar {
32 background-color: #0f0f0f;
33 box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
36 [dir="rtl"] .toolbar .toolbar-bar {
37 box-shadow: 1px 0 3px 1px rgba(0, 0, 0, 0.3333);
39 .toolbar .toolbar-bar .toolbar-item {
42 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item {
45 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
46 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
47 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
48 background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
50 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
51 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
52 background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
58 .toolbar .toolbar-tray {
59 background-color: #ffffff;
61 .toolbar-horizontal .toolbar-tray > .toolbar-lining {
62 padding-right: 5em; /* LTR */
64 [dir="rtl"] .toolbar-horizontal .toolbar-tray > .toolbar-lining {
68 .toolbar .toolbar-tray-vertical {
69 background-color: #f5f5f5;
70 border-right: 1px solid #aaaaaa; /* LTR */
71 box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
73 [dir="rtl"] .toolbar .toolbar-tray-vertical {
74 border-left: 1px solid #aaaaaa;
76 box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
78 .toolbar-horizontal .toolbar-tray {
79 border-bottom: 1px solid #aaaaaa;
80 box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
82 [dir="rtl"] .toolbar-horizontal .toolbar-tray {
83 box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);
85 .toolbar .toolbar-tray-horizontal .toolbar-tray {
86 background-color: #f5f5f5;
91 padding: 1em 1.3333em;
92 text-decoration: none;
94 .toolbar-tray a:hover,
95 .toolbar-tray a:active,
96 .toolbar-tray a:focus,
97 .toolbar-tray a.is-active {
99 text-decoration: underline;
101 .toolbar .toolbar-menu {
102 background-color: #ffffff;
104 .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
105 border-left: 1px solid #dddddd; /* LTR */
107 [dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item + .menu-item {
109 border-right: 1px solid #dddddd;
111 .toolbar-horizontal .toolbar-tray .menu-item:last-child {
112 border-right: 1px solid #dddddd; /* LTR */
114 [dir="rtl"] .toolbar-horizontal .toolbar-tray .menu-item:last-child {
115 border-left: 1px solid #dddddd;
117 .toolbar .toolbar-tray-vertical .menu-item + .menu-item {
118 border-top: 1px solid #dddddd;
120 .toolbar .toolbar-tray-vertical .menu-item:last-child {
121 border-bottom: 1px solid #dddddd;
123 .toolbar .toolbar-tray-vertical .menu-item .menu-item {
126 .toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
127 border-bottom: 1px solid #dddddd;
128 border-top: 1px solid #dddddd;
130 .toolbar .toolbar-tray-vertical .menu-item:last-child > ul {
133 .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
134 margin-left: 0.25em; /* LTR */
136 [dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
138 margin-right: 0.25em;
140 .toolbar .toolbar-menu .toolbar-menu a {
145 * Orientation toggle.
147 .toolbar .toolbar-toggle-orientation {
148 background-color: #f5f5f5;
152 .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
153 border-left: 1px solid #c9c9c9; /* LTR */
155 [dir="rtl"] .toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
157 border-right: 1px solid #c9c9c9;
159 .toolbar .toolbar-toggle-orientation > .toolbar-lining {
160 float: right; /* LTR */
162 [dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
165 .toolbar .toolbar-toggle-orientation button {
167 display: inline-block;