@font-face { font-family: "Inter", sans-serif; src: url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); } .tags-list { display: flex; flex-wrap: wrap; gap: 6px; } .tags-list .tag { padding: 8px; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 700; line-height: 12px; order: 10; cursor: pointer; transition: ease 250ms all; user-select: none; } .tags-list .tag:hover { background-color: rgba(255, 255, 255, 0.25); } .tags-list .tag.include { background-color: #3dadff; } .tags-list .tag.include:hover { filter: brightness(1.1); background-color: #3dadff; } .tags-list .tag.exclude { background-color: #ff603d; } .tags-list .tag.exclude:hover { filter: brightness(1.1); background-color: #ff603d; } .tags-list .tag--prestige { font-weight: bold; } .tags-list .tag--prestige:hover { filter: brightness(1.3); } .tags-list .tag--prestige-c1 { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #FFB053 0%, #FFDC60 100%); order: 1; } .tags-list .tag--prestige-c2 { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #FFFFFF 0%, #D8CBF4 100%); order: 2; } .tags-list .tag--prestige-c3 { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #F2A46C 0%, #FD8A36 100%); order: 3; } .tags-list .tag--prestige-cs { background: linear-gradient(90deg, #3DADFF 0%, #2664C0 100%); order: 4; } .tags-list .tag--prestige-sb { background: linear-gradient(90deg, #59f2f6 0%, #f87eec 100%); order: 5; } .tags-list .tag--prestige-soty-1 { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #FFB053 0%, #FFDC60 100%); order: 6; } .tags-list .tag--prestige-soty-2 { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #FFFFFF 0%, #D8CBF4 100%); order: 7; } .tags-list .tag--prestige-soty-3 { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #F2A46C 0%, #FD8A36 100%); order: 8; } .tags-list .tag--prestige-soty-t10 { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #cc8335 0%, #ffe871 100%); order: 9; } .tags-list .tag--prestige--key { order: 11; } .skin-item { display: flex; flex-direction: column; width: 100%; background-color: #203747; border-radius: 4px; box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.12); transition: 250ms ease all; position: relative; } .skin-item:has(.tag--prestige-soty-3), .skin-item:has(.tag--prestige-c3) { --entry-gradient-left: #5d3e35; --entry-gradient-right: #85593a; --entry-glow: #85593a; --entry-text: inherit; } .skin-item:has(.tag--prestige-soty-2), .skin-item:has(.tag--prestige-c2) { --entry-gradient-left: #c9d6ff; --entry-gradient-right: #e2e2e2; --entry-glow: #c9d6ff; --entry-text: #313853; } .skin-item:has(.tag--prestige-soty-1), .skin-item:has(.tag--prestige-c1) { --entry-gradient-left: #f2994a; --entry-gradient-right: #f2c94c; --entry-glow: #ffb13b; --entry-text: #552c23; } .skin-item:has(.tag--prestige-soty-3), .skin-item:has(.tag--prestige-c3), .skin-item:has(.tag--prestige-soty-2), .skin-item:has(.tag--prestige-c2), .skin-item:has(.tag--prestige-soty-1), .skin-item:has(.tag--prestige-c1) { background: linear-gradient(to right, var(--entry-gradient-left), var(--entry-gradient-right)); box-shadow: var(--entry-glow) 0 0 16px; } .skin-item:has(.tag--prestige-soty-3):hover, .skin-item:has(.tag--prestige-c3):hover, .skin-item:has(.tag--prestige-soty-2):hover, .skin-item:has(.tag--prestige-c2):hover, .skin-item:has(.tag--prestige-soty-1):hover, .skin-item:has(.tag--prestige-c1):hover { box-shadow: var(--entry-glow) 0 0 24px; } .skin-item:has(.tag--prestige-soty-3) .game-modes svg, .skin-item:has(.tag--prestige-soty-3) .skin-name, .skin-item:has(.tag--prestige-soty-3) .author, .skin-item:has(.tag--prestige-soty-3) .resolution, .skin-item:has(.tag--prestige-soty-3) .tag, .skin-item:has(.tag--prestige-c3) .game-modes svg, .skin-item:has(.tag--prestige-c3) .skin-name, .skin-item:has(.tag--prestige-c3) .author, .skin-item:has(.tag--prestige-c3) .resolution, .skin-item:has(.tag--prestige-c3) .tag, .skin-item:has(.tag--prestige-soty-2) .game-modes svg, .skin-item:has(.tag--prestige-soty-2) .skin-name, .skin-item:has(.tag--prestige-soty-2) .author, .skin-item:has(.tag--prestige-soty-2) .resolution, .skin-item:has(.tag--prestige-soty-2) .tag, .skin-item:has(.tag--prestige-c2) .game-modes svg, .skin-item:has(.tag--prestige-c2) .skin-name, .skin-item:has(.tag--prestige-c2) .author, .skin-item:has(.tag--prestige-c2) .resolution, .skin-item:has(.tag--prestige-c2) .tag, .skin-item:has(.tag--prestige-soty-1) .game-modes svg, .skin-item:has(.tag--prestige-soty-1) .skin-name, .skin-item:has(.tag--prestige-soty-1) .author, .skin-item:has(.tag--prestige-soty-1) .resolution, .skin-item:has(.tag--prestige-soty-1) .tag, .skin-item:has(.tag--prestige-c1) .game-modes svg, .skin-item:has(.tag--prestige-c1) .skin-name, .skin-item:has(.tag--prestige-c1) .author, .skin-item:has(.tag--prestige-c1) .resolution, .skin-item:has(.tag--prestige-c1) .tag { color: var(--entry-text) !important; } .skin-item__link { position: absolute; width: 100%; height: 100%; z-index: 200; } .skin-item__cover { display: flex; position: relative; width: 100%; padding-top: 56.25%; } .skin-item__cover-versions { display: flex; align-items: center; position: absolute; right: 16px; top: 16px; color: rgba(255, 255, 255, 0.85); background-color: #284559; padding: 8px; border-radius: 4px; box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.12); z-index: 1; } .skin-item__cover-versions .icon { width: 16px; height: 16px; } .skin-item__cover-versions .version-count { margin: 0px 4px; font-size: 14px; font-weight: 700; } .skin-item__cover img { object-fit: cover; width: 100%; border-radius: 4px 4px 0px 0px; height: 100%; position: absolute; top: 0; left: 0; } .skin-item__information { display: flex; flex-direction: column; gap: 4px; padding: 8px; } .skin-item__information-row { display: flex; gap: 3px; align-items: center; } .skin-item__information .skin-name { color: rgba(255, 255, 255, 0.85); font-size: 16px; font-weight: 700; } .skin-item__information .game-modes { display: flex; align-items: center; gap: 4px; } .skin-item__information .game-modes .icon { width: 20px; height: 20px; color: rgba(255, 255, 255, 0.85); } .skin-item__information .game-modes .icon.standard { order: 1; } .skin-item__information .game-modes .icon.taiko { order: 2; } .skin-item__information .game-modes .icon.catch { order: 3; } .skin-item__information .game-modes .icon.mania { order: 4; } .skin-item__information .author { font-size: 12px; color: rgba(255, 255, 255, 0.85); } .skin-item__information .information-seperator { background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; width: 2px; height: 14px; margin: 4px 0px; } .skin-item__information .resolution { color: rgba(255, 255, 255, 0.85); padding: 3px 4px; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; font-size: 9px; font-weight: 700; line-height: 12px; } .skin-item__tags-list-container { overflow: hidden; position: absolute; top: 100%; background: inherit; border-radius: 0 0 4px 4px; width: 100%; } .skin-item .tags-list { padding: 8px; margin-top: -100%; transition: ease all 250ms; } .skin-item .tags-list .tags { padding: 4px; } .skin-item:hover { border-radius: 4px 4px 0 0; box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.24); background-color: #253f52; overflow: visible; } .skin-item:hover .tags-list { margin-top: 0; } .skin-item--deleted { padding: 16px; text-align: center; justify-content: center; cursor: not-allowed; } .skin-item--deleted:hover { background-color: #203747; } .skin-grid:nth-child(1) { z-index: calc(160 - 1); } .skin-grid:nth-child(2) { z-index: calc(160 - 2); } .skin-grid:nth-child(3) { z-index: calc(160 - 3); } .skin-grid:nth-child(4) { z-index: calc(160 - 4); } .skin-grid:nth-child(5) { z-index: calc(160 - 5); } .skin-grid:nth-child(6) { z-index: calc(160 - 6); } .skin-grid:nth-child(7) { z-index: calc(160 - 7); } .skin-grid:nth-child(8) { z-index: calc(160 - 8); } .skin-grid:nth-child(9) { z-index: calc(160 - 9); } .skin-grid:nth-child(10) { z-index: calc(160 - 10); } .skin-grid:nth-child(11) { z-index: calc(160 - 11); } .skin-grid:nth-child(12) { z-index: calc(160 - 12); } .skin-grid:nth-child(13) { z-index: calc(160 - 13); } .skin-grid:nth-child(14) { z-index: calc(160 - 14); } .skin-grid:nth-child(15) { z-index: calc(160 - 15); } .skin-grid:nth-child(16) { z-index: calc(160 - 16); } .skin-grid:nth-child(17) { z-index: calc(160 - 17); } .skin-grid:nth-child(18) { z-index: calc(160 - 18); } .skin-grid:nth-child(19) { z-index: calc(160 - 19); } .skin-grid:nth-child(20) { z-index: calc(160 - 20); } .skin-grid:nth-child(21) { z-index: calc(160 - 21); } .skin-grid:nth-child(22) { z-index: calc(160 - 22); } .skin-grid:nth-child(23) { z-index: calc(160 - 23); } .skin-grid:nth-child(24) { z-index: calc(160 - 24); } .skin-grid:nth-child(25) { z-index: calc(160 - 25); } .skin-grid:nth-child(26) { z-index: calc(160 - 26); } .skin-grid:nth-child(27) { z-index: calc(160 - 27); } .skin-grid:nth-child(28) { z-index: calc(160 - 28); } .skin-grid:nth-child(29) { z-index: calc(160 - 29); } .skin-grid:nth-child(30) { z-index: calc(160 - 30); } .skin-grid:nth-child(31) { z-index: calc(160 - 31); } .skin-grid:nth-child(32) { z-index: calc(160 - 32); } .skin-grid:nth-child(33) { z-index: calc(160 - 33); } .skin-grid:nth-child(34) { z-index: calc(160 - 34); } .skin-grid:nth-child(35) { z-index: calc(160 - 35); } .skin-grid:nth-child(36) { z-index: calc(160 - 36); } .skin-grid:nth-child(37) { z-index: calc(160 - 37); } .skin-grid:nth-child(38) { z-index: calc(160 - 38); } .skin-grid:nth-child(39) { z-index: calc(160 - 39); } .skin-grid:nth-child(40) { z-index: calc(160 - 40); } .skin-grid:nth-child(41) { z-index: calc(160 - 41); } .skin-grid:nth-child(42) { z-index: calc(160 - 42); } .skin-grid:nth-child(43) { z-index: calc(160 - 43); } .skin-grid:nth-child(44) { z-index: calc(160 - 44); } .skin-grid:nth-child(45) { z-index: calc(160 - 45); } .skin-grid:nth-child(46) { z-index: calc(160 - 46); } .skin-grid:nth-child(47) { z-index: calc(160 - 47); } .skin-grid:nth-child(48) { z-index: calc(160 - 48); } .skin-grid:nth-child(49) { z-index: calc(160 - 49); } .skin-grid:nth-child(50) { z-index: calc(160 - 50); } .skin-grid:nth-child(51) { z-index: calc(160 - 51); } .skin-grid:nth-child(52) { z-index: calc(160 - 52); } .skin-grid:nth-child(53) { z-index: calc(160 - 53); } .skin-grid:nth-child(54) { z-index: calc(160 - 54); } .skin-grid:nth-child(55) { z-index: calc(160 - 55); } .skin-grid:nth-child(56) { z-index: calc(160 - 56); } .skin-grid:nth-child(57) { z-index: calc(160 - 57); } .skin-grid:nth-child(58) { z-index: calc(160 - 58); } .skin-grid:nth-child(59) { z-index: calc(160 - 59); } .skin-grid:nth-child(60) { z-index: calc(160 - 60); } .skin-grid:nth-child(61) { z-index: calc(160 - 61); } .skin-grid:nth-child(62) { z-index: calc(160 - 62); } .skin-grid:nth-child(63) { z-index: calc(160 - 63); } .skin-grid:nth-child(64) { z-index: calc(160 - 64); } .skin-grid:nth-child(65) { z-index: calc(160 - 65); } .skin-grid:nth-child(66) { z-index: calc(160 - 66); } .skin-grid:nth-child(67) { z-index: calc(160 - 67); } .skin-grid:nth-child(68) { z-index: calc(160 - 68); } .skin-grid:nth-child(69) { z-index: calc(160 - 69); } .skin-grid:nth-child(70) { z-index: calc(160 - 70); } .skin-grid:nth-child(71) { z-index: calc(160 - 71); } .skin-grid:nth-child(72) { z-index: calc(160 - 72); } .skin-grid:nth-child(73) { z-index: calc(160 - 73); } .skin-grid:nth-child(74) { z-index: calc(160 - 74); } .skin-grid:nth-child(75) { z-index: calc(160 - 75); } .skin-grid:nth-child(76) { z-index: calc(160 - 76); } .skin-grid:nth-child(77) { z-index: calc(160 - 77); } .skin-grid:nth-child(78) { z-index: calc(160 - 78); } .skin-grid:nth-child(79) { z-index: calc(160 - 79); } .skin-grid:nth-child(80) { z-index: calc(160 - 80); } .skin-grid:nth-child(81) { z-index: calc(160 - 81); } .skin-grid:nth-child(82) { z-index: calc(160 - 82); } .skin-grid:nth-child(83) { z-index: calc(160 - 83); } .skin-grid:nth-child(84) { z-index: calc(160 - 84); } .skin-grid:nth-child(85) { z-index: calc(160 - 85); } .skin-grid:nth-child(86) { z-index: calc(160 - 86); } .skin-grid:nth-child(87) { z-index: calc(160 - 87); } .skin-grid:nth-child(88) { z-index: calc(160 - 88); } .skin-grid:nth-child(89) { z-index: calc(160 - 89); } .skin-grid:nth-child(90) { z-index: calc(160 - 90); } .skin-grid:nth-child(91) { z-index: calc(160 - 91); } .skin-grid:nth-child(92) { z-index: calc(160 - 92); } .skin-grid:nth-child(93) { z-index: calc(160 - 93); } .skin-grid:nth-child(94) { z-index: calc(160 - 94); } .skin-grid:nth-child(95) { z-index: calc(160 - 95); } .skin-grid:nth-child(96) { z-index: calc(160 - 96); } .skin-grid:nth-child(97) { z-index: calc(160 - 97); } .skin-grid:nth-child(98) { z-index: calc(160 - 98); } .skin-grid:nth-child(99) { z-index: calc(160 - 99); } .skin-grid:nth-child(100) { z-index: calc(160 - 100); } .skin-grid:nth-child(101) { z-index: calc(160 - 101); } .skin-grid:nth-child(102) { z-index: calc(160 - 102); } .skin-grid:nth-child(103) { z-index: calc(160 - 103); } .skin-grid:nth-child(104) { z-index: calc(160 - 104); } .skin-grid:nth-child(105) { z-index: calc(160 - 105); } .skin-grid:nth-child(106) { z-index: calc(160 - 106); } .skin-grid:nth-child(107) { z-index: calc(160 - 107); } .skin-grid:nth-child(108) { z-index: calc(160 - 108); } .skin-grid:nth-child(109) { z-index: calc(160 - 109); } .skin-grid:nth-child(110) { z-index: calc(160 - 110); } .skin-grid:nth-child(111) { z-index: calc(160 - 111); } .skin-grid:nth-child(112) { z-index: calc(160 - 112); } .skin-grid:nth-child(113) { z-index: calc(160 - 113); } .skin-grid:nth-child(114) { z-index: calc(160 - 114); } .skin-grid:nth-child(115) { z-index: calc(160 - 115); } .skin-grid:nth-child(116) { z-index: calc(160 - 116); } .skin-grid:nth-child(117) { z-index: calc(160 - 117); } .skin-grid:nth-child(118) { z-index: calc(160 - 118); } .skin-grid:nth-child(119) { z-index: calc(160 - 119); } .skin-grid:nth-child(120) { z-index: calc(160 - 120); } .skin-grid:nth-child(121) { z-index: calc(160 - 121); } .skin-grid:nth-child(122) { z-index: calc(160 - 122); } .skin-grid:nth-child(123) { z-index: calc(160 - 123); } .skin-grid:nth-child(124) { z-index: calc(160 - 124); } .skin-grid:nth-child(125) { z-index: calc(160 - 125); } .skin-grid:nth-child(126) { z-index: calc(160 - 126); } .skin-grid:nth-child(127) { z-index: calc(160 - 127); } .skin-grid:nth-child(128) { z-index: calc(160 - 128); } .skin-grid:nth-child(129) { z-index: calc(160 - 129); } .skin-grid:nth-child(130) { z-index: calc(160 - 130); } .skin-grid:nth-child(131) { z-index: calc(160 - 131); } .skin-grid:nth-child(132) { z-index: calc(160 - 132); } .skin-grid:nth-child(133) { z-index: calc(160 - 133); } .skin-grid:nth-child(134) { z-index: calc(160 - 134); } .skin-grid:nth-child(135) { z-index: calc(160 - 135); } .skin-grid:nth-child(136) { z-index: calc(160 - 136); } .skin-grid:nth-child(137) { z-index: calc(160 - 137); } .skin-grid:nth-child(138) { z-index: calc(160 - 138); } .skin-grid:nth-child(139) { z-index: calc(160 - 139); } .skin-grid:nth-child(140) { z-index: calc(160 - 140); } .skin-grid:nth-child(141) { z-index: calc(160 - 141); } .skin-grid:nth-child(142) { z-index: calc(160 - 142); } .skin-grid:nth-child(143) { z-index: calc(160 - 143); } .skin-grid:nth-child(144) { z-index: calc(160 - 144); } .skin-grid:nth-child(145) { z-index: calc(160 - 145); } .skin-grid:nth-child(146) { z-index: calc(160 - 146); } .skin-grid:nth-child(147) { z-index: calc(160 - 147); } .skin-grid:nth-child(148) { z-index: calc(160 - 148); } .skin-grid:nth-child(149) { z-index: calc(160 - 149); } .skin-grid:nth-child(150) { z-index: calc(160 - 150); } .skin-item:nth-child(1) { z-index: calc(160 - 1); } .skin-item:nth-child(2) { z-index: calc(160 - 2); } .skin-item:nth-child(3) { z-index: calc(160 - 3); } .skin-item:nth-child(4) { z-index: calc(160 - 4); } .skin-item:nth-child(5) { z-index: calc(160 - 5); } .skin-item:nth-child(6) { z-index: calc(160 - 6); } .skin-item:nth-child(7) { z-index: calc(160 - 7); } .skin-item:nth-child(8) { z-index: calc(160 - 8); } .skin-item:nth-child(9) { z-index: calc(160 - 9); } .skin-item:nth-child(10) { z-index: calc(160 - 10); } .skin-item:nth-child(11) { z-index: calc(160 - 11); } .skin-item:nth-child(12) { z-index: calc(160 - 12); } .skin-item:nth-child(13) { z-index: calc(160 - 13); } .skin-item:nth-child(14) { z-index: calc(160 - 14); } .skin-item:nth-child(15) { z-index: calc(160 - 15); } .skin-item:nth-child(16) { z-index: calc(160 - 16); } .skin-item:nth-child(17) { z-index: calc(160 - 17); } .skin-item:nth-child(18) { z-index: calc(160 - 18); } .skin-item:nth-child(19) { z-index: calc(160 - 19); } .skin-item:nth-child(20) { z-index: calc(160 - 20); } .skin-item:nth-child(21) { z-index: calc(160 - 21); } .skin-item:nth-child(22) { z-index: calc(160 - 22); } .skin-item:nth-child(23) { z-index: calc(160 - 23); } .skin-item:nth-child(24) { z-index: calc(160 - 24); } .skin-item:nth-child(25) { z-index: calc(160 - 25); } .skin-item:nth-child(26) { z-index: calc(160 - 26); } .skin-item:nth-child(27) { z-index: calc(160 - 27); } .skin-item:nth-child(28) { z-index: calc(160 - 28); } .skin-item:nth-child(29) { z-index: calc(160 - 29); } .skin-item:nth-child(30) { z-index: calc(160 - 30); } .skin-item:nth-child(31) { z-index: calc(160 - 31); } .skin-item:nth-child(32) { z-index: calc(160 - 32); } .skin-item:nth-child(33) { z-index: calc(160 - 33); } .skin-item:nth-child(34) { z-index: calc(160 - 34); } .skin-item:nth-child(35) { z-index: calc(160 - 35); } .skin-item:nth-child(36) { z-index: calc(160 - 36); } .skin-item:nth-child(37) { z-index: calc(160 - 37); } .skin-item:nth-child(38) { z-index: calc(160 - 38); } .skin-item:nth-child(39) { z-index: calc(160 - 39); } .skin-item:nth-child(40) { z-index: calc(160 - 40); } .skin-item:nth-child(41) { z-index: calc(160 - 41); } .skin-item:nth-child(42) { z-index: calc(160 - 42); } .skin-item:nth-child(43) { z-index: calc(160 - 43); } .skin-item:nth-child(44) { z-index: calc(160 - 44); } .skin-item:nth-child(45) { z-index: calc(160 - 45); } .skin-item:nth-child(46) { z-index: calc(160 - 46); } .skin-item:nth-child(47) { z-index: calc(160 - 47); } .skin-item:nth-child(48) { z-index: calc(160 - 48); } .skin-item:nth-child(49) { z-index: calc(160 - 49); } .skin-item:nth-child(50) { z-index: calc(160 - 50); } .skin-item:nth-child(51) { z-index: calc(160 - 51); } .skin-item:nth-child(52) { z-index: calc(160 - 52); } .skin-item:nth-child(53) { z-index: calc(160 - 53); } .skin-item:nth-child(54) { z-index: calc(160 - 54); } .skin-item:nth-child(55) { z-index: calc(160 - 55); } .skin-item:nth-child(56) { z-index: calc(160 - 56); } .skin-item:nth-child(57) { z-index: calc(160 - 57); } .skin-item:nth-child(58) { z-index: calc(160 - 58); } .skin-item:nth-child(59) { z-index: calc(160 - 59); } .skin-item:nth-child(60) { z-index: calc(160 - 60); } .skin-item:nth-child(61) { z-index: calc(160 - 61); } .skin-item:nth-child(62) { z-index: calc(160 - 62); } .skin-item:nth-child(63) { z-index: calc(160 - 63); } .skin-item:nth-child(64) { z-index: calc(160 - 64); } .skin-item:nth-child(65) { z-index: calc(160 - 65); } .skin-item:nth-child(66) { z-index: calc(160 - 66); } .skin-item:nth-child(67) { z-index: calc(160 - 67); } .skin-item:nth-child(68) { z-index: calc(160 - 68); } .skin-item:nth-child(69) { z-index: calc(160 - 69); } .skin-item:nth-child(70) { z-index: calc(160 - 70); } .skin-item:nth-child(71) { z-index: calc(160 - 71); } .skin-item:nth-child(72) { z-index: calc(160 - 72); } .skin-item:nth-child(73) { z-index: calc(160 - 73); } .skin-item:nth-child(74) { z-index: calc(160 - 74); } .skin-item:nth-child(75) { z-index: calc(160 - 75); } .skin-item:nth-child(76) { z-index: calc(160 - 76); } .skin-item:nth-child(77) { z-index: calc(160 - 77); } .skin-item:nth-child(78) { z-index: calc(160 - 78); } .skin-item:nth-child(79) { z-index: calc(160 - 79); } .skin-item:nth-child(80) { z-index: calc(160 - 80); } .skin-item:nth-child(81) { z-index: calc(160 - 81); } .skin-item:nth-child(82) { z-index: calc(160 - 82); } .skin-item:nth-child(83) { z-index: calc(160 - 83); } .skin-item:nth-child(84) { z-index: calc(160 - 84); } .skin-item:nth-child(85) { z-index: calc(160 - 85); } .skin-item:nth-child(86) { z-index: calc(160 - 86); } .skin-item:nth-child(87) { z-index: calc(160 - 87); } .skin-item:nth-child(88) { z-index: calc(160 - 88); } .skin-item:nth-child(89) { z-index: calc(160 - 89); } .skin-item:nth-child(90) { z-index: calc(160 - 90); } .skin-item:nth-child(91) { z-index: calc(160 - 91); } .skin-item:nth-child(92) { z-index: calc(160 - 92); } .skin-item:nth-child(93) { z-index: calc(160 - 93); } .skin-item:nth-child(94) { z-index: calc(160 - 94); } .skin-item:nth-child(95) { z-index: calc(160 - 95); } .skin-item:nth-child(96) { z-index: calc(160 - 96); } .skin-item:nth-child(97) { z-index: calc(160 - 97); } .skin-item:nth-child(98) { z-index: calc(160 - 98); } .skin-item:nth-child(99) { z-index: calc(160 - 99); } .skin-item:nth-child(100) { z-index: calc(160 - 100); } .skin-item:nth-child(101) { z-index: calc(160 - 101); } .skin-item:nth-child(102) { z-index: calc(160 - 102); } .skin-item:nth-child(103) { z-index: calc(160 - 103); } .skin-item:nth-child(104) { z-index: calc(160 - 104); } .skin-item:nth-child(105) { z-index: calc(160 - 105); } .skin-item:nth-child(106) { z-index: calc(160 - 106); } .skin-item:nth-child(107) { z-index: calc(160 - 107); } .skin-item:nth-child(108) { z-index: calc(160 - 108); } .skin-item:nth-child(109) { z-index: calc(160 - 109); } .skin-item:nth-child(110) { z-index: calc(160 - 110); } .skin-item:nth-child(111) { z-index: calc(160 - 111); } .skin-item:nth-child(112) { z-index: calc(160 - 112); } .skin-item:nth-child(113) { z-index: calc(160 - 113); } .skin-item:nth-child(114) { z-index: calc(160 - 114); } .skin-item:nth-child(115) { z-index: calc(160 - 115); } .skin-item:nth-child(116) { z-index: calc(160 - 116); } .skin-item:nth-child(117) { z-index: calc(160 - 117); } .skin-item:nth-child(118) { z-index: calc(160 - 118); } .skin-item:nth-child(119) { z-index: calc(160 - 119); } .skin-item:nth-child(120) { z-index: calc(160 - 120); } .skin-item:nth-child(121) { z-index: calc(160 - 121); } .skin-item:nth-child(122) { z-index: calc(160 - 122); } .skin-item:nth-child(123) { z-index: calc(160 - 123); } .skin-item:nth-child(124) { z-index: calc(160 - 124); } .skin-item:nth-child(125) { z-index: calc(160 - 125); } .skin-item:nth-child(126) { z-index: calc(160 - 126); } .skin-item:nth-child(127) { z-index: calc(160 - 127); } .skin-item:nth-child(128) { z-index: calc(160 - 128); } .skin-item:nth-child(129) { z-index: calc(160 - 129); } .skin-item:nth-child(130) { z-index: calc(160 - 130); } .skin-item:nth-child(131) { z-index: calc(160 - 131); } .skin-item:nth-child(132) { z-index: calc(160 - 132); } .skin-item:nth-child(133) { z-index: calc(160 - 133); } .skin-item:nth-child(134) { z-index: calc(160 - 134); } .skin-item:nth-child(135) { z-index: calc(160 - 135); } .skin-item:nth-child(136) { z-index: calc(160 - 136); } .skin-item:nth-child(137) { z-index: calc(160 - 137); } .skin-item:nth-child(138) { z-index: calc(160 - 138); } .skin-item:nth-child(139) { z-index: calc(160 - 139); } .skin-item:nth-child(140) { z-index: calc(160 - 140); } .skin-item:nth-child(141) { z-index: calc(160 - 141); } .skin-item:nth-child(142) { z-index: calc(160 - 142); } .skin-item:nth-child(143) { z-index: calc(160 - 143); } .skin-item:nth-child(144) { z-index: calc(160 - 144); } .skin-item:nth-child(145) { z-index: calc(160 - 145); } .skin-item:nth-child(146) { z-index: calc(160 - 146); } .skin-item:nth-child(147) { z-index: calc(160 - 147); } .skin-item:nth-child(148) { z-index: calc(160 - 148); } .skin-item:nth-child(149) { z-index: calc(160 - 149); } .skin-item:nth-child(150) { z-index: calc(160 - 150); } .pagination { display: flex; align-items: center; margin: 0px auto 16px; width: max-content; box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.12); transition: 200ms ease all; } .pagination > *:first-child { border-radius: 4px 0px 0px 4px; } .pagination > *:last-child { border-radius: 0px 4px 4px 0px; } .pagination .pagination-item { border: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: center; min-width: 28px; color: rgba(255, 255, 255, 0.85); background-color: #203747; padding: 4px; cursor: pointer; user-select: none; } .pagination .pagination-item:hover { filter: brightness(0.8); } .pagination .current-page { background-color: #0e1d2b; color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } .pagination .icon { width: 20px; height: 20px; } .role { font-size: 12px; font-weight: bold; padding: 3px 16px; background-color: #2d3a46; border-radius: 100px; white-space: nowrap; color: rgba(255, 255, 255, 0.85); } .role[href]:hover { transition: 300ms ease all; filter: brightness(1.3); } .role--admin { background: #FF3C5F; } .role--helper { background: #CC3CFF; } .role--skinship { background: linear-gradient(90deg, #3DADFF 0%, #2664C0 100%); } .role--contest-winner { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #FFB053 0%, #FFDC60 100%); } .role--contest-winner:hover { color: rgba(36, 36, 36, 0.8); } .role--contest-second { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #FFFFFF 0%, #D8CBF4 100%); } .role--contest-second:hover { color: rgba(36, 36, 36, 0.8); } .role--contest-third { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #F2A46C 0%, #FD8A36 100%); } .role--contest-third:hover { color: rgba(36, 36, 36, 0.8); } .role--soty-winner { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #FFB053 0%, #FFDC60 100%); } .role--soty-winner:hover { color: rgba(36, 36, 36, 0.8); } .role--soty-second { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #FFFFFF 0%, #D8CBF4 100%); } .role--soty-second:hover { color: rgba(36, 36, 36, 0.8); } .role--soty-third { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #F2A46C 0%, #FD8A36 100%); } .role--soty-third:hover { color: rgba(36, 36, 36, 0.8); } .role--soty-top-10 { color: rgba(36, 36, 36, 0.8); background: linear-gradient(90deg, #cc8335 0%, #ffe871 100%); } .role--soty-top-10:hover { color: rgba(36, 36, 36, 0.8); } .filters { padding: 12px; background-color: #203747; border-radius: 4px; display: flex; flex-direction: column; transition: ease all 250ms; } .filters .filter-groups { display: grid; gap: 8px; margin-top: 0; transition: ease all 250ms; grid-template-columns: repeat(6, 1fr); grid-template-areas: "order order order date date game-modes" "tags tags ratio resolutions count game-modes"; } .filters .filter-groups-container { margin-top: 8px; transition: ease all 250ms; overflow: hidden; width: 100%; } .filters.folded .filter-groups { margin-top: -100%; } .filters.folded .filter-groups-container { margin-top: 0; } .filters.folded .chevron-down { transform: rotate(180deg); } .filters .search { display: flex; gap: 8px; align-items: center; } .filters .search > .icon { width: 28px; height: 28px; color: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 4px; transition: 200ms ease all; } .filters .search > .icon.trash:hover { color: #ff603d; } .filters .search > .icon.chevron-down:hover { color: rgba(255, 255, 255, 0.85); } .filters .search .search-text-field { width: 100%; } .search { grid-area: search; } .filter-group--results { grid-area: count; } .filter-group--ratios { grid-area: ratio; } .filter-group--tags { grid-area: tags; } .filter-group--resolutions { grid-area: resolutions; } .filter-group--game-modes { grid-area: game-modes; } .filter-group--sort { grid-area: order; } .filter-group--release-date { grid-area: date; } .filter-group { display: flex; flex-direction: column; gap: inherit; } .filter-group__header { color: #3dadff; font-weight: 700; } .filter-group__items { display: flex; flex-direction: column; gap: inherit; } .filter-group__items--row { flex-wrap: wrap; flex-direction: row; } .filter-group--release-date .filter-group__items { display: grid; grid-template-columns: 1fr max-content 1fr; align-items: center; } .filter-group--release-date .date-seperator { color: #3dadff; } .filter-group--release-date .date-input-item { display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, 0.5); font-size: 12px; } .filter-group--release-date .date-input-item input { width: 100%; } .filter-tag { text-transform: capitalize; font-size: 14px; background-color: #3c505d; border-radius: 4px; padding: 4px 6px; font-weight: 600; width: max-content; cursor: pointer; user-select: none; transition: 200ms ease all; } .filter-tag.include { background-color: #3dadff; } .filter-tag.include:hover { filter: unset; } .filter-tag.exclude { background-color: #ff603d; } .filter-tag.exclude:hover { filter: unset; } .filter-tag:hover { filter: brightness(1.2); } .filter-game-mode { display: flex; align-items: center; gap: inherit; font-size: 16px; color: rgba(255, 255, 255, 0.5); cursor: pointer; } .filter-game-mode .icon { width: 24px; height: 24px; } .filter-game-mode:hover { color: rgba(255, 255, 255, 0.85); } .filter-game-mode.include { color: #3dadff; } @media (max-width: 600px) { .filters .filter-groups { grid-template-areas: "date" "order" "tags" "ratio" "resolutions" "game-modes" "count"; grid-template-columns: unset; } } .gallery__navigation { --icon-size: 24px; --padding: 16px; display: flex; padding: var(--padding); position: absolute; top: calc(50% - var(--padding) - var(--icon-size) / 2); border-radius: 100%; cursor: pointer; user-select: none; background-color: #203747; box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.12); transition: ease 200ms all; } .gallery__navigation .icon { height: var(--icon-size); width: var(--icon-size); } .gallery__navigation:hover { background-color: #2a475c; box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.24); } .gallery__navigation--prev { left: 16px; } .gallery__navigation--next { right: 16px; } .main-gallery { display: flex; flex-direction: column; gap: 16px; } .main-gallery__main-preview-container { display: flex; box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.12); position: relative; cursor: zoom-in; padding-top: 56.25%; } .main-gallery__main-preview-container:hover .gallery__navigation { opacity: 1; } .main-gallery__navigation { opacity: 0; } .main-gallery__main-preview { width: 100%; object-fit: cover; border-radius: 4px; position: absolute; top: 0; left: 0; height: 100%; object-fit: contain; } .caroussel { display: grid; grid-template-columns: repeat(6, 1fr); gap: inherit; width: 100%; } .caroussel__item { display: flex; position: relative; padding-top: 56.25%; cursor: pointer; box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.12); } .caroussel__item.active .caroussel__image { border-color: #3dadff; } .caroussel__item .play-button { width: 40px; height: 40px; z-index: 2; position: absolute; top: calc(50% - (40px / 2)); left: calc(50% - (40px / 2)); color: #c8c8c8; transition: ease all 200ms; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3)); } .caroussel__item .play-button--skinship { color: #3dadff; } .caroussel__item:hover .play-button { color: whitesmoke; } .caroussel__item:hover .play-button--skinship { color: #70c3ff; } .caroussel__image { width: 100%; object-fit: contain; border-radius: 4px; border: 2px solid rgba(255, 255, 255, 0.1); transition: ease 150ms all; position: absolute; top: 0; left: 0; height: 100%; } .fullscreen-gallery { position: fixed; top: 0; left: 0; display: grid; align-items: center; justify-content: space-between; grid-template-columns: 1fr; grid-template-rows: max-content 1fr; max-height: 100vh; height: 100%; width: 100%; background-color: #070e15; z-index: 10001; gap: 16px; cursor: zoom-out; } .fullscreen-gallery__main-preview-container { display: block; position: relative; width: 100%; height: 100%; } .fullscreen-gallery__main-preview-container > * { position: absolute; max-width: 100%; max-height: 100%; margin: 0 auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } .fullscreen-gallery__main-preview-container--yt-skinship embed, .fullscreen-gallery__main-preview-container--yt-author embed { max-width: var(--content-width); height: 90%; width: 100%; } .fullscreen-gallery__navigation { z-index: 101; } .menubar { display: grid; grid-template-areas: ". title buttons"; grid-template-columns: 1fr auto 1fr; background-color: #203747; align-items: center; width: 100%; min-height: 54px; cursor: initial; } .menubar__buttons-container { display: flex; grid-area: buttons; gap: 8px; margin-right: 16px; justify-self: end; } .menubar__button { padding: 8px; cursor: pointer; display: flex; } .menubar__button:hover { border-radius: 4px; background-color: #253f52; } .menubar__button:hover .cross { color: #ff603d; } .menubar__button:hover .fullscreen { color: #3dadff; } .menubar__button .icon { --menu-button-size: 24px; width: var(--menu-button-size); height: var(--menu-button-size); } .menubar__title { font-size: 24px; font-weight: 700; color: #3dadff; grid-area: title; justify-self: center; } .user { --user-gap: 8px; display: flex; width: max-content; align-items: center; gap: var(--user-gap); } .user__avatar-wrapper { display: flex; } .user__avatar { border-radius: 100%; background-color: rgba(255, 255, 255, 0.1); } .user__information { display: flex; flex-direction: column; height: max-content; gap: var(--user-gap); } .user__username { font-weight: 700; width: max-content; } .user__roles { display: flex; flex-wrap: wrap; gap: calc(var(--user-gap) / 2); } .user__roles:empty { display: none; } .user--small .user__avatar { width: 40px; height: 40px; } .user--small .user__username { font-size: 16px; } .user--regular .user__avatar { width: 48px; height: 48px; } .user--regular .user__username { font-size: 20px; } .user--big .user__avatar { width: 72px; height: 72px; } .user--big .user__username { font-size: 24px; } .variant-input { display: flex; flex-direction: column; background-color: #203747; border-radius: 4px; } .variant-input__header { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: inherit; } .variant-input__header input { min-width: 300px; } .variant-input__body { display: none; padding: 8px; gap: 8px; grid-template-areas: "imgur images" "textarea images"; grid-template-columns: 1fr 2fr; grid-template-rows: max-content 1fr; } .variant-input__body .variant-input__image-grid { grid-area: images; } .variant-input__body .input-group--images-textarea { grid-area: textarea; } .variant-input__body .input-group--imgur { grid-area: imgur; } .variant-input__body .input-group--images-textarea, .variant-input__body .input-group__elements, .variant-input__body textarea { height: 100%; } .variant-input__icon-container { display: flex; align-items: center; } .variant-input__icon-container .icon { color: rgba(255, 255, 255, 0.5); width: 28px; height: 28px; padding: 4px; cursor: pointer; } .variant-input__icon-container .icon:hover { color: rgba(255, 255, 255, 0.85); } .variant-input__icon-container .chevron-right { rotate: 90deg; transition: ease 250ms all; } .variant-input__image-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); } .variant-input__image-grid .ratio-16-9__container { background-position: center; background-size: contain; border-radius: 4px; overflow: hidden; } .variant-input--expanded .chevron-right { rotate: -90deg; } .variant-input--expanded .variant-input__body { display: grid; } .variant-input--add-new { display: flex; flex-direction: row; align-items: center; justify-content: center; cursor: pointer; gap: 4px; color: rgba(255, 255, 255, 0.5); transition: ease 250ms all; padding: 8px; } .variant-input--add-new:hover { filter: brightness(1.2); color: rgba(255, 255, 255, 0.85); } .variant-input--add-new .icon { width: 24px; height: 24px; } .banner { width: 100%; max-height: 150px; object-fit: cover; border-radius: 4px; } .bulletin__newspost-link { font-size: 14px; color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; gap: 4px; padding: 4px 2px; } .bulletin__newspost-link-label-container { overflow: hidden; width: 0; } .bulletin__newspost-link-label-container span { white-space: nowrap; margin-left: -100%; transition: ease 250ms all; } .bulletin__newspost-link svg { width: 20px; height: 20px; } .bulletin__newspost-link:hover .bulletin__newspost-link-label-container { width: initial; } .bulletin__newspost-link:hover .bulletin__newspost-link-label-container span { margin-left: 0; } .podium { justify-items: center; align-items: flex-end; font-size: 24px; } .podium__placement { font-weight: 700; color: #3dadff; } .podium__placement--1st { font-size: 1.6em; } .podium__placement--2nd { font-size: 1.3em; } @media (max-width: 900px) { .podium { grid-template-areas: "text-1 text-2" "image-1 image-2" "text-3 ." "image-3 ."; } .podium__placement--1st { grid-area: text-1; } .podium__placement--2nd { grid-area: text-2; } .podium__placement--3rd { grid-area: text-3; } .podium .skin-container:first-of-type { grid-area: image-1; } .podium .skin-container:nth-of-type(2) { grid-area: image-2; } .podium .skin-container:last-of-type { grid-area: image-3; } } @media (max-width: 600px) { .podium { grid-template-areas: "text-1" "image-1" "text-2" "image-2" "text-3" "image-3"; } } .data-overview { border-collapse: collapse; } .data-overview thead { background-color: #203747; border-bottom: 1px solid #2a475c; } .data-overview tr { border-bottom: 1px solid #253f52; } .data-overview th.resolutions { width: 70px; } .data-overview th.ratios { width: 100px; } .data-overview th.game-modes { width: 82px; } .data-overview td { padding: 5px 1px; } .data-overview td.warning { background-color: rgba(255, 0, 0, 0.2); } .data-overview .main-header th { position: sticky; top: 52px; background-color: #203747; } .data-overview .page .item { display: inline-flex; padding: 4px 6px; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 700; line-height: 12px; text-transform: capitalize; margin: 2px 0; } .data-overview .icon { width: 20px; height: 20px; } .column-select { position: fixed; bottom: 0; left: 0; background-color: #203747; display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; } .column-select__heading { padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .column-select__item { cursor: pointer; padding: 0 16px; } .article { display: flex; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.85); --gap: 24px; gap: calc(var(--gap) * 2); } .article h1, .article h2 { display: inline-block; } .article h1 { font-size: 36px; font-weight: 700; } .article h2 { font-size: 24px; font-weight: 500; } .article p { margin: 12px 0px; } .article > *:first-child { margin-top: var(--gap); } .article > *:last-child { margin-bottom: var(--gap); } .article .section { display: grid; grid-template-columns: 2fr 3fr; gap: calc(var(--gap) * 2); } .article .section.section-big { display: flex; flex-direction: column; gap: var(--gap); } .article .section .section-heading { color: #3dadff; margin: 0px; } .article .section .section-heading:after { content: ""; display: block; height: 3px; width: 48px; background-color: rgba(255, 255, 255, 0.85); margin-top: 8px; } .article .section .section-heading:target { color: #ffc85c; } .article .section .content *:first-child { margin-top: 0px; } .article .section .content *:last-child { margin-bottom: 0px; } .article .section .content ul { padding-left: 0px; } .article .section .content ul li { list-style: none; margin: 12px 0px; } .article .staff { display: flex; flex-direction: column; } .article .staff__title { color: #3dadff; } .article .staff__members { display: flex; flex-wrap: wrap; gap: 16px; } @media (max-width: 900px) { .article { --gap: 16px; } .article .section { grid-template-columns: 1fr; } } .form { display: grid; } .form--add { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "cover name link" "cover tags authors" "cover gamemodes categories" "cover gamemodes resolutions"; gap: 16px; } .form--add .input-group--link { grid-area: link; } .form--add .input-group--name { grid-area: name; } .form--add .input-group--cover { grid-area: cover; } .form--add .input-group--authors { grid-area: authors; } .form--add .input-group--gamemodes { grid-area: gamemodes; } .form--add .input-group--resolutions { grid-area: resolutions; } .form--add .input-group--categories { grid-area: categories; } .form hr, .form .variant-input { grid-column: span 3; } .cover-input { background-color: #1a2c39; border-radius: 4px; background-position: center; background-size: cover; transition: ease 250ms all; overflow: hidden; } .cover-input .icon { width: 32px; height: 32px; } .cover-input .ratio-16-9__container { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; text-align: center; color: rgba(255, 255, 255, 0.5); } .cover-input input[type="file"] { opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; z-index: 3; } .cover-input.image-selected .ratio-16-9__container { background-color: rgba(0, 0, 0, 0.4); } .cover-input:hover { filter: brightness(1.2); } .input-group { display: flex; gap: 4px; flex-direction: column; } .input-group__label { font-weight: 600; color: #3dadff; } .input-group__elements > * { width: 100%; } .game-mode-selector { display: flex; flex-direction: column; gap: 8px; } .game-mode-selector__entry { transition: ease 250ms all; align-items: center; display: flex; gap: inherit; font-size: 16px; color: rgba(255, 255, 255, 0.5); cursor: pointer; user-select: none; } .game-mode-selector__entry .icon { width: 24px; height: 24px; } .game-mode-selector__entry:hover { color: rgba(255, 255, 255, 0.85); } .game-mode-selector__entry.include { color: #3dadff; } #gacha-root { user-select: none; max-width: var(--content-width); } #gacha-root .coin-purse { display: flex; align-items: center; gap: 8px; } #gacha-root .coin-purse__img { width: 20px; margin-left: auto; } #gacha-root .coin-purse__label { font-size: 24px; font-weight: 500; color: #ffc85c; margin-right: auto; } #gacha-root .banner-menu { display: flex; flex-direction: column; gap: 8px; } #gacha-root .banner-menu__title { font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; } #gacha-root .banner-menu__title-stats { display: flex; flex-direction: column; margin-left: auto; } #gacha-root .banner-menu__title-label { font-size: 30px; font-weight: 900; color: #3dadff; } #gacha-root .banner-menu__title-pity-label--4 { color: plum; } #gacha-root .banner-menu__title-pity-label--5 { color: orange; } #gacha-root .main-menu { display: flex; flex-direction: column; gap: 8px; } #gacha-root .main-menu__header { display: flex; align-items: center; justify-content: space-between; font-size: 24px; color: #3dadff; font-weight: 700; } #gacha-root .main-menu__header-legend { font-size: 12px; color: rgba(255, 255, 255, 0.5); } #gacha-root .banner-selector-item { width: 100%; background-color: #203747; padding: 16px; font-weight: 700; font-size: 20px; display: flex; align-items: center; border-radius: 4px; transition: ease all 250ms; overflow: hidden; cursor: pointer; gap: 4px; position: relative; z-index: 0; } #gacha-root .banner-selector-item__name { color: white; margin-right: auto; text-shadow: black 3px 3px 4px; } #gacha-root .banner-selector-item__pity-4, #gacha-root .banner-selector-item__pity-5, #gacha-root .banner-selector-item__total { font-weight: 500; min-width: 1em; } #gacha-root .banner-selector-item__pity-4 { color: plum; } #gacha-root .banner-selector-item__pity-5 { color: orange; } #gacha-root .banner-selector-item__cover { position: absolute; left: 0; mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); z-index: -1; } #gacha-root .banner-selector-item:hover { background-color: #253f52; } #gacha-root .skin-preview { border-left: 4px solid grey; } #gacha-root .skin-preview-label { font-size: 24px; color: #3dadff; padding-left: 8px; font-weight: 700; } #gacha-root .skin-preview-list { display: flex; overflow-x: scroll; gap: 16px; padding: 8px; scrollbar-width: thin; } #gacha-root .skin-preview-item { display: flex; flex-direction: column; flex: none; background-color: #203747; border-radius: 4px; max-width: 320px; color: rgba(255, 255, 255, 0.85); } #gacha-root .skin-preview-item__cover { width: 320px; height: 180px; border-radius: 4px; } #gacha-root .skin-preview-item__title, #gacha-root .skin-preview-item__author { padding: 4px 8px; } #gacha-root .skin-preview-item__title { display: flex; font-size: 16px; font-weight: 700; gap: 4px; } #gacha-root .skin-preview-item__title span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #gacha-root .skin-preview-item__title .icon { width: 20px; min-width: 20px; height: 20px; min-height: 20px; } #gacha-root .skin-preview-item__title .icon.standard { order: 1; } #gacha-root .skin-preview-item__title .icon.taiko { order: 2; } #gacha-root .skin-preview-item__title .icon.catch { order: 3; } #gacha-root .skin-preview-item__title .icon.mania { order: 4; } #gacha-root .skin-preview-item__title .icon:first-of-type { margin-left: auto; } #gacha-root .skin-preview-item__author { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; } #gacha-root .skin-preview--4 { border-left-color: plum; } #gacha-root .skin-preview--5 { border-left-color: orange; } #gacha-root .skin-item { word-wrap: anywhere; } #gacha-root .skin-item--rarity-4 { box-shadow: plum 2px 2px 12px; } #gacha-root .skin-item--rarity-5 { animation-duration: 5s; box-shadow: orange 2px 2px 16px; } #gacha-root .skin-collection { display: flex; gap: 8px; flex-direction: column; } #gacha-root .skin-collection .skin-grid { grid-template-columns: repeat(5, 1fr); } #gacha-root .skin-collection .skin-item:hover { border-radius: 4px !important; } #gacha-root .skin-collection .skin-item__tags-list-container, #gacha-root .skin-collection .skin-item .information-seperator, #gacha-root .skin-collection .skin-item .resolution, #gacha-root .skin-collection .skin-item__cover-versions { display: none !important; } #gacha-root .skin-collection .skin-item--not-owned { pointer-events: none; } #gacha-root .skin-collection .skin-item--not-owned .skin-item__cover { background: rgba(0, 0, 0, 0.3); } #gacha-root .skin-collection .skin-item--not-owned .skin-item__cover .cover { visibility: hidden; } #gacha-root .skin-collection .skin-item--not-owned .skin-item__cover:after { content: "?"; font-size: 24px; color: rgba(255, 255, 255, 0.5); display: block; position: absolute; left: calc(50% - 0.5ex); top: 50%; } #gacha-root .skin-collection__header { font-size: 48px; margin: auto; } #gacha-root .skin-collection__section-label, #gacha-root .skin-collection__header { font-size: 30px; color: #3dadff; font-weight: 700; padding: 8px 0px; } @media (max-width: 1200px) { .skin-collection .skin-grid { grid-template-columns: repeat(4, 1fr) !important; } } @media (max-width: 1050px) { .skin-collection .skin-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 900px) { .skin-collection .skin-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .skin-collection .skin-grid { grid-template-columns: repeat(1, 1fr) !important; } } .coin-popup { border-radius: 20px; background-color: rgba(0, 0, 0, 0.5); position: absolute; display: flex; align-items: center; padding: 4px; z-index: 100000; user-select: none; } .coin-popup__coin { width: 24px; height: 28px; } .coin-popup__label { color: rgba(255, 255, 255, 0.5); } .skin { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); grid-template-areas: "title title title title" "gallery gallery gallery information"; } .skin .title { grid-area: title; } .skin .gallery { grid-area: gallery; } .skin .information { grid-area: information; } .skin .title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .skin .title .left { display: flex; gap: 16px; align-items: center; } .skin .title .left .skin-name { color: #3dadff; font-size: 24px; font-weight: 700; } .skin .title .left .game-modes { display: flex; align-items: center; gap: 4px; } .skin .title .left .game-modes .icon { width: 28px; height: 28px; } .skin .title .right { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .skin .skin-information { display: flex; flex-direction: column; gap: 8px; } .skin .skin-information__authors h1 { font-size: 16px; } .skin .skin-information__authors .user { margin-top: 8px; } .skin .skin-information__links { display: flex; flex-direction: column; gap: 8px; } @media (max-width: 900px) { .skin { grid-template-columns: repeat(1, 1fr); gap: 16px; grid-template-areas: "title" "gallery" "information" "versions"; } .gallery .caroussel { grid-template-columns: repeat(5, 1fr); margin-top: 8px; gap: 8px; } } @media (max-width: 600px) { .gallery .caroussel { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 300px) { .gallery .caroussel { grid-template-columns: repeat(3, 1fr); } } .submission { display: flex; flex-direction: column; width: 100%; gap: 8px; } .submission #form, .submission #sheet { width: 100%; height: 80vh; border: none; } .submission p, .submission ul { margin: 0; } .user-info { display: flex; font-weight: 700; font-size: 20px; justify-content: space-between; } .user-info .user-stats { display: flex; align-items: center; gap: 6px; margin: 0px 16px 0px 16px; } .user-info .user-stats .icon { width: 20px; height: 20px; } .user-info .user-stats .count { font-size: 18px; } .user-info .user-stats .skin-count, .user-info .user-stats .game-modes { display: flex; gap: 4px; align-items: center; color: rgba(255, 255, 255, 0.85); } .user-info .user-stats .game-modes .icon { padding: 2px; } .user-info .user-stats .dates { display: flex; align-items: end; flex-direction: column; } @media (max-width: 900px) { .user-info { flex-direction: column; } .user-info .user-stats { margin: 0px; margin-top: 8px; flex-wrap: wrap; } .user-info .user-stats .dates { order: 3; align-items: unset; } } #main { display: grid; gap: 16px; } #main > *:last-child { margin-bottom: 16px; } .date { color: rgba(255, 255, 255, 0.5); font-size: 12px; width: max-content; } .ratio-16-9 { position: relative; padding-top: 56.25%; } .ratio-16-9__container { width: 100%; height: 100%; top: 0; left: 0; position: absolute; } /** shared skin grid class */ .skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; } #skin-grid-results:empty { display: none; } @media (max-width: 900px) { .skin-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .skin-grid { grid-template-columns: repeat(1, 1fr); } } /*# sourceMappingURL=main.css.map */