mirror of
https://github.com/PretendoNetwork/website.git
synced 2025-04-02 11:11:50 -04:00
346 lines
6.1 KiB
CSS
346 lines
6.1 KiB
CSS
/* Removing until it's done */
|
|
.sign-in-history a {
|
|
display: none;
|
|
}
|
|
|
|
.account-wrapper {
|
|
display: grid;
|
|
column-gap: 48px;
|
|
margin-top: 80px;
|
|
color: var(--text-shade-1);
|
|
}
|
|
|
|
/* Account settings sidebar */
|
|
.account-sidebar .user {
|
|
margin: 55px auto;
|
|
width: fit-content;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
}
|
|
.account-sidebar .user .miiname {
|
|
font-size: 1.2rem;
|
|
color: var(--text-shade-3);
|
|
margin: 8px 0 4px;
|
|
}
|
|
.account-sidebar .user .username {
|
|
margin: 0;
|
|
}
|
|
.account-sidebar .user .tier-name {
|
|
margin: 12px 0;
|
|
line-height: 1.2em;
|
|
border-radius: 1.2em;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
padding: 4px 16px;
|
|
}
|
|
|
|
.account-sidebar .user .tier-level-0,
|
|
.account-sidebar .user .access-level-0 {
|
|
background: #2a2f50;
|
|
color: var(--text-shade-1);
|
|
border-color: #383f6b;
|
|
}
|
|
.account-sidebar .user .tier-level-1 {
|
|
background: rgba(255, 132, 132, 0.2);
|
|
color: #FF8484;
|
|
border-color: rgba(255, 132, 132, 0.8);
|
|
}
|
|
.account-sidebar .user .tier-level-2 {
|
|
background: rgba(89, 201, 165, 0.3);
|
|
color:#59c9a5;
|
|
border-color: #59c9a5;
|
|
}
|
|
.account-sidebar .user .tier-level-3 {
|
|
background: rgba(202, 177, 251, 0.3);
|
|
color:var(--accent-shade-3);
|
|
border-color: var(--accent-shade-3);
|
|
}
|
|
.account-sidebar .user .access-level-banned {
|
|
background: rgba(255, 63, 0, 0.1);
|
|
color:#FF3F00;
|
|
border-color: rgba(255, 63, 0, 0.8);
|
|
}
|
|
.account-sidebar .user .access-level-1 {
|
|
background: rgba(100, 247, 239, 0.3);
|
|
color: #64F7EF;
|
|
border-color: #64F7EF;
|
|
}
|
|
.account-sidebar .user .access-level-2 {
|
|
background: rgba(255, 199, 89, 0.3);
|
|
color: #FFC759;
|
|
border-color: #FFC759;
|
|
}
|
|
.account-sidebar .user .access-level-3 {
|
|
background: rgba(90, 255, 21, 0.3);
|
|
color:#5AFF15;
|
|
border-color: #5AFF15;
|
|
}
|
|
|
|
.account-sidebar .user a.mii {
|
|
position: relative;
|
|
display: block;
|
|
width: 128px;
|
|
height: 128px;
|
|
overflow: hidden;
|
|
border-radius: 100%;
|
|
background: var(--bg-shade-3);
|
|
}
|
|
.account-sidebar .user a.mii::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: no-repeat center/40% url("/assets/images/edit.svg"), rgba(55, 60, 101, 0.7);
|
|
opacity: 0;
|
|
transition: opacity 150ms;
|
|
}
|
|
.account-sidebar .user a.mii:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.account-sidebar .user .mii {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.account-sidebar .buttons a {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
padding: 20px 24px;
|
|
margin: 20px 0 0;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
.account-sidebar .buttons a svg {
|
|
margin-bottom: 16px;
|
|
}
|
|
.account-sidebar .buttons a p.caption {
|
|
margin: 0;
|
|
}
|
|
.account-sidebar .buttons p.cemu-warning {
|
|
margin: 4px 0 0;
|
|
font-size: 0.7rem;
|
|
color: var(--text-shade-1);
|
|
}
|
|
|
|
/* Settings */
|
|
.settings-wrapper {
|
|
display: grid;
|
|
grid-column-start: 2;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: 20px;
|
|
}
|
|
.settings-wrapper a {
|
|
color: var(--accent-shade-1);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
.settings-wrapper a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.settings-wrapper h2.section-header {
|
|
margin-top: 40px;
|
|
grid-column: 1 / 3;
|
|
color: var(--text-shade-3);
|
|
}
|
|
|
|
.setting-card {
|
|
display: grid;
|
|
grid-template-rows: 35px repeat(2, auto);
|
|
row-gap: 24px;
|
|
position: relative;
|
|
border-radius: 10px;
|
|
background: var(--bg-shade-2);
|
|
padding: 48px 60px;
|
|
}
|
|
.setting-card * {
|
|
margin: 0;
|
|
}
|
|
.setting-card .edit {
|
|
color: var(--text-shade-1);
|
|
background: var(--bg-shade-3);
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
top: 42px;
|
|
right: 48px;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 12px;
|
|
}
|
|
.setting-card .edit:hover {
|
|
background: var(--bg-shade-3);
|
|
color: var(--text-shade-3);
|
|
}
|
|
.setting-card .edit svg {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.setting-card .header {
|
|
color: var(--text-shade-3);
|
|
}
|
|
|
|
.setting-card .setting-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, auto);
|
|
gap: 24px;
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.setting-card .setting-list p.label {
|
|
color: var(--text-shade-3);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
fieldset {
|
|
position: relative;
|
|
height: min-content;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.setting-card .server-selection {
|
|
display: flex;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
background: var(--bg-shade-3);
|
|
}
|
|
.setting-card .server-selection input {
|
|
display: none;
|
|
}
|
|
.server-selection input + label {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
flex: 50%;
|
|
color: var(--text-shade-1);
|
|
padding: 40px;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
}
|
|
.server-selection input + label h2 {
|
|
margin-top: 12px;
|
|
color: var(--text-shade-1);
|
|
}
|
|
.server-selection input:checked + label,
|
|
.server-selection input:checked + label h2 {
|
|
background: var(--accent-shade-0);
|
|
color: var(--text-shade-3);
|
|
}
|
|
|
|
.setting-card #link-discord-account {
|
|
width: 100%;
|
|
padding: 12px 48px;
|
|
cursor: pointer;
|
|
background: var(--bg-shade-3);
|
|
}
|
|
|
|
.setting-card button {
|
|
width: 100%;
|
|
height: fit-content;
|
|
padding: 12px 48px;
|
|
align-self: flex-end;
|
|
cursor: pointer;
|
|
background: var(--bg-shade-3);
|
|
}
|
|
|
|
.setting-card.span-both-columns {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
|
|
@keyframes banner-notice {
|
|
0% {
|
|
top: -150px;
|
|
}
|
|
20% {
|
|
top: 35px;
|
|
}
|
|
80% {
|
|
top: 35px;
|
|
}
|
|
100% {
|
|
top: -150px;
|
|
}
|
|
}
|
|
.banner-notice {
|
|
display: flex;
|
|
justify-content: center;
|
|
position: fixed;
|
|
top: -150px;
|
|
width: 100%;
|
|
animation: banner-notice 5s;
|
|
}
|
|
.banner-notice div {
|
|
padding: 4px 36px;
|
|
border-radius: 5px;
|
|
z-index: 3;
|
|
}
|
|
.banner-notice.success div {
|
|
background: var(--green-shade-0);
|
|
}
|
|
.banner-notice.error div {
|
|
background: var(--red-shade-1);
|
|
}
|
|
|
|
footer {
|
|
margin-top: 80px;
|
|
}
|
|
|
|
@media screen and (max-width: 1300px) {
|
|
.account-wrapper {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.settings-wrapper {
|
|
grid-column-start: 1;
|
|
}
|
|
|
|
.account-sidebar {
|
|
margin: 0;
|
|
}
|
|
|
|
.account-sidebar .user .mii {
|
|
width: 128px;
|
|
height: 128px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1000px) {
|
|
.settings-wrapper {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.setting-card {
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 550px) {
|
|
.setting-card {
|
|
padding: 24px;
|
|
width: calc(100vw - 48px);
|
|
margin-left: -5vw;
|
|
margin-right: -2.5vw;
|
|
border-radius: 0;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.setting-card .edit {
|
|
top: 20px;
|
|
right: 20px;
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
.setting-card .server-selection {
|
|
flex-flow: column;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 350px) {
|
|
.setting-card .setting-list {
|
|
grid-template-columns: auto;
|
|
}
|
|
}
|