177 lines
5 KiB
CSS
177 lines
5 KiB
CSS
/*== ShyFox New Tab =================================================================================================================================
|
|
|
|
Styles for new tab
|
|
|
|
*/
|
|
|
|
@-moz-document url("about:home"), url("about:newtab") {
|
|
|
|
/* accent color */
|
|
:root{
|
|
--newtab-primary-action-background: var(--shy-color) !important;
|
|
--newtab-primary-action-background-pocket: var(--shy-color) !important;
|
|
|
|
--tr-col: color-mix(in srgb, var(--newtab-background-color) 40%, transparent);
|
|
--tr-hov-col: color-mix(in srgb, var(--tr-col) 80%, var(--newtab-text-primary-color));
|
|
--newtab-background-color-secondary: color-mix(in srgb, var(--newtab-background-color) 90%, var(--newtab-text-primary-color)) !important;
|
|
--background-color-box: var(--tr-col) !important;
|
|
}
|
|
|
|
.toggle-button[aria-pressed="true"] {
|
|
background: var(--shy-color) !important;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.home-section .section .sponsored-checkbox:checked {
|
|
background-color: var(--shy-color) !important;
|
|
}
|
|
|
|
.search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button {
|
|
border: 1px solid var(--shy-color) !important;
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--shy-color) 20%, transparent) !important;
|
|
}
|
|
|
|
/* rounded corners */
|
|
.top-site-button,
|
|
.context-menu button,
|
|
.close-button,
|
|
.home-section .section .selector
|
|
{border-radius: var(--rounding) !important;}
|
|
|
|
.top-site-outer,
|
|
.top-site-inner,
|
|
.context-menu,
|
|
.icon-settings,
|
|
.weatherCard
|
|
{border-radius: var(--big-rounding) !important;}
|
|
|
|
/* pinned links */
|
|
.top-site-button {overflow: clip;}
|
|
|
|
.tile, .top-site-icon{
|
|
background-color: transparent !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.top-site-button, .customize-menu{
|
|
background-color: var(--tr-col) !important;
|
|
backdrop-filter: blur(var(--blur-radius));
|
|
}
|
|
|
|
.title {
|
|
background-color: color-mix(in srgb, var(--tr-col) 90%, var(--newtab-text-primary-color));
|
|
& > span {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
|
|
.top-site-outer:is(.active, :focus, :hover){
|
|
background: var(--tr-hov-col) !important;
|
|
}
|
|
|
|
.top-site-outer, .top-site-inner {
|
|
& > a {padding: 0 !important;}
|
|
padding: 5px;
|
|
}
|
|
|
|
.top-site-outer:not(:hover) .icon-pin-small{display: none !important;}
|
|
|
|
.context-menu-item{
|
|
padding-inline: 5px !important;
|
|
padding-block: 1px !important;
|
|
}
|
|
|
|
/* search box */
|
|
.search-handoff-button {
|
|
border-radius: 100px !important;
|
|
backdrop-filter: blur(var(--blur-radius));
|
|
background-color: var(--tr-col) !important;
|
|
}
|
|
|
|
/* height overflow */
|
|
@media (height > 700px) {
|
|
body:not(.inline-onboarding) .fixed-search .search-wrapper {
|
|
background-color: var(--tr-col) !important;
|
|
backdrop-filter: blur(var(--blur-radius));
|
|
}
|
|
.logo-and-wordmark {display: flex !important;}
|
|
}
|
|
|
|
@media (height <= 700px) {
|
|
.search-wrapper {padding: 20px 0 30px !important;}
|
|
.outer-wrapper > main {margin-top: 0px !important;}
|
|
}
|
|
|
|
/* margin to logo when only search is enabled */
|
|
.only-search .logo-and-wordmark {margin-top: 20px !important;}
|
|
|
|
/* wallpaper */
|
|
body{
|
|
background-repeat: no-repeat !important;
|
|
background-position: center !important;
|
|
background-size: cover !important;
|
|
background-attachment: fixed !important;
|
|
}
|
|
|
|
/* dark wallpaper */
|
|
:root[lwt-newtab-brighttext] body {background-image: url("../../wallpaper.png") !important;}
|
|
|
|
/* light wallpaper */ /* `wallpaper.png` will be used when `-light` one does not exist */
|
|
:root:not([lwt-newtab-brighttext]) body {background-image: url("../../wallpaper-light.png"), url("../../wallpaper.png") !important;}
|
|
|
|
/* central box */
|
|
main{
|
|
margin-top: 15% !important;
|
|
height: 50%;
|
|
background-color: var(--tr-col);
|
|
border-radius: var(--giant-rounding);
|
|
}
|
|
|
|
/* settings */
|
|
.icon-settings:hover {background-color: var(--tr-hov-col) !important;}
|
|
.close-button-wrapper {background-color: transparent !important;}
|
|
|
|
.home-section .section .selector{
|
|
background-color: var(--tr-col) !important;
|
|
&:hover{background-color: var(--tr-hov-col) !important;}
|
|
}
|
|
|
|
/* weather */
|
|
.weatherInfoLink:hover, .weatherButtonContextMenuWrapper:hover {
|
|
background-color: var(--tr-hov-col) !important;
|
|
}
|
|
|
|
.weatherCard:not(:hover) .weatherButtonContextMenuWrapper{opacity: 0}
|
|
.weatherInfoLink {border-radius: 0px !important;}
|
|
.weatherButtonContextMenuWrapper::after{display: none !important;}
|
|
|
|
/* autograph */
|
|
.activity-stream::before,
|
|
.activity-stream::after
|
|
{
|
|
font-family: monospace;
|
|
color: white;
|
|
opacity: 0.042;
|
|
position: fixed;
|
|
z-index: 99999;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.activity-stream::before{
|
|
content: "ShyFox by N2ezr";
|
|
left: 10px;
|
|
}
|
|
|
|
.activity-stream::after{
|
|
content: "42 🤙";
|
|
right: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
@-moz-document url("about:privatebrowsing") {
|
|
.search-handoff-button {border-radius: 100px !important;}
|
|
.info {border-radius: var(--big-rounding) !important;}
|
|
} |