Ignore:
Timestamp:
09/02/26 05:22:09 (4 weeks ago)
Author:
mmilevski <markomilevski3@…>
Branches:
main
Children:
1dcdb2c
Parents:
d89d25b
Message:

Various UI bugfixes.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • KernelRecordsMVC.Web/wwwroot/css/site.css

    rd89d25b r595d2e5  
    7676}
    7777
    78 .brand {
    79   display: flex;
    80   flex-direction: column;
    81   flex-shrink: 0;
    82 
    83   line-height: .9;
    84   letter-spacing: 2px;
    85 }
    86 
    87 .brand-main {
    88   font-size: 25px;
    89   font-weight: 900;
    90 }
    91 
    92 .brand-sub {
    93   margin-top: 6px;
    94 
    95   font-size: 11px;
    96   font-weight: 600;
    97   letter-spacing: 5px;
    98 
    99   opacity: .65;
    100 }
    101 
    10278.navbar-content {
    10379  flex: 1;
    … …  
    484460}
    485461
     462/* =========================================================
     463   NAVBAR CART COUNT
     464   ========================================================= */
     465
     466.nav-cart-link {
     467  position: relative;
     468}
     469
     470.nav-cart-icon-wrap {
     471  position: relative;
     472
     473  display: inline-flex;
     474  align-items: center;
     475  justify-content: center;
     476}
     477
     478.nav-cart-count {
     479  position: absolute;
     480
     481  top: -10px;
     482  right: -13px;
     483
     484  min-width: 18px;
     485  height: 18px;
     486
     487  display: inline-flex;
     488  align-items: center;
     489  justify-content: center;
     490
     491  padding: 0 5px;
     492
     493  border: 2px solid #111;
     494  border-radius: 999px;
     495
     496  background: white;
     497  color: #111;
     498
     499  font-size: 9px;
     500  font-weight: 900;
     501  line-height: 1;
     502}
    486503
    487504/* =========================================================
    … …  
    504521  letter-spacing: 1.3px;
    505522}
    506 
    507 .announcement-separator {
    508   opacity: .45;
    509 }
    510 
    511523
    512524/* =========================================================
    … …  
    15701582}
    15711583
    1572 
    15731584/* =========================================================
    15741585   WISHLIST
    … …  
    15771588.wishlist-page {
    15781589  max-width: 1250px;
    1579 
    15801590  margin: 0 auto;
    1581 
    15821591  padding: 55px 30px 80px;
    15831592}
    … …  
    15891598.page-header h1 {
    15901599  margin-top: 7px;
    1591 
    15921600  font-size: 44px;
    15931601  font-weight: 900;
    1594 
    15951602  letter-spacing: -1.5px;
    15961603}
    … …  
    15981605.page-header p {
    15991606  margin-top: 8px;
    1600 
    16011607  color: #777;
    1602 
    16031608  font-size: 14px;
    16041609}
    … …  
    16061611.wishlist-grid {
    16071612  display: grid;
    1608 
    1609   grid-template-columns:
    1610         repeat(2, minmax(0, 1fr));
    1611 
     1613  grid-template-columns: repeat(2, minmax(0, 1fr));
    16121614  gap: 20px;
    16131615}
    16141616
    16151617.wishlist-card {
     1618  min-width: 0;
     1619  min-height: 190px;
     1620
    16161621  display: grid;
    1617 
    1618   grid-template-columns:
    1619         190px 1fr;
     1622  grid-template-columns: 190px minmax(0, 1fr);
    16201623
    16211624  overflow: hidden;
    16221625
    16231626  background: white;
    1624 
    16251627  border: 1px solid #ddd;
    1626   border-radius: 9px;
     1628  border-radius: 10px;
     1629
     1630  transition:
     1631          transform .2s ease,
     1632          box-shadow .2s ease,
     1633          border-color .2s ease;
     1634}
     1635
     1636.wishlist-card:hover {
     1637  transform: translateY(-2px);
     1638  border-color: #ccc;
     1639  box-shadow: 0 12px 30px rgba(0,0,0,.06);
    16271640}
    16281641
    16291642.wishlist-cover {
    1630   aspect-ratio: 1 / 1;
     1643  width: 190px;
     1644  height: 190px;
     1645
     1646  display: block;
    16311647
    16321648  overflow: hidden;
    1633 
    16341649  background: #ddd;
    16351650}
    16361651
     1652.wishlist-cover img,
     1653.wishlist-cover .release-no-cover {
     1654  width: 190px;
     1655  height: 190px;
     1656  display: block;
     1657}
     1658
    16371659.wishlist-cover img {
    1638   width: 100%;
    1639   height: 100%;
    1640 
     1660  object-fit: cover;
     1661  object-position: center;
     1662  transition: transform .35s ease;
     1663}
     1664
     1665.wishlist-card:hover .wishlist-cover img {
     1666  transform: scale(1.035);
     1667}
     1668
     1669.wishlist-info {
     1670  min-width: 0;
     1671
     1672  display: flex;
     1673  flex-direction: column;
     1674  justify-content: center;
     1675
     1676  padding: 22px 24px;
     1677}
     1678
     1679.wishlist-format {
    16411680  display: block;
    1642 
    1643   object-fit: cover;
    1644 
    1645   transition: transform .35s ease;
    1646 }
    1647 
    1648 .wishlist-card:hover .wishlist-cover img {
    1649   transform: scale(1.04);
    1650 }
    1651 
    1652 .wishlist-info {
    1653   padding: 22px;
    1654 }
    1655 
    1656 .wishlist-format {
     1681  margin-bottom: 7px;
     1682
    16571683  color: #888;
    16581684
    16591685  font-size: 9px;
    16601686  font-weight: 900;
    1661 
    16621687  text-transform: uppercase;
    16631688  letter-spacing: 1px;
    … …  
    16651690
    16661691.wishlist-info h2 {
    1667   margin-top: 7px;
    1668 
     1692  margin: 0;
    16691693  font-size: 20px;
    16701694  font-weight: 900;
     1695  line-height: 1.2;
    16711696}
    16721697
    … …  
    16771702.wishlist-genre {
    16781703  margin-top: 6px;
    1679 
    16801704  color: #777;
    1681 
    16821705  font-size: 12px;
    16831706}
    16841707
     1708.wishlist-bottom {
     1709  display: flex;
     1710  align-items: center;
     1711  justify-content: space-between;
     1712
     1713  gap: 18px;
     1714  margin-top: 20px;
     1715}
     1716
     1717.wishlist-price-area {
     1718  min-width: 90px;
     1719  flex-shrink: 0;
     1720}
     1721
    16851722.wishlist-price {
    1686   margin-top: 18px;
    1687 
    1688   font-size: 22px;
    1689   font-weight: 900;
     1723  margin: 0;
     1724  font-size: 23px;
     1725  font-weight: 900;
     1726  line-height: 1;
    16901727}
    16911728
    16921729.stock {
    1693   display: inline-block;
    1694 
     1730  display: block;
    16951731  margin-top: 7px;
    1696 
    16971732  font-size: 10px;
    16981733  font-weight: 800;
    … …  
    17091744.wishlist-actions {
    17101745  display: flex;
     1746  align-items: center;
     1747  justify-content: flex-end;
    17111748  flex-wrap: wrap;
    17121749
    17131750  gap: 8px;
    1714 
    1715   margin-top: 20px;
    1716 }
    1717 
    1718 .btn-remove {
    1719   min-height: 42px;
    1720 
    1721   padding: 0 17px;
     1751  margin: 0;
     1752}
     1753
     1754.wishlist-actions form {
     1755  margin: 0;
     1756}
     1757
     1758.wishlist-actions .store-button,
     1759.wishlist-actions .btn-remove {
     1760  min-height: 40px;
     1761
     1762  display: inline-flex;
     1763  align-items: center;
     1764  justify-content: center;
     1765
     1766  padding: 0 15px;
     1767
     1768  border-radius: 6px;
     1769
     1770  font-size: 10px;
     1771  font-weight: 900;
     1772  line-height: 1;
     1773  white-space: nowrap;
     1774}
     1775
     1776.wishlist-actions .store-button {
     1777  border: 1px solid #171717;
     1778  background: #171717;
     1779  color: white;
     1780}
     1781
     1782.wishlist-actions .store-button:hover {
     1783  background: #333;
     1784  color: white;
     1785}
     1786
     1787.btn-remove,
     1788.wishlist-actions .btn-remove {
     1789  min-height: 40px;
     1790
     1791  padding: 0 15px;
    17221792
    17231793  border: 1px solid #ccc;
    … …  
    17251795
    17261796  background: white;
     1797  color: #666;
     1798
     1799  font-size: 10px;
     1800  font-weight: 900;
     1801}
     1802
     1803.btn-remove:hover,
     1804.wishlist-actions .btn-remove:hover {
     1805  border-color: #a33;
     1806  background: #fff7f7;
     1807  color: #a33;
     1808}
     1809
     1810.empty-wishlist {
     1811  padding: 75px 25px;
     1812
     1813  text-align: center;
     1814
     1815  background: white;
     1816
     1817  border: 1px solid #ddd;
     1818  border-radius: 10px;
     1819}
     1820
     1821.empty-wishlist .empty-icon {
     1822  margin-bottom: 15px;
    17271823  color: #777;
    1728 
    1729   font-size: 12px;
    1730   font-weight: 800;
    1731 }
    1732 
    1733 .btn-remove:hover {
    1734   border-color: #a33;
    1735   color: #a33;
    1736 }
    1737 
     1824  font-size: 48px;
     1825}
     1826
     1827.empty-wishlist h2 {
     1828  margin-bottom: 8px;
     1829  font-size: 25px;
     1830}
     1831
     1832.empty-wishlist p {
     1833  margin-bottom: 22px;
     1834  color: #777;
     1835}
     1836
     1837@media (max-width: 1000px) {
     1838  .wishlist-grid {
     1839    grid-template-columns: 1fr;
     1840  }
     1841}
     1842
     1843@media (max-width: 650px) {
     1844  .wishlist-card {
     1845    grid-template-columns: 140px minmax(0, 1fr);
     1846    min-height: 140px;
     1847  }
     1848
     1849  .wishlist-cover,
     1850  .wishlist-cover img,
     1851  .wishlist-cover .release-no-cover {
     1852    width: 140px;
     1853    height: 140px;
     1854  }
     1855
     1856  .wishlist-info {
     1857    padding: 18px;
     1858  }
     1859
     1860  .wishlist-bottom {
     1861    align-items: flex-start;
     1862    flex-direction: column;
     1863    gap: 13px;
     1864    margin-top: 16px;
     1865  }
     1866
     1867  .wishlist-actions {
     1868    justify-content: flex-start;
     1869  }
     1870}
     1871
     1872@media (max-width: 500px) {
     1873  .wishlist-card {
     1874    grid-template-columns: 1fr;
     1875  }
     1876
     1877  .wishlist-cover,
     1878  .wishlist-cover img,
     1879  .wishlist-cover .release-no-cover {
     1880    width: 100%;
     1881    height: auto;
     1882    aspect-ratio: 1 / 1;
     1883  }
     1884
     1885  .wishlist-info {
     1886    padding: 20px;
     1887  }
     1888
     1889  .wishlist-actions {
     1890    width: 100%;
     1891    flex-direction: row;
     1892  }
     1893
     1894  .wishlist-actions form {
     1895    flex: 1;
     1896  }
     1897
     1898  .wishlist-actions .store-button,
     1899  .wishlist-actions .btn-remove {
     1900    width: 100%;
     1901  }
     1902}
    17381903
    17391904/* =========================================================
    … …  
    19532118}
    19542119
    1955 .home-eyebrow {
    1956   color: #aaa;
    1957 
    1958   font-size: 11px;
    1959   font-weight: 900;
    1960 
    1961   letter-spacing: 3px;
    1962 }
    1963 
    19642120.home-hero h1 {
    19652121  margin-top: 16px;
    … …  
    20272183.home-button.secondary:hover {
    20282184  background: #292929;
    2029 }
    2030 
    2031 .home-hero-mark {
    2032   position: absolute;
    2033 
    2034   right: 5%;
    2035   bottom: -60px;
    2036 
    2037   color: #1e1e1e;
    2038 
    2039   font-size: 420px;
    2040   font-weight: 900;
    2041 
    2042   line-height: 1;
    20432185}
    20442186
    … …  
    25342676    grid-template-columns:
    25352677            repeat(2, minmax(0, 1fr));
    2536   }
    2537 
    2538   .wishlist-grid {
    2539     grid-template-columns: 1fr;
    25402678  }
    25412679
    … …  
    28052943  }
    28062944
    2807   .wishlist-grid {
    2808     grid-template-columns: 1fr;
    2809   }
    2810 
    2811   .wishlist-card {
    2812     grid-template-columns:
    2813             120px 1fr;
    2814   }
    2815 
    28162945  .home-hero {
    28172946    min-height: 500px;
    … …  
    28192948    padding: 45px 30px;
    28202949  }
    2821 
    2822   .home-hero-mark {
    2823     font-size: 250px;
    2824   }
    2825 
    28262950  .home-feature-grid {
    28272951    grid-template-columns: 1fr;
    … …  
    28652989@media (max-width: 500px) {
    28662990
    2867   .wishlist-card {
    2868     grid-template-columns: 1fr;
    2869   }
    2870 
    2871   .wishlist-cover {
    2872     max-height: 300px;
    2873   }
    2874 
    2875   .wishlist-actions {
    2876     flex-direction: column;
    2877   }
    2878 
    2879   .wishlist-actions .store-button,
    2880   .wishlist-actions .btn-remove {
    2881     width: 100%;
    2882   }
    2883 
    28842991  .home-hero {
    28852992    padding: 35px 22px;
    … …  
    29103017  }
    29113018}
    2912 
     3019/* =========================================================
     3020   RELEASE PRODUCT DISCOUNT PRICE
     3021   ========================================================= */
     3022
     3023.product-sale-price {
     3024  margin-bottom: 12px;
     3025}
     3026
     3027.product-price-row {
     3028  display: flex;
     3029  align-items: baseline;
     3030  flex-wrap: wrap;
     3031
     3032  gap: 10px;
     3033}
     3034
     3035.product-original-price {
     3036  color: #999;
     3037
     3038  font-size: 16px;
     3039  font-weight: 700;
     3040
     3041  text-decoration: line-through;
     3042}
     3043
     3044.product-current-price {
     3045  color: #171717;
     3046
     3047  font-size: 28px;
     3048  font-weight: 900;
     3049}
     3050
     3051.product-discount-badge {
     3052  width: fit-content;
     3053
     3054  display: inline-flex;
     3055  align-items: center;
     3056  justify-content: center;
     3057
     3058  margin-top: 7px;
     3059  padding: 5px 8px;
     3060
     3061  border-radius: 4px;
     3062
     3063  background: #171717;
     3064  color: white;
     3065
     3066  font-size: 9px;
     3067  font-weight: 900;
     3068
     3069  letter-spacing: .5px;
     3070}
    29133071/* =========================================================
    29143072 ADMIN
    … …  
    30433201  font-size: 10px;
    30443202}
    3045 
     3203/* =========================================================
     3204   ADMIN ARTIST LIST
     3205   ========================================================= */
     3206
     3207.admin-artist-cell {
     3208  display: flex;
     3209  align-items: center;
     3210
     3211  gap: 14px;
     3212
     3213  min-width: 220px;
     3214}
     3215
     3216.admin-artist-thumb {
     3217  width: 70px;
     3218  height: 70px;
     3219
     3220  min-width: 70px;
     3221  max-width: 70px;
     3222
     3223  flex: 0 0 70px;
     3224
     3225  display: block;
     3226
     3227  overflow: hidden;
     3228
     3229  border-radius: 8px;
     3230
     3231  background: #eee;
     3232
     3233  object-fit: cover;
     3234  object-position: center;
     3235}
     3236
     3237.admin-artist-thumb.placeholder {
     3238  width: 70px;
     3239  height: 70px;
     3240
     3241  min-width: 70px;
     3242  max-width: 70px;
     3243
     3244  flex: 0 0 70px;
     3245
     3246  display: flex;
     3247  align-items: center;
     3248  justify-content: center;
     3249
     3250  background: #171717;
     3251  color: white;
     3252
     3253  font-size: 24px;
     3254  font-weight: 900;
     3255}
     3256
     3257.admin-artist-cell strong {
     3258  min-width: 0;
     3259
     3260  font-size: 13px;
     3261  font-weight: 900;
     3262
     3263  overflow-wrap: anywhere;
     3264}
     3265
     3266.admin-table-actions {
     3267  white-space: nowrap;
     3268
     3269  text-align: right;
     3270}
     3271
     3272.admin-table-actions .admin-button {
     3273  margin-left: 6px;
     3274}
     3275
     3276
     3277/* =========================================================
     3278   ADMIN ARTISTS RESPONSIVE
     3279   ========================================================= */
     3280
     3281@media (max-width: 700px) {
     3282
     3283  .admin-artist-thumb,
     3284  .admin-artist-thumb.placeholder {
     3285    width: 58px;
     3286    height: 58px;
     3287
     3288    min-width: 58px;
     3289    max-width: 58px;
     3290
     3291    flex-basis: 58px;
     3292  }
     3293
     3294  .admin-artist-cell {
     3295    min-width: 180px;
     3296  }
     3297
     3298}
    30463299
    30473300/* =========================================================
    … …  
    41394392
    41404393}
     4394
    41414395/* =========================================================
    41424396   KERNEL RECORDS LOGO
    … …  
    41444398
    41454399.logo-brand {
     4400  width: 170px;
     4401  height: 72px;
     4402
     4403  flex: 0 0 170px;
     4404
    41464405  display: flex;
    41474406  align-items: center;
     4407  justify-content: flex-start;
    41484408
    41494409  padding: 0;
    41504410
     4411  overflow: hidden;
    41514412  text-decoration: none;
    41524413}
    41534414
    4154 .site-logo {
     4415.logo-brand > .site-logo {
     4416  width: 160px !important;
     4417  height: 64px !important;
     4418
     4419  max-width: 160px !important;
     4420  max-height: 64px !important;
     4421
    41554422  display: block;
    41564423
    4157   width: auto;
    4158   height: 72px;
    4159 
    41604424  object-fit: contain;
    4161 }
    4162 
    4163 @media (max-width: 700px) {
    4164 
    4165   .site-logo {
    4166     height: 55px;
    4167   }
    4168 
    4169 }
    4170 .admin-page-logo {
    4171   display: block;
    4172 
    4173   width: auto;
    4174   height: 80px;
    4175 
    4176   margin-bottom: 12px;
    4177 
    4178   object-fit: contain;
    4179 }
     4425  object-position: left center;
     4426
     4427  transform: none !important;
     4428}
     4429
    41804430.hero-logo {
    41814431  display: flex;
    … …  
    41874437  width: min(520px, 90%);
    41884438  height: auto;
     4439
    41894440  display: block;
     4441
    41904442  object-fit: contain;
     4443
    41914444  transform: translate(55px, 55px);
     4445}
     4446
     4447@media (max-width: 950px) {
     4448  .logo-brand {
     4449    width: 145px;
     4450    height: 60px;
     4451    flex-basis: 145px;
     4452  }
     4453
     4454  .logo-brand > .site-logo {
     4455    width: 135px !important;
     4456    height: 52px !important;
     4457
     4458    max-width: 135px !important;
     4459    max-height: 52px !important;
     4460  }
     4461}
     4462
     4463@media (max-width: 700px) {
     4464  .hero-logo-image {
     4465    width: min(360px, 92%);
     4466    transform: translate(0, 0);
     4467  }
    41924468}
    41934469
    … …  
    42364512.artist-grid {
    42374513  display: grid;
    4238   grid-template-columns: repeat(auto-fill, 200px);
     4514  grid-template-columns: repeat(6, 200px);
    42394515  gap: 24px;
    42404516  align-items: start;
    4241   justify-content: start;
     4517  justify-content: space-between;
    42424518}
    42434519
    … …  
    43304606  text-transform: uppercase;
    43314607}
     4608@media (max-width: 1450px) {
     4609  .artist-grid {
     4610    grid-template-columns: repeat(5, 200px);
     4611    justify-content: space-between;
     4612  }
     4613}
     4614
     4615@media (max-width: 1200px) {
     4616  .artist-grid {
     4617    grid-template-columns: repeat(4, 200px);
     4618  }
     4619}
     4620
     4621@media (max-width: 950px) {
     4622  .artist-grid {
     4623    grid-template-columns: repeat(3, 200px);
     4624  }
     4625}
     4626
     4627@media (max-width: 700px) {
     4628  .artist-grid {
     4629    grid-template-columns: repeat(2, 200px);
     4630    justify-content: center;
     4631  }
     4632}
     4633
     4634@media (max-width: 430px) {
     4635  .artist-grid {
     4636    grid-template-columns: 200px;
     4637  }
     4638}
    43324639
    43334640/* Artist details: fixed 200 x 200 profile image */
Note: See TracChangeset for help on using the changeset viewer.