Merge backout of changeset 764a4259b9f7.

This commit is contained in:
Markus Stange 2011-08-08 17:38:05 +02:00
commit 576b54fbd8
13 changed files with 234 additions and 78 deletions

View File

@ -1008,7 +1008,7 @@
<svg:svg height="0">
<svg:mask id="pinstripe-keyhole-forward-mask" maskContentUnits="objectBoundingBox">
<svg:rect x="0" y="0" width="1" height="1" fill="white"/>
<svg:circle cx="-0.41" cy="0.5" r="0.65"/>
<svg:circle cx="-0.46" cy="0.48" r="0.65"/>
</svg:mask>
<svg:mask id="pinstripe-tab-ontop-left-curve-mask" maskContentUnits="userSpaceOnUse">
<svg:circle cx="9" cy="3" r="3" fill="white"/>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

View File

@ -293,22 +293,21 @@ toolbarbutton.bookmark-item > menupopup {
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
#restore-button {
-moz-box-orient: vertical;
-moz-appearance: toolbarbutton;
padding: 0 3px;
height: 22px;
padding: 0;
border: 0;
border: 1px solid @toolbarbuttonBorderColor@;
border-radius: @toolbarbuttonCornerRadius@;
box-shadow: 0 1px rgba(255, 255, 255, 0.2);
background: @toolbarbuttonBackground@;
background-origin: border-box;
}
.toolbarbutton-1:not([type="menu-button"]):-moz-lwtheme,
.toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-lwtheme,
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme,
#restore-button:-moz-lwtheme {
-moz-appearance: none;
padding: 0 3px;
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: @toolbarbuttonCornerRadius@;
background: -moz-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2)) repeat-x;
background-origin: border-box;
border-color: rgba(0, 0, 0, 0.4);
background-image: -moz-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2));
box-shadow: inset 0 1px rgba(255,255,255,0.3), 0 1px rgba(255,255,255,0.2);
}
@ -338,7 +337,6 @@ toolbar:not([mode="icons"]) .toolbarbutton-1:not([type="menu-button"]),
toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
toolbar:not([mode="icons"]) #restore-button {
-moz-appearance: none;
padding: 0;
height: auto;
border: none;
@ -410,6 +408,16 @@ toolbar:not([mode="icons"]) .toolbarbutton-1:not([open="true"]) > .toolbarbutton
margin: 2px 0 0;
}
toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):active:hover:not(:-moz-lwtheme),
toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"])[open="true"]:not(:-moz-lwtheme),
toolbar[mode="icons"] .toolbarbutton-1:not([disabled="true"]) > .toolbarbutton-menubutton-button:active:hover:not(:-moz-lwtheme),
toolbar[mode="icons"] .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not(:-moz-lwtheme),
toolbar[mode="icons"] #restore-button:not([disabled="true"]):active:hover:not(:-moz-lwtheme) {
background: @toolbarbuttonPressedBackgroundColor@;
text-shadow: @loweredShadow@;
box-shadow: @toolbarbuttonPressedInnerShadow@, @loweredShadow@;
}
toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):active:hover:-moz-lwtheme,
toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"])[open="true"]:-moz-lwtheme,
toolbar[mode="icons"] .toolbarbutton-1:not([disabled="true"]) > .toolbarbutton-menubutton-button:active:hover:-moz-lwtheme,
@ -420,16 +428,39 @@ toolbar[mode="icons"] #restore-button:not([disabled="true"]):active:hover:-moz-l
box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2);
}
toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:not(:-moz-lwtheme) {
background: #606060;
box-shadow: inset #2A2A2A 0 3px 3.5px, @loweredShadow@;
}
toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:-moz-lwtheme {
background-color: rgba(0,0,0,0.4);
box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), 0 1px rgba(255,255,255,0.2);
}
toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:not([disabled="true"]):active:hover:not(:-moz-lwtheme) {
background: #4E4E4E;
box-shadow: inset #1c1c1c 0 3px 3.5px;
}
toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:not([disabled="true"]):active:hover:-moz-lwtheme {
background-color: rgba(0, 0, 0, 0.6);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 255, 0.2);
}
toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):-moz-window-inactive:not(:-moz-lwtheme),
toolbar[mode="icons"] .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-window-inactive:not(:-moz-lwtheme),
toolbar[mode="icons"] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-window-inactive:not(:-moz-lwtheme),
toolbar[mode="icons"] #restore-button:-moz-window-inactive:not(:-moz-lwtheme) {
border-color: @toolbarbuttonInactiveBorderColor@;
background-image: @toolbarbuttonInactiveBackgroundImage@;
}
toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:-moz-window-inactive {
background: #8E8E8E;
box-shadow: inset rgba(0, 0, 0, 0.5) 0 3px 3.5px, @loweredShadow@;
}
toolbar[mode="icons"] .toolbarbutton-1 > menupopup {
margin-top: 1px;
}
@ -446,28 +477,17 @@ toolbar[mode="icons"] .toolbarbutton-1 > menupopup {
}
#back-button,
#forward-button:-moz-locale-dir(rtl),
toolbar[mode="icons"] #back-button:-moz-locale-dir(rtl):-moz-lwtheme {
toolbar:not([mode="icons"]) #forward-button:-moz-locale-dir(rtl) {
-moz-image-region: rect(0, 40px, 20px, 20px);
}
#forward-button,
#back-button:-moz-locale-dir(rtl),
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
toolbar:not([mode="icons"]) #back-button:-moz-locale-dir(rtl) {
-moz-image-region: rect(0, 60px, 20px, 40px);
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:-moz-locale-dir(rtl),
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
toolbar[mode="icons"] #back-button:-moz-locale-dir(rtl):-moz-lwtheme,
toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
-moz-transform: scaleX(-1);
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
-moz-appearance: none;
-moz-margin-end: -7px;
-moz-margin-end: -5px;
position: relative;
z-index: 1;
-moz-image-region: rect(0, 20px, 20px, 0);
@ -477,45 +497,31 @@ toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
border-radius: 10000px;
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not(:-moz-lwtheme) {
height: 31px;
padding: 4px 5px 5px 3px;
margin-bottom: -1px;
background: url(chrome://browser/skin/keyhole-circle.png) 0 0 no-repeat;
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:-moz-window-inactive:not(:-moz-lwtheme) {
background-position: -60px 0;
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not([disabled="true"]):active:hover:not(:-moz-lwtheme),
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button[open="true"]:not(:-moz-lwtheme) {
background-position: -30px 0;
toolbar[mode="icons"] #back-button:-moz-locale-dir(rtl),
toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl) {
-moz-transform: scaleX(-1);
}
toolbar[mode="icons"] #forward-button {
-moz-margin-start: 0;
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button > .toolbarbutton-icon {
/* shift the icon away from the back button */
margin-left: 3px;
margin-right: -1px;
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button {
/* 1px to the right */
padding-left: 4px;
padding-right: 2px;
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button {
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-lwtheme {
mask: url(chrome://browser/content/browser.xul#pinstripe-keyhole-forward-mask);
}
#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #forward-button {
width: 27px;
}
#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #forward-button:-moz-lwtheme {
padding-left: 2px;
}
toolbar[mode="icons"] #forward-button:-moz-lwtheme {
toolbar[mode="icons"] #forward-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
@ -523,9 +529,6 @@ toolbar[mode="icons"] #forward-button:-moz-lwtheme {
#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #back-button {
-moz-margin-end: 0;
width: 26px;
}
#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #back-button:-moz-lwtheme {
padding-right: 2px;
border-right-width: 0;
border-top-right-radius: 0;
@ -1953,12 +1956,11 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1,
:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
:-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
-moz-appearance: none;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
/* !important flags needed because of bug 561154: */
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}

View File

@ -42,7 +42,6 @@ browser.jar:
skin/classic/browser/section_collapsed-rtl.png
skin/classic/browser/section_expanded.png
skin/classic/browser/Secure-Glyph-White.png
skin/classic/browser/keyhole-circle.png
skin/classic/browser/Toolbar.png
skin/classic/browser/toolbarbutton-dropmarker.png
skin/classic/browser/urlbar-arrow.png
@ -135,8 +134,3 @@ browser.jar:
skin/classic/browser/syncCommon.css
skin/classic/browser/syncQuota.css
#endif
skin/classic/browser/lion/keyhole-circle.png (keyhole-circle-lion.png)
skin/classic/browser/lion/Toolbar.png (Toolbar-lion.png)
% override chrome://browser/skin/keyhole-circle.png chrome://browser/skin/lion/keyhole-circle.png os=Darwin osversion>=10.7
% override chrome://browser/skin/Toolbar.png chrome://browser/skin/lion/Toolbar.png os=Darwin osversion>=10.7

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -80,9 +80,33 @@
#placesToolbar > toolbarbutton {
list-style-image: url("chrome://browser/skin/places/toolbar.png");
margin: 4px 4px 5px;
padding: 0;
height: 22px;
-moz-appearance: toolbarbutton;
padding: 1px 3px;
border: 1px solid @toolbarbuttonBorderColor@;
border-radius: @toolbarbuttonCornerRadius@;
box-shadow: @loweredShadow@;
background: @toolbarbuttonBackground@;
background-origin: border-box;
}
#placesToolbar > toolbarbutton:not([disabled="true"]):active:hover,
#placesToolbar > toolbarbutton[open="true"] {
background: @toolbarbuttonPressedBackgroundColor@;
text-shadow: @loweredShadow@;
box-shadow: @toolbarbuttonPressedInnerShadow@, @loweredShadow@;
}
#placesToolbar > toolbarbutton:-moz-focusring {
border-color: @toolbarbuttonFocusedBorderColorAqua@;
box-shadow: @focusRingShadow@;
}
#placesToolbar > toolbarbutton:-moz-system-metric(mac-graphite-theme):-moz-focusring {
border-color: @toolbarbuttonFocusedBorderColorGraphite@;
}
#placesToolbar > toolbarbutton:-moz-window-inactive {
border-color: @toolbarbuttonInactiveBorderColor@;
background-image: @toolbarbuttonInactiveBackgroundImage@;
}
#placesToolbar > toolbarbutton[disabled="true"] > .toolbarbutton-icon {
@ -112,12 +136,17 @@
#back-button:-moz-locale-dir(ltr),
#forward-button:-moz-locale-dir(rtl) {
-moz-image-region: rect(0px, 16px, 16px, 0px);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-right: 0;
border-right: 0;
}
#forward-button:-moz-locale-dir(ltr),
#back-button:-moz-locale-dir(rtl) {
-moz-image-region: rect(0px, 32px, 16px, 16px);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: 0;
}

