summaryrefslogtreecommitdiffstats
path: root/application/palemoon/base/content/newtab/newTab.css
diff options
context:
space:
mode:
authorMoonchild <mcwerewolf@gmail.com>2018-06-22 12:55:34 +0200
committerGitHub <noreply@github.com>2018-06-22 12:55:34 +0200
commit4b65237d5d6e6f84a69571435e7b9fa5b36f444f (patch)
tree2e64ef05d542aca638ea2970d620c987d113e2d5 /application/palemoon/base/content/newtab/newTab.css
parente6f765a27070a6b922742e61d0a14dcc2c18baba (diff)
parent576124e629862cd75769074d572dbf4ee8149945 (diff)
downloadUXP-4b65237d5d6e6f84a69571435e7b9fa5b36f444f.tar
UXP-4b65237d5d6e6f84a69571435e7b9fa5b36f444f.tar.gz
UXP-4b65237d5d6e6f84a69571435e7b9fa5b36f444f.tar.lz
UXP-4b65237d5d6e6f84a69571435e7b9fa5b36f444f.tar.xz
UXP-4b65237d5d6e6f84a69571435e7b9fa5b36f444f.zip
Merge pull request #525 from MoonchildProductions/newtab-page-work
Newtab page work
Diffstat (limited to 'application/palemoon/base/content/newtab/newTab.css')
-rw-r--r--application/palemoon/base/content/newtab/newTab.css261
1 files changed, 190 insertions, 71 deletions
diff --git a/application/palemoon/base/content/newtab/newTab.css b/application/palemoon/base/content/newtab/newTab.css
index 830e4a8c1..a5431cf65 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;
}
@@ -31,18 +42,6 @@ input[type=button] {
pointer-events: none;
}
-/* TOGGLE */
-#newtab-toggle {
- position: absolute;
- top: 12px;
- right: 12px;
-}
-
-#newtab-toggle:-moz-locale-dir(rtl) {
- left: 12px;
- right: auto;
-}
-
/* MARGINS */
#newtab-vertical-margin {
display: -moz-box;
@@ -51,40 +50,52 @@ input[type=button] {
-moz-box-orient: vertical;
}
-#newtab-margin-top {
- min-height: 50px;
- max-height: 80px;
+#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: 1;
- -moz-box-align: center;
- -moz-box-pack: center;
}
+#newtab-margin-top,
#newtab-margin-bottom {
- min-height: 40px;
- max-height: 100px;
+ display: -moz-box;
+ position: relative;
+}
+
+#newtab-margin-top {
-moz-box-flex: 1;
}
-#newtab-horizontal-margin {
- display: -moz-box;
- -moz-box-flex: 5;
+#newtab-margin-bottom {
+ -moz-box-flex: 2;
}
.newtab-side-margin {
- min-width: 40px;
- max-width: 300px;
+ min-width: 10px;
-moz-box-flex: 1;
}
/* GRID */
#newtab-grid {
- display: -moz-box;
-moz-box-flex: 5;
- -moz-box-orient: vertical;
- min-width: 600px;
- min-height: 400px;
- transition: 100ms ease-out;
+ overflow: hidden;
+ transition: 300ms ease-out;
transition-property: opacity;
}
@@ -97,25 +108,25 @@ input[type=button] {
pointer-events: none;
}
-/* ROWS */
-.newtab-row {
- display: -moz-box;
- -moz-box-orient: horizontal;
- -moz-box-direction: normal;
- -moz-box-flex: 1;
-}
-
+/*
+ * If you change the sizes here, make sure you
+ * change the preferences:
+ * toolkit.pageThumbs.minWidth
+ * toolkit.pageThumbs.minHeight
+ */
/* CELLS */
.newtab-cell {
display: -moz-box;
- -moz-box-flex: 1;
+ height: 180px;
+ margin: 15px 10px 30px;
+ width: 250px;
}
/* SITES */
.newtab-site {
position: relative;
-moz-box-flex: 1;
- transition: 100ms ease-out;
+ transition: 200ms ease-out;
transition-property: top, left, opacity;
}
@@ -139,38 +150,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 +192,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 +205,124 @@ input[type=button] {
background-color: #fff;
opacity: 0.01;
}
+
+/* SEARCH */
+#searchContainer {
+ display: -moz-box;
+ position: relative;
+ -moz-box-pack: center;
+ margin: 40px 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;
+}