Skip to content

Ecosia Modern by Freeplay

Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/ecosia/modern.user.css

Screenshot of Ecosia Modern

Details

AuthorFreeplay

LicenseNo License

CategoryEcosia

Created

Updated

Size26 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

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

Donate

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.7
@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.4
- Fixed
*/
@-moz-document domain("ecosia.org") {
    /* Insert code here... */
	.layout {
		overflow unset !important
	}
	.main-header {
		position static !important
	}
	[href^="/chat"]
	[data-test-id="search-navigation-item-chat"] {
		display: none !important;
	}

	@media (min-width 992px) {
		if sideNav {
			.button__text {
				text-overflow ellipsis
				overflow hidden
				display inline !important
			}
			.main-header {
				position static !important
				> header {
					transition border .2s !important
				}
			}
			.main-header--is-sticky > header {
				border-bottom-color transparent !important
			}
			.main-header__content {
				// border 0 !important
				padding-bottom 15px !important
			}
			.main-header__navigation {
				padding-bottom 0 !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 !important
				opacity 1 !important
				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
						> .mainline__content {
							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
										}
									}
								}
							}
							
						}
						> .mainline__footer {
							grid-column 2
						}
						.result {
							padding-block 10px
							margin 0
						}
					}
					.product-ads-carousel__item ...

Reviews

No reviews yet.