View File

@ -203,9 +203,24 @@ toolbarseparator {
#Console\:clear {
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-appearance: toolbarbutton;
font: menu;
text-shadow: @loweredShadow@;
margin: 4px 0 9px;
padding: 0 1px;
padding: 0 4px;
border: 1px solid @toolbarbuttonBorderColor@;
border-radius: @toolbarbuttonCornerRadius@;
box-shadow: @loweredShadow@;
background: @toolbarbuttonBackground@;
background-origin: border-box;
}
#Console\:clear:active:hover {
background: @toolbarbuttonPressedBackgroundColor@;
text-shadow: @loweredShadow@;
box-shadow: @toolbarbuttonPressedInnerShadow@, @loweredShadow@;
}
#Console\:clear:-moz-window-inactive {
border-color: @toolbarbuttonInactiveBorderColor@;
background-image: @toolbarbuttonInactiveBackgroundImage@;
}

View File

@ -24,7 +24,12 @@
%define sidebarItemInactiveBorderTop 1px solid #979797
%define sidebarItemInactiveBackground -moz-linear-gradient(top, #B4B4B4, #8A8A8A) repeat-x
%define toolbarbuttonBorderColor rgba(59, 59, 59, 0.9)
%define toolbarbuttonCornerRadius 3px
%define toolbarbuttonBackground -moz-linear-gradient(top, #FFF, #ADADAD) repeat-x
%define toolbarbuttonFocusedBorderColorAqua rgba(102, 122, 155, 0.9)
%define toolbarbuttonFocusedBorderColorGraphite rgba(59, 59, 59, 0.7)
%define toolbarbuttonPressedInnerShadow inset rgba(0, 0, 0, 0.3) 0 -6px 10px, inset #000 0 1px 3px, inset rgba(0, 0, 0, 0.2) 0 1px 3px
%define toolbarbuttonPressedBackgroundColor #B5B5B5
%define toolbarbuttonInactiveBorderColor rgba(146, 146, 146, 0.84)
%define toolbarbuttonInactiveBackgroundImage -moz-linear-gradient(top, #FFF, #CCC)

View File

@ -86,15 +86,13 @@ toolbarbutton[checked="true"] {
border: none !important;
background-color: transparent !important;
list-style-image: url("chrome://global/skin/arrow/arrow-dn.png");
padding: 0;
-moz-padding-start: 2px;
padding: 0 0 0 2px;
width: auto;
}
.toolbarbutton-menu-dropmarker[disabled="true"] {
list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.png");
padding: 0;
-moz-padding-start: 2px;
padding: 0 0 0 2px !important;
}
/* ::::: toolbarbutton menu-button ::::: */
@ -124,7 +122,7 @@ toolbarbutton[type="menu-button"][disabled="true"]:hover:active {
/* .......... dropmarker .......... */
.toolbarbutton-menubutton-dropmarker {
-moz-appearance: none;
-moz-appearance: none !important;
border: none;
background-color: transparent !important;
list-style-image: url("chrome://global/skin/arrow/arrow-dn.png");

View File

@ -46,6 +46,10 @@
}
#viewGroup {
background-color: rgba(0, 0, 0, 0.55);
padding: 1px;
border-radius: @toolbarbuttonCornerRadius@;
box-shadow: @loweredShadow@;
margin: 4px 0 9px;
}
@ -53,16 +57,74 @@
#viewGroup > toolbarbutton {
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-appearance: toolbarbutton;
-moz-appearance: none;
font: menu;
text-shadow: @loweredShadow@;
margin: 0;
padding: 0 1px;
height: 22px;
padding: 0 4px;
border: none;
border-left: 1px solid rgba(0, 0, 0, 0.8);
background: @toolbarbuttonBackground@;
}
#viewGroup > radio:active:hover,
#viewGroup > toolbarbutton:active:hover {
background: @toolbarbuttonPressedBackgroundColor@;
text-shadow: @loweredShadow@;
box-shadow: @toolbarbuttonPressedInnerShadow@;
}
#viewGroup > radio[selected=true],
#viewGroup > toolbarbutton[checked=true] {
color: #FFF !important;
text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
background: #606060;
box-shadow: inset #2A2A2A 0 3px 3.5px;
}
#viewGroup > radio[selected=true]:active:hover,
#viewGroup > toolbarbutton[checked=true]:active:hover {
background-color: #4E4E4E;
box-shadow: inset #1c1c1c 0 3px 3.5px;
}
#viewGroup:-moz-window-inactive {
background-color: rgba(0, 0, 0, 0.25);
}
#viewGroup > radio:-moz-window-inactive,
#viewGroup > toolbarbutton:-moz-window-inactive {
border-color: rgba(0, 0, 0, 0.4);
background-image: @toolbarbuttonInactiveBackgroundImage@;
}
#viewGroup > radio[selected=true]:-moz-window-inactive,
#viewGroup > toolbarbutton[checked=true]:-moz-window-inactive {
background: #8E8E8E;
box-shadow: inset rgba(0, 0, 0, 0.5) 0 3px 3.5px;
}
#viewGroup > radio:-moz-locale-dir(ltr):first-child,
#viewGroup > radio:-moz-locale-dir(ltr)[first-visible],
#viewGroup > radio:-moz-locale-dir(rtl):last-child,
#viewGroup > radio:-moz-locale-dir(rtl)[last-visible],
#viewGroup > toolbarbutton:-moz-locale-dir(ltr):first-child,
#viewGroup > toolbarbutton:-moz-locale-dir(ltr)[first-visible],
#viewGroup > toolbarbutton:-moz-locale-dir(rtl):last-child,
#viewGroup > toolbarbutton:-moz-locale-dir(rtl)[last-visible] {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-left: none !important;
}
#viewGroup > radio:-moz-locale-dir(ltr):last-child,
#viewGroup > radio:-moz-locale-dir(ltr)[last-visible],
#viewGroup > radio:-moz-locale-dir(rtl):first-child,
#viewGroup > radio:-moz-locale-dir(rtl)[first-visible],
#viewGroup > toolbarbutton:-moz-locale-dir(ltr):last-child,
#viewGroup > toolbarbutton:-moz-locale-dir(ltr)[last-visible],
#viewGroup > toolbarbutton:-moz-locale-dir(rtl):first-child,
#viewGroup > toolbarbutton:-moz-locale-dir(rtl)[first-visible] {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}

