mirror of
https://github.com/PretendoNetwork/website.git
synced 2025-04-02 11:11:50 -04:00
709 lines
12 KiB
CSS
709 lines
12 KiB
CSS
html,
|
|
body,
|
|
div.main-body {
|
|
height: 100%;
|
|
}
|
|
|
|
body,
|
|
div.main-body,
|
|
.miieditor-wrapper {
|
|
z-index: -1;
|
|
user-select: none;
|
|
background: var(--bg-shade-0);
|
|
}
|
|
|
|
svg.logotype {
|
|
position: absolute;
|
|
width: 120px;
|
|
top: 42px;
|
|
left: 60px;
|
|
}
|
|
|
|
.miieditor-wrapper {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
|
|
width: 95vw;
|
|
max-width: 1920px;
|
|
height: 100%;
|
|
margin: auto;
|
|
gap: 0 120px;
|
|
}
|
|
.params-wrapper::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background: var(--bg-shade-1);
|
|
border-radius: 100% 0 0 100%;
|
|
width: 1300px;
|
|
height: 1700px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: -200px;
|
|
z-index: -1;
|
|
}
|
|
.miieditor-wrapper::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background: radial-gradient(
|
|
closest-side,
|
|
var(--bg-shade-1) 0%,
|
|
rgba(27, 31, 59, 0) 100%
|
|
);
|
|
width: 200vh;
|
|
height: 200vh;
|
|
top: -100vh;
|
|
left: -100vh;
|
|
z-index: -1;
|
|
}
|
|
|
|
.canvas-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
canvas#miiCanvas {
|
|
width: auto;
|
|
height: auto;
|
|
transform-origin: center;
|
|
transition: transform 200ms, filter 200ms;
|
|
}
|
|
|
|
div.mii-img-wrapper::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -22px;
|
|
height: 72px;
|
|
width: 100%;
|
|
background: radial-gradient(
|
|
farthest-side,
|
|
var(--bg-shade-2) 0%,
|
|
rgba(35, 39, 74, 0) 100%
|
|
);
|
|
}
|
|
|
|
div.params-wrapper {
|
|
position: relative;
|
|
margin: auto;
|
|
display: grid;
|
|
z-index: 3;
|
|
}
|
|
|
|
div.tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(11, 1fr);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: #0a0c19;
|
|
padding: 6px;
|
|
gap: 6px;
|
|
border-radius: 6px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
div.tabs .tabbtn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
aspect-ratio: 1;
|
|
border-radius: 6px;
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
div.tabs .tabbtn::after {
|
|
content: "";
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: url("/assets/images/miieditor.svg");
|
|
background-position: calc(var(--assetcol) * -12px) -312px;
|
|
transform: scale(2.9);
|
|
}
|
|
div.tabs .tabbtn:hover,
|
|
div.tabs .tabbtn.active {
|
|
background: var(--bg-shade-2);
|
|
}
|
|
|
|
div.subtabs {
|
|
position: relative;
|
|
display: flex;
|
|
width: fit-content;
|
|
}
|
|
div.subtabs .subtabbtn {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60px;
|
|
border-radius: 6px;
|
|
background: none;
|
|
padding: 0;
|
|
color: var(--text-shade-3);
|
|
aspect-ratio: 1;
|
|
}
|
|
div.subtabs .subtabbtn::after {
|
|
content: "";
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: url("/assets/images/miieditor.svg");
|
|
background-position: calc(var(--assetcol) * -12px) -324px;
|
|
transform: scale(2.9);
|
|
}
|
|
div.subtabs .subtabbtn.active::before,
|
|
div.subtabs .subtabbtn.active:hover::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 5%;
|
|
width: 90%;
|
|
height: 5px;
|
|
background: var(--accent-shade-1);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.has-sliders {
|
|
grid-template-columns: 60px auto;
|
|
gap: 12px;
|
|
}
|
|
.has-sliders label {
|
|
position: relative;
|
|
display: flex;
|
|
width: 60px;
|
|
height: 60px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.has-sliders label::after {
|
|
content: "";
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url("/assets/images/miieditor.svg");
|
|
background-position: calc(var(--assetcol) * -16px) -336px;
|
|
transform: scale(3);
|
|
}
|
|
|
|
.has-textinput {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
grid-auto-rows: auto;
|
|
gap: 24px;
|
|
}
|
|
.has-textinput label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.has-textinput .icons {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
}
|
|
.has-textinput .icons input[type="checkbox"] {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
height: 49px;
|
|
width: 49px;
|
|
}
|
|
|
|
input[type="checkbox"]#allowCopying:checked {
|
|
background: no-repeat center/80% url(../images/copy.svg), var(--accent-shade-0);
|
|
}
|
|
input[type="checkbox"]#disableSharing:checked {
|
|
background: no-repeat center/80% url(../images/share.svg), var(--accent-shade-0);
|
|
}
|
|
input[type="checkbox"]#favorite:checked {
|
|
background: no-repeat center/80% url(../images/star.svg), var(--accent-shade-0);
|
|
}
|
|
|
|
form.params {
|
|
grid-template-columns: repeat(2, auto);
|
|
height: 618px;
|
|
width: 582px;
|
|
}
|
|
form.params .tab {
|
|
display: none;
|
|
gap: 4rem 0;
|
|
}
|
|
form.params .tab.active {
|
|
display: grid;
|
|
}
|
|
|
|
fieldset,
|
|
fieldset.has-subpages .subpage {
|
|
appearance: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: none;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(4, 1fr);
|
|
gap: 18px;
|
|
width: 100%;
|
|
height: fit-content;
|
|
}
|
|
fieldset.active {
|
|
display: grid;
|
|
}
|
|
fieldset input[type="radio"] {
|
|
display: none;
|
|
}
|
|
fieldset input[type="radio"] + label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
border-radius: 18px;
|
|
background: var(--bg-shade-3);
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
}
|
|
fieldset.has-subpages.active {
|
|
display: block;
|
|
}
|
|
fieldset.has-subpages .subpage.active {
|
|
display: grid;
|
|
}
|
|
|
|
fieldset:not(.color, #favoriteColor) input[type="radio"] + label::after {
|
|
content: "";
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url("/assets/images/miieditor.svg");
|
|
background-position: calc(
|
|
((var(--assetcol) + (var(--subpage, 0) * 12)) * -24px)
|
|
)
|
|
calc(var(--assetrow) * -24px);
|
|
transform: scale(4.5);
|
|
}
|
|
|
|
fieldset input[type="radio"]:checked + label {
|
|
background: var(--bg-shade-4);
|
|
box-shadow: inset 0 0 0 4px var(--accent-shade-1);
|
|
}
|
|
fieldset.color input[type="radio"]:checked + label,
|
|
fieldset#favoriteColor input[type="radio"]:checked + label {
|
|
box-shadow: inset 0 0 0 4px var(--accent-shade-1),
|
|
inset 0 0 0 6px var(--bg-shade-1);
|
|
}
|
|
|
|
input[type="range"].invert {
|
|
direction: rtl;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
width: max-content;
|
|
height: fit-content;
|
|
grid-column: 1 / span 4;
|
|
grid-row: 4;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
color: var(--text-shade-1);
|
|
}
|
|
.pagination .current-page-index {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
color: var(--text-shade-3);
|
|
width: 18px;
|
|
margin-right: 0.5ch;
|
|
text-align: right;
|
|
}
|
|
.page-btn {
|
|
appearance: none;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin-left: 8px;
|
|
}
|
|
.page-btn:hover {
|
|
background: none;
|
|
}
|
|
.page-btn:hover svg path {
|
|
fill: var(--accent-shade-3);
|
|
}
|
|
.page-btn svg {
|
|
height: 36px;
|
|
margin: 6px;
|
|
}
|
|
.page-btn.disabled {
|
|
pointer-events: none;
|
|
}
|
|
.page-btn.disabled svg path {
|
|
fill: var(--bg-shade-3);
|
|
}
|
|
|
|
.tab#saveTab {
|
|
gap: 2rem 0;
|
|
}
|
|
.tab#saveTab p.save-prompt {
|
|
margin-bottom: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.mii-comparison-animation-wrapper {
|
|
position: relative;
|
|
height: fit-content;
|
|
}
|
|
.mii-comparison {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, auto);
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
.mii-comparison.confirmed {
|
|
position: absolute;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
}
|
|
.mii-comparison img {
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
background: var(--bg-shade-3);
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.mii-comparison .new-mii-wrapper {
|
|
position: relative;
|
|
transition: right 500ms, transform 500ms;
|
|
right: 0;
|
|
}
|
|
.mii-comparison .new-mii-wrapper::after {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
box-shadow: inset 0 0 0 8px var(--accent-shade-1);
|
|
border-radius: 24px;
|
|
margin: 0;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.mii-comparison svg {
|
|
width: 72px;
|
|
height: 72px;
|
|
}
|
|
.mii-comparison svg path {
|
|
fill: var(--accent-shade-1);
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.25s forwards;
|
|
}
|
|
.fade-out {
|
|
animation: fadeOut 0.5s forwards;
|
|
}
|
|
.mii-comparison div.new-mii-wrapper.centered-mii-img {
|
|
position: absolute;
|
|
right: 50%;
|
|
transform: translateX(50%);
|
|
height: 100%;
|
|
aspect-ratio: 1;
|
|
width: auto;
|
|
}
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
button * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media screen and (max-width: 1400px) {
|
|
form.params {
|
|
height: 562px;
|
|
width: 512px;
|
|
}
|
|
|
|
fieldset,
|
|
fieldset.has-subpages .subpage {
|
|
gap: 12px;
|
|
}
|
|
|
|
div.params-wrapper {
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.params-wrapper::before {
|
|
left: -150px;
|
|
}
|
|
|
|
div.tabs {
|
|
padding: 4px;
|
|
gap: 2px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1280px) {
|
|
form.params {
|
|
height: 492px;
|
|
width: 480px;
|
|
}
|
|
|
|
fieldset,
|
|
fieldset.has-subpages .subpage {
|
|
gap: 8px;
|
|
}
|
|
|
|
div.params-wrapper {
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.params-wrapper::before {
|
|
left: -150px;
|
|
}
|
|
|
|
fieldset:not(.color, #favoriteColor) input[type="radio"] + label::after {
|
|
transform: scale(4);
|
|
}
|
|
|
|
div.subtabs .subtabbtn::after,
|
|
div.tabs .tabbtn::after {
|
|
transform: scale(2.4);
|
|
}
|
|
div.subtabs .subtabbtn {
|
|
width: 48px;
|
|
}
|
|
|
|
.params-wrapper::before {
|
|
left: -100px;
|
|
}
|
|
|
|
div.tabs {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
form.params .tab {
|
|
gap: 2rem 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1120px) {
|
|
form.params {
|
|
height: 444px;
|
|
width: 420px;
|
|
}
|
|
|
|
fieldset,
|
|
fieldset.has-subpages .subpage {
|
|
gap: 6px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1080px) {
|
|
.canvas-wrapper {
|
|
height: calc(100% - 12px);
|
|
}
|
|
|
|
svg.logotype {
|
|
left: 0;
|
|
}
|
|
svg.logotype text#Pretendo {
|
|
display: none;
|
|
}
|
|
|
|
.miieditor-wrapper {
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto fit-content(100%);
|
|
margin: auto;
|
|
max-width: 360px;
|
|
width: 90vw;
|
|
}
|
|
|
|
div.params-wrapper {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
div.tabs,
|
|
div.subtabs {
|
|
order: 2;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
fieldset {
|
|
order: 1;
|
|
}
|
|
|
|
form.params {
|
|
width: 100%;
|
|
height: 100%;
|
|
order: 1;
|
|
}
|
|
fieldset input[type="radio"] + label {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
aspect-ratio: 1;
|
|
}
|
|
fieldset:not(.color, #favoriteColor) input[type="radio"] + label::after {
|
|
transform: scale(3.5);
|
|
}
|
|
|
|
.has-sliders {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
gap: 2px 6px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--text-shade-1) var(--bg-shade-3);
|
|
}
|
|
.has-sliders::-webkit-scrollbar {
|
|
width: 12px;
|
|
background: var(--bg-shade-3);
|
|
border-radius: 9px;
|
|
}
|
|
.has-sliders::-webkit-scrollbar-thumb {
|
|
background: var(--text-shade-1);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.params-wrapper::before {
|
|
top: -12px;
|
|
left: -100vw;
|
|
width: 300vw;
|
|
border-radius: 0;
|
|
background: var(--bg-shade-2);
|
|
transform: none;
|
|
}
|
|
|
|
fieldset,
|
|
fieldset.has-subpages .subpage {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(3, 1fr) 48px;
|
|
width: 100%;
|
|
gap: 8px;
|
|
}
|
|
|
|
.pagination {
|
|
grid-column: 1 / span 4;
|
|
grid-row: 4;
|
|
}
|
|
|
|
fieldset:not(.has-sliders, .has-textinput) {
|
|
position: relative;
|
|
margin-bottom: -60px;
|
|
}
|
|
|
|
div.tabs {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
form.params .tab {
|
|
gap: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
div.subtabs {
|
|
z-index: 4;
|
|
}
|
|
|
|
form.params {
|
|
grid-template-columns: repeat(2, auto);
|
|
}
|
|
|
|
div.tabs .tabbtn::after,
|
|
div.subtabs .subtabbtn::after,
|
|
.has-sliders label::after {
|
|
transform: scale(2);
|
|
}
|
|
|
|
div.subtabs .subtabbtn {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 424px) {
|
|
fieldset:not(.color, #favoriteColor) input[type="radio"] + label::after {
|
|
transform: scale(2.8);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 396px) {
|
|
div.tabs .tabbtn::after,
|
|
div.subtabs .subtabbtn::after,
|
|
.has-sliders label::after {
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
div.tabs .tabbtn {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
div.subtabs .subtabbtn {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
div.pagination {
|
|
transform: scale(0.7);
|
|
transform-origin: right;
|
|
}
|
|
|
|
.has-textinput {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
fieldset,
|
|
fieldset.has-subpages .subpage {
|
|
gap: 4px;
|
|
}
|
|
|
|
fieldset input[type="radio"]:checked + label {
|
|
box-shadow: inset 0 0 0 3px var(--accent-shade-1);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 344px) {
|
|
fieldset:not(.color, #favoriteColor) input[type="radio"] + label::after {
|
|
transform: scale(2);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
div.tabs .tabbtn {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
div.tabs .tabbtn::after {
|
|
transform: scale(1.25);
|
|
}
|
|
}
|