1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/themes/osx/global/tabbox.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,150 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/*
1.9 + The default style of these tabs is that of an NSTabView with tabs at
1.10 + the top in the "regular" size. These tabs can be used with or without
1.11 + a tabbox element.
1.12 + For bottom tabs you should use the "tabs-bottom" class on the tabbox
1.13 + or the tabs element. Bottom tabs use a style that's similar to the
1.14 + one used in Adium.
1.15 +*/
1.16 +
1.17 +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
1.18 +
1.19 +tabbox {
1.20 + margin: 0 5px;
1.21 +}
1.22 +
1.23 +tabpanels {
1.24 + -moz-appearance: tabpanels;
1.25 + padding: 33px 15px 15px;
1.26 +}
1.27 +
1.28 +tabs {
1.29 + -moz-box-align: center;
1.30 + font: menu;
1.31 +}
1.32 +
1.33 +tabbox > tabs {
1.34 + padding: 0 10px;
1.35 + margin-bottom: -12px;
1.36 + position: relative;
1.37 +}
1.38 +
1.39 +tab {
1.40 + -moz-appearance: tab;
1.41 +}
1.42 +
1.43 +tab:-moz-focusring {
1.44 + /* Tab focus rings need to overlay adjacent tabs. */
1.45 + position: relative;
1.46 +}
1.47 +
1.48 +tab:first-of-type {
1.49 + -moz-padding-start: 2px;
1.50 +}
1.51 +
1.52 +tab:last-of-type {
1.53 + -moz-padding-end: 2px;
1.54 +}
1.55 +
1.56 +@media (-moz-mac-lion-theme) {
1.57 + tab[selected="true"] {
1.58 + color: #FFF;
1.59 + text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
1.60 + }
1.61 +}
1.62 +
1.63 +.tab-middle {
1.64 + padding: 1px 6px 2px;
1.65 +}
1.66 +
1.67 +.tabs-left,
1.68 +.tabs-right {
1.69 + -moz-box-flex: 1;
1.70 +}
1.71 +
1.72 +/* Tabs at the bottom
1.73 + * These tabs are smaller, left aligned and don't extend into the tabpanel.
1.74 + */
1.75 +
1.76 +tabbox.tabs-bottom > tabpanels {
1.77 + padding: 10px;
1.78 +}
1.79 +
1.80 +tabbox.tabs-bottom > tabs,
1.81 +tabs.tabs-bottom {
1.82 + background-color: rgba(0, 0, 0, 0.1);
1.83 + padding: 0;
1.84 + margin: 0;
1.85 + border-top: 2px solid;
1.86 + -moz-border-top-colors: #888 rgba(0, 0, 0, 0.08);
1.87 + -moz-box-align: start;
1.88 + font: message-box;
1.89 +}
1.90 +
1.91 +tabbox.tabs-bottom > tabs > .tabs-left,
1.92 +tabs.tabs-bottom > .tabs-left {
1.93 + -moz-box-flex: 0;
1.94 +}
1.95 +
1.96 +tabbox.tabs-bottom > tabs > tab,
1.97 +tabs.tabs-bottom > tab {
1.98 + -moz-appearance: none;
1.99 + margin: -1px 0 0;
1.100 + padding: 0 0 2px 0;
1.101 + position: relative;
1.102 + -moz-border-end: 1px solid rgba(0, 0, 0, 0.19);
1.103 +}
1.104 +
1.105 +tabbox.tabs-bottom > tabs > tab > .tab-middle,
1.106 +tabs.tabs-bottom > tab > .tab-middle {
1.107 + padding: 1px 2px 0 2px;
1.108 +}
1.109 +
1.110 +tabbox.tabs-bottom > tabs > tab:not([selected=true]):hover,
1.111 +tabs.tabs-bottom > tab:not([selected=true]):hover {
1.112 + background-color: rgba(0, 0, 0, 0.1);
1.113 + -moz-border-end-color: rgba(0, 0, 0, 0.1);
1.114 +}
1.115 +
1.116 +tabbox.tabs-bottom > tabs > tab[selected=true],
1.117 +tabs.tabs-bottom > tab[selected=true] {
1.118 + color: #000;
1.119 + text-shadow: none;
1.120 + border: solid #888;
1.121 + border-width: 0 2px 2px;
1.122 + border-radius: 2px;
1.123 + -moz-border-left-colors: rgba(0, 0, 0, 0.08) #888;
1.124 + -moz-border-right-colors: rgba(0, 0, 0, 0.08) #888;
1.125 + -moz-border-bottom-colors: rgba(0, 0, 0, 0.08) #888;
1.126 + -moz-margin-end: -1px;
1.127 + margin-top: -2px;
1.128 + margin-bottom: 1px;
1.129 + padding: 0;
1.130 +}
1.131 +
1.132 +tabbox.tabs-bottom > tabs > tab[beforeselected=true],
1.133 +tabs.tabs-bottom > tab[beforeselected=true] {
1.134 + -moz-border-end-color: transparent;
1.135 + -moz-margin-end: -2px;
1.136 +}
1.137 +
1.138 +tabbox.tabs-bottom > tabs > tab:first-of-type:not([selected=true]),
1.139 +tabs.tabs-bottom > tab:first-of-type:not([selected=true]) {
1.140 + -moz-border-start: 4px solid transparent;
1.141 +}
1.142 +
1.143 +tabbox.tabs-bottom > tabs > tab:first-of-type[selected=true],
1.144 +tabs.tabs-bottom > tab:first-of-type[selected=true] {
1.145 + -moz-margin-start: 2px;
1.146 +}
1.147 +
1.148 +tabbox.tabs-bottom,
1.149 +tabbox.tabs-bottom > tabpanels,
1.150 +tabbox.tabs-bottom > tabs > tab[selected=true] > .tab-middle,
1.151 +tabs.tabs-bottom > tab[selected=true] > .tab-middle {
1.152 + -moz-appearance: dialog;
1.153 +}