View File

@ -111,9 +111,35 @@ richlistitem[type="download"] button {
}
#clearListButton {
-moz-appearance: toolbarbutton;
-moz-appearance: none;
min-height: 18px;
min-width: 0;
margin: 0 6px;
padding: 0 2px;
text-shadow: @loweredShadow@;
border: 1px solid @toolbarbuttonBorderColor@;
border-radius: @toolbarbuttonCornerRadius@;
box-shadow: @loweredShadow@;
background: @toolbarbuttonBackground@;
background-origin: border-box;
}
#clearListButton:hover:active:not([disabled="true"]) {
background: @toolbarbuttonPressedBackgroundColor@;
text-shadow: @loweredShadow@;
box-shadow: @toolbarbuttonPressedInnerShadow@, @loweredShadow@;
}
#clearListButton:-moz-focusring {
border-color: @toolbarbuttonFocusedBorderColorAqua@;
box-shadow: @focusRingShadow@;
}
#clearListButton:-moz-system-metric(mac-graphite-theme):-moz-focusring {
border-color: @toolbarbuttonFocusedBorderColorGraphite@;
}
#clearListButton:-moz-window-inactive {
border-color: @toolbarbuttonInactiveBorderColor@;
background-image: @toolbarbuttonInactiveBackgroundImage@;
}

