Ecosia Modern by freeplay
Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/ecosia/modern.user.css
Details
Authorfreeplay
LicenseNo License
Created
Updated
CategoryEcosia
Description
Making better use of screen space. Moving modules aside requires CSS Grid Masonry, you can see how to enable below
Notes
!! ENABLING CSS GRID MASONRY
- IN FIREFOX:
- Go to about:config in your URL bar
- Accept the Risk
- Search for "layout.css.grid-template-masonry-value.enabled"
- Make sure it's set to "true"
- Restart Firefox
- OTHER BROWSERS:
- ... You may just have to wait until the feature gets fully supported.
You can check the status of the feature here:
https://caniuse.com/mdn-css_properties_grid-template-rows_masonry
Source code
/*
!! ENABLING CSS GRID MASONRY
- IN FIREFOX:
- Go to about:config in your URL bar
- Accept the Risk
- Search for "layout.css.grid-template-masonry-value.enabled"
- Make sure it's set to "true"
- Restart Firefox
- OTHER BROWSERS:
- ... You may just have to wait until the feature gets fully supported.
You can check the status of the feature here:
https://caniuse.com/mdn-css_properties_grid-template-rows_masonry
!! SOME SETTINGS DO NOT WORK WITH THESE DDG SETTINGS:
- Header: On & Fixed;
- Page Width: 'Wide' or 'Super Wide'
*/
/* ==UserStyle==
@name Ecosia Modern
@version 1.1.1
@description Making better use of screen space. Moving modules aside requires CSS Grid Masonry, which many browsers don't support yet.
@updateURL https://codeberg.org/Freeplay/UserStyles/raw/branch/main/ecosia/modern.user.css
@preprocessor stylus
-- AUTHOR STUFF --
@namespace Freeplay
@author Freeplay (https://freeplay.codeberg.page/)
@homepageURL https://codeberg.org/Freeplay/UserStyles
@supportURL https://codeberg.org/Freeplay/UserStyles/issues
@var checkbox fixedSearch "Fixed Search Bar" 1
@var checkbox sideNav "Sidebar Navigation" 1
@var checkbox modAside "Move Modules Aside [REQURES CSS GRID MASONRY]" 1
@var checkbox newsCards "News Cards" 1
@var checkbox shoppingCards "Shopping Cards" 1
@var checkbox animations "More Animations" 1
@var checkbox tweaks "Other Tweaks" 1
@var checkbox neumorphism "Neumorphism Spin (lower contrast)" 0
@var text hehe "Donate!" '"https://www.buymeacoffee.com/Freeplay"'
==/UserStyle== */
/* UPDATE 1.1.1
- Fixes
- Better spacing w/ move modules aside option.
*/
@-moz-document domain("ecosia.org") {
/* Insert code here... */
.layout {
overflow unset !important
}
@media (min-width 992px) {
if sideNav {
.button__text {
text-overflow ellipsis
overflow hidden
display inline !important
}
.main-header__content {
// border 0 !important
padding-bottom 15px !important
}
.image-preview {
margin-right 15px !important
margin-left 135px !important
width calc(100% - 150px) !important
border-radius 10px
}
.main-header__search-navigation {
position fixed
left 0
padding-left 0 !important
margin-top 30px !important
width 115px !important
border-radius 0 10px 10px 0
overflow hidden auto
max-height calc(100vh - 100px)
padding-bottom 10px
// background-color inherit
filter drop-shadow(0 2px 6px rgba(0,0,0,0.05))
.search-navigation__list {
display block
width 100%
li {
display block
margin 0 !important
height auto
padding 0 !important
background none
.tab {
transition margin .2s !important
}
.tab::after {
inset-block 10px // hehe I love -inline & -block
width 3px
left 0
border-radius 0 10px 10px 0
height unset
}
svg {
min-width 24px
}
a {
padding 8px 12px !important
padding-right 18px !important
height unset !important
width 100%
font-size .75em
max-width 100%
min-width 70px
opacity .7
font-weight 600 !important
&:not(.search-navigation__dropdown-link) > svg {
margin-right 8px
border 1px solid var(--color-decorative-border-1)
padding 4px
border-radius 6px
height 2em !important
width 2em
}
&.search-navigation__dropdown-link svg {
transform scale(.9)
border-radius 6px !important
}
&:hover {
opacity 1
}
}
.tab--highlighted {
background-color var(--color-button-background-secondary-hover)
border-radius 0 20px 20px 0
margin-block 4px
width max-content
max-width 100%
min-width 100px
overflow hidden !important
a {
opacity 1
svg {
// color white !important
background-color var(--color-button-background-secondary-hover)
}
}
}
&.search-navigation__item--highlight {
a {
color var(--color-brand-primary)
}
svg {
border-color var(--color-brand-primary) !important
// border-width 1px !important
padding 3px !important
box-shadow 10px 0 30px -4px var(--color-brand-primary)
transition transform .7s cubic-bezier(0,0,0,1.4)
animation fromStatic 1s backwards !important
}
svg:last-child:not(:first-child) {
position absolute
left 24px
top 22px
width 14px !important
max-height 14px !important
min-width unset
border 0 !important
padding 2px !important
border-radius 100px
background-color var(--color-brand-primary)
color white
transform rotate(10deg)
// opacity .8
animation starAnimateIn .4s backwards cubic-bezier(0,0,0,1.4) !important
}
&:hover, &:focus-within {
svg {
transform rotate(10deg)
}
.search-navigation__highlight-star {
transform rotate(240deg) !important
}
}
}
@keyframes starAnimateIn {
from {
filter opacity(0)
transform scale(0.1) rotate(300deg)
}
}
}
}
.dropdown {
position static
width unset !important
border-radius 0 !important
background none
box-shadow none
}
}
.images__results {
padding-left 120px !important
}
#search-filters {
padding-left 125px !important
}
#search-filters {
padding-top 10px
}
.shopping {
padding-left 120px
.mainline__sorting {
justify-content flex-start
}
.mainline {
padding-left 20px
}
.sidebar {
order 2
margin-right 20px
margin-left 0
}
}
}
if modAside {
@supports not (grid-template-rows: masonry) {
body::before {
padding 20px !important
display block
text-align center
// color red
background-color rgba(255,0,0,0.05)
content "BETTER ECOSIA LAYOUT WARNING: You cannot use the ''Move Modules Aside'' option because your browser does not support CSS Grid Masonry. Please view the instructions at the top of the style's code to enable (I highly suggest doing this to make full use of this style!), or disable the option in the style's settings"
}
}
@supports (grid-template-columns masonry) {
.web {
padding-top 0 !important
max-width 1900px
grid-template-columns minmax(0px, 120px) minmax(100px,660px) minmax(30px, 60px) minmax(0,900px) 24px !important
grid-template-rows masonry
&:after {
content ""
grid-column 3
height 100%
min-width 30px
margin-left auto
// margin-right 20px
border-left 1px solid var(--color-decorative-border-1)
box-shadow inset 24px 0 24px -24px rgba(0,0,0,0.05)
z-index 1
// border-radius 10px
}
.mainline {
display contents
> * {
display contents
> * {
grid-column 2
&:not([data-test-id="mainline-result-web"]):not(.pagination):not(.query-correction) {
grid-column 4
&,/.sidebar__result:not(.snippet) {
max-width 500px
}
&[data-test-id="mainline-result-mapsSnippet"],
&[data-test-id="mainline-result-wordDefinitions"],
&[data-test-id="mainline-result-mapsSnippet"]{
order -5
// display none
// grid-row 1
}
&[data-test-id*="mainline-result"]:not(:empty) {
margin-bottom 20px
}
&[data-test-id="mainline-result-productAds"],
&[data-test-id="mainline-result-videosSnippet"],
&[data-test-id="mainline-result-newsSnippet"],
&[data-test-id="mainline-result-imagesSnippet"],
/[data-test-id="sidebar-result-imagesSnippet"] {
max-width unset !important
margin-right -24px !important
.snippet__control--next {
right 30px
}
li:last-child {
box-sizing content-box
padding-right 24px !important
}
.snippet__header {
padding-right 24px
max-width 500px
}
.snippet__carousel {
&::before {
content unset !important
}
&::after {
all unset !important
content "" !important
position absolute !important
inset 0 !important
pointer-events none !important
// min-width 800px
transition opacity .1s !important
box-shadow inset -140px 0 60px -60px var(--color-background-primary) !important
}
&.snippet__carousel--end::after {
opacity 0 !important
transition opacity .4s !important
}
}
.carousel__content {
border 0 !important
}
}
> div, .result {
padding 0 !important
// margin-bottom 30px !important
}
}
}
}
.result {
padding-block 10px
margin 0
}
}
.product-ads-carousel__item {
min-width 120px
}
.news-snippet__item, .videos-snippet__item {
min-width 150px
}
.snippet {
padding 0 !important
overflow visible !important
border 0 !important
.snippet__carousel {
margin 0
// margin-left -30px
}
.carousel__content {
border-radius 0 10px 10px 0
margin 10px 0
margin-left -30px
padding-left 30px
margin-right 0
border-right 1px solid var(--color-decorative-border-1)
scroll-padding-left 30px
> div {
margin-right -1px
}
}
.snippet__control {
display block
margin-inline 5px
}
.snippet__item {
padding 0
margin-right 10px
max-width 200px
}
.images-snippet__list {
width auto !important
display grid
grid-auto-flow dense !important
grid-template-rows 120px 120px
grid-template-columns masonry
grid-gap 5px
}
.images-snippet__item {
margin-right 0
max-height 100px
width unset !important
flex unset !important
max-height unset !important
border-radius 10px
overflow hidden
* {
width unset !important
height unset !important
}
img {
height 120px !important
}
}
.images-snippet__card {
// background-color black !important
}
.images-snippet__image {
transition transform .2s cubic-bezier(0,0,0,1) !important
}
}
/[data-test-id="mainline-result-ad"] {
& + & {
margin-top -10px
}
}
.related-queries__header {
padding-top 0
}
[data-test-id="mainline-result-wordDefinitions"] {
order -1
> section {
margin-top 0
border 1px solid var(--color-decorative-border-1)
border-radius 10px
overflow hidden
}
}
}
}
}
}
.entity {
box-shadow 0 10px 30px -20px rgba(0,0,0,0.2) !important
}
.sidebar__result {
margin-bottom 20px !important
& + .result {
padding 0 !important
margin-bottom 0 !important
}
}
.web__sidebar {
.sidebar__result {
overflow hidden
}
.entity__header {
display contents
.entity-titles {
display contents
h1, h2, h3, h4, h5, h6 {
padding-block 0
padding-inline 16px
// padding-bottom 5px
font-weight 500
}
h2 {
display inline-block
padding 16px
padding-bottom 0
}
}
.entity__image {
flex-grow 0
float right
margin-right 16px
}
}
.entity__content {
padding-top 0
}
}
if newsCards {
.news, .videos {
max-width unset !important
// padding-right 30px !important
&__results {
display flex
flex-wrap wrap
grid-gap 20px
padding-inline 10px
display grid
grid-template-columns repeat(auto-fit, minmax(400px, 1fr))
}
&__result-wrapper {
// border 1px solid var(--color-decorative-border-1)
border-radius 10px
overflow hidden !important
// width 400px
height auto !important
flex-grow 1
padding 18px
box-shadow 0 8px 24px rgba(0,0,0,0.1)
background-color var(--color-background-secondary) !important
&:hover, &:focus-within {
.news-result__thumbnail {
border-bottom-left-radius 70%
}
}
}
& &__result {
padding 0 !important
margin 0 !important
display inline
overflow hidden !important
.result__thumbnail {
float right
height max-content
}
.news-result__thumbnail {
margin 0px !important
// margin-bottom 6px !important
// margin-top -18px !important
// height 100%
transform translate(18px, -18px) scale(1.1)
transform-origin top right
border-bottom-left-radius 100%
transition border-radius .2s cubic-bezier(0,1,1,1.2)
}
.result__body {
padding 14px
display contents
div {
display contents
}
* {
display inline
}
.result__link.link {
display block !important
}
a::after {
content unset !important
}
}
}
[class*=__pagination] {
// width 100%
grid-column 1 / -1
margin -20px
margin-top 0
}
&.videos {
padding-top 20px
.videos__result-wrapper {
height 200px !important
position relative
align-self flex-start
transition max-height .4s cubic-bezier(.5,0,0,0) !important
&::after {
content ""
position absolute
inset 0
top unset
height 4em
background linear-gradient(transparent, var(--color-background-secondary))
}
}
.result__thumbnail {
// float left
margin 0 !important
margin-bottom -20px !important
transform translate(20px, -20px)
a {
margin 0 !important
border-bottom-left-radius 100px
}
}
.result__body .duration-tag {
display none
}
.video-result__description {
// display none
max-height 50px
// display block
}
}
}
}
if shoppingCards {
.shopping__mainline {
max-width unset !important
flex-grow 1
border 0 !important
.base-products__items {
grid-template-columns repeat(auto-fit ,minmax(300px,1fr))
gap 20px
}
}
.shopping__sidebar {
position sticky
top 20px
max-height calc(100vh - 140px)
overflow-y auto
// padding-bottom 200px !important
margin 20px
margin-right 0
background var(--lt-color-background-default)
border-radius 12px
}
.product.card {
flex-direction row
min-height 200px
background none !important
transition box-shadow .1s, transform .2s
background-color var(--color-background-secondary) !important
&:hover, &:focus {
box-shadow var(--lt-shadowDefault)
transform translateY(-2px)
}
&:active {
transform scale(.99)
}
.product__thumbnail {
min-height inherit
min-width 50%
max-width 50%
}
.product__content {
width 0
}
h2 {
// white-space pre-wrap
font-weight 600
max-width 100%
-webkit-line-clamp 4 !important
}
}
}
// Dark Reader fixes
[data-darkreader-mode="dynamic"] {
.deep-links__link.link-bubble {
border 0 !important
}
* {
--lt-color-background-default var(--darkreader-bg--color-background-tertiary)
--color-button-background-secondary-hover var(--darkreader-bg--color-button-content-secondary)
--color-decorative-border-1 var(--darkreader-border--color-decorative-border-1)
--color-background-primary var(--darkreader-bg--color-background-primary)
--color-background-secondary var(--darkreader-bg--color-background-tertiary)
--darkreader-text--ia-backdrop-color var(--darkreader-bg--color-background-primary)
--darkreader-bg--color-background-secondary var(--darkreader-bg--color-elevation-layer-1)
}
.main-footer__background {
opacity .5
filter brightness(1.5) saturate(.5)
}
.main-footer__wave, .main-footer__background {
color var(--darkreader-bg--color-background-secondary) !important
background-color transparent
}
.main-footer__card {
z-index 1
}
.search-form__search-field {
&:hover {
filter invert(.08)
}
&:focus-within {
filter invert(.1)
}
}
}
if tweaks {
body {
--color-background-primary #f9f9f9
--color-background-secondary white
// --lt-color-gray-200 #e5e5e5 !important
}
.main-footer__wave {
filter drop-shadow(0 12px 12px rgba(0,0,0,0.1)) !important
}
.above-fold-section {
// background var(--color-background-primary) !important
margin-top -100px !important
}
h2 {
// font-weight 600 !important
}
a:not(.result__link), .result-title__heading, h2 {
font-weight 500 !important
}
.result__header {
display flex
flex-direction column
position relative !important
}
.result__info {
position static !important
order 2
margin-bottom 0 !important
a {
font-size .8em
font-weight 500
&::after {
content unset !important
}
}
.domain-label {
position absolute !important
// left 0 !important
right 100% !important
top 5px !important
}
}
.result__title {
position static !important
}
.result__link {
&::after {
height unset !important
inset 0 !important
}
}
.snippet__item, .image-feed__item {
&, &.snippet__item img {
animation slideRight .4s backwards
for row in 1..100 {
&.snippet__item:nth-child({row}) img {
animation-delay .05s * row
}
/article:nth-child({row}) {
animation-delay .01s * row
}
}
}
}
.news__result-wrapper, .videos__result-wrapper {
animation slideUp .4s backwards
for row in 1..10 {
&:nth-child({row}) {
animation-delay .03s * row
}
}
}
.image-feed__item {
padding-inline 5px !important
.image-result__link-wrapper {
border-radius 10px
overflow hidden
transition transform .3s cubic-bezier(0,0,0,2)
transform scale(.99)
../:hover ^[1..-1] {
transform scale(1)
}
&:active {
transform scale(.98)
transition transform .15s cubic-bezier(0,0,0,1)
}
}
.image-result__details {
padding-inline 5px
}
}
@media (min-width 992px) {
.image-preview {
padding 0 !important
overflow hidden !important
display unset !important
display flex !important
.image-preview__image-link {
width max-content !important
height 100% !important
display flex !important
align-items center
min-width 40%
background-color rgba(255,255,255,0.1)
}
.image-preview__media {
display contents !important
}
img {
// max-height unset !important
max-width 100% !important
width unset !important
max-height 100% !important
height unset
// display block !important
min-height unset !important
background-attachment fixed !important
&[lazy="loading"] {
height 100%
}
}
.image-preview-fallback {
// display unset !important
width 100% !important
}
.image-preview__details {
padding-inline 20px
flex-shrink 1
flex-grow 1
width auto
flex-basis min-content
min-width 300px !important
}
.image-preview__details-content {
max-width 500px
margin auto
animation slideRight .4s
}
}
}
@media (max-width 991px) {
@supports (grid-template-columns masonry) {
.image-feed {
display grid !important
grid-template-columns repeat(auto-fit, minmax(calc(100px + 10%), 1fr))
grid-template-rows masonry
}
}
.image-result {
animation-name slideUp
}
}
.search-form__search-field {
transition filter .2s
margin-left 10px !important
filter invert(.05)
&:not(:focus-within) {
box-shadow none !important
// box-shadow 0 4px 24px rgba(0,0,0,0.1) !important
}
.search-form__input-wrapper {
padding-left 20px
background inherit
// border-radius 10px
z-index 5
svg {
}
}
.search-form__submit {
// margin-left -1px !important
// display none
// background none !important
// background black
// margin 4px
// height 100%
border-radius 100px
transition transform .3s cubic-bezier(0,0,0,1.2), background-color .2s
}
> *, .suggestion-list {
border 0 !important
}
&:hover {
filter invert(.03)
}
&:focus-within {
filter invert(0)
border-bottom-right-radius 0 !important
.search-form__submit {
&, / ^[-1..-1]:hover {
transform scale(.7)
}
}
}
.search-form__suggestions {
// position relative
}
.search-form__suggestions-list {
width 100% !important
}
.suggestion-item {
margin-inline 5px
border-radius 10px
height 35px
transition background-color .2s
animation fromHeight .2s backwards cubic-bezier(0,1,0,1.1)
&:first-child::before {
content ""
position absolute
top 0
left 20px
right 20px
border-top 1px solid var(--color-decorative-border-1)
}
a {
height 35px
line-height 35px
}
for row in (1..10) {
&:nth-child({row}) {
// animation-delay .02s * row
}
}
}
}
.main-header__logo {
filter saturate(0) opacity(.6)
transition filter .2s
&:hover {
filter none
}
}
// .main-header {
// display contents
// }
// .main-header__content {
// position sticky !important
// top 0px
// background linear-gradient(var(--color-background-primary), transparent) !important
// // background none !important
// border 0 !important
// padding-bottom 0 !important
// &::before {
// // content ""
// position absolute
// inset 0
// background-color var(--color-background-primary)
// opacity .6
// }
// // filter drop-shadow(0 4px 4px rgba(0,0,0,0.1))
// }
// if sideNav {
// .main-header__search-navigation.main-header__search-navigation {
// margin-top 20px !important
// }
// }
}
if fixedSearch {
@media only screen and (min-width 992px) {
.main-header__logo {
position fixed
}
.search-form__mobile-wrapper {
border-radius 100px
box-shadow 0 -20px 40px 10px var(--color-background-primary) !important
}
.main-header__search {
z-index 20
position fixed
left 110px
width calc(100vw - 400px) !important
}
.main-header__install-cta {
display none !important
}
}
}
if animations {
@keyframes fromStatic {
from {
transform none
filter none
box-shadow none
border-width 0px
}
}
@keyframes fromHeight {
from {
height 0
opacity 0
}
}
@keyframes slideUp {
from {
transform translateY(20px)
opacity 0
}
}
@keyframes slideRight {
from {
transform translateX(10px)
opacity 0
}
}
@keyframes fromOpacity {
from {
opacity 0
}
}
}
.layout__footer {
z-index 2
}
.main-footer {
background none !important
}
.main-footer__content {
max-width calc(100% - 450px) !important
width max-content !important
flex-wrap wrap
flex-direction column
position absolute
bottom 10px
right 24px
padding-block 15px !important
gap 10px
border-radius 10px
background-color var(--color-background-primary) !important
box-shadow 0 1px 2px var(--color-elevation-layer-1),0 0 8px var(--color-elevation-layer-2)
}
if neumorphism {
body {
--shadow 0 2px 8px rgba(0,0,0,0.1)
--lt-color-background-default var(--darkreader-bg--color-background-tertiary)
--color-background-secondary var(--color-background-primary)
}
p, span, h1, h2, h3, h4, h5, h6 {
opacity .9
}
.snippet-thumbnail__image {
border-radius 10px
overflow hidden
}
*, *::before, &::after {
border 0 !important
}
[class*=link-bubble], .button, .tab--highlighted, .chip, .card {
// background none !important
background var(--color-background-primary) !important
transition box-shadow .2s, transform .2s !important
&:hover {
box-shadow var(--shadow)
}
}
.search-form__search-field.search-form__search-field {
filter none !important
// box-shadow var(--shadow) !important
transition box-shadow .2s, transform .2s !important
.search-form__input-wrapper {
background none !important
box-shadow var(--shadow)
border-radius 100px
transition box-shadow .2s !important
}
&:focus-within, &:hover {
.search-form__input-wrapper {
box-shadow none !important
}
.button {
background none !important
color var(--color-text-primary) !important
}
}
&:focus-within {
.button {
box-shadow var(--shadow)
}
}
&:not(:focus-within):hover {
box-shadow inset var(--shadow) !important
}
}
.image-preview {
background var(--color-background-primary) !important
box-shadow var(--shadow)
* {
color var(--color-text-primary) !important
}
}
}
}