[Pkg-javascript-commits] [pdf.js] 129/210: Refactor the CSS rules for the overlayContainer
David Prévot
taffit at moszumanska.debian.org
Thu Jun 5 14:21:10 UTC 2014
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch upstream
in repository pdf.js.
commit 73a9d50fd1f8292a08bff55413bc30f34c7854db
Author: Jonas Jenwald <jonas.jenwald at gmail.com>
Date: Mon May 12 15:50:13 2014 +0200
Refactor the CSS rules for the overlayContainer
---
web/viewer.css | 113 ++++++++++++++++++++++----------------------------------
web/viewer.html | 10 ++---
2 files changed, 50 insertions(+), 73 deletions(-)
diff --git a/web/viewer.css b/web/viewer.css
index 7f87e8b..0babbc3 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -543,7 +543,8 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
}
.toolbarButton,
-.secondaryToolbarButton {
+.secondaryToolbarButton,
+.overlayButton {
border: 0 none;
background-color: rgba(0, 0, 0, 0);
width: 32px;
@@ -558,7 +559,8 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
}
.toolbarButton[disabled],
-.secondaryToolbarButton[disabled] {
+.secondaryToolbarButton[disabled],
+.overlayButton[disabled] {
opacity: .5;
}
@@ -653,8 +655,8 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
.toolbarButton,
.dropdownToolbarButton,
-.overlayButton,
-.secondaryToolbarButton {
+.secondaryToolbarButton,
+.overlayButton {
min-width: 16px;
padding: 2px 6px 0;
border: 1px solid transparent;
@@ -777,12 +779,6 @@ html[dir='rtl'] .dropdownToolbarButton {
background: hsl(0,0%,24%);
}
-.overlayButton {
- margin: 3px 2px 4px 5px !important;
- line-height: 16px;
- padding: 2px 6px 3px 6px;
-}
-
#customScaleOption {
display: none;
}
@@ -1426,36 +1422,38 @@ canvas {
width: 98%;
}
+.overlayButton {
+ width: auto;
+ margin: 3px 4px 2px 4px !important;
+ padding: 2px 6px 3px 6px;
+}
+
#overlayContainer {
display: table;
position: absolute;
width: 100%;
height: 100%;
background-color: hsla(0,0%,0%,.2);
- z-index: 10000;
+ z-index: 40000;
}
#overlayContainer > * {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
-#promptContainer {
+#overlayContainer > .container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
-#promptContainer > * {
+#overlayContainer > .container > .dialog {
display: inline-block;
-}
-
-.prompt {
- display: table;
padding: 15px;
border-spacing: 4px;
color: hsl(0,0%,85%);
+ font-size: 12px;
line-height: 14px;
- text-align: center;
background-color: #474747; /* fallback */
background-image: url(images/texture.png),
linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
@@ -1464,54 +1462,28 @@ canvas {
inset 0 -1px 0 hsla(0,0%,100%,.05),
0 1px 0 hsla(0,0%,0%,.15),
0 1px 1px hsla(0,0%,0%,.1);
+ border: 1px solid hsla(0,0%,0%,.5);
+ border-radius: 4px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
-.prompt > .row {
+.dialog > .row {
display: table-row;
}
-.prompt > .row > * {
+.dialog > .row > * {
display: table-cell;
}
-.prompt .toolbarField {
+.dialog .toolbarField {
margin: 5px 0;
- width: 200px;
}
-
-.prompt .toolbarField:hover,
-.prompt .toolbarField:focus {
+.dialog .toolbarField:hover,
+.dialog .toolbarField:focus {
border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
}
-#documentPropertiesContainer {
- display: table-cell;
- vertical-align: middle;
- text-align: center;
-}
-
-#documentPropertiesContainer > * {
- display: inline-block;
- padding: 15px;
- border-spacing: 4px;
- max-width: 350px;
- max-height: 350px;
- color: hsl(0,0%,85%);
- font-size: 12px;
- line-height: 14px;
- text-align: left;
- cursor: default;
- background-color: #474747; /* fallback */
- background-image: url(images/texture.png),
- linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
- box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
- inset 0 1px 1px hsla(0,0%,0%,.15),
- inset 0 -1px 0 hsla(0,0%,100%,.05),
- 0 1px 0 hsla(0,0%,0%,.15),
- 0 1px 1px hsla(0,0%,0%,.1);
-}
-
-#documentPropertiesContainer .separator {
+.dialog .separator {
display: block;
margin: 4px 0 4px 0;
height: 1px;
@@ -1520,35 +1492,40 @@ canvas {
box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
}
-#documentPropertiesContainer .row {
- display: table-row;
+.dialog .buttonRow {
+ text-align: center;
+ vertical-align: middle;
}
-html[dir='ltr'] #documentPropertiesContainer .row > * {
- display: table-cell;
- min-width: 100px;
+#passwordOverlay > .dialog {
+ text-align: center;
+}
+#passwordOverlay .toolbarField {
+ width: 200px;
}
-html[dir='rtl'] #documentPropertiesContainer .row > * {
- display: table-cell;
+#documentPropertiesOverlay > .dialog {
+ text-align: left;
+}
+#documentPropertiesOverlay .row > * {
min-width: 100px;
+}
+html[dir='ltr'] #documentPropertiesOverlay .row > * {
+ text-align: left;
+}
+html[dir='rtl'] #documentPropertiesOverlay .row > * {
text-align: right;
}
-
-#documentPropertiesContainer .row span {
+#documentPropertiesOverlay .row > span {
width: 125px;
word-wrap: break-word;
}
-
-#documentPropertiesContainer .row p {
+#documentPropertiesOverlay .row > p {
max-width: 225px;
word-wrap: break-word;
}
-
-#documentPropertiesContainer .buttonRow {
+#documentPropertiesOverlay .buttonRow {
margin-top: 10px;
- text-align: center;
- vertical-align: middle;
}
.clearBoth {
diff --git a/web/viewer.html b/web/viewer.html
index 6334ff8..ecc4085 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -321,8 +321,8 @@ http://sourceforge.net/adobe/cmap/wiki/License/
</div> <!-- mainContainer -->
<div id="overlayContainer" class="hidden">
- <div id="promptContainer" class="hidden">
- <div id="passwordContainer" class="prompt doorHanger">
+ <div id="passwordOverlay" class="container hidden">
+ <div class="dialog">
<div class="row">
<p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
</div>
@@ -335,8 +335,8 @@ http://sourceforge.net/adobe/cmap/wiki/License/
</div>
</div>
</div>
- <div id="documentPropertiesContainer" class="hidden">
- <div class="doorHanger">
+ <div id="documentPropertiesOverlay" class="container hidden">
+ <div class="dialog">
<div class="row">
<span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
</div>
@@ -376,7 +376,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/
<span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
</div>
<div class="buttonRow">
- <button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
+ <button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
</div>
</div>
</div>
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/pdf.js.git
More information about the Pkg-javascript-commits
mailing list