View File

@ -39,11 +39,36 @@ wizardpage {
}
.wizard-buttons button {
-moz-appearance: toolbarbutton;
-moz-appearance: none;
min-height: 22px;
margin: 0 6px;
padding: 0;
padding: 0 2px;
text-shadow: @loweredShadow@;
border: 1px solid @toolbarbuttonBorderColor@;
border-radius: @toolbarbuttonCornerRadius@;
box-shadow: @loweredShadow@;
background: @toolbarbuttonBackground@;
background-origin: border-box;
}
.wizard-buttons button:hover:active:not([disabled="true"]) {
background: @toolbarbuttonPressedBackgroundColor@;
text-shadow: @loweredShadow@;
box-shadow: @toolbarbuttonPressedInnerShadow@, @loweredShadow@;
}
.wizard-buttons button:-moz-focusring {
border-color: @toolbarbuttonFocusedBorderColorAqua@;
box-shadow: @focusRingShadow@;
}
.wizard-buttons button:-moz-system-metric(mac-graphite-theme):-moz-focusring {
border-color: @toolbarbuttonFocusedBorderColorGraphite@;
}
.wizard-buttons button:-moz-window-inactive {
border-color: @toolbarbuttonInactiveBorderColor@;
background-image: @toolbarbuttonInactiveBackgroundImage@;
}
.loadingBox {