/* 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; padding: 0; } body { background-color: #000000 } /* UNDO */ #newtab-undo-container { padding: 4px 3px; border: 1px solid; border-color: #9C9CFF; background-color: #000000; color: #8050B0; } #newtab-undo-label { margin-top: 0; margin-bottom: 0; } .newtab-undo-button { color: #3333FF; 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-button > .button-box { padding: 0; } #newtab-undo-close-button { padding: 0; border: none; list-style-image: url("chrome://global/skin/icons/close.png"); -moz-image-region: rect(0, 16px, 16px, 0); } #newtab-undo-close-button:hover { -moz-image-region: rect(0, 32px, 16px, 16px); } #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://global/skin/icons/close.png"), 0, 16, 16, 0); background-color: transparent; } #newtab-undo-close-button:hover, #newtab-undo-close-button:active { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 32, 16, 16); } /* CUSTOMIZE */ #newtab-customize-button, .newtab-customize { background-color: transparent; background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 32, 32, 0); background-size: 28px; border: none; border-radius: 3px; 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: #FFCF00; } /* GRID */ #topsites-heading { color: #A09090; 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: 10px; background-color: rgba(255,159,0,.2); border: 1px solid; border-color: #9C9CFF; border-radius: var(--cell-corner-radius); } body.compact .newtab-cell { --cell-corner-radius: 3px; } .newtab-cell:empty { outline: 2px dashed #A09090; outline-offset: -2px; -moz-outline-radius: var(--cell-corner-radius); } /* SITES */ .newtab-site { border-radius: var(--cell-corner-radius); 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] { box-shadow: 0 0 10px rgba(0,132,132,.3); } .newtab-site[dragged] { transition-property: box-shadow, background-color; background-color: #002121; } /* 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: #FFCF00; 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: #FF9F00; font-size: 13px; line-height: 30px; border: 1px solid #9C9CFF; border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius); } body.compact .newtab-title { background-color: rgba(255,159,0,.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: #000000; } body.compact .newtab-title, body.compact .newtab-suggested { color: #000000; } .newtab-suggested { background-color: #9C9CFF; } .newtab-suggested:hover { background-color: #FFCF00; border: 1px solid #9C9CFF; } .newtab-suggested[active] { background-color: #FF9F00; border: 0; } body:not(.compact) .newtab-site:hover .newtab-title { background-color: #FFCF00; /* 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: 5px; top: 5px; position: absolute; width: 10px; margin-left: 8px; margin-top: 0; } .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, 128, 32, 96); } .newtab-control-pin:hover:active, .newtab-site[pinned] .newtab-control-pin { background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 160, 32, 128); } .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); } /* SEARCH */ #newtab-search-logo:hover { background-color: #FFCF00; border: none; } #newtab-search-logo[active] { background-color: #FF9F00; border: none; } #newtab-search-logo { background-image: url("chrome://browser/skin/magnifier.png"); } #newtab-search-logo.magnifier[active], #newtab-search-logo.magnifier:hover { background-image: url("chrome://browser/skin/magnifier-hover.png"); } /* Newer versions only */ #newtab-search-icon { background-image: url("chrome://browser/skin/search-indicator-magnifying-glass.svg#magnifying-glass"); } #newtab-search-logo.magnifier[active], #newtab-search-logo.magnifier:hover { background-image: url("chrome://browser/skin/magnifier-hover.png"); } #newtab-search-text { border: 1px solid #9C9CFF; background-color: #000000; color: #E7ADE7; } #newtab-search-text::placeholder { color: #8050B0; } #newtab-search-text:focus { border: 1px solid #008484; box-shadow: 0 0 0 1px #008484 inset; } #newtab-search-submit { background-image: none; background-color: #C09070; color: #000000; box-shadow: none; border-radius: 0 300px 300px 0; border: none; margin-inline-start: 3px; } #newtab-search-text:focus + #newtab-search-submit, #newtab-search-text[autofocus] + #newtab-search-submit { background-image: none; background-color: #008484; color: #000000; box-shadow: none; } #newtab-search-text + #newtab-search-submit:hover { background-image: none; background-color: #FFCF00; color: #000000; box-shadow: none; } /* Newer versions only */ #newtab-search-submit[value=""], #newtab-search-text:focus + #newtab-search-submit[value=""], #newtab-search-text[autofocus] + #newtab-search-submit[value=""], #newtab-search-text + #newtab-search-submit[value=""]:hover { background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go"); } /* CUSTOMIZE */ #newtab-customize-overlay { background: #A09090; } #newtab-customize-panel, #newtab-customize-panel-anchor, #newtab-customize-panel-inner-wrapper, .newtab-customize-panel-item, .newtab-customize-complex-option { background-color: #000000; } #newtab-customize-title { color: #9C9CFF; background-color: #000000; } .newtab-customize-panel-item[selected], .newtab-customize-panel-subitem[selected] { color: #FF9F00; } .newtab-customize-panel-item:not([selected]), .newtab-customize-panel-subitem:not([selected]) { color: #A09090; } .newtab-customize-panel-subitem > .checkbox { background-color: #000000; border-color: #A09090; } .newtab-customize-panel-subitem[selected] > .checkbox { background-color: #000000; background-image: url("chrome://global/skin/menu/shared-menu-check-active.svg"); color: #FF9F00; } .newtab-customize-panel-item:not(:first-child), .newtab-search-panel-engine { border-top: 1px solid #A09090; } .newtab-customize-complex-option:hover > .selectable:not([selected]), .selectable:hover:not([selected]), .newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem, .newtab-customize-panel-item:hover:not([selected]) { background-color: #FFCF00; color: #000000; } .newtab-customize-complex-option:hover > .selectable:not([selected]), .selectable:hover:not([selected]) { background-image: url("chrome://global/skin/menu/shared-menu-check-black.svg"); }