X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fnewtab%2FnewTab.css;h=9cd341100eef5cd20a937128a3b7af4a06b1ebb3;hp=73c559b35269e3a549a1b9a0e3daa6cf9f3d43a8;hb=d23bf94a3357d30cf7300a6eb9c051f0a225b02a;hpb=56ab361a26ee7bb17d9fbe8be4747b68b38605c2 diff --git a/LCARStrek/browser/newtab/newTab.css b/LCARStrek/browser/newtab/newTab.css index 73c559b3..9cd34110 100644 --- a/LCARStrek/browser/newtab/newTab.css +++ b/LCARStrek/browser/newtab/newTab.css @@ -1,3 +1,7 @@ +/* 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%; @@ -5,9 +9,8 @@ padding: 0; } -/* SCROLLBOX */ -#newtab-scrollbox:not([page-disabled]) { - background-color: #000000; +body { + background-color: #000000 } /* UNDO */ @@ -52,72 +55,75 @@ border: none; list-style-image: url("chrome://global/skin/icons/close.png"); -moz-image-region: rect(0, 16px, 16px, 0); - -moz-user-focus: normal; } #newtab-undo-close-button:hover { -moz-image-region: rect(0, 32px, 16px, 16px); } -#newtab-undo-close-button > .toolbarbutton-text { - display: 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://global/skin/icons/close.png"), 0, 16, 16, 0); + background-color: transparent; } -#newtab-undo-close-button:-moz-focusring { - outline: 1px dotted; +#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); } -/* TOGGLE */ -#newtab-toggle { - width: 16px; - height: 16px; - padding: 0; +/* 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; - background: -216px 0 transparent url("chrome://browser/skin/newtab/controls.png"); -} - -#newtab-toggle[page-disabled] { - background-position: -232px 0; + border-radius: 3px; + height: 28px; + width: 28px; } -/* ROWS */ -.newtab-row { - margin-bottom: 20px; +#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-row:last-child { - margin-bottom: 0; +#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; } /* CELLS */ .newtab-cell { - -moz-margin-end: 20px; background-color: rgba(255,159,0,.2); border: 1px solid; border-color: #9C9CFF; - border-radius: 1px; - transition: border-color 100ms ease-out; + border-radius: 10px; } .newtab-cell:empty { - border: 1px dashed; -} - -.newtab-cell:last-child { - -moz-margin-end: 0; -} - -.newtab-cell:hover:not(:empty):not([dragged]) { - border-color: #FFCF00; + outline: 2px dashed #A09090; + -moz-outline-radius: 2px; } /* SITES */ .newtab-site { + border-radius: inherit; text-decoration: none; transition-property: top, left, opacity, box-shadow, background-color; } -.newtab-site:hover, +.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); } @@ -127,59 +133,251 @@ background-color: #002121; } +/* LINKS */ +.newtab-link { + border-radius: 10px; + 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; + border-radius: 8px 8px 0px 0px; + height: 180px; + transition: opacity 100ms ease-out; +} + +.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; + background-size: auto; } /* TITLES */ -.newtab-title { +.newtab-sponsored, +.newtab-title, +.newtab-suggested { padding: 0 8px; background-color: rgba(255,159,0,.8); color: #000000; + border: none; line-height: 24px; + bottom: 0 !important; +} + +/* +.newtab-suggested { + background-color: #9C9CFF; +} + +.newtab-suggested:hover { + background-color: #FFCF00; + border: 1px solid #9C9CFF; +} + +.newtab-suggested[active] { + background-color: #FF9F00; + border: 0; +} +*/ +.newtab-site:hover .newtab-title { + background-color: #FFCF00; +} + +.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 { - width: 24px; + background-color: transparent; + background-size: 24px; + border: none; height: 24px; - padding: 1px 2px 3px; + width: 24px; +} + +.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; - background: transparent url("chrome://browser/skin/newtab/controls.png"); + 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"); } -.newtab-control-pin:hover { - background-position: -24px 0; +/* CUSTOMIZE */ +#newtab-customize-overlay { + background: #A09090; } -.newtab-control-pin:active { - background-position: -48px 0; +#newtab-customize-panel, +#newtab-customize-panel-anchor, +#newtab-customize-panel-inner-wrapper, +.newtab-customize-panel-item, +.newtab-customize-complex-option { + background-color: #000000; } -.newtab-control-pin[pinned] { - background-position: -72px 0; +#newtab-customize-title { + color: #9C9CFF; + background-color: #000000; } -.newtab-control-pin[pinned]:hover { - background-position: -96px 0; +.newtab-customize-panel-item[selected], +.newtab-customize-panel-subitem[selected] { + color: #FF9F00; } -.newtab-control-pin[pinned]:active { - background-position: -120px 0; +.newtab-customize-panel-item:not([selected]), +.newtab-customize-panel-subitem:not([selected]) { + color: #A09090; } -.newtab-control-block { - background-position: -144px 0; +.newtab-customize-panel-subitem > .checkbox { + background-color: #000000; + border-color: #A09090; } -.newtab-control-block:hover { - background-position: -168px 0; +.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-control-block:active { - background-position: -192px 0; +.newtab-customize-complex-option:hover > .selectable:not([selected]), +.selectable:hover:not([selected]) { + background-image: url("chrome://global/skin/menu/shared-menu-check-black.svg"); }