summaryrefslogtreecommitdiffstats
path: root/application/palemoon/base/content/newtab/newTab.css
diff options
context:
space:
mode:
Diffstat (limited to 'application/palemoon/base/content/newtab/newTab.css')
-rw-r--r--application/palemoon/base/content/newtab/newTab.css225
1 files changed, 183 insertions, 42 deletions
diff --git a/application/palemoon/base/content/newtab/newTab.css b/application/palemoon/base/content/newtab/newTab.css
index 830e4a8c1..fe745d2fd 100644
--- a/application/palemoon/base/content/newtab/newTab.css
+++ b/application/palemoon/base/content/newtab/newTab.css
@@ -2,26 +2,37 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-input[type=button] {
- cursor: pointer;
+html {
+ width: 100%;
+ height: 100%;
}
-/* SCROLLBOX */
-#newtab-scrollbox {
+body {
+ font: message-box;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ background-color: #F9F9F9;
display: -moz-box;
position: relative;
-moz-box-flex: 1;
-moz-user-focus: normal;
+ -moz-box-orient: vertical;
}
-#newtab-scrollbox:not([page-disabled]) {
- overflow: auto;
+input {
+ font: message-box;
+ font-size: 16px;
+}
+
+input[type=button] {
+ cursor: pointer;
}
/* UNDO */
#newtab-undo-container {
transition: opacity 100ms ease-out;
- display: -moz-box;
-moz-box-align: center;
-moz-box-pack: center;
}
@@ -51,9 +62,31 @@ input[type=button] {
-moz-box-orient: vertical;
}
+#newtab-margin-undo-container {
+ display: -moz-box;
+ left: 6px;
+ position: absolute;
+ top: 6px;
+ z-index: 1;
+}
+
+#newtab-margin-undo-container:dir(rtl) {
+ left: auto;
+ right: 6px;
+}
+
+#newtab-undo-close-button:dir(rtl) {
+ float:left;
+}
+
+#newtab-horizontal-margin {
+ display: -moz-box;
+ -moz-box-flex: 5;
+}
+
#newtab-margin-top {
- min-height: 50px;
- max-height: 80px;
+ min-height: 10px;
+ max-height: 30px;
display: -moz-box;
-moz-box-flex: 1;
-moz-box-align: center;
@@ -62,15 +95,10 @@ input[type=button] {
#newtab-margin-bottom {
min-height: 40px;
- max-height: 100px;
+ max-height: 80px;
-moz-box-flex: 1;
}
-#newtab-horizontal-margin {
- display: -moz-box;
- -moz-box-flex: 5;
-}
-
.newtab-side-margin {
min-width: 40px;
max-width: 300px;
@@ -84,7 +112,7 @@ input[type=button] {
-moz-box-orient: vertical;
min-width: 600px;
min-height: 400px;
- transition: 100ms ease-out;
+ transition: 175ms ease-out;
transition-property: opacity;
}
@@ -105,6 +133,11 @@ input[type=button] {
-moz-box-flex: 1;
}
+/*
+ * Thumbnail image sizes are determined in the preferences:
+ * toolkit.pageThumbs.minWidth
+ * toolkit.pageThumbs.minHeight
+ */
/* CELLS */
.newtab-cell {
display: -moz-box;
@@ -115,7 +148,7 @@ input[type=button] {
.newtab-site {
position: relative;
-moz-box-flex: 1;
- transition: 100ms ease-out;
+ transition: 150ms ease-out;
transition-property: top, left, opacity;
}
@@ -139,38 +172,35 @@ input[type=button] {
bottom: 0;
}
-.newtab-thumbnail {
- opacity: .8;
- transition: opacity 100ms ease-out;
-}
-
-.newtab-thumbnail[dragged],
-.newtab-link:-moz-focusring > .newtab-thumbnail,
-.newtab-site:hover > .newtab-link > .newtab-thumbnail {
- opacity: 1;
-}
-
/* TITLES */
.newtab-title {
+ overflow: hidden;
position: absolute;
- left: 0;
right: 0;
+ text-align: center;
+}
+
+.newtab-title {
bottom: 0;
white-space: nowrap;
- overflow: hidden;
text-overflow: ellipsis;
+ vertical-align: middle;
+}
+
+.newtab-title {
+ left: 0;
+ padding: 0 4px;
}
/* CONTROLS */
.newtab-control {
position: absolute;
- top: 4px;
opacity: 0;
transition: opacity 100ms ease-out;
}
.newtab-control:-moz-focusring,
-.newtab-site:hover > .newtab-control {
+.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control {
opacity: 1;
}
@@ -184,16 +214,6 @@ input[type=button] {
}
}
-.newtab-control-pin:-moz-locale-dir(ltr),
-.newtab-control-block:-moz-locale-dir(rtl) {
- left: 4px;
-}
-
-.newtab-control-block:-moz-locale-dir(ltr),
-.newtab-control-pin:-moz-locale-dir(rtl) {
- right: 4px;
-}
-
/* DRAG & DROP */
/*
@@ -207,3 +227,124 @@ input[type=button] {
background-color: #fff;
opacity: 0.01;
}
+
+/* SEARCH */
+#searchContainer {
+ display: -moz-box;
+ position: relative;
+ -moz-box-pack: center;
+ margin: 10px 0 15px;
+}
+
+#searchContainer[page-disabled] {
+ opacity: 0;
+ pointer-events: none;
+}
+
+#searchForm {
+ display: -moz-box;
+ position: relative;
+ height: 36px;
+ -moz-box-flex: 1;
+ max-width: 600px; /* 2 * (290 cell width + 10 cell margin) */
+}
+
+#searchEngineLogo {
+ border: 1px transparent;
+ padding: 2px 4px;
+ margin: 0;
+ width: 32px;
+ height: 32px;
+ position: absolute;
+}
+
+#searchText {
+ -moz-box-flex: 1;
+ padding-top: 6px;
+ padding-bottom: 6px;
+ padding-inline-start: 42px;
+ padding-inline-end: 8px;
+ background: hsla(0,0%,100%,.9) padding-box;
+ border: 1px solid;
+ border-spacing: 0;
+ border-radius: 2px 0 0 2px;
+ border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
+ box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset,
+ 0 0 2px hsla(210,65%,9%,.1) inset,
+ 0 1px 0 hsla(0,0%,100%,.2);
+ color: inherit;
+ unicode-bidi: plaintext;
+}
+
+#searchText:dir(rtl) {
+ border-radius: 0 2px 2px 0;
+}
+
+#searchText[aria-expanded="true"] {
+ border-radius: 2px 0 0 0;
+}
+
+#searchText[aria-expanded="true"]:dir(rtl) {
+ border-radius: 0 2px 0 0;
+}
+
+#searchText[keepfocus],
+#searchText:focus {
+ border-color: hsla(216,100%,60%,.6) hsla(216,76%,52%,.6) hsla(214,100%,40%,.6);
+}
+
+#searchSubmit {
+ margin-inline-start: -1px;
+ padding: 0;
+ border: 1px solid;
+ background-color: #e0e0e0;
+ color: black;
+ border-color: hsla(220,54%,20%,.15) hsla(220,54%,20%,.17) hsla(220,54%,20%,.2);
+ border-radius: 0 2px 2px 0;
+ border-inline-start: 1px solid transparent;
+ box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
+ 0 1px 0 hsla(0,0%,100%,.2);
+ cursor: pointer;
+ transition-property: background-color, border-color, box-shadow;
+ transition-duration: 150ms;
+ width: 50px;
+}
+
+#searchSubmit:dir(rtl) {
+ border-radius: 2px 0 0 2px;
+}
+
+#searchSubmit:hover {
+ background-color: hsl(220,54%,20%);
+ color: white;
+}
+
+#searchText:focus + #searchSubmit,
+#searchText + #searchSubmit:hover {
+ border-color: #5985fc #4573e7 #3264d5;
+}
+
+#searchText:focus + #searchSubmit,
+#searchText[keepfocus] + #searchSubmit {
+ box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
+ 0 0 0 1px hsla(0,0%,100%,.1) inset,
+ 0 1px 0 hsla(220,54%,20%,.03);
+}
+
+#searchText + #searchSubmit:hover {
+ box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
+ 0 0 0 1px hsla(0,0%,100%,.1) inset,
+ 0 1px 0 hsla(220,54%,20%,.03),
+ 0 0 4px hsla(216,100%,20%,.2);
+}
+
+#searchText + #searchSubmit:hover:active {
+ box-shadow: 0 1px 1px hsla(221,79%,6%,.1) inset,
+ 0 0 1px hsla(221,79%,6%,.2) inset;
+ transition-duration: 0ms;
+}
+
+.contentSearchSuggestionTable {
+ font: message-box;
+ font-size: 16px;
+}