Making better use of screen space. Moving modules aside requires CSS Grid Masonry, you can see how to enable below
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
Statistics
Learn how we calculate statistics in the FAQ.
Total views
Total installs
Weekly installs
Weekly updates
Description
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
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./*
!! 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.3
@description Making better use of screen space. Moving modules aside requires CSS Grid Masonry, which many browsers don't support yet.
@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 fullDesc "Show Full Description" 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 {
height auto !important
}
.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 {
...