|
|
Line 35: |
Line 35: |
| flex: 1 1 100%; /* Each box takes full width in smaller viewports */ | | flex: 1 1 100%; /* Each box takes full width in smaller viewports */ |
| } | | } |
| }
| |
|
| |
|
| |
|
| |
| .ModuleGenerator-container {
| |
| position: relative;
| |
| width: 298px;
| |
| height: 404px;
| |
| }
| |
|
| |
| .ModuleGenerator-container img,
| |
| .ModuleGenerator-container span,
| |
| .ModuleGenerator-container div {
| |
| position: absolute;
| |
| }
| |
|
| |
| .ModuleGenerator-container img {
| |
| max-width: 100%;
| |
| max-height: 100%;
| |
| z-index: 1;
| |
| }
| |
|
| |
| .ModuleGenerator-container span {
| |
| display: block;
| |
| }
| |
|
| |
| .ModuleGenerator-bg-light2 {
| |
| opacity: 0.33;
| |
| }
| |
|
| |
| .ModuleGenerator-icon {
| |
| top: 50px;
| |
| margin-right: auto;
| |
| margin-left: auto;
| |
| left: 0;
| |
| right: 0;
| |
| z-index: 2;
| |
| }
| |
|
| |
| .ModuleGenerator-module-class {
| |
| width: 36px;
| |
| height: 36px;
| |
| top: 8px;
| |
| left: 10px;
| |
| }
| |
|
| |
| .ModuleGenerator-socket-type {
| |
| width: 36px;
| |
| height: 36px;
| |
| top: 8px;
| |
| left: 48px;
| |
| }
| |
|
| |
| .ModuleGenerator-cost-icon {
| |
| width: 36px;
| |
| height: 36px;
| |
| top: 8px;
| |
| right: 36px;
| |
| }
| |
|
| |
| .ModuleGenerator-cost {
| |
| top: 4px;
| |
| right: 18px;
| |
| color: #fff;
| |
| font-family: "Teko", sans-serif;
| |
| font-size: 36px;
| |
| z-index: 2;
| |
| }
| |
|
| |
| .ModuleGenerator-name {
| |
| top: 240px;
| |
| color: #fff;
| |
| text-align: center;
| |
| font-family: "Noto Sans", sans-serif;
| |
| font-size: 36px;
| |
| font-weight: 500;
| |
| line-height: 1;
| |
| z-index: 2;
| |
| }
| |
|
| |
| .ModuleGenerator-rarity-mask {
| |
| left: 25%;
| |
| top: 50px;
| |
| width: 148px;
| |
| height: 148px;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| z-index: 2;
| |
| }
| |
|
| |
| .ModuleGenerator-special-mask {
| |
| z-index: 3;
| |
| } | | } |
Revision as of 07:39, 7 June 2024
/* CSS placed here will be applied to all skins */
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.image-grid img {
max-width: 100%;
height: auto;
}
body.page-Main_Page div#siteSub { display: none !important; }
.main-page-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
.main-page-box {
background-color: #1a1a1a;
color: #ffffff;
padding: 20px;
border-radius: 10px;
margin: 10px;
flex: 1 1 300px;
text-align: center;
box-sizing: border-box;
}
@media (max-width: 900px) {
.box {
flex: 1 1 100%; /* Each box takes full width in smaller viewports */
}
}