CSS userstyle for Avito
Posted on 25 Февраль 2025 in Веб разработка by wakh
Стиль для авито.ру для Stylus (или другого плагина).
11
/* ==UserStyle==
@name Avito.ru widescreen
@namespace github.com/openstyles/stylus
@version 5.1.5
@description Avito for wide screen. Use 67—75% screen settings
@author Me
==/UserStyle== */
@-moz-document domain("avito.ru") {/* User menu & search Bar */
[class^="index-module-inner-"], /* both */
[class*="index-responsive-"] {
position: fixed!important;
top: 0px !important;
margin: 0 !important;
width: auto!important;
height: 50px !important;
z-index: 100;
}
[class^="index-module-inner-"] { /* user menu*/
right: 0px;
left: 50vw;
background-color: black;
padding: 0;
[class*="index-module-nav-"] {}
[class*="index-module-counters-"] {}
[class*="index-module-nav-link-"] {}
[class*="index-module-username-"] {}
[class*="index-module-add-button-wrapper-"] {}
}
[class*="index-responsive-"] { /* search bar */
left: 0px;
right: 50vw;
background-color: white;
padding: 0!important;
[class*="index-navigation-"] {
margin: 0 10px;
width:40px!important;
overflow: hidden;
}
[class*="index-search-"] {
margin-bottom: 5px!important;
}
[class*="index-rightWrapper-"] {}
}
}@-moz-document domain("avito.ru") {/* main & SERP */
[class*="index-center-"] { /*all page wraper*/
margin-top: 50px;
width: 98%;
}
[class*="index-center_noMarginTop-"] { /*main page wraper*/
[class*="index-side-"] {
margin-top: 0px;
}
[class*="visual-rubricator-grid-"] { /* SERP rubrics */
grid-gap: 3px;
grid-template-columns: auto;
grid-template-rows: 70px;
> a {
grid-row:1!important;
}
}
[class*="index-content"] {
width: 93%!important;
}
}
[class*="index-center_marginTop_"] { /*SERP page wraper*/
[class^="breadcrumbs-root_"]{ /* breadcrumbs */
margin-left: 42px;
}
[class^="page-title-root-"]{ /* H1 */
}
[class^="index-inner"] { /*serp wraper*/
width: 100%;
grid-template-columns: 40px 1fr!important;
[class^="index-content"] { /* main column */
margin-top: -70px;
}
[class^="index-topPanel"]{ /* sort bar */
-justify-content: end;
margin-left: -20px;
}
}
}
}@-moz-document domain("avito.ru") {/* SERP extra tiny */
[class^="items-items-"] {
> div:nth-child(even){
background-color: #EEE!important;
}
.js-catalog-item-enum {
margin-right: 3px;
margin-bottom: 5px;
[class^="iva-item-content-"]{
[class^="iva-item-favoriteCartIcons-"]{
margin-top: -30px;
margin-right: 5px;
zoom:1.5;
}
[class^="iva-item-titleStep-"]{
margin-top: -5px;
padding-right: 0;
}
[class^="discount-container-"]{
text-align: right;
margin-top: -24px;
}
}
}
}
}@-moz-document domain("avito.ru") {/* left col slide @ SERP */
[class*="index-sideCatalog-"] {
top: 50px;
position: sticky;
margin-left: -290px;
margin-top: -125px;
width: 320px;
z-index: 115;
background: #eee;
opacity: .8;
transition: all .5s;
border: solid 1px #999;
&:hover {
left: 0px;
-margin-left: 15px;
padding-left: 15px;
background: #fff;
opacity: 1;
}
}
}@-moz-document domain("avito.ru") {/* card */
[class*="index-module-page_default_wide-"] {
margin: 0;
margin-top: 50px;
width: 90vw!important;
padding: 0 5vw;
[class*="style-item-view-page-layout-"] {
margin: 0;
width: 100%!important;
[class*="style-item-view-content-"] {
max-width: 80%;
[class*="style-item-view-content-left-"] {
width: 85vw;
columns: 2;
[class*="styles-module-root_fullWidth-"]{
-break-inside: avoid;
margin: .5em 0;
}
div:has([data-marker="icebreakers/extended-input"]){
margin: 0;
}
H2+DIV{
break-inside: avoid;
}
h2 {
break-after: avoid;
font-size: x-large;
margin-bottom: .1em!important;
}
button {
break-before: avoid;
}
[class*="style-item-map-wrapper-"] > div > div > div {
height: 800px!important;
& > ymaps {
height: 100%;
}
}
}
}
}
}
}@-moz-document domain("avito.ru") {/* big picture */
[data-should-close="true"]{
max-width: 90vw;
max-height: 90vw;
img {
width: 100%;
object-fit: contain;
}
}
}@-moz-document domain("avito.ru") {/* pickpoints map & categories */
[role="dialog"]{
-width: 98vw;
-height: 98vh;
width: auto;
min-width: 58vw;
max-width: 99vw;
max-height: 100vh;
padding: 1vh 0!important;
margin: auto auto!important;
overflow: hidden;
> div {
padding: 0 1%;
> span {
right: 0;
}
> div {
margin: 0!important;
[class*="List-listWrapper-"] {
max-height: 900px;
columns: 5;
}
div:has(H1), H1 {
margin: 0!important;
}
[class*="index-map-"] {
width: 95vw!important;
height: 75vh!important;
margin: 1vh 3vh 0 0;
}
div > ymaps {
width: 100%!important;
height: 100%!important;
}
}
}
}
}@-moz-document domain("avito.ru") {/* pickpoints map & categories */
div:has(>[data-key*="promoWidget"]) {display: none;}
/*
[class*=""] {}
*/
}
