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

Материал из OnlyMoney
Перейти к навигации Перейти к поиску
Строка 4: Строка 4:
 
Работает для темной темы и улучшает работу для манагеров
 
Работает для темной темы и улучшает работу для манагеров
 
<pre>
 
<pre>
−
@media (min-width: 1280px) {
+
.container {
 +
    width: 100%;
 +
    max-width: 95%;
 +
}
 +
@media (min-width: 1004px) {
 
     .container {
 
     .container {
−
         max-width: 100%;
+
         max-width: 95%;
 
     }
 
     }
 
}
 
}
−
 
+
@media (min-width: 1300px) {
−
@media (min-width: 1280px) {
+
    .container {
−
.m-main-container:not(.p-without-header) .l-sidebar~.l-header:not(.m-narrow-width-header)~#content {
+
        max-width: 95%;
−
max-width: calc( 100% - 264px );
+
    }
−
}
 
 
}
 
}
−
 
+
@media (min-width: 500px) {
−
@media (min-width: 1004px) {
+
     .m-main-container:not(.p-without-header) .l-sidebar~.l-header:not(.m-narrow-width-header)~#content {
−
     .b-chats__conversations-list {
+
         max-width:calc(100% - 64px);
−
         flex: 0 0 595px;
+
         margin-left: auto
−
         max-width: 595px;
 
 
     }
 
     }
 
}
 
}
−
 
+
.b-photos {
−
@media (min-width: 1280px) {
+
    display: grid;
−
  .m-main-container:not(.p-without-header) .l-sidebar~#content {
+
    grid-gap: 2px;
−
     max-width: calc( 100% - 280px );
+
    grid-template-columns: repeat(10,1fr);
−
  }
+
     margin-bottom: 20px;
 
}
 
}
−
 
 
.checkbox-item.m-pos-right-top {
 
.checkbox-item.m-pos-right-top {
 
     width: 100%;
 
     width: 100%;
Строка 34: Строка 35:
 
     padding: 0;
 
     padding: 0;
 
}
 
}
−
 
+
.checkbox-item__inside {
−
.b-notifications__list {
+
     width: 100%;
−
    display: grid;
+
     height: 100%;
−
    grid-template-columns: 1fr 1fr 1fr 1fr;
 
−
}
 
−
 
 
−
.b-photos__item.m-col-4 {
 
−
     width: calc(10% - 2px);
 
−
     padding-top: calc(10% - 2px);
 
 
}
 
}
−
 
+
.b-notifications__list__item {
−
.b-users__item.m-fans {
+
    display: inline-block;
−
     height: 70px;
+
     vertical-align: top;
−
     overflow: auto;
+
     width: 20%;
 
}
 
}
−
 
 
@media (min-width: 560px) {
 
@media (min-width: 560px) {
 
     .modal .modal-dialog.modal-md {
 
     .modal .modal-dialog.modal-md {
Строка 55: Строка 49:
 
     }
 
     }
 
}
 
}
−
 
+
.b-users__item.m-fans {
−
.b-photos__item {
+
    overflow: hidden;
−
    width: calc(10% - 2px);
+
    height: 100px;
−
    padding-top: calc(10% - 2px);
 
−
}
 
−
 
 
−
.b-chat__message__media {
 
−
  max-width: 100% !important;
 
−
}
 
−
 
 
−
.m-sidebar-visible .l-sidebar__overlay {
 
−
  opacity: 0 !important;
 
−
}
 
−
 
 
−
.b-page-content.m-chat-footer.g-sides-gaps {
 
−
  position: relative;
 
−
}
 
−
 
 
−
.b-fans__container > div {
 
−
  height: 0;
 
 
}
 
}
 
</pre>
 
</pre>

Версия 17:31, 24 сентября 2021

CSS

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

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

.container {
    width: 100%;
    max-width: 95%;
}
@media (min-width: 1004px) {
    .container {
        max-width: 95%;
    }
}
@media (min-width: 1300px) {
    .container {
        max-width: 95%;
    }
}
@media (min-width: 500px) {
    .m-main-container:not(.p-without-header) .l-sidebar~.l-header:not(.m-narrow-width-header)~#content {
        max-width:calc(100% - 64px);
        margin-left: auto
    }
}
.b-photos {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(10,1fr);
    margin-bottom: 20px;
}
.checkbox-item.m-pos-right-top {
    width: 100%;
    height: 100%;
    padding: 0;
}
.checkbox-item__inside {
    width: 100%;
    height: 100%;
}
.b-notifications__list__item {
    display: inline-block;
    vertical-align: top;
    width: 20%;
}
@media (min-width: 560px) {
    .modal .modal-dialog.modal-md {
        max-width: 90%;
    }
}
.b-users__item.m-fans {
    overflow: hidden;
    height: 100px;
}