r4
| 1 | /* [include(틀:문서 가져옴, article=스텔라이브, rev=152, uuid=60b48bbc-21a2-4269-9c6b-ed549790b04b)][[분류:스니펫]] */ |
|---|
r3
| 2 | |
|---|
r2
| 3 | .stel-frame { |
|---|
| 4 | border: 1px solid rgba(255, 255, 255, 0.2); |
|---|
| 5 | border-radius: 35px; |
|---|
| 6 | overflow: hidden; |
|---|
| 7 | margin: 25px auto; |
|---|
| 8 | max-width: 530px; |
|---|
r1
| 9 | |
|---|
r2
| 10 | background: linear-gradient(170deg in oklch, #121218 0%, #2d1b4e 30%, #5a2b5a 65%, #ff9a8b 100%); |
|---|
| 11 | |
|---|
| 12 | box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 20px rgba(129, 130, 184, 0.2); |
|---|
| 13 | position: relative; |
|---|
| 14 | } |
|---|
| 15 | |
|---|
| 16 | .stel-img-box { |
|---|
| 17 | line-height: 0; |
|---|
| 18 | border-bottom: 3px solid rgba(255, 255, 255, 0.15); |
|---|
| 19 | |
|---|
| 20 | box-shadow: inset 0 -10px 20px rgba(0,0,0,0.3); |
|---|
| 21 | } |
|---|
| 22 | |
|---|
| 23 | .stel-member-box { |
|---|
| 24 | padding: 25px 12px; |
|---|
| 25 | text-align: center; |
|---|
| 26 | line-height: 0.45; |
|---|
| 27 | } |
|---|
| 28 | |
|---|
| 29 | .m-badge { |
|---|
| 30 | display: inline-block; |
|---|
| 31 | padding: 4px 13px; |
|---|
| 32 | margin: 1.5px 0.2px; |
|---|
| 33 | border-radius: 3px; |
|---|
| 34 | font-size: 13.5px; |
|---|
| 35 | font-weight: 900; |
|---|
| 36 | color: #ffffff !important; |
|---|
| 37 | position: relative; |
|---|
| 38 | |
|---|
| 39 | background-image: |
|---|
| 40 | repeating-linear-gradient(0deg in oklch, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px), |
|---|
| 41 | linear-gradient(to bottom in oklch, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.4) 100%); |
|---|
| 42 | |
|---|
| 43 | border-top: 1.5px solid rgba(255, 255, 255, 0.4); |
|---|
| 44 | border-right: 1px solid rgba(0, 0, 0, 0.3); |
|---|
| 45 | border-bottom: 1.8px solid rgba(0, 0, 0, 0.5); |
|---|
| 46 | box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 0 5px rgba(255,255,255,0.1); |
|---|
| 47 | |
|---|
| 48 | text-shadow: 0 1px 2px #000, 0 0 8px rgba(255,255,255,0.3); |
|---|
| 49 | transition: 0.2s; |
|---|
| 50 | } |
|---|
| 51 | /* 강지 */ |
|---|
| 52 | .m-gangzi { border-left: 5px solid #8182b8 !important; box-shadow: 0 0 12px rgba(129, 130, 184, 0.6); } |
|---|
| 53 | /* 유니 */ |
|---|
| 54 | .m-yuni { border-left: 5px solid #A2D0EF !important; box-shadow: 0 0 12px rgba(162, 208, 239, 0.6); } |
|---|
| 55 | /* 후야 */ |
|---|
| 56 | .m-huya { border-left: 5px solid #60497f !important; box-shadow: 0 0 12px rgba(96, 73, 127, 0.6); } |
|---|
| 57 | /* 리제 */ |
|---|
| 58 | .m-rize { border-left: 5px solid #C13A36 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } |
|---|
| 59 | /* 히나 */ |
|---|
| 60 | .m-hina { border-left: 5px solid #ff9680 !important; box-shadow: 0 0 12px rgba(255, 150, 128, 0.6); } |
|---|
| 61 | /* 시로 */ |
|---|
| 62 | .m-shiro { border-left: 5px solid #65686a !important; box-shadow: 0 0 12px rgba(101, 104, 106, 0.6); } |
|---|
| 63 | /* 타비 */ |
|---|
| 64 | .m-tabi { border-left: 5px solid #9EB5EE !important; box-shadow: 0 0 12px rgba(158, 181, 238, 0.6); } |
|---|
| 65 | /* 리코 */ |
|---|
| 66 | .m-riko { border-left: 5px solid #8fe0b0 !important; box-shadow: 0 0 12px rgba(143, 224, 176, 0.6); } |
|---|
| 67 | /* 린 */ |
|---|
| 68 | .m-rin { border-left: 5px solid #BAC0E6 !important; box-shadow: 0 0 12px rgba(186, 192, 230, 0.6); } |
|---|
| 69 | /* 나나 */ |
|---|
| 70 | .m-nana { border-left: 5px solid #F8849D !important; box-shadow: 0 0 12px rgba(184, 169, 202, 0.6); } |
|---|
| 71 | /* 부키 */ |
|---|
| 72 | .m-buki { border-left: 5px solid #B8A9CA !important; box-shadow: 0 0 12px rgba(184, 169, 202, 0.6); } |
|---|
| 73 | /* 4기생 |
|---|
| 74 | .m-none { border-left: 5px solid #B8A9CA !important; box-shadow: 0 0 12px rgba(184, 169, 202, 0.6); } |
|---|
| 75 | |
|---|
| 76 | .m-none { border-left: 5px solid #B8A9CA !important; box-shadow: 0 0 12px rgba(184, 169, 202, 0.6); } |
|---|
| 77 | |
|---|
| 78 | .m-none { border-left: 5px solid #B8A9CA !important; box-shadow: 0 0 12px rgba(184, 169, 202, 0.6); } |
|---|
| 79 | |
|---|
| 80 | .m-none { border-left: 5px solid #B8A9CA !important; box-shadow: 0 0 12px rgba(184, 169, 202, 0.6); } |
|---|
| 81 | */ |
|---|
| 82 | |
|---|
| 83 | .m-badge:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(255,255,255,0.4); filter: brightness(1.2); } |
|---|