mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-10 01:40:17 +01:00
250 lines
6.7 KiB
CSS
250 lines
6.7 KiB
CSS
/********** Tab widget *********/
|
|
/*******************************/
|
|
/* This Mac-specific CSS styles tabs that are located on the top of their content,
|
|
* as Macintosh tabs generally are. An example of using bottom tab images can be
|
|
* found in EditorToolbar.css in classic/editor/.
|
|
*******************************/
|
|
|
|
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
|
|
|
/*** TAB: TOP <tab> ***/
|
|
|
|
tab {
|
|
-moz-appearance: tab;
|
|
-moz-box-align: stretch;
|
|
}
|
|
|
|
/* we use |tab-left-edge| for all 3, which is not drawn in the theme impl
|
|
* and let the |tab| take care of everything.
|
|
*/
|
|
.tab-image-left {
|
|
-moz-appearance: tab-left-edge;
|
|
background : url(chrome://global/skin/tabbox/tab-unselect-left.gif) no-repeat;
|
|
width : 11px;
|
|
height : 25px;
|
|
}
|
|
|
|
.tab-image-middle {
|
|
-moz-appearance: tab-left-edge;
|
|
background-color : #CECECE;
|
|
border-top : 3px solid;
|
|
border-bottom : 3px solid;
|
|
-moz-border-top-colors: #000000 #CECECE #DEDEDE;
|
|
-moz-border-bottom-colors: #FFFFFF #CECECE #000000;
|
|
}
|
|
|
|
.tab-image-right {
|
|
-moz-appearance: tab-left-edge;
|
|
background : url(chrome://global/skin/tabbox/tab-unselect-right.gif) no-repeat;
|
|
width : 12px;
|
|
height : 25px;
|
|
}
|
|
|
|
.tab-text {
|
|
font : menu;
|
|
}
|
|
|
|
tab:hover:active > .tab-image-left {
|
|
background : url(chrome://global/skin/tabbox/tab-unselect-active-left.gif) no-repeat;
|
|
}
|
|
|
|
tab:hover:active > .tab-image-middle {
|
|
background-color: #666666;
|
|
-moz-border-top-colors: #000000 #444444 #555555;
|
|
-moz-border-bottom-colors: #FFFFFF #CCCCCC #000000;
|
|
}
|
|
|
|
tab:hover:active > .tab-image-right {
|
|
background : url(chrome://global/skin/tabbox/tab-unselect-active-right.gif) no-repeat;
|
|
}
|
|
|
|
/* when a tab is selected this is how it should look */
|
|
|
|
tab[selected="true"] > .tab-image-left,
|
|
tab[selected="true"]:hover:active > .tab-image-left {
|
|
background : url(chrome://global/skin/tabbox/tab-select-left.gif) no-repeat;
|
|
}
|
|
|
|
tab[selected="true"] > .tab-image-middle,
|
|
tab[selected="true"]:hover:active > .tab-image-middle {
|
|
background-color: #EEEEEE;
|
|
-moz-border-top-colors: #000000 #CCCCCC #FFFFFF;
|
|
-moz-border-bottom-colors: #EEEEEE;
|
|
}
|
|
|
|
tab[selected="true"] > .tab-image-right,
|
|
tab[selected="true"]:hover:active > .tab-image-right {
|
|
background : url(chrome://global/skin/tabbox/tab-select-right.gif) no-repeat;
|
|
}
|
|
|
|
.tab-border-top-left {
|
|
-moz-appearance: dialog;
|
|
background-color : #DEDEDE;
|
|
border-bottom : 3px solid;
|
|
-moz-border-bottom-colors: #FFFFFF #CECECE #000000;
|
|
width : 3px;
|
|
}
|
|
|
|
.tab-border-top-right {
|
|
-moz-appearance: dialog;
|
|
background-color : #DEDEDE;
|
|
border-bottom : 3px solid;
|
|
-moz-border-bottom-colors: #FFFFFF #CECECE #000000;
|
|
}
|
|
|
|
.tab-border-top-left-cap, .tab-border-top-right-cap {
|
|
-moz-appearance: dialog;
|
|
background-color : #DEDEDE;
|
|
border-bottom : 3px solid;
|
|
-moz-border-bottom-colors: #000000;
|
|
width : 1px;
|
|
}
|
|
|
|
tabs {
|
|
padding : 0px;
|
|
}
|
|
|
|
/*** TAB: BOTTOM <tab class="tab-bottom"> ***/
|
|
/* Found in editor.xul & editorOverlay.xul
|
|
* SMALL TABS FOR NOW */
|
|
|
|
.tab-bottom > .tab-image-left {
|
|
background : url(chrome://global/skin/tabbox/tab-sm-bot-unsel-left.gif) no-repeat;
|
|
width : 11px;
|
|
height : 22px;
|
|
}
|
|
|
|
.tab-bottom > .tab-image-middle {
|
|
-moz-border-top-colors: #FFFFFF #CECECE #000000;
|
|
-moz-border-bottom-colors: #000000 #CECECE #DEDEDE;
|
|
}
|
|
|
|
.tab-bottom > .tab-image-right {
|
|
background : url(chrome://global/skin/tabbox/tab-sm-bot-unsel-right.gif) no-repeat;
|
|
width : 11px;
|
|
height : 22px;
|
|
}
|
|
|
|
.tab-bottom > .tab-image-middle > .tab-text {
|
|
font : message-box;
|
|
font-weight : bold;
|
|
padding : 0px;
|
|
margin : 0px !important;
|
|
}
|
|
|
|
.tab-bottom:hover:active > .tab-image-left {
|
|
background : url(chrome://global/skin/tabbox/tab-sm-bot-unsel-acti-left.gif) no-repeat;
|
|
}
|
|
|
|
.tab-bottom:hover:active > .tab-image-middle {
|
|
background-color: #666666;
|
|
-moz-border-top-colors: #FFFFFF #CCCCCC #000000;
|
|
-moz-border-bottom-colors: #000000 #444444 #555555;
|
|
}
|
|
|
|
.tab-bottom:hover:active > .tab-image-right {
|
|
background : url(chrome://global/skin/tabbox/tab-sm-bot-unsel-acti-right.gif) no-repeat;
|
|
}
|
|
|
|
/* when a tab is selected this is how it should look */
|
|
|
|
.tab-bottom[selected="true"] > .tab-image-left,
|
|
.tab-bottom[selected="true"]:hover:active > .tab-image-left {
|
|
background : url(chrome://global/skin/tabbox/tab-sm-bot-sel-left.gif) no-repeat;
|
|
}
|
|
|
|
.tab-bottom[selected="true"] > .tab-image-middle,
|
|
.tab-bottom[selected="true"]:hover:active > .tab-image-middle {
|
|
background-color: #EEEEEE;
|
|
-moz-border-top-colors: #EEEEEE;
|
|
-moz-border-bottom-colors: #000000 #CCCCCC #FFFFFF;
|
|
}
|
|
|
|
.tab-bottom[selected="true"] > .tab-image-right,
|
|
.tab-bottom[selected="true"]:hover:active > .tab-image-right {
|
|
background : url(chrome://global/skin/tabbox/tab-sm-bot-sel-right.gif) no-repeat;
|
|
}
|
|
|
|
.tabs-bottom > .tab-border-top-left {
|
|
-moz-appearance: dialog;
|
|
background-color : #DEDEDE;
|
|
border-bottom : 0px;
|
|
border-top : 3px solid;
|
|
-moz-border-top-colors: #FFFFFF #CECECE #000000;
|
|
width : 3px;
|
|
}
|
|
|
|
.tabs-bottom > stack > .tab-border-top-right {
|
|
-moz-appearance: dialog;
|
|
background-color : #DEDEDE;
|
|
border-bottom : 0px;
|
|
border-top : 3px solid;
|
|
-moz-border-top-colors: #FFFFFF #CECECE #000000;
|
|
}
|
|
|
|
.tabs-bottom > .tab-border-top-left-cap, .tabs-bottom > .tab-border-top-right-cap {
|
|
-moz-appearance: dialog;
|
|
background-color : #DEDEDE;
|
|
border-bottom : 0px;
|
|
border-top : 3px solid;
|
|
-moz-border-top-colors: #000000;
|
|
width : 1px;
|
|
}
|
|
|
|
/* top tabs */
|
|
tabbox[orient="vertical"] tabs[orient="horizontal"] tab {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
/* bottom tabs */
|
|
tabbox[orient="vertical"] tabpanels + tabs[orient="horizontal"] tab {
|
|
border-top: none;
|
|
border-bottom: 1px solid #666666;
|
|
border-left: 1px solid white;
|
|
border-right: 1px solid #666666;
|
|
-moz-border-radius: 0px 0px 8px 8px;
|
|
padding: 1px 5px 3px 5px;
|
|
margin: 1px 2px 1px 2px;
|
|
}
|
|
|
|
/* left tabs */
|
|
tabbox[orient="horizontal"] tabs[orient="vertical"] tab {
|
|
border-right: none;
|
|
-moz-border-radius: 8px 0px 0px 8px;
|
|
padding-right: 1px;
|
|
margin: 2px 1px 2px 1px;
|
|
}
|
|
|
|
/* right tabs */
|
|
tabbox[orient="horizontal"] tabpanels + tabs[orient="vertical"] tab {
|
|
border-top: 1px solid white;
|
|
border-bottom: 1px solid #666666;
|
|
border-left: none;
|
|
border-right: 1px solid #666666;
|
|
-moz-border-radius: 0px 8px 8px 0px;
|
|
padding: 3px 5px 1px 5px;
|
|
margin: 2px 1px 2px 1px;
|
|
}
|
|
|
|
tabbox {
|
|
border: none;
|
|
}
|
|
|
|
/* border on bottom only, no padding (used in search) */
|
|
tabpanels.light {
|
|
border: none;
|
|
border-bottom: 1px outset #CCCCCC;
|
|
padding: 0px;
|
|
}
|
|
|
|
tabpanels {
|
|
-moz-appearance: tabpanels;
|
|
border-top: 0px;
|
|
border-bottom: 2px ridge #000000;
|
|
border-left: 2px groove #000000;
|
|
border-right: 2px ridge #000000;
|
|
padding: 5px;
|
|
background-color : #EEEEEE;
|
|
}
|