shy-new-tab.css (5136B)
1 /*== ShyFox New Tab ================================================================================================================================= 2 3 Styles for new tab 4 5 */ 6 7 @-moz-document url("about:home"), url("about:newtab") { 8 9 /* accent color */ 10 :root{ 11 --newtab-primary-action-background: var(--shy-color) !important; 12 --newtab-primary-action-background-pocket: var(--shy-color) !important; 13 14 --tr-col: color-mix(in srgb, var(--newtab-background-color) 40%, transparent); 15 --tr-hov-col: color-mix(in srgb, var(--tr-col) 80%, var(--newtab-text-primary-color)); 16 --newtab-background-color-secondary: color-mix(in srgb, var(--newtab-background-color) 90%, var(--newtab-text-primary-color)) !important; 17 --background-color-box: var(--tr-col) !important; 18 } 19 20 .toggle-button[aria-pressed="true"] { 21 background: var(--shy-color) !important; 22 border-color: transparent; 23 } 24 25 .home-section .section .sponsored-checkbox:checked { 26 background-color: var(--shy-color) !important; 27 } 28 29 .search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { 30 border: 1px solid var(--shy-color) !important; 31 box-shadow: 0 0 0 2px color-mix(in srgb, var(--shy-color) 20%, transparent) !important; 32 } 33 34 /* rounded corners */ 35 .top-site-button, 36 .context-menu button, 37 .close-button, 38 .home-section .section .selector 39 {border-radius: var(--rounding) !important;} 40 41 .top-site-outer, 42 .top-site-inner, 43 .context-menu, 44 .icon-settings, 45 .weatherCard 46 {border-radius: var(--big-rounding) !important;} 47 48 /* pinned links */ 49 .top-site-button {overflow: clip;} 50 51 .tile, .top-site-icon{ 52 background-color: transparent !important; 53 box-shadow: none !important; 54 border: none !important; 55 } 56 57 .top-site-button, .customize-menu{ 58 background-color: var(--tr-col) !important; 59 backdrop-filter: blur(var(--blur-radius)); 60 } 61 62 .title { 63 background-color: color-mix(in srgb, var(--tr-col) 90%, var(--newtab-text-primary-color)); 64 & > span { 65 padding-left: 8px; 66 padding-right: 8px; 67 } 68 } 69 70 .top-site-outer:is(.active, :focus, :hover){ 71 background: var(--tr-hov-col) !important; 72 } 73 74 .top-site-outer, .top-site-inner { 75 & > a {padding: 0 !important;} 76 padding: 5px; 77 } 78 79 .top-site-outer:not(:hover) .icon-pin-small{display: none !important;} 80 81 .context-menu-item{ 82 padding-inline: 5px !important; 83 padding-block: 1px !important; 84 } 85 86 /* search box */ 87 .search-handoff-button { 88 border-radius: 100px !important; 89 backdrop-filter: blur(var(--blur-radius)); 90 background-color: var(--tr-col) !important; 91 } 92 93 /* height overflow */ 94 @media (height > 700px) { 95 body:not(.inline-onboarding) .fixed-search .search-wrapper { 96 background-color: var(--tr-col) !important; 97 backdrop-filter: blur(var(--blur-radius)); 98 } 99 .logo-and-wordmark {display: flex !important;} 100 } 101 102 @media (height <= 700px) { 103 .search-wrapper {padding: 20px 0 30px !important;} 104 .outer-wrapper > main {margin-top: 0px !important;} 105 } 106 107 /* margin to logo when only search is enabled */ 108 .only-search .logo-and-wordmark {margin-top: 20px !important;} 109 110 /* wallpaper */ 111 body{ 112 background-repeat: no-repeat !important; 113 background-position: center !important; 114 background-size: cover !important; 115 background-attachment: fixed !important; 116 } 117 118 /* dark wallpaper */ 119 :root[lwt-newtab-brighttext] body {background-image: url("../../wallpaper.png") !important;} 120 121 /* light wallpaper */ /* `wallpaper.png` will be used when `-light` one does not exist */ 122 :root:not([lwt-newtab-brighttext]) body {background-image: url("../../wallpaper-light.png"), url("../../wallpaper.png") !important;} 123 124 /* central box */ 125 main{ 126 margin-top: 15% !important; 127 height: 50%; 128 background-color: var(--tr-col); 129 border-radius: var(--giant-rounding); 130 } 131 132 /* settings */ 133 .icon-settings:hover {background-color: var(--tr-hov-col) !important;} 134 .close-button-wrapper {background-color: transparent !important;} 135 136 .home-section .section .selector{ 137 background-color: var(--tr-col) !important; 138 &:hover{background-color: var(--tr-hov-col) !important;} 139 } 140 141 /* weather */ 142 .weatherInfoLink:hover, .weatherButtonContextMenuWrapper:hover { 143 background-color: var(--tr-hov-col) !important; 144 } 145 146 .weatherCard:not(:hover) .weatherButtonContextMenuWrapper{opacity: 0} 147 .weatherInfoLink {border-radius: 0px !important;} 148 .weatherButtonContextMenuWrapper::after{display: none !important;} 149 150 /* autograph */ 151 .activity-stream::before, 152 .activity-stream::after 153 { 154 font-family: monospace; 155 color: white; 156 opacity: 0.042; 157 position: fixed; 158 z-index: 99999; 159 bottom: 10px; 160 } 161 162 .activity-stream::before{ 163 content: "ShyFox by N2ezr"; 164 left: 10px; 165 } 166 167 .activity-stream::after{ 168 content: "42 🤙"; 169 right: 10px; 170 } 171 172 } 173 174 @-moz-document url("about:privatebrowsing") { 175 .search-handoff-button {border-radius: 100px !important;} 176 .info {border-radius: var(--big-rounding) !important;} 177 }