уменьшение отступов и карточки в 2 ряда в компактном режиме
This commit is contained in:
KBAHTNET
parent
6ef86bf0bf
commit
39d82f15f6
@ -94,7 +94,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<div class="control-group view-group">
|
||||
<span>Вид</span>
|
||||
<button class="segmented is-active" type="button" data-view="cards">
|
||||
Плитки
|
||||
|
||||
146
styles.css
146
styles.css
@ -104,12 +104,12 @@ a {
|
||||
.shell {
|
||||
width: min(1320px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 28px 0;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: block;
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.hero-content,
|
||||
@ -123,13 +123,13 @@ a {
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
min-height: 210px;
|
||||
min-height: 190px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: clamp(18px, 3vw, 28px);
|
||||
border-radius: 26px;
|
||||
gap: 8px;
|
||||
padding: clamp(16px, 2.6vw, 24px);
|
||||
border-radius: 22px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
@ -193,8 +193,8 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 18px;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border-radius: 24px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@ -244,10 +244,10 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
.settings-button {
|
||||
position: absolute;
|
||||
z-index: 21;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
@ -298,13 +298,13 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
|
||||
.search-field input {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
min-height: 38px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
padding: 0 16px;
|
||||
padding: 0 12px;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
@ -377,9 +377,9 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 48px;
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
min-height: 42px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
background: var(--surface);
|
||||
@ -390,6 +390,18 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.view-group {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.view-group > span {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view-group .segmented {
|
||||
flex-basis: calc(50% - 3px);
|
||||
}
|
||||
|
||||
.segmented,
|
||||
.accent-swatch {
|
||||
border: 0;
|
||||
@ -399,7 +411,7 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
|
||||
.segmented {
|
||||
flex: 1;
|
||||
min-height: 34px;
|
||||
min-height: 31px;
|
||||
min-width: 0;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
@ -423,8 +435,8 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
}
|
||||
|
||||
.accent-swatch {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 999px;
|
||||
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.18);
|
||||
@ -487,11 +499,11 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
|
||||
.catalog {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.catalog-section {
|
||||
border-radius: 32px;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -514,9 +526,9 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
.section-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
padding: 24px;
|
||||
padding: 18px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.14), transparent 22rem),
|
||||
@ -541,16 +553,16 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
}
|
||||
|
||||
.section-head h2 {
|
||||
margin-top: 8px;
|
||||
font-size: clamp(1.6rem, 4vw, 2.6rem);
|
||||
margin-top: 5px;
|
||||
font-size: clamp(1.35rem, 3.2vw, 2.15rem);
|
||||
}
|
||||
|
||||
.section-head p:not(.section-number),
|
||||
.group-head p:not(.group-number) {
|
||||
max-width: 760px;
|
||||
margin: 8px 0 0;
|
||||
margin: 5px 0 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.65;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.section-count {
|
||||
@ -584,13 +596,13 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
|
||||
.section-groups {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 18px;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.catalog-group {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 24px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -598,14 +610,14 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
.group-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 18px;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.group-head h3 {
|
||||
margin-top: 6px;
|
||||
font-size: 1.22rem;
|
||||
margin-top: 4px;
|
||||
font-size: 1.08rem;
|
||||
}
|
||||
|
||||
.group-count {
|
||||
@ -623,21 +635,21 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
.items-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.nav-card {
|
||||
--tilt-x: 0deg;
|
||||
--tilt-y: 0deg;
|
||||
position: relative;
|
||||
min-height: 224px;
|
||||
min-height: 196px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 18px;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
border-radius: 18px;
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
@ -681,8 +693,8 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
}
|
||||
|
||||
.nav-card img {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.22));
|
||||
}
|
||||
@ -690,11 +702,11 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
.card-content {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.nav-card h4 {
|
||||
font-size: 1.08rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
@ -708,14 +720,14 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
gap: 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.tags span {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 4px 8px;
|
||||
padding: 3px 7px;
|
||||
background: rgba(var(--accent-rgb), 0.1);
|
||||
color: var(--muted);
|
||||
font-size: 0.76rem;
|
||||
@ -769,11 +781,11 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
|
||||
.catalog.list-view .nav-card,
|
||||
.catalog.compact-list-view .nav-card {
|
||||
min-height: 112px;
|
||||
min-height: 96px;
|
||||
display: grid;
|
||||
grid-template-columns: 58px minmax(0, 1fr) 42px;
|
||||
grid-template-columns: 50px minmax(0, 1fr) 36px;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.catalog.list-view .arrow,
|
||||
@ -787,12 +799,12 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
}
|
||||
|
||||
.catalog.compact-list-view .items-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.catalog.compact-cards-view .section-head,
|
||||
.catalog.compact-list-view .section-head {
|
||||
padding: 18px 20px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.catalog.compact-cards-view .section-head p:not(.section-number),
|
||||
@ -811,7 +823,7 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
|
||||
.catalog.compact-cards-view .group-head,
|
||||
.catalog.compact-list-view .group-head {
|
||||
padding: 14px 16px;
|
||||
padding: 10px 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -822,9 +834,9 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
}
|
||||
|
||||
.catalog.compact-cards-view .nav-card {
|
||||
min-height: 132px;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
min-height: 116px;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.catalog.compact-cards-view .nav-card img {
|
||||
@ -850,8 +862,8 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
}
|
||||
|
||||
.catalog.compact-list-view .nav-card {
|
||||
min-height: 78px;
|
||||
padding: 12px 14px;
|
||||
min-height: 70px;
|
||||
padding: 10px 12px;
|
||||
grid-template-columns: 42px minmax(0, 1fr) 34px;
|
||||
}
|
||||
|
||||
@ -899,13 +911,13 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
@media (max-width: 720px) {
|
||||
.shell {
|
||||
width: min(100% - 22px, 1320px);
|
||||
padding: 22px 0;
|
||||
padding: 14px 0;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
min-height: auto;
|
||||
padding: 22px 16px;
|
||||
border-radius: 24px;
|
||||
padding: 16px 14px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.control-panel,
|
||||
@ -952,12 +964,16 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
}
|
||||
|
||||
.section-groups {
|
||||
padding: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.items-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.catalog.compact-list-view .items-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.catalog.compact-cards-view .items-grid {
|
||||
@ -965,7 +981,7 @@ html:not([data-show-numbers="true"]) .item-number {
|
||||
}
|
||||
|
||||
.nav-card {
|
||||
min-height: 210px;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.catalog.list-view .nav-card {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user