diff options
Diffstat (limited to 'browser/themes/shared/newtab/newTab.inc.css')
-rw-r--r-- | browser/themes/shared/newtab/newTab.inc.css | 344 |
1 files changed, 344 insertions, 0 deletions
diff --git a/browser/themes/shared/newtab/newTab.inc.css b/browser/themes/shared/newtab/newTab.inc.css new file mode 100644 index 000000000..8ecd603c9 --- /dev/null +++ b/browser/themes/shared/newtab/newTab.inc.css @@ -0,0 +1,344 @@ +/* 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/. */ + +:root { + -moz-appearance: none; + font-size: 75%; + background-color: transparent; +} + +/* UNDO */ +#newtab-undo-container { + padding: 4px 3px; + border: 1px solid; + border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16); + background-color: rgba(255,255,255,.4); + color: #525e69; +} + +#newtab-undo-label { + margin-top: 0; + margin-bottom: 0; +} + +.newtab-undo-button { + -moz-appearance: none; + cursor: pointer; + padding: 0; + margin: 0 4px; + border: 0; + background: transparent; + text-decoration: none; + min-width: 0; +} + +.newtab-undo-button:hover { + text-decoration: underline; +} + +.newtab-undo-button:-moz-focusring { + outline: 1px dotted; +} + +#newtab-undo-close-button { + -moz-appearance: none; + padding: 0; + border: none; +} + +#newtab-undo-close-button { + -moz-appearance: none; + padding: 0; + border: none; + height: 16px; + width: 16px; + float: right; + right: 0; + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 16, 16, 0); + background-color: transparent; +} + +#newtab-undo-close-button:hover { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 32, 16, 16); +} + +#newtab-undo-close-button:hover:active { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 48, 16, 32); +} + +/* CUSTOMIZE */ +#newtab-customize-button, +.newtab-customize { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0); + background-size: 28px; + height: 38px; + width: 38px; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + border: none; +} + +.newtab-customize { + height: 28px; + width: 28px; +} + +#newtab-customize-button { + font-size: 28px; + padding: 0; + /* only display the text label when CSS backgrounds are disabled (e.g. in high contrast mode) */ + color: transparent; +} + +#newtab-customize-button:-moz-any(:hover, :active, [active]) { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32); + background-color: #FFFFFF; + border: solid 1px #CCCCCC; + border-radius: 2px; +} + +/* GRID */ +#topsites-heading { + color: #7A7A7A; + font-size: 1em; + font-weight: normal; + /* Position the heading such that it doesn't affect how many cells we + can fit into the grid. */ + position: absolute; + /* The top margin moves the heading away from the grid. + The horizontal margin aligns the heading with the cells. */ + margin: -1em 10px 0; +} + +/* CELLS */ +.newtab-cell { + --cell-corner-radius: 8px; + background-color: rgba(255,255,255,.2); + border-radius: var(--cell-corner-radius); +} + +body.compact .newtab-cell { + --cell-corner-radius: 2px; +} + +.newtab-cell:empty { + outline: 2px dashed #c1c1c1; + outline-offset: -2px; + -moz-outline-radius: var(--cell-corner-radius); +} + +/* SITES */ +.newtab-site { + border-radius: var(--cell-corner-radius); + box-shadow: 0 1px 3px #c1c1c1; + text-decoration: none; + transition-property: top, left, opacity, box-shadow, background-color; +} + +.newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link, +.newtab-cell:not([ignorehover]) .newtab-link:hover, +.newtab-site[dragged] { + border: 2px solid white; + box-shadow: 0 0 6px 1px #add6ff; + margin: -2px; +} + +.newtab-site[dragged] { + transition-property: box-shadow, background-color; + background-color: rgb(242,242,242); +} + +/* LINKS */ +.newtab-link { + border-radius: var(--cell-corner-radius); + overflow: hidden; +} + +/*** + * If you change the sizes here, change them in newTab.css + * and the preference values: + * toolkit.pageThumbs.minWidth + * toolkit.pageThumbs.minHeight + */ +/* THUMBNAILS */ +.newtab-thumbnail { + background-origin: padding-box; + background-clip: padding-box; + background-repeat: no-repeat; + background-size: cover; + height: 180px; + transition: opacity 100ms ease-out; +} + +body.compact .newtab-thumbnail { + height: 100%; + border-radius: calc(var(--cell-corner-radius) + 1px); + outline: 1px solid hsla(0,0%,0%,.1); + -moz-outline-radius: var(--cell-corner-radius); + outline-offset: -1px; +} + +.newtab-thumbnail.placeholder { + color: white; + font-size: 85px; + line-height: 200%; +} + +body.compact .newtab-thumbnail.placeholder { + font-size: 45px; +} + +.newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content { + opacity: 0; +} + +.newtab-site[type=affiliate] .newtab-thumbnail, +.newtab-site[type=enhanced] .newtab-thumbnail, +.newtab-site[type=organic] .newtab-thumbnail, +.newtab-site[type=sponsored] .newtab-thumbnail { + background-position: center center; +} + +body.compact .newtab-site[type=affiliate] .newtab-thumbnail { + background-position: center 30%; +} + +.newtab-site[type=affiliate] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=enhanced] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=organic] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=sponsored] .newtab-thumbnail { + background-size: auto; +} + +/* TITLES */ + +.newtab-title { + background-color: #F2F2F2; + font-size: 13px; + line-height: 30px; + border: 1px solid #fff; + border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius); +} + +body.compact .newtab-title { + background-color: hsla(0,0%,100%,.85); + font-size: 12px; + line-height: 21px; + border: 1px solid hsla(0,0%,80%,.8); + border-top-color: hsla(0,0%,0%,.1); + background-clip: padding-box; +} + +.newtab-title, +.newtab-suggested { + color: #5c5c5c; +} + +body.compact .newtab-title, +body.compact .newtab-suggested { + color: black; +} + +.newtab-suggested[active] { + background-color: rgba(51, 51, 51, 0.95); + border: 0; + color: white; +} + +body:not(.compact) .newtab-site:hover .newtab-title { + color: white; + background-color: #333; + border-color: #333; + border-top-color: white; +} + +body.compact .newtab-site:hover .newtab-title { + color: white; + background-color: hsla(0,0%,20%,.85); + border-color: hsla(0,0%,0%,.8); + border-top-color: white; +} + +.newtab-site[pinned] .newtab-title { + padding-inline-start: 24px; +} + +.newtab-site[pinned] .newtab-title::before { + background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266); + background-size: 10px; + content: ""; + height: 17px; + left: 0; + position: absolute; + width: 10px; + margin-left: 8px; + margin-top: 6px; +} + +.newtab-site[pinned] .newtab-title:dir(rtl)::before { + left: auto; + right: 0; +} + +/* CONTROLS */ +.newtab-control { + background-color: transparent; + background-size: 24px; + border: none; + height: 24px; + width: 24px; + top: 4px; +} + +.newtab-control-pin:dir(ltr), +.newtab-control-block:dir(rtl) { + left: 4px; +} + +.newtab-control-block:dir(ltr), +.newtab-control-pin:dir(rtl) { + right: 4px; +} + +body.compact .newtab-control { + top: -8px; +} + +body.compact .newtab-control-pin:dir(ltr), +body.compact .newtab-control-block:dir(rtl) { + left: -8px; +} + +body.compact .newtab-control-block:dir(ltr), +body.compact .newtab-control-pin:dir(rtl) { + right: -8px; +} + +.newtab-control-pin, +.newtab-site[pinned] .newtab-control-pin:hover:active { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 96, 32, 64); +} + +.newtab-control-pin:hover, +.newtab-site[pinned] .newtab-control-pin:hover { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 160, 32, 128); +} + +.newtab-control-pin:hover:active, +.newtab-site[pinned] .newtab-control-pin { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 128, 32, 96); +} + +.newtab-control-block { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 192, 32, 160); +} + +.newtab-control-block:hover { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 224, 32, 192); +} + +.newtab-control-block:hover:active { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 256, 32, 224); +} |