|
|
| Line 1: |
Line 1: |
| .card-container {
| |
| display: inline-flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| position: relative;
| |
| vertical-align: top;
| |
| text-align: center;
| |
| gap: 2px;
| |
| margin: 2px;
| |
| }
| |
|
| |
|
| /* Disable hover for cards with mobile inline-block style */
| |
| .card-container.wds-dropdown::before,
| |
| .card-container.wds-dropdown::after {
| |
| display: none !important;
| |
| }
| |
|
| |
| .card-wrapper {
| |
| display: block;
| |
| position: relative;
| |
| }
| |
|
| |
| .card-body {
| |
| display: block;
| |
| width: min-content;
| |
| box-shadow: 0 0 5px #43403D;
| |
| /*
| |
| Apply border radius and overflow: hidden on an element with static positioning--
| |
| this way, children get rounded corners unless they use position: absolute.
| |
| */
| |
| border-radius: 5px;
| |
| overflow: hidden;
| |
| background: #E9E5DC;
| |
| /* Fix background showing through rounded corners of child image */
| |
| background: linear-gradient(transparent 10px, #E9E5DC 10px
| |
| /* arbitrary value > border-radius */
| |
| );
| |
| text-align: center;
| |
| }
| |
|
| |
| .mini-card .card-body {
| |
| border-radius: 7px;
| |
| background: none;
| |
| }
| |
|
| |
| .card-body:hover {
| |
| outline: solid 2px #E9E5DC;
| |
| }
| |
|
| |
| .card-image-container, .card-image-container figure {
| |
| display: flex;
| |
| width: 74px;
| |
| height: 74px;
| |
| border-bottom-right-radius: 14px;
| |
| overflow: hidden;
| |
| /* center images that are not square */
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
|
| |
| .mini-card .card-image-container, .mini-card .card-image-container figure {
| |
| width: 48px;
| |
| height: 48px;
| |
| border-bottom-right-radius: initial;
| |
| background-size: cover !important;
| |
| }
| |
|
| |
| .mini-card .card-image-container img {
| |
| width: 48px;
| |
| height: 48px;
| |
| }
| |
|
| |
| /* Mini on desktop, not so mini */
| |
| .skin-fandomdesktop .mini-card {
| |
| .card-image-container, .card-image-container figure {
| |
| width: 56px;
| |
| height: 56px;
| |
| }
| |
|
| |
| .card-image-container img {
| |
| width: 56px;
| |
| height: 56px;
| |
| }
| |
|
| |
| .card-caption {
| |
| width: 56px;
| |
| }
| |
|
| |
| .card-image-container a.new {
| |
| height: 56px;
| |
| width: 56px;
| |
| background-image: url(https://static.wikia.nocookie.net/gensin-impact/images/4/4a/Item_Unknown.png/revision/latest/scale-to-width-down/56);
| |
| }
| |
| }
| |
|
| |
| /* Mini on mobile */
| |
| .skin-fandommobile .mini-card .card-icon img {
| |
| width: 10px;
| |
| height: 10px;
| |
| }
| |
|
| |
| .skin-fandommobile .card-image-container img {
| |
| border: none;
| |
| width: 74px;
| |
| height: 74px;
| |
| object-fit: contain;
| |
| }
| |
| .skin-fandommobile .mini-card .card-image-container img {
| |
| width: 48px;
| |
| height: 48px;
| |
| }
| |
|
| |
| .skin-fandommobile .card-image-container figure {
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| .card-text {
| |
| display: block;
| |
| font-size: 12px;
| |
| line-height: 16px;
| |
| height: 16px;
| |
| /* only show 1 line of text */
| |
| overflow-wrap: anywhere;
| |
| /* Push text down a bit. This means that the bottom 2px will overflow/be hidden. */
| |
| position: relative;
| |
| top: 2px;
| |
| text-align: center;
| |
| }
| |
|
| |
| .mini-card .card-text {
| |
| position: absolute;
| |
| bottom: 0;
| |
| top: unset;
| |
| font-size: 9px;
| |
| width: 100%;
| |
| background: rgba(27, 29, 36, 0.7);
| |
| color: #FFF;
| |
| height: 12px;
| |
| line-height: 10px;
| |
| overflow: hidden;
| |
| border-radius: 0 0 6px 6px;
| |
| word-break: break-all;
| |
| padding: 1px 0;
| |
| &:hover {
| |
| height: unset;
| |
| overflow: auto;
| |
| max-height: 100%;
| |
| scrollbar-width: thin;
| |
| }
| |
| }
| |
|
| |
| .card-text.multi-line {
| |
| height: auto;
| |
| }
| |
|
| |
| .card-text-small {
| |
| font-size: 10px;
| |
| line-height: 14px;
| |
| }
| |
|
| |
| .card-text-smaller {
| |
| font-size: 8px;
| |
| line-height: 14px;
| |
| }
| |
|
| |
| .card-font {
| |
| color: #495366;
| |
| font-family: "Genshin";
| |
| }
| |
|
| |
| .card-refinement {
| |
| position: absolute;
| |
| top: 1px;
| |
| left: 1px;
| |
| width: 13px;
| |
| height: 13px;
| |
| border-radius: 3px;
| |
| font-size: 12px;
| |
| font-weight: 500;
| |
| line-height: 13px;
| |
| text-align: center;
| |
| }
| |
|
| |
| .card-refinement::first-letter {
| |
| font-size: 0;
| |
| }
| |
|
| |
| .card-refinement.refine-1, .card-refinement.refine-2, .card-refinement.refine-3, .card-refinement.refine-4 {
| |
| background-color: rgba(67, 67, 67, 0.8);
| |
| color: #CCCCCC;
| |
| }
| |
|
| |
| .card-refinement.refine-5, .card-refinement.refine-1a {
| |
| background-color: rgba(211, 127, 50, 0.8);
| |
| color: #FFD816;
| |
| }
| |
|
| |
| .card-constellation {
| |
| position: absolute;
| |
| left: 2px;
| |
| bottom: 18px;
| |
| width: 13px;
| |
| height: 13px;
| |
| border-radius: 3px;
| |
| font-size: 12px;
| |
| font-weight: 500;
| |
| line-height: 13px;
| |
| text-align: center;
| |
| background-color: rgba(67, 67, 67, 0.8);
| |
| color: #CCCCCC;
| |
| }
| |
|
| |
| .card-constellation::first-letter {
| |
| font-size: 0;
| |
| }
| |
|
| |
| .card-constellation.constellation-6 {
| |
| background-color: rgba(249, 214, 78, 0.8);
| |
| color: #935A28;
| |
| }
| |
|
| |
| .card-icon {
| |
| position: absolute;
| |
| top: 1px;
| |
| left: 1px;
| |
| line-height: 0; /* prevent contents from being vertically displaced by line height */
| |
| z-index: 1;
| |
| }
| |
|
| |
| .card-icon-right {
| |
| position: absolute;
| |
| top: 1px;
| |
| right: 1px;
| |
| line-height: 0; /* prevent contents from being vertically displaced by line height */
| |
| }
| |
|
| |
| .card-icon-bottom-left {
| |
| position: absolute;
| |
| bottom: 17px;
| |
| left: 1px;
| |
| line-height: 0; /* prevent contents from being vertically displaced by line height */
| |
| }
| |
|
| |
| .card-icon-bottom-right {
| |
| position: absolute;
| |
| bottom: 17px;
| |
| right: 1px;
| |
| line-height: 0; /* prevent contents from being vertically displaced by line height */
| |
| }
| |
|
| |
| .card-equipped {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| border-radius: 15px;
| |
| box-shadow: 0 0 0 1pt #B9B9B5;
| |
| background: #485467;
| |
| background: rgba(72, 84, 103, 0.85);
| |
| width: 30px;
| |
| height: 30px;
| |
| overflow: hidden;
| |
| line-height: 0;
| |
| /* prevent contents from being vertically displaced by line height */
| |
| /* center horizontally and align bottom */
| |
| display: flex;
| |
| flex-flow: column-reverse;
| |
| align-items: center;
| |
| }
| |
|
| |
| .card-set-container {
| |
| position: absolute;
| |
| top: 0px;
| |
| right: 0px;
| |
| padding: 1px;
| |
| line-height: 0;
| |
| /* prevent contents from being vertically displaced by line height */
| |
| border-radius: 0px 5px 0px 5px;
| |
| background-color: #e0e0e0;
| |
| }
| |
|
| |
| .card-stars {
| |
| display: block;
| |
| height: 16px;
| |
| width: 100%;
| |
| position: absolute;
| |
| top: 62px;
| |
| /* 12px from the bottom of the card; 4px overlapping with card text */
| |
| line-height: 0;
| |
| /* prevent contents from being vertically displaced by line height */
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .card-caption {
| |
| width: 74px;
| |
| line-height: 1;
| |
| font-size: 12px;
| |
| hyphens: auto;
| |
| overflow-wrap: break-word;
| |
| }
| |
|
| |
| .mini-card .card-caption {
| |
| width: 48px;
| |
| }
| |
|
| |
| .card-caption.auto-width {
| |
| width: min-content;
| |
| /* wrap based on max word length */
| |
| max-width: 100%;
| |
| /* wrap if >100% */
| |
| min-width: 100%;
| |
| /* don't wrap early if <100% */
| |
| hyphens: none;
| |
| overflow-wrap: normal;
| |
| }
| |
|
| |
| /* Mobile list formatting */
| |
| .skin-fandomdesktop .card-mobile-text {
| |
| display: none;
| |
| }
| |
|
| |
| .skin-fandommobile .card-mobile-list .card-container {
| |
| display: block;
| |
| text-align: left;
| |
| margin: 0;
| |
| }
| |
|
| |
| .skin-fandommobile .card-mobile-list .card-body {
| |
| text-align: left
| |
| }
| |
|
| |
| .skin-fandommobile .card-mobile-list .card-body,
| |
| .skin-fandommobile .card-mobile-list .card-body:hover,
| |
| .skin-fandommobile .card-mobile-list .card-image-container {
| |
| background: none;
| |
| box-shadow: none;
| |
| outline: none;
| |
| }
| |
|
| |
| .skin-fandommobile .card-mobile-list .card-stars,
| |
| .skin-fandommobile .card-mobile-list .card-set-container,
| |
| .skin-fandommobile .card-mobile-list .card-equipped,
| |
| .skin-fandommobile .card-mobile-list .card-text,
| |
| .skin-fandommobile .card-mobile-list .card-caption,
| |
| .skin-fandommobile .card-mobile-list .card-refinement,
| |
| .skin-fandommobile .card-mobile-list .card-constellation,
| |
| .skin-fandommobile .card-mobile-list .card-equipped {
| |
| display: none;
| |
| }
| |
|
| |
| .skin-fandommobile .card-mobile-list .card-image-container img {
| |
| width: 30px;
| |
| height: 30px;
| |
| }
| |
|
| |
| .skin-fandommobile .card-mobile-list .card-wrapper,
| |
| .skin-fandommobile .card-mobile-list .card-body,
| |
| .skin-fandommobile .card-mobile-list .card-image-container,
| |
| .skin-fandommobile .card-mobile-list .card-image-container figure,
| |
| .skin-fandommobile .card-mobile-list .card-image-container figure a {
| |
| display: inline
| |
| }
| |
|
| |
| .skin-fandommobile .card-mobile-list .card-icon,
| |
| .skin-fandommobile .card-mobile-list .card-icon-right {
| |
| position: relative;
| |
| }
| |
|
| |
| /* Hide unknown images */
| |
| .card-image-container a.new {
| |
| display: block;
| |
| height: 74px;
| |
| width: 74px;
| |
| background-image: url(https://static.wikia.nocookie.net/gensin-impact/images/4/4a/Item_Unknown.png/revision/latest/scale-to-width-down/74);
| |
| background-size: cover;
| |
| font-size: 0;
| |
| }
| |
|
| |
| .mini-card .card-image-container a.new {
| |
| display: block;
| |
| height: 48px;
| |
| width: 48px;
| |
| background-image: url(https://static.wikia.nocookie.net/gensin-impact/images/4/4a/Item_Unknown.png/revision/latest/scale-to-width-down/48);
| |
| background-size: cover;
| |
| font-size: 0;
| |
| }
| |
|
| |
| /* Rarity backgrounds */
| |
| .card-rarity-0, .card-rarity-1, .card-quality-0, .card-quality-1 {
| |
| background: #a4a4a4;
| |
| background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/d/d0/Quality_1_background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .card-rarity-2, .card-quality-2 {
| |
| background: #5D8C81;
| |
| background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/7/71/Quality_2_background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .card-rarity-3, .card-quality-3 {
| |
| background: #6faaca;
| |
| background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/4/42/Quality_3_background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .card-rarity-4, .card-quality-4 {
| |
| background: #917ab1;
| |
| background: linear-gradient(0deg, #917ab1 0%, #6c6192 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/7/7e/Quality_4_background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .card-rarity-5, .card-quality-5 {
| |
| background: #9a6d43;
| |
| background: linear-gradient(0deg, #de9552 0%, #9a6d43 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/8/84/Quality_5_background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .card-rarity-5a, .card-quality-5a {
| |
| background: #AF5155;
| |
| background: linear-gradient(0deg, #DA4F55 0%, #AF5155 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/b/b0/Quality_5a_background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .card-rarity-123, .card-rarity-1-2-3, .card-rarity-1-3, .card-quality-123, .card-quality-1-2-3, .card-quality-1-3 {
| |
| background: #a4a4a4;
| |
| background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
| |
| background: conic-gradient(#76787c 0deg 60deg, #658CAF 60deg 180deg, #5D8C81 180deg 300deg, #76787c 300deg);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/3/33/Quality_1-3_background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .card-rarity-23, .card-rarity-2-3, .card-quality-23, .card-quality-2-3 {
| |
| background: #5D8C81;
| |
| background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
| |
| background: conic-gradient(#5D8C81 0deg 45deg, #658CAF 45deg 225deg, #5D8C81 225deg 360deg);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/3/3a/Quality_2-3_background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .card-rarity-34, .card-rarity-3-4, .card-quality-34, .card-quality-3-4 {
| |
| background: #6faaca;
| |
| background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
| |
| background: conic-gradient(#697b9b 0deg 45deg, #917ab1 45deg 225deg, #697b9b 225deg 360deg);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/2/27/Quality_3-4_background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .card-rarity-45, .card-rarity-4-5, .card-quality-45, .card-quality-4-5 {
| |
| background: #78609E;
| |
| background: linear-gradient(0deg, #78609E 0%, #78609E 100%);
| |
| background: conic-gradient(#6c6192 0deg 45deg, #de9552 45deg 225deg, #6c6192 225deg 360deg);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/e/e6/Quality_4-5_background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .mini-card .card-rarity-0, .mini-card .card-rarity-1, .mini-card .card-quality-0, .mini-card .card-quality-1 {
| |
| background: #a4a4a4;
| |
| background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/9/92/Quality_Mini_1_Background.png/revision/latest/scale-to-width-down/48);
| |
| }
| |
|
| |
| .mini-card .card-rarity-2, .mini-card .card-quality-2 {
| |
| background: #5D8C81;
| |
| background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/0/09/Quality_Mini_2_Background.png/revision/latest/scale-to-width-down/48);
| |
| }
| |
|
| |
| .mini-card .card-rarity-3, .mini-card .card-quality-3 {
| |
| background: #6faaca;
| |
| background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/f/f8/Quality_Mini_3_Background.png/revision/latest/scale-to-width-down/48);
| |
| }
| |
|
| |
| .mini-card .card-rarity-4, .mini-card .card-quality-4 {
| |
| background: #917ab1;
| |
| background: linear-gradient(0deg, #917ab1 0%, #6c6192 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/e/ee/Quality_Mini_4_Background.png/revision/latest/scale-to-width-down/48);
| |
| }
| |
|
| |
| .mini-card .card-rarity-5, .mini-card .card-quality-5 {
| |
| background: #9a6d43;
| |
| background: linear-gradient(0deg, #de9552 0%, #9a6d43 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/b/b1/Quality_Mini_5_Background.png/revision/latest/scale-to-width-down/48);
| |
| }
| |
|
| |
| .mini-card .card-rarity-5a, .mini-card .card-quality-5a {
| |
| background: #AF5155;
| |
| background: linear-gradient(0deg, #DA4F55 0%, #AF5155 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/f/f7/Quality_Mini_5a_Background.png/revision/latest/scale-to-width-down/48);
| |
| }
| |
|
| |
| .mini-card .card-rarity-123, .mini-card .card-rarity-1-2-3, .mini-card .card-rarity-1-3, .mini-card .card-quality-123, .mini-card .card-quality-1-2-3, .mini-card .card-quality-1-3 {
| |
| background: #a4a4a4;
| |
| background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
| |
| background: conic-gradient(#76787c 0deg 60deg, #658CAF 60deg 180deg, #5D8C81 180deg 300deg, #76787c 300deg);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/d/d8/Quality_Mini_1-3_Background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .mini-card .card-rarity-23, .mini-card .card-rarity-2-3, .mini-card .card-quality-23, .mini-card .card-quality-2-3 {
| |
| background: #5D8C81;
| |
| background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
| |
| background: conic-gradient(#5D8C81 0deg 45deg, #658CAF 45deg 225deg, #5D8C81 225deg 360deg);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/f/f1/Quality_Mini_2-3_Background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .mini-card .card-rarity-34, .mini-card .card-rarity-3-4, .mini-card .card-quality-34, .mini-card .card-quality-3-4 {
| |
| background: #6faaca;
| |
| background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
| |
| background: conic-gradient(#697b9b 0deg 45deg, #917ab1 45deg 225deg, #697b9b 225deg 360deg);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/0/02/Quality_Mini_3-4_Background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .mini-card .card-rarity-45, .mini-card .card-rarity-4-5, .mini-card .card-quality-45, .mini-card .card-quality-4-5 {
| |
| background: #78609E;
| |
| background: linear-gradient(0deg, #78609E 0%, #78609E 100%);
| |
| background: conic-gradient(#6c6192 0deg 45deg, #de9552 45deg 225deg, #6c6192 225deg 360deg);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/e/eb/Quality_Mini_4-5_Background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .miliastra-wonderland .card-image-container {
| |
| border-bottom-right-radius: 0;
| |
| }
| |
|
| |
| .miliastra-wonderland .card-quality-0,
| |
| .miliastra-wonderland .card-quality-1 {
| |
| background: #a4a4a4;
| |
| background: linear-gradient(0deg, #a4a4a4 0%, #76787c 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/7/7e/Quality_Miliastra_Wonderland_1_Background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .miliastra-wonderland .card-quality-2 {
| |
| background: #5D8C81;
| |
| background: linear-gradient(0deg, #5D8C81 0%, #4E7E6C 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/6/65/Quality_Miliastra_Wonderland_2_Background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .miliastra-wonderland .card-quality-3 {
| |
| background: #6faaca;
| |
| background: linear-gradient(0deg, #6faaca 0%, #697b9b 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/4/43/Quality_Miliastra_Wonderland_3_Background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .miliastra-wonderland .card-quality-4 {
| |
| background: #917ab1;
| |
| background: linear-gradient(0deg, #917ab1 0%, #6c6192 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/e/e3/Quality_Miliastra_Wonderland_4_Background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| .miliastra-wonderland .card-quality-5 {
| |
| background: #9a6d43;
| |
| background: linear-gradient(0deg, #de9552 0%, #9a6d43 100%);
| |
| background: url(https://static.wikia.nocookie.net/gensin-impact/images/9/95/Quality_Miliastra_Wonderland_5_Background.png/revision/latest/scale-to-width-down/74);
| |
| }
| |
|
| |
| /* Card list styling */
| |
| .card-list-container {
| |
| text-align: left;
| |
| }
| |
