Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-16 23:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 613704 - Improve visual design for tab-modal buttons & dialog. r=dolske, a=dolske

Browse Source
This commit is contained in:
Frank Yan 2011-02-11 20:24:06 -08:00
parent 467c243faa
commit 1a3b0cf3c2
4 changed files with 72 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
toolkit/components/prompts/content/tabprompts.css
View File

@ -19,8 +19,6 @@ tabmodalprompt {
white-space: pre-wrap;
}
%ifdef XP_WIN
.buttonContainer {
-moz-box-pack: center;
label[value=""] {
visibility: collapse;
}
%endif

9
toolkit/components/prompts/content/tabprompts.xml
View File

@ -26,7 +26,7 @@
<spacer flex="1"/>
<hbox pack="center">
<vbox anonid="mainContainer" class="mainContainer">
<grid anonid="topContainer" class="topContainer" flex="1">
<grid class="topContainer" flex="1">
<columns>
<column/>
<column flex="1"/>
@ -64,7 +64,7 @@
<button anonid="button0" label="&okButton.label;"/>
#else
<button anonid="button3" hidden="true"/>
<spacer anonid="buttonSpacer" flex="1" hidden="true"/>
<spacer anonid="buttonSpacer" flex="1"/>
<button anonid="button0" label="&okButton.label;"/>
<button anonid="button2" hidden="true"/>
<button anonid="button1" label="&cancelButton.label;"/>
@ -220,7 +220,6 @@
return document.getAnonymousElementByAttribute(self, "anonid", anonid);
}
let main = getElement("mainContainer");
let top = getElement("topContainer");
let info = getElement("infoContainer");
let body = this.ui.infoBody;
@ -230,9 +229,9 @@
if (!this.minHeight)
this.minHeight = parseInt(window.getComputedStyle(main).minHeight);
let maxWidth = Math.max(Math.floor(availWidth * 0.6), this.minWidth) +
top.clientWidth - main.clientWidth;
info.clientWidth - main.clientWidth;
let maxHeight = Math.max(Math.floor(availHeight * 0.6), this.minHeight) +
top.clientHeight - main.clientHeight;
info.clientHeight - main.clientHeight;
body.style.maxWidth = maxWidth + "px";
info.style.overflow = info.style.width = info.style.height = "";

63
toolkit/themes/pinstripe/global/tabprompts.css
View File

@ -1,21 +1,62 @@
/* Tab Modal Prompt boxes */
tabmodalprompt {
background-image: url(chrome://global/skin/icons/tabprompts-bgtexture.png),
-moz-radial-gradient(center 40%, circle farthest-side, hsla(0,0%,10%,.1), hsla(0,0%,0%,.5));
background-image: url(chrome://global/skin/icons/tabprompts-bgtexture.png);
background-color: hsla(0,0%,10%,.5);
font-family: sans-serif; /* use content font not system UI font */
font-size: 110%;
}
.mainContainer {
padding: 20px;
color: black;
background-image: -moz-linear-gradient(hsla(0,0%,89%,.97), hsla(0,0%,96%,.97));
border-radius: 6px;
box-shadow: 0 0 1px 1px hsla(0,0%,0%,.6) inset,
0 1px 1px hsla(0,0%,0%,.2) inset,
0 2px 5px hsla(0,0%,0%,.2) inset,
0 0 0 1px hsla(0,0%,100%,.3),
0 1px 0 hsla(0,0%,100%,.1);
background-color: hsla(0,0%,100%,.95);
background-clip: padding-box;
border-radius: 2px;
border: 1px solid hsla(0,0%,0%,.5);
}
.topContainer {
padding: 20px;
}
.buttonContainer {
margin-top: 10px;
padding: 12px 20px 15px;
background-color: hsla(0,0%,0%,.05);
border-top: 1px solid hsla(0,0%,0%,.05);
}
button {
-moz-appearance: none;
padding: 2px 0;
margin: 0;
-moz-margin-start: 8px;
border-radius: 2px;
background-color: hsl(0,0%,90%);
background-image: -moz-linear-gradient(hsla(0,0%,100%,.7), hsla(0,0%,100%,0));
background-clip: padding-box;
border: 1px solid;
border-color: hsl(0,0%,65%) hsl(0,0%,60%) hsl(0,0%,50%);
box-shadow: 0 1px 0 hsla(0,0%,100%,.9) inset,
0 1px 2px hsla(0,0%,0%,.1);
}
button[default=true] {
background-color: hsl(0,0%,79%);
}
button:hover {
background-color: hsl(0,0%,96%);
}
button:hover:active {
background-image: -moz-linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,100%,0));
background-color: hsl(0,0%,70%);
box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
0 1px 3px hsla(0,0%,0%,.2);
}
button:focus {
box-shadow: 0 0 1px -moz-mac-focusring inset,
0 0 4px 1px -moz-mac-focusring,
0 0 1.5px 1px -moz-mac-focusring;
}

25
toolkit/themes/winstripe/global/tabprompts.css
View File

@ -1,21 +1,24 @@
/* Tab Modal Prompt boxes */
tabmodalprompt {
background-image: url(chrome://global/skin/icons/tabprompts-bgtexture.png),
-moz-radial-gradient(center 40%, circle farthest-side, hsla(0,0%,10%,.1), hsla(0,0%,0%,.5));
background-image: url(chrome://global/skin/icons/tabprompts-bgtexture.png);
background-color: hsla(0,0%,10%,.5);
font-family: sans-serif; /* use content font not system UI font */
}
.mainContainer {
padding: 20px;
color: black;
background-image: -moz-linear-gradient(hsla(0,0%,89%,.97), hsla(0,0%,96%,.97));
border-radius: 6px;
box-shadow: 0 0 1px 1px hsla(0,0%,0%,.6) inset,
0 1px 1px hsla(0,0%,0%,.2) inset,
0 2px 5px hsla(0,0%,0%,.2) inset,
0 0 0 1px hsla(0,0%,100%,.3),
0 1px 0 hsla(0,0%,100%,.1);
background-color: white;
background-clip: padding-box;
border-radius: 2px;
border: 1px solid hsla(0,0%,0%,.5);
}
.topContainer {
padding: 20px;
}
.buttonContainer {
margin-top: 10px;
padding: 12px 20px 15px;
background-color: hsla(0,0%,0%,.05);
border-top: 1px solid hsla(0,0%,0%,.05);
}