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, .toolbar .toolbar-item:focus {
24 text-decoration: underline;
30 .toolbar .toolbar-bar {
31 background-color: #0f0f0f;
32 box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
35 [dir="rtl"] .toolbar .toolbar-bar {
36 box-shadow: 1px 0 3px 1px rgba(0, 0, 0, 0.3333);
38 .toolbar .toolbar-bar .toolbar-item {
41 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item {
44 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
45 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
46 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
47 background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
49 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
50 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
51 background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
57 .toolbar .toolbar-tray {
58 background-color: #ffffff;
60 .toolbar .toolbar-tray-horizontal > .toolbar-lining {
61 padding-right: 5em; /* LTR */
63 [dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining {
67 .toolbar .toolbar-tray-vertical {
68 background-color: #f5f5f5;
69 border-right: 1px solid #aaaaaa; /* LTR */
70 box-shadow: -1px 0 5px 2px rgba(0, 0, 0, 0.3333); /* LTR */
72 [dir="rtl"] .toolbar .toolbar-tray-vertical {
73 border-left: 1px solid #aaaaaa;
75 box-shadow: 1px 0 5px 2px rgba(0, 0, 0, 0.3333);
77 .toolbar .toolbar-tray-horizontal {
78 border-bottom: 1px solid #aaaaaa;
79 box-shadow: -2px 1px 3px 1px rgba(0, 0, 0, 0.3333); /* LTR */
81 [dir="rtl"] .toolbar .toolbar-tray-horizontal {
82 box-shadow: 2px 1px 3px 1px rgba(0, 0, 0, 0.3333);
84 .toolbar .toolbar-tray-horizontal .toolbar-tray {
85 background-color: #f5f5f5;
90 padding: 1em 1.3333em;
91 text-decoration: none;
93 .toolbar-tray a:hover,
94 .toolbar-tray a:active,
95 .toolbar-tray a:focus,
96 .toolbar-tray a.is-active
99 text-decoration: underline;
101 .toolbar .toolbar-menu {
102 background-color: #ffffff;
104 .toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
105 border-left: 1px solid #dddddd; /* LTR */
107 [dir="rtl"] .toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
108 border-left: 0 none ;
109 border-right: 1px solid #dddddd;
111 .toolbar .toolbar-tray-horizontal .menu-item:last-child {
112 border-right: 1px solid #dddddd; /* LTR */
114 [dir="rtl"] .toolbar .toolbar-tray-horizontal .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 .toolbar-tray-horizontal .toolbar-toggle-orientation {
153 border-left: 1px solid #c9c9c9; /* LTR */
155 [dir="rtl"] .toolbar .toolbar-tray-horizontal .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;