diff options
Diffstat (limited to 'application/basilisk/base/content/newtab/newTab.css')
| -rw-r--r-- | application/basilisk/base/content/newtab/newTab.css | 654 |
1 files changed, 654 insertions, 0 deletions
diff --git a/application/basilisk/base/content/newtab/newTab.css b/application/basilisk/base/content/newtab/newTab.css new file mode 100644 index 000000000..658ad2ed3 --- /dev/null +++ b/application/basilisk/base/content/newtab/newTab.css @@ -0,0 +1,654 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + +html { + width: 100%; + height: 100%; +} + +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; +} + +input { + font: message-box; + font-size: 16px; +} + +input[type=button] { + cursor: pointer; +} + +/* UNDO */ +#newtab-undo-container { + transition: opacity 100ms ease-out; + -moz-box-align: center; + -moz-box-pack: center; +} + +#newtab-undo-container[undo-disabled] { + opacity: 0; + pointer-events: none; +} + +/* CUSTOMIZE */ +#newtab-customize-button { + position: absolute; + top: 10px; + right: 20px; + z-index: 101; +} + +#newtab-customize-button:dir(rtl) { + left: 20px; + right: auto; +} + +/* MARGINS */ +#newtab-vertical-margin { + display: -moz-box; + position: relative; + -moz-box-flex: 1; + -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: 1; +} + +#newtab-margin-top, +#newtab-margin-bottom { + display: -moz-box; + position: relative; +} + +#newtab-margin-top { + -moz-box-flex: 1; +} + +#newtab-margin-bottom { + -moz-box-flex: 2; +} + +.newtab-side-margin { + min-width: 10px; + -moz-box-flex: 1; +} + +/* GRID */ +#newtab-grid { + -moz-box-flex: 5; + overflow: hidden; + text-align: center; + transition: 100ms ease-out; + transition-property: opacity; +} + +#newtab-grid[page-disabled] { + opacity: 0; +} + +#newtab-grid[locked], +#newtab-grid[page-disabled] { + pointer-events: none; +} + +body:not(.compact) #topsites-heading { + display: none; +} + +/* + * If you change the sizes here, make sure you + * change the preferences: + * toolkit.pageThumbs.minWidth + * toolkit.pageThumbs.minHeight + */ +/* CELLS */ +.newtab-cell { + display: -moz-box; + height: 210px; + margin: 20px 10px 35px; + width: 290px; +} + +body.compact .newtab-cell { + width: 110px; + height: 110px; + margin: 12px; +} + +/* SITES */ +.newtab-site { + position: relative; + -moz-box-flex: 1; + transition: 100ms ease-out; + transition-property: top, left, opacity; +} + +.newtab-site[frozen] { + position: absolute; + pointer-events: none; +} + +.newtab-site[dragged] { + transition-property: none; + z-index: 10; +} + +/* LINK + THUMBNAILS */ +.newtab-link, +.newtab-thumbnail { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} + +/* TITLES */ +.newtab-sponsored, +.newtab-title, +.newtab-suggested { + overflow: hidden; + position: absolute; + right: 0; + text-align: center; +} + +.newtab-sponsored, +.newtab-title { + bottom: 0; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + +.newtab-suggested { + border: 1px solid transparent; + border-radius: 2px; + font-size: 12px; + height: 17px; + line-height: 17px; + margin-bottom: -1px; + padding: 2px 8px; + display: none; + margin-left: auto; + margin-right: auto; + left: 0; + top: 215px; + -moz-user-select: none; +} + +.newtab-suggested-bounds { + max-height: 34px; /* 34 / 17 = 2 lines maximum */ +} + +.newtab-title { + left: 0; + padding: 0 4px; +} + +.newtab-sponsored { + background-color: #FFFFFF; + border: 1px solid #E2E2E2; + border-radius: 3px; + color: #4A4A4A; + cursor: pointer; + display: none; + font-family: Arial; + font-size: 9px; + height: 17px; + left: 0; + line-height: 6px; + padding: 4px; + right: auto; + top: -15px; +} + +.newtab-site[suggested=true] > .newtab-sponsored { + background-color: #E2E2E2; + border: none; +} + +.newtab-site > .newtab-sponsored:-moz-any(:hover, [active]) { + background-color: #4A90E2; + border: 0; + color: white; +} + +.newtab-site > .newtab-sponsored[active] { + background-color: #000000; +} + +.newtab-sponsored:dir(rtl) { + right: 0; + left: auto; +} + +.newtab-site:-moz-any([type=enhanced], [type=sponsored], [suggested]) .newtab-sponsored { + display: block; +} + +.newtab-site[suggested] .newtab-suggested { + display: table; +} + +.sponsored-explain, +.sponsored-explain a, +.suggested-explain, +.suggested-explain a { + color: white; +} + +.sponsored-explain, +.suggested-explain { + background-color: rgba(51, 51, 51, 0.95); + bottom: 30px; + line-height: 20px; + padding: 15px 10px; + position: absolute; + text-align: start; +} + +.sponsored-explain input, +.suggested-explain input { + background-size: 18px; + height: 18px; + opacity: 1; + pointer-events: none; + position: static; + width: 18px; +} + +/* CONTROLS */ +.newtab-control { + position: absolute; + opacity: 0; + transition: opacity 100ms ease-out; +} + +.newtab-control:-moz-focusring, +.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control { + opacity: 1; +} + +.newtab-control[dragged] { + opacity: 0 !important; +} + +@media (-moz-touch-enabled) { + .newtab-control { + opacity: 1; + } +} + +/* DRAG & DROP */ + +/* + * This is just a temporary drag element used for dataTransfer.setDragImage() + * so that we can use custom drag images and elements. It needs an opacity of + * 0.01 so that the core code detects that it's in fact a visible element. + */ +.newtab-drag { + width: 1px; + height: 1px; + background-color: #fff; + opacity: 0.01; +} + +/* SEARCH */ +#newtab-search-container { + display: -moz-box; + position: relative; + -moz-box-pack: center; + margin: 40px 0 15px; +} + +body.compact #newtab-search-container { + margin-top: 0; + margin-bottom: 80px; +} + +#newtab-search-container[page-disabled] { + opacity: 0; + pointer-events: none; +} + +#newtab-search-form { + display: -moz-box; + position: relative; + height: 36px; + -moz-box-flex: 1; + max-width: 600px; /* 2 * (290 cell width + 10 cell margin) */ +} + +#newtab-search-icon { + border: 1px transparent; + padding: 0; + margin: 0; + width: 36px; + height: 36px; + background: url("chrome://browser/skin/search-indicator-magnifying-glass.svg") center center no-repeat; + position: absolute; +} + +#newtab-search-text { + -moz-box-flex: 1; + padding-top: 6px; + padding-bottom: 6px; + padding-inline-start: 34px; + 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; +} + +#newtab-search-text:dir(rtl) { + border-radius: 0 2px 2px 0; +} + +#newtab-search-text[aria-expanded="true"] { + border-radius: 2px 0 0 0; +} + +#newtab-search-text[aria-expanded="true"]:dir(rtl) { + border-radius: 0 2px 0 0; +} + +#newtab-search-text[keepfocus], +#newtab-search-text:focus, +#newtab-search-text[autofocus] { + border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6); +} + +#newtab-search-submit { + margin-inline-start: -1px; + color: transparent; + background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") center center no-repeat, linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box; + padding: 0; + border: 1px solid; + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,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; +} + +#newtab-search-submit:dir(rtl) { + border-radius: 2px 0 0 2px; + background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl"), linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)); +} + +#newtab-search-text:focus + #newtab-search-submit, +#newtab-search-text + #newtab-search-submit:hover, +#newtab-search-text[autofocus] + #newtab-search-submit { + border-color: #59b5fc #45a3e7 #3294d5; +} + +#newtab-search-text:focus + #newtab-search-submit, +#newtab-search-text[keepfocus] + #newtab-search-submit, +#newtab-search-text[autofocus] + #newtab-search-submit { + background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#4cb1ff, #1793e5); + 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(210,54%,20%,.03); +} + +#newtab-search-text + #newtab-search-submit:hover { + background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#4cb1ff, #1793e5); + 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(210,54%,20%,.03), + 0 0 4px hsla(206,100%,20%,.2); +} + +#newtab-search-text + #newtab-search-submit:hover:active { + box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset, + 0 0 1px hsla(211,79%,6%,.2) inset; + transition-duration: 0ms; +} + +#newtab-search-text:focus + #newtab-search-submit:dir(rtl), +#newtab-search-text[keepfocus] + #newtab-search-submit:dir(rtl), +#newtab-search-text[autofocus] + #newtab-search-submit:dir(rtl), +#newtab-search-text + #newtab-search-submit:dir(rtl):hover { + background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl-inverted"), linear-gradient(#4cb1ff, #1793e5); +} + +/* CUSTOMIZE */ +#newtab-customize-overlay { + opacity: 0; + display: none; + width: 100%; + height: 100%; + background: #F9F9F9; + z-index: 100; + position: fixed; + transition: opacity .07s linear; +} + +.newtab-customize-panel-container { + position: absolute; + margin-right: 40px; + right: 0; +} + +.newtab-customize-panel-container:dir(rtl) { + right: auto; + left: 0; +} + +#newtab-customize-panel { + z-index: 999; + margin-top: 55px; + min-width: 270px; + position: absolute; + top: 100%; + right: -25px; + filter: drop-shadow(0 0 1px rgba(0,0,0,0.4)) drop-shadow(0 3px 4px rgba(0,0,0,0.4)); + transition: all 200ms ease-in-out; + transform-origin: top right; + transform: translate(-30px, -20px) scale(0) translate(30px, 20px); +} + +#newtab-customize-panel:dir(rtl) { + transform-origin: 40px top 20px; +} + +#newtab-customize-panel:dir(rtl), +#newtab-customize-panel-anchor:dir(rtl) { + left: 15px; + right: auto; +} + +#newtab-customize-panel[open="true"] { + transform: translate(-30px, -20px) scale(1) translate(30px, 20px); +} + +#newtab-customize-panel-anchor { + width: 18px; + height: 18px; + background-color: white; + transform: rotate(45deg); + position: absolute; + top: -6px; + right: 15px; +} + +#newtab-customize-title { + color: #7A7A7A; + font-size: 14px; + background-color: #FFFFFF; + line-height: 25px; + padding: 15px; + font-weight: 600; + cursor: default; + border-radius: 5px 5px 0px 0px; + max-width: 300px; + overflow: hidden; + display: table-cell; + border-top: none; +} + +#newtab-customize-panel-inner-wrapper { + background-color: #FFFFFF; + border-radius: 6px; + overflow: hidden; +} + +#newtab-customize-title > label { + cursor: default; +} + +#newtab-customize-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +.newtab-customize-panel-item { + line-height: 25px; + padding: 15px; + padding-inline-start: 40px; + font-size: 14px; + cursor: pointer; + max-width: 300px; +} + +.newtab-customize-panel-item:not(:first-child) { + border-top: 1px solid threedshadow; +} + +.newtab-customize-panel-subitem > label, +.newtab-customize-panel-item > label, +.newtab-customize-complex-option { + padding: 0; + margin: 0; + cursor: pointer; +} + +.newtab-customize-panel-item, +.newtab-customize-complex-option { + display: block; + text-align: start; + background-color: #F9F9F9; +} + +.newtab-customize-panel-item[selected]:-moz-locale-dir(rtl) { + background-position: right 15px center; +} + +.newtab-customize-complex-option:hover > .selectable:not([selected]):-moz-locale-dir(rtl), +.selectable:not([selected]):hover:-moz-locale-dir(rtl) { + background-position: right 15px center; +} + +.newtab-customize-panel-item:not([selected]), +.newtab-customize-panel-subitem:not([selected]){ + color: #7A7A7A; +} + +.newtab-customize-panel-item:not([selected]):hover { + color: #FFFFFF; + background-color: #4A90E2 +} + +.newtab-customize-complex-option:hover > .selectable:not([selected]), +.selectable:not([selected]):hover { + background: url("chrome://global/skin/menu/shared-menu-check-hover.svg") no-repeat #FFFFFF; + background-size: 16px 16px; + background-position: 15px 15px; + color: #171F26; +} + +.newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem { + background-color: #FFFFFF; +} + +.newtab-customize-panel-item[selected] { + background: url("chrome://global/skin/menu/shared-menu-check-active.svg") no-repeat transparent; + background-size: 16px 16px; + background-position: 15px 15px; + color: black; + font-weight: 600; +} + +.newtab-customize-panel-subitem > .checkbox { + width: 18px; + height: 18px; + background-color: #FFFFFF; + border: solid 1px threedshadow; +} + +.newtab-customize-panel-subitem[selected] > .checkbox { + background: url("chrome://global/skin/menu/shared-menu-check-black.svg") no-repeat #FFFFFF; + background-size: 9px 9px; + background-position: center; + color: #333333; +} + +.newtab-customize-panel-subitem { + font-size: 12px; + padding: 0px 15px 15px 15px; + padding-inline-start: 40px; + display: block; + max-width: 300px; +} + +.newtab-customize-panel-subitem > label { + padding: 0px 10px; + line-height: 20px; + vertical-align: middle; + max-width: 225px; +} + +.newtab-customize-panel-superitem { + line-height: 20px; + border-bottom: medium none !important; + padding: 15px 15px 10px 15px; + padding-inline-start: 40px; + border-top: 1px solid threedshadow; +} + +.contentSearchSuggestionTable { + font: message-box; + font-size: 16px; +} |