Стилизация: различия между версиями

Материал из OnlyMoney
Перейти к навигации Перейти к поиску
 
(не показано 12 промежуточных версий этого же участника)
Строка 3: Строка 3:
  
 
Работает для темной темы и улучшает работу для манагеров
 
Работает для темной темы и улучшает работу для манагеров
<pre>
+
<pre>@media (min-width: 1280px) {
@media (min-width: 1280px) {
 
 
     .container {
 
     .container {
 
         max-width: 100%;
 
         max-width: 100%;
 
     }
 
     }
 
}
 
}
 
+
@media (min-width: 500px) {
@media (min-width: 1280px) {
+
    .m-main-container:not(.p-without-header) .l-sidebar~.l-header:not(.m-narrow-width-header)~#content {
.m-main-container:not(.p-without-header) .l-sidebar~.l-header:not(.m-narrow-width-header)~#content {
+
        margin-left: unset;
max-width: 100%;
+
    }
}
 
 
}
 
}
 
 
@media (min-width: 1004px) {
 
@media (min-width: 1004px) {
     .b-chats__conversations-list {
+
     .container.m-main-container:not(.m-right-sidebar) #content>.b-chats>.b-chats__conversations,.container.m-main-container:not(.m-right-sidebar) #content>.b-settings,.container.m-main-container:not(.m-right-sidebar) #content>.container,.container.m-main-container:not(.m-right-sidebar) #content>.g-sides-gaps,.container.m-main-container:not(.m-right-sidebar) #content>.l-container {
         flex: 0 0 595px;
+
         max-width: unset;
         max-width: 595px;
+
        margin-left: unset;
 +
         margin-right: 0;
 
     }
 
     }
 
}
 
}
 
 
@media (min-width: 1280px) {
 
@media (min-width: 1280px) {
  .m-main-container:not(.p-without-header) .l-sidebar~#content {
+
    .m-main-container:not(.p-without-header) .l-sidebar~.l-header:not(.m-narrow-width-header)~#content {
    max-width: calc( 100% - 280px );
+
        max-width: 100%;
  }
+
    }
 +
}
 +
.b-photos {
 +
    grid-template-columns: repeat(10,1fr);
 
}
 
}
 
 
.checkbox-item.m-pos-right-top {
 
.checkbox-item.m-pos-right-top {
 +
    width: 50%;
 +
    height: 50%;
 +
}
 +
.checkbox-item__inside {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
    padding: 0;
 
 
}
 
}
 
+
@media (min-width: 560px) {
 +
    .modal .modal-dialog.modal-md {
 +
        max-width: 90%;
 +
    }
 +
}
 
.b-notifications__list {
 
.b-notifications__list {
 
     display: grid;
 
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
+
     grid-template-columns: 1fr 1fr 1fr;
 
}
 
}
 
+
@media (min-width: 500px) {
.b-photos__item.m-col-4 {
+
    .l-wrapper__content {
    width: calc(10% - 2px);
+
        margin-left: unset;
     padding-top: calc(10% - 2px);
+
     }
 
}
 
}
 
+
.b-username-row {
@media (min-width: 560px) {
+
    display: grid;
     .modal .modal-dialog.modal-md {
+
    grid-template-columns: 1fr 1fr;
         max-width: 90%;
+
}
 +
.b-username-row:last-child {
 +
    width: 100%;
 +
}
 +
.b-chats__item__user.b-username-row {
 +
    display: block;
 +
}
 +
.b-username-row.m-gap-lg {
 +
    display: flex;
 +
}
 +
@media (min-width: 500px) {
 +
     .l-header__menu__item {
 +
         height: 35px;
 
     }
 
     }
 
}
 
}
 
+
@media (min-width: 1280px) {
.b-photos__item {
+
     .l-header:not(.m-narrow-width-header) .l-header__menu__item__text {
    width: calc(10% - 2px);
+
        font-size: 14px;
     padding-top: calc(10% - 2px);
+
        line-height: 14px;
}
+
    }
 
 
.b-chat__message__media {
 
  max-width: 100% !important;
 
 
}
 
}
</pre>
+
.b-chats__item.m-muted {
 +
    display: none;
 +
}</pre>

Текущая версия на 20:26, 1 декабря 2021

CSS

Я использую плагин для хрома UserCSS

Работает для темной темы и улучшает работу для манагеров

@media (min-width: 1280px) {
    .container {
        max-width: 100%;
    }
}
@media (min-width: 500px) {
    .m-main-container:not(.p-without-header) .l-sidebar~.l-header:not(.m-narrow-width-header)~#content {
        margin-left: unset;
    }
}
@media (min-width: 1004px) {
    .container.m-main-container:not(.m-right-sidebar) #content>.b-chats>.b-chats__conversations,.container.m-main-container:not(.m-right-sidebar) #content>.b-settings,.container.m-main-container:not(.m-right-sidebar) #content>.container,.container.m-main-container:not(.m-right-sidebar) #content>.g-sides-gaps,.container.m-main-container:not(.m-right-sidebar) #content>.l-container {
        max-width: unset;
        margin-left: unset;
        margin-right: 0;
    }
}
@media (min-width: 1280px) {
    .m-main-container:not(.p-without-header) .l-sidebar~.l-header:not(.m-narrow-width-header)~#content {
        max-width: 100%;
    }
}
.b-photos {
    grid-template-columns: repeat(10,1fr);
}
.checkbox-item.m-pos-right-top {
    width: 50%;
    height: 50%;
}
.checkbox-item__inside {
    width: 100%;
    height: 100%;
}
@media (min-width: 560px) {
    .modal .modal-dialog.modal-md {
        max-width: 90%;
    }
}
.b-notifications__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
@media (min-width: 500px) {
    .l-wrapper__content {
        margin-left: unset;
    }
}
.b-username-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.b-username-row:last-child {
    width: 100%;
}
.b-chats__item__user.b-username-row {
    display: block;
}
.b-username-row.m-gap-lg {
    display: flex;
}
@media (min-width: 500px) {
    .l-header__menu__item {
        height: 35px;
    }
}
@media (min-width: 1280px) {
    .l-header:not(.m-narrow-width-header) .l-header__menu__item__text {
        font-size: 14px;
        line-height: 14px;
    }
}
.b-chats__item.m-muted {
    display: none;
}