mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-03-21 17:24:28 -05:00
Jonathan Barrow
GitHub
commit
cfd7aa9625
|
|
@ -1,7 +1,3 @@
|
|||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Removing until it's done */
|
||||
.setting-card a.edit,
|
||||
.sign-in-history a {
|
||||
|
|
@ -12,7 +8,7 @@ body.modal-open {
|
|||
display: grid;
|
||||
column-gap: 48px;
|
||||
margin-top: 80px;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
|
||||
/* Account settings sidebar */
|
||||
|
|
@ -23,7 +19,7 @@ body.modal-open {
|
|||
}
|
||||
.account-sidebar .user .miiname {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
.account-sidebar .user .username {
|
||||
|
|
@ -41,7 +37,7 @@ body.modal-open {
|
|||
.account-sidebar .user .tier-level-0,
|
||||
.account-sidebar .user .access-level-0 {
|
||||
background: #2a2f50;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
border-color: #383f6b;
|
||||
}
|
||||
.account-sidebar .user .tier-level-1 {
|
||||
|
|
@ -56,8 +52,8 @@ body.modal-open {
|
|||
}
|
||||
.account-sidebar .user .tier-level-3 {
|
||||
background: rgba(202, 177, 251, 0.3);
|
||||
color:#cab1fb;
|
||||
border-color: #cab1fb;
|
||||
color:var(--accent-shade-3);
|
||||
border-color: var(--accent-shade-3);
|
||||
}
|
||||
.account-sidebar .user .access-level-banned {
|
||||
background: rgba(255, 63, 0, 0.1);
|
||||
|
|
@ -84,16 +80,16 @@ body.modal-open {
|
|||
width: 128px;
|
||||
height: 128px;
|
||||
border-radius: 100%;
|
||||
background: var(--btn-secondary);
|
||||
background: var(--bg-shade-3);
|
||||
}
|
||||
.account-sidebar .buttons a {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
background: #383f6b;
|
||||
margin: 20px 0 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
.account-sidebar .buttons a svg {
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -104,7 +100,7 @@ body.modal-open {
|
|||
.account-sidebar .buttons p.cemu-warning {
|
||||
margin: 4px 0 0;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
|
||||
/* Settings */
|
||||
|
|
@ -115,7 +111,7 @@ body.modal-open {
|
|||
column-gap: 20px;
|
||||
}
|
||||
.settings-wrapper a {
|
||||
color: #9d6ff3;
|
||||
color: var(--accent-shade-1);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -125,7 +121,7 @@ body.modal-open {
|
|||
.settings-wrapper h2.section-header {
|
||||
margin-top: 40px;
|
||||
grid-column: 1 / 3;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.setting-card {
|
||||
|
|
@ -134,15 +130,15 @@ body.modal-open {
|
|||
row-gap: 24px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
background: #2a2f50;
|
||||
background: var(--bg-shade-2);
|
||||
padding: 48px 60px;
|
||||
}
|
||||
.setting-card * {
|
||||
margin: 0;
|
||||
}
|
||||
.setting-card .edit {
|
||||
color: var(--text-secondary);
|
||||
background: #383f6b;
|
||||
color: var(--text-shade-1);
|
||||
background: var(--bg-shade-3);
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
|
|
@ -152,12 +148,12 @@ body.modal-open {
|
|||
padding: 12px;
|
||||
}
|
||||
.setting-card .edit:hover {
|
||||
background: #383f6b;
|
||||
color: var(--text);
|
||||
background: var(--bg-shade-3);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.setting-card .header {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.setting-card .setting-list {
|
||||
|
|
@ -168,7 +164,7 @@ body.modal-open {
|
|||
padding: 0;
|
||||
}
|
||||
.setting-card .setting-list p.label {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -183,7 +179,7 @@ fieldset {
|
|||
display: flex;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
background: #383f6b;
|
||||
background: var(--bg-shade-3);
|
||||
}
|
||||
.setting-card .server-selection input {
|
||||
display: none;
|
||||
|
|
@ -193,26 +189,26 @@ fieldset {
|
|||
flex-flow: column;
|
||||
align-items: center;
|
||||
flex: 50%;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
padding: 40px;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
.server-selection input + label h2 {
|
||||
margin-top: 12px;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
.server-selection input:checked + label,
|
||||
.server-selection input:checked + label h2 {
|
||||
background: var(--theme);
|
||||
color: var(--text);
|
||||
background: var(--accent-shade-0);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.setting-card #link-discord-account {
|
||||
width: 100%;
|
||||
padding: 12px 48px;
|
||||
cursor: pointer;
|
||||
background: #383f6b;
|
||||
background: var(--bg-shade-3);
|
||||
}
|
||||
|
||||
.setting-card button {
|
||||
|
|
@ -221,20 +217,7 @@ fieldset {
|
|||
padding: 12px 48px;
|
||||
align-self: flex-end;
|
||||
cursor: pointer;
|
||||
background: #383f6b;
|
||||
}
|
||||
.setting-card input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: #383f6b;
|
||||
padding: 12px;
|
||||
margin: 4px;
|
||||
margin-left: 0;
|
||||
border-radius: 4px;
|
||||
vertical-align: -65%;
|
||||
}
|
||||
.setting-card input[type="checkbox"]:checked {
|
||||
background: no-repeat center/contain url(../images/check.svg), var(--theme);
|
||||
background: var(--bg-shade-3);
|
||||
}
|
||||
|
||||
.setting-card.span-both-columns {
|
||||
|
|
@ -269,103 +252,10 @@ fieldset {
|
|||
z-index: 3;
|
||||
}
|
||||
.banner-notice.success div {
|
||||
background: #37a985;
|
||||
background: var(--green-shade-0);
|
||||
}
|
||||
.banner-notice.error div {
|
||||
background: #a9375b;
|
||||
}
|
||||
|
||||
div.online-files-modal-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
div.online-files-modal-wrapper.hidden {
|
||||
display: none;
|
||||
}
|
||||
div.online-files-modal {
|
||||
background: #393b5f;
|
||||
padding: 48px;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
width: min(660px, 90%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.online-files-modal h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
p.online-files-modal-caption {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
p.online-files-modal-caption span {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.online-files-modal-button-wrapper {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.online-files-modal-button-wrapper button {
|
||||
margin-left: 12px;
|
||||
width: fit-content;
|
||||
}
|
||||
.online-files-modal-button-wrapper button.cancel {
|
||||
background: none;
|
||||
}
|
||||
.online-files-modal-button-wrapper button.confirm {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
height: fit-content;
|
||||
|
||||
background: var(--btn);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
|
||||
transition: filter 300ms;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
background-color: black; /*change me*/
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text);
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
background-color: #4b5595;
|
||||
outline: none;
|
||||
transition: 150ms;
|
||||
background: var(--red-shade-1);
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
height: 100%;
|
||||
top: 0;
|
||||
left: -50vw;
|
||||
background: var(--theme);
|
||||
background: var(--accent-shade-0);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
|
||||
.footnotes {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 946px) {
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@
|
|||
padding: 40px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
|
||||
.blog-card .post-info .title {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
.blog-card .pub-info .date {
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.blog-card .pub-info > * {
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
grid-template-columns: 30px auto;
|
||||
grid-gap: 10px;
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
margin-right: 0.3em;
|
||||
|
|
@ -64,13 +64,13 @@
|
|||
|
||||
.blog-card .cover {
|
||||
flex: 50%;
|
||||
border: 3px solid #151934;
|
||||
border: 3px solid var(--bg-shade-0);
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.progress-hero a,
|
||||
.progress-hero a * {
|
||||
color: #9d6ff3;
|
||||
color: var(--accent-shade-1);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -88,6 +88,7 @@
|
|||
cursor: pointer;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ header {
|
|||
padding: 60px;
|
||||
max-width: 1100px;
|
||||
margin: 50px auto;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
|
||||
.blog-card h1,
|
||||
|
|
@ -26,16 +26,16 @@ header {
|
|||
.blog-card h5,
|
||||
.blog-card h6 {
|
||||
margin: 40px 0 10px;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.blog-card strong {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.blog-card a,
|
||||
.blog-card a * {
|
||||
color: #9d6ff3;
|
||||
color: var(--accent-shade-1);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -64,7 +64,7 @@ header {
|
|||
}
|
||||
.blog-card .pub-info .date {
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
.blog-card .pub-info > * {
|
||||
margin-right: 0.5em;
|
||||
|
|
@ -75,7 +75,7 @@ header {
|
|||
grid-template-columns: 30px auto;
|
||||
grid-gap: 10px;
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
margin-right: 0.3em;
|
||||
|
|
@ -89,7 +89,7 @@ header {
|
|||
|
||||
.blog-card p,
|
||||
.post-info {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
|
||||
.blog-card img {
|
||||
|
|
@ -145,14 +145,14 @@ header {
|
|||
.blog-card table {
|
||||
border-radius: 4px;
|
||||
border-collapse: collapse;
|
||||
background: #31375e;
|
||||
background: var(--bg-shade-3);
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.blog-card table th {
|
||||
padding: 8px 12px;
|
||||
background: #3f4778;
|
||||
color: var(--text);
|
||||
background: var(--bg-shade-4);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
.blog-card table td {
|
||||
padding: 8px 12px;
|
||||
|
|
@ -160,7 +160,7 @@ header {
|
|||
border-radius: inherit;
|
||||
}
|
||||
.blog-card table tr:nth-child(even) {
|
||||
background: #2a2f50;
|
||||
background: var(--bg-shade-2);
|
||||
}
|
||||
|
||||
.blog-card pre code {
|
||||
|
|
@ -172,7 +172,7 @@ header {
|
|||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: inline-block;
|
||||
background: var(--btn-secondary);
|
||||
background: var(--bg-shade-3);
|
||||
padding: 12px;
|
||||
margin: 4px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -181,16 +181,16 @@ header {
|
|||
.blog-card input[type="checkbox"]:checked {
|
||||
content: "checkboxtest";
|
||||
background: no-repeat center/contain url(../images/check.svg),
|
||||
var(--btn-secondary);
|
||||
var(--bg-shade-3);
|
||||
}
|
||||
|
||||
.blog-card hr {
|
||||
border: 1px solid var(--text-secondary);
|
||||
border: 1px solid var(--text-shade-1);
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.blog-card blockquote {
|
||||
border-left: 2px solid var(--text-secondary);
|
||||
border-left: 2px solid var(--text-shade-1);
|
||||
padding: 8px 24px;
|
||||
margin: 0;
|
||||
margin-bottom: 30px;
|
||||
|
|
|
|||
140
public/assets/css/components.css
Normal file
140
public/assets/css/components.css
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
/* BUTTONS */
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text-shade-3);
|
||||
padding: 12px 48px;
|
||||
background: var(--bg-shade-3);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
button:hover {
|
||||
background: var(--bg-shade-4);
|
||||
}
|
||||
button.primary {
|
||||
background: var(--accent-shade-0);
|
||||
}
|
||||
button.primary:hover {
|
||||
background: var(--accent-shade-1);
|
||||
}
|
||||
|
||||
button.secondary.icon-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
button svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* MODALS */
|
||||
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.modal-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
div.modal-wrapper.hidden {
|
||||
display: none;
|
||||
}
|
||||
div.modal {
|
||||
background: var(--bg-shade-3);
|
||||
padding: 48px;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
width: min(660px, 90%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.modal h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
p.modal-caption {
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
p.modal-caption span,
|
||||
p.switch-tier-modal-caption span {
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.modal-button-wrapper {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.modal-button-wrapper button {
|
||||
margin-left: 12px;
|
||||
width: fit-content;
|
||||
}
|
||||
.modal-button-wrapper button.cancel {
|
||||
background: none;
|
||||
}
|
||||
.modal-button-wrapper button {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
div.modal {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* MISC FORM COMPONENTS */
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: var(--bg-shade-3);
|
||||
padding: 12px;
|
||||
margin: 4px;
|
||||
margin-left: 0;
|
||||
border-radius: 4px;
|
||||
vertical-align: -65%;
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="checkbox"]:checked {
|
||||
background: no-repeat center/contain url(../images/check.svg), var(--accent-shade-0);
|
||||
}
|
||||
|
||||
input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
background-color: var(--bg-shade-3);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text-shade-3);
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
input:focus {
|
||||
background-color: var(--bg-shade-4);
|
||||
outline: none;
|
||||
transition: 150ms;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
html,
|
||||
body {
|
||||
background: #131730;
|
||||
background: var(--bg-shade-0);
|
||||
}
|
||||
a.logo-link {
|
||||
margin: auto;
|
||||
|
|
@ -8,11 +8,11 @@ a.logo-link {
|
|||
height: 40px;
|
||||
text-decoration: none;
|
||||
}
|
||||
header {
|
||||
.docs-wrapper header {
|
||||
width: calc(100% - 72px);
|
||||
background: #131730;
|
||||
background: var(--bg-shade-0);
|
||||
padding: 12px 36px;
|
||||
margin: 0;
|
||||
margin: 18px 0;
|
||||
}
|
||||
header a.logo-link {
|
||||
display: none;
|
||||
|
|
@ -33,7 +33,7 @@ header nav a:first-child {
|
|||
flex-flow: column;
|
||||
align-items: center;
|
||||
width: clamp(270px, 30vw, 500px);
|
||||
background: #161931;
|
||||
background: var(--bg-shade-0);
|
||||
max-height: calc(100vh - 69px);
|
||||
overflow-y: scroll;
|
||||
min-height: 100%;
|
||||
|
|
@ -52,19 +52,19 @@ header nav a:first-child {
|
|||
margin: 0;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary-2);
|
||||
color: var(--text-shade-0);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.docs-wrapper .sidebar .section a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
width: fit-content;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.docs-wrapper .sidebar .section a.active,
|
||||
.docs-wrapper .sidebar .section a:hover {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
.docs-wrapper .sidebar .section a.active::before {
|
||||
/* This filter thing is jank, if anyone knows a better way to do this please fix */
|
||||
|
|
@ -77,7 +77,7 @@ header nav a:first-child {
|
|||
|
||||
.docs-wrapper .content {
|
||||
width: calc(100vw - clamp(270px, 30vw, 500px) - (72px * 2));
|
||||
background: var(--background);
|
||||
background: var(--bg-shade-1);
|
||||
padding: 72px;
|
||||
max-height: calc(100vh - 69px - (72px * 2));
|
||||
overflow-y: scroll;
|
||||
|
|
@ -86,7 +86,7 @@ header nav a:first-child {
|
|||
max-width: 900px;
|
||||
}
|
||||
.docs-wrapper .content p {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
.docs-wrapper .content h1:first-child {
|
||||
margin-top: 0;
|
||||
|
|
@ -99,9 +99,9 @@ header nav a:first-child {
|
|||
}
|
||||
.docs-wrapper .quick-links-grid a {
|
||||
text-decoration: none;
|
||||
background: #252a51;
|
||||
background: var(--bg-shade-2);
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
|
@ -110,12 +110,12 @@ header nav a:first-child {
|
|||
height: 36px;
|
||||
margin-right: 24px;
|
||||
margin-left: 4px;
|
||||
color: var(--theme-light);
|
||||
color: var(--accent-shade-2);
|
||||
}
|
||||
.docs-wrapper .quick-links-grid p.header {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
margin: 0;
|
||||
}
|
||||
.docs-wrapper .quick-links-grid p {
|
||||
|
|
@ -141,30 +141,30 @@ header nav a:first-child {
|
|||
.docs-wrapper .sidebar::-webkit-scrollbar-thumb,
|
||||
.docs-wrapper .content::-webkit-scrollbar-thumb,
|
||||
.docs-wrapper .content pre code::-webkit-scrollbar-thumb {
|
||||
background-color: var(--text-secondary-2);
|
||||
background-color: var(--text-shade-0);
|
||||
border-radius: 24px;
|
||||
border: 3px solid #161931;
|
||||
border: 3px solid var(--bg-shade-1);
|
||||
}
|
||||
.docs-wrapper .content::-webkit-scrollbar-thumb {
|
||||
border: 3px solid var(--background);
|
||||
border: 3px solid var(--bg-shade-1);
|
||||
}
|
||||
.docs-wrapper .content pre code::-webkit-scrollbar-thumb {
|
||||
border: 3px solid #0d0f20;
|
||||
border: 3px solid var(--bg-shade-0);
|
||||
}
|
||||
.docs-wrapper .sidebar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--text-secondary-2) #161931;
|
||||
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
|
||||
}
|
||||
.docs-wrapper .content {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--text-secondary-2) var(--background);
|
||||
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
|
||||
}
|
||||
.docs-wrapper .content pre codear {
|
||||
.docs-wrapper .content pre code {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--text-secondary-2) #0d0f20;
|
||||
scrollbar-color: var(--text-shade-0) var(--bg-shade-0);
|
||||
}
|
||||
.docs-wrapper .content .missing-in-locale-notice {
|
||||
background: #252a51;
|
||||
background: var(--bg-shade-2);
|
||||
padding: 24px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
|
@ -181,22 +181,22 @@ header nav a:first-child {
|
|||
border: 0;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
background-color: var(--btn-secondary);
|
||||
background-color: var(--bg-shade-3);
|
||||
border: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding: 12px 24px;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
width: 20px;
|
||||
flex: 2 10%;
|
||||
}
|
||||
|
||||
.search input::placeholder {
|
||||
color: var(--text-secondary-2);
|
||||
color: var(--text-shade-0);
|
||||
}
|
||||
|
||||
.search input:focus {
|
||||
background-color: #fff;
|
||||
color: var(--btn-secondary);
|
||||
color: var(--bg-shade-3);
|
||||
transition: 200ms;
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -207,9 +207,9 @@ header nav a:first-child {
|
|||
border: 0;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
padding: 12px 36px;
|
||||
background: var(--btn);
|
||||
background: var(--accent-shade-0);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
transition: all 0.4s;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
background-color: var(--btn-secondary);
|
||||
background-color: var(--bg-shade-3);
|
||||
order: 1;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
.select-box .option .item {
|
||||
color: #afb5dd;
|
||||
color: var(--text-shade-2);
|
||||
}
|
||||
|
||||
.select-box .lang {
|
||||
|
|
@ -46,21 +46,22 @@
|
|||
|
||||
.select-box .options-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: var(--btn-secondary);
|
||||
background: var(--bg-shade-3);
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.select-box .options-container::-webkit-scrollbar-thumb {
|
||||
background: var(--text-secondary);
|
||||
background: var(--text-shade-1);
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
.select-box .option {
|
||||
padding: 12px 15px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.select-box .option:hover {
|
||||
background: #2f345b;
|
||||
background: var(--bg-shade-4);
|
||||
}
|
||||
.select-box .option:hover .item {
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@ code.hljs {
|
|||
padding: 3px 5px;
|
||||
}
|
||||
.hljs {
|
||||
background: #0D0F20;
|
||||
background: var(--bg-shade-0);
|
||||
color: #d6deeb;
|
||||
}
|
||||
.hljs-keyword {
|
||||
color: #c792ea;
|
||||
color: var(--accent-shade-2);
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-built_in {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.caption {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
max-width: 400px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
.localization-instr:visited {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--theme-light);
|
||||
color: var(--accent-shade-2);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
left: -4px;
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
.localization-form {
|
||||
padding: 36px;
|
||||
background-color: #151934;
|
||||
background-color: var(--bg-shade-0);
|
||||
border-radius: 12px;
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
|
@ -57,22 +57,22 @@
|
|||
border: 0;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
background-color: var(--btn-secondary);
|
||||
background-color: var(--bg-shade-3);
|
||||
border: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding: 12px 24px;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
width: 20px;
|
||||
flex: 2 10%;
|
||||
}
|
||||
|
||||
.localization-form input::placeholder {
|
||||
color: var(--text-secondary-2);
|
||||
color: var(--text-shade-0);
|
||||
}
|
||||
|
||||
.localization-form input:focus {
|
||||
background-color: #fff;
|
||||
color: var(--btn-secondary);
|
||||
background-color: var(--bg-shade-4);
|
||||
color: var(--bg-shade-3);
|
||||
transition: 200ms;
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -84,9 +84,9 @@
|
|||
border-radius: 0 4px 4px 0;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
padding: 12px 36px;
|
||||
background: var(--btn);
|
||||
background: var(--accent-shade-0);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ header {
|
|||
form.account {
|
||||
display: block;
|
||||
padding: 40px 48px;
|
||||
background-color: #292e53;
|
||||
color: var(--text-secondary);
|
||||
background-color: var(--bg-shade-2);
|
||||
color: var(--text-shade-1);
|
||||
border-radius: 12px;
|
||||
width: min(480px, 90vw);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -25,7 +25,7 @@ form.account {
|
|||
|
||||
form.account h2 {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
form.account p {
|
||||
|
|
@ -36,26 +36,6 @@ form.account div {
|
|||
margin-top: 24px;
|
||||
}
|
||||
|
||||
form.account input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
background-color: #353c6a;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text);
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
form.account input:focus {
|
||||
background-color: #4b5595;
|
||||
outline: none;
|
||||
transition: 150ms;
|
||||
}
|
||||
|
||||
form.account label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
|
|
@ -64,37 +44,20 @@ form.account label {
|
|||
}
|
||||
|
||||
form.account button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
padding: 12px 30px;
|
||||
background: #353c6a;
|
||||
margin-top: 18px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
form.account button[type="submit"] {
|
||||
background: var(--btn);
|
||||
margin: auto;
|
||||
background: var(--accent-shade-0);
|
||||
}
|
||||
|
||||
form.account a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
text-align: right;
|
||||
margin: 6px 0;
|
||||
width: fit-content;
|
||||
}
|
||||
form.account a:hover {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
form.account a.pwdreset {
|
||||
|
|
@ -135,7 +98,7 @@ form.account a.register {
|
|||
z-index: 3;
|
||||
}
|
||||
.banner-notice.error div {
|
||||
background: #a9375b;
|
||||
background: var(--red-shade-1);
|
||||
}
|
||||
|
||||
form.account.register {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,32 @@
|
|||
|
||||
:root {
|
||||
--background: #1B1F3B;
|
||||
--text: white;
|
||||
--text-secondary: #A1A8D9;
|
||||
--btn: #673DB6;
|
||||
--btn-secondary: #333960;
|
||||
--theme: var(--btn);
|
||||
--theme-light: #A185D6;
|
||||
--text-secondary-2: #8990C1;
|
||||
/* 1 is the base color, <1 are darker variations and >1 are lighter */
|
||||
|
||||
--bg-shade-0: #131733;
|
||||
--bg-shade-1: #1B1F3B;
|
||||
--bg-shade-2: #23274A;
|
||||
--bg-shade-3: #373C65;
|
||||
--bg-shade-4: #494F81;
|
||||
|
||||
--accent-shade-0: #673DB6;
|
||||
--accent-shade-1: #9D6FF3;
|
||||
--accent-shade-2: #A185D6;
|
||||
--accent-shade-3: #CAB1FB;
|
||||
|
||||
--text-shade-0: #8990C1;
|
||||
--text-shade-1: #A1A8D9;
|
||||
--text-shade-2: #CAC1F5;
|
||||
--text-shade-3: #fff;
|
||||
|
||||
--green-shade-0: #37a985;
|
||||
--green-shade-1: #59c9a5;
|
||||
|
||||
--red-shade-1: #a9375b;
|
||||
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
background: var(--bg-shade-1);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
body, .main-body {
|
||||
|
|
@ -21,7 +35,7 @@ body, .main-body {
|
|||
position: relative; /* This fixes overflow-x not hiding on Safari on mobile */
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
justify-content: center;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
|
@ -55,10 +69,8 @@ body, .main-body {
|
|||
}
|
||||
|
||||
h1.dot:not([data-title-suffix]):after, h2.dot:not([data-title-suffix]):after {
|
||||
/* content: ".";
|
||||
color: #9D6FF3; */
|
||||
content: "";
|
||||
background-color: #9D6FF3;
|
||||
background-color: var(--accent-shade-1);
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 50%;
|
||||
|
|
@ -67,135 +79,7 @@ h1.dot:not([data-title-suffix]):after, h2.dot:not([data-title-suffix]):after {
|
|||
h1.dot[data-title-suffix]:after, h2.dot[data-title-suffix]:after {
|
||||
content: attr(data-title-suffix);
|
||||
display: inline-block;
|
||||
color: #9D6FF3;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 35px;
|
||||
}
|
||||
header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
header .logo-link, header .logo-link svg {
|
||||
display: block;
|
||||
}
|
||||
header nav a:first-child {
|
||||
margin-left: 40px;
|
||||
}
|
||||
header nav a {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 17px;
|
||||
text-decoration: none;
|
||||
}
|
||||
header nav a:hover {
|
||||
color: var(--text);
|
||||
transition: color 50ms ease-in-out;
|
||||
}
|
||||
|
||||
header .right-section {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: 24px;
|
||||
margin-left: auto;
|
||||
z-index: 2;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
header .locale-dropdown-toggle {
|
||||
width: fit-content;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
transition: color 150ms;
|
||||
cursor: pointer;
|
||||
}
|
||||
header .locale-dropdown-toggle:hover,
|
||||
header .locale-dropdown-toggle.active {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
header .user-widget-wrapper {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
header .user-widget-wrapper a.login-link {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 150ms;
|
||||
}
|
||||
header .user-widget-wrapper a.login-link:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
header .user-widget-wrapper.logged-in {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
header .user-widget-wrapper.logged-in .user-widget-toggle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--text-secondary-2);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
header .user-widget-wrapper .user-widget-toggle img,
|
||||
header .user-widget .user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
header .user-widget {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
box-sizing: border-box;
|
||||
transition: max-height 300ms, padding 200ms, opacity 150ms;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 48px;
|
||||
padding: 0;
|
||||
background: #2a2f50;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
|
||||
box-shadow: 0 0 10px -2px #111531;
|
||||
}
|
||||
header .user-widget.active {
|
||||
max-height: 100vh;
|
||||
padding: 36px;
|
||||
opacity: 1;
|
||||
}
|
||||
header .user-widget .user-avatar {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin: auto;
|
||||
background: var(--text-secondary-2);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
header .user-widget .user-info {
|
||||
margin-top: 12px;
|
||||
}
|
||||
header .user-widget .user-info .mii-name {
|
||||
color: var(--text);
|
||||
}
|
||||
header .user-widget .buttons {
|
||||
margin-top: 12px;
|
||||
}
|
||||
header .user-widget .button {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
padding: 8px 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
header .user-widget .button.logout {
|
||||
background: #383f6b;
|
||||
color: var(--text);
|
||||
color: var(--accent-shade-1);
|
||||
}
|
||||
|
||||
/* Misc */
|
||||
|
|
@ -204,14 +88,13 @@ header .user-widget .button.logout {
|
|||
z-index: -2;
|
||||
width: 2100px;
|
||||
height: 1700px;
|
||||
background: #111531;
|
||||
background: var(--bg-shade-0);
|
||||
border-radius: 50%;
|
||||
top: -250px;
|
||||
right: -1420px;
|
||||
/* left: 60vw; */
|
||||
}
|
||||
.light-purple-circle {
|
||||
background: #CAB1FB;
|
||||
background: var(--accent-shade-3);
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
|
|
@ -278,7 +161,7 @@ img.emoji {
|
|||
max-width: 423px;
|
||||
}
|
||||
.progress-hero .text a {
|
||||
color: #9d6ff3;
|
||||
color: var(--accent-shade-1);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -316,7 +199,7 @@ img.emoji {
|
|||
}
|
||||
.text {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
width: 86%;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
|
|
@ -333,26 +216,11 @@ img.emoji {
|
|||
align-items: flex-start;
|
||||
}
|
||||
.hero .buttons a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
.hero .buttons a > * {
|
||||
cursor: pointer;
|
||||
}
|
||||
.button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
}
|
||||
.button.primary {
|
||||
padding: 12px 48px;
|
||||
background: var(--btn);
|
||||
}
|
||||
.button.secondary {
|
||||
background: var(--btn-secondary);
|
||||
|
||||
.hero .button.secondary {
|
||||
padding: 0;
|
||||
}
|
||||
.button.secondary.discord svg {
|
||||
margin-bottom: -1px;
|
||||
|
|
@ -361,18 +229,6 @@ img.emoji {
|
|||
margin-bottom: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.button.secondary.icon-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.button svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Non-hero sections */
|
||||
.sect .title {
|
||||
|
|
@ -400,13 +256,13 @@ section.progress .left, section.progress .right {
|
|||
section.progress .right {
|
||||
position: relative;
|
||||
padding-left: 80px;
|
||||
background: var(--theme);
|
||||
background: var(--accent-shade-0);
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
section.progress .right .title a {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
section.progress .right .title a:hover {
|
||||
text-decoration: underline;
|
||||
|
|
@ -419,7 +275,7 @@ section.progress .right:before {
|
|||
background: yellow;
|
||||
left: 90%;
|
||||
margin-top: -50px;
|
||||
background: var(--theme);
|
||||
background: var(--accent-shade-0);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
|
@ -437,23 +293,23 @@ section.faq {
|
|||
|
||||
.question-and-answer summary {
|
||||
font-size: 1.5625rem;
|
||||
color: #B8BDDF;
|
||||
color: var(--text-shade-2);
|
||||
}
|
||||
.question-and-answer[open] summary {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
.question-and-answer summary:hover {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
.question-and-answer .text {
|
||||
margin: 5px 0;
|
||||
line-height: 1.85;
|
||||
color: var(--text-secondary-2);
|
||||
color: var(--text-shade-0);
|
||||
}
|
||||
.question-and-answer .text a {
|
||||
color: #9d6ff3;
|
||||
color: var(--accent-shade-1);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -471,7 +327,7 @@ section.showcase::before {
|
|||
content: "";
|
||||
width: 400vw;
|
||||
margin-left: -50vw;
|
||||
background: linear-gradient(180deg, rgba(19, 22, 36, 0) 0%, #131624 100%);
|
||||
background: linear-gradient(180deg, rgba(19, 22, 36, 0) 0%, var(--bg-shade-0) 100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -487,16 +343,16 @@ section.showcase .grid {
|
|||
grid-gap: 24px;
|
||||
}
|
||||
section.showcase .grid .item {
|
||||
background: #252A51;
|
||||
background: var(--bg-shade-2);
|
||||
border-radius: 10px;
|
||||
padding: 42px 36px;
|
||||
}
|
||||
section.showcase .grid .item.highlight {
|
||||
border: 2px solid #9D6FF3;
|
||||
border: 2px solid var(--accent-shade-1);
|
||||
}
|
||||
section.showcase .grid .item svg {
|
||||
height: 36px;
|
||||
color: #9D6FF3;
|
||||
color: var(--accent-shade-1);
|
||||
}
|
||||
section.showcase .grid .item h1 {
|
||||
margin-top: 14px;
|
||||
|
|
@ -505,7 +361,7 @@ section.showcase .grid .item h1 {
|
|||
}
|
||||
section.showcase .grid .item p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary)
|
||||
color: var(--text-shade-1)
|
||||
}
|
||||
|
||||
section.team {
|
||||
|
|
@ -544,7 +400,7 @@ section.team {
|
|||
display: grid;
|
||||
grid-template-columns: 110px 1fr;
|
||||
grid-gap: 20px;
|
||||
background: #16192D;
|
||||
background: var(--bg-shade-0);
|
||||
grid-column: span 2;
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
|
|
@ -562,7 +418,7 @@ section.team {
|
|||
margin: 0;
|
||||
}
|
||||
.card .sub {
|
||||
color: #59C9A5;
|
||||
color: var(--green-shade-1);
|
||||
font-size: .875rem;
|
||||
}
|
||||
.card .title {
|
||||
|
|
@ -581,7 +437,7 @@ section.team {
|
|||
display: block;
|
||||
}
|
||||
.card .text {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
|
||||
section.team-helpers {
|
||||
|
|
@ -597,7 +453,7 @@ section.team-helpers .team-helpers-cards {
|
|||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-gap: 20px;
|
||||
margin-right: 20px;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
width: max-content;
|
||||
}
|
||||
section.team-helpers .row {
|
||||
|
|
@ -630,7 +486,7 @@ section.team-helpers .animation-wrapper::after {
|
|||
width: 101%; /* If set to 100% it doesn't cover it completely */
|
||||
left: -0.5%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--background) 0%, rgba(27, 31, 59, 0) 20%, rgba(27, 31, 59, 0) 80%, var(--background) 100%);
|
||||
background: linear-gradient(90deg, var(--bg-shade-1) 0%, rgba(27, 31, 59, 0) 20%, rgba(27, 31, 59, 0) 80%, var(--bg-shade-1) 100%);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -650,7 +506,7 @@ section.team-helpers .animation-wrapper .row-wrapper::before {
|
|||
width: 100%;
|
||||
left: calc(-100% - 20px);
|
||||
height: 100%;
|
||||
background: var(--background);
|
||||
background: var(--bg-shade-1);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -661,7 +517,7 @@ section.team-helpers .animation-wrapper .row-wrapper::after {
|
|||
width: 100%;
|
||||
left: calc(100% - 20px);
|
||||
height: 100%;
|
||||
background: var(--background);
|
||||
background: var(--bg-shade-1);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -678,12 +534,12 @@ section.team-helpers .helper-card {
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 14px 24px;
|
||||
background: #16192D;
|
||||
background: var(--bg-shade-0);
|
||||
border-radius: 12px;
|
||||
min-width: 480px;
|
||||
}
|
||||
section.team-helpers .helper-card:hover {
|
||||
background: #252A51;
|
||||
background: var(--bg-shade-2);
|
||||
transition: 200ms;
|
||||
}
|
||||
section.team-helpers .helper-card.special {
|
||||
|
|
@ -715,12 +571,12 @@ section.team-helpers .helper-card .pfp {
|
|||
height: 48px;
|
||||
}
|
||||
section.team-helpers .helper-card span {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
font-weight: 600;
|
||||
margin-right: 0.6ch;
|
||||
}
|
||||
section.team-helpers .helper-card p {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
|
||||
section.update-signup {
|
||||
|
|
@ -751,21 +607,21 @@ section.update-signup .floating-serverjoin {
|
|||
width: 100%;
|
||||
max-width: 576px;
|
||||
|
||||
background: #15182D;
|
||||
background: var(--bg-shade-0);
|
||||
border-radius: 6px;
|
||||
padding: 18px;
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
section.update-signup .floating-serverjoin p {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
margin: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
section.update-signup .floating-serverjoin a {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
text-decoration: none;
|
||||
background: var(--theme);
|
||||
background: var(--accent-shade-0);
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
padding: 9px 18px;
|
||||
|
|
@ -775,7 +631,7 @@ section.update-signup .floating-serverjoin a {
|
|||
}
|
||||
section.update-signup div.circle {
|
||||
display: block;
|
||||
background: #202442;
|
||||
background: var(--bg-shade-2);
|
||||
/* the next 4 lines make it so the circle is always the same aspect ratio and covers enough of the screen */
|
||||
width: 2591px;
|
||||
height: 1454px;
|
||||
|
|
@ -792,7 +648,7 @@ section.update-signup div.circle {
|
|||
.donation-progress {
|
||||
padding: 50px 20px;
|
||||
border-radius: 10px;
|
||||
background: #151934;
|
||||
background: var(--bg-shade-0);
|
||||
grid-column: span 2;
|
||||
}
|
||||
.donation-progress h1 {
|
||||
|
|
@ -803,7 +659,7 @@ section.update-signup div.circle {
|
|||
font-weight: bold;
|
||||
}
|
||||
.donation-progress a {
|
||||
color: #9d6ff3;
|
||||
color: var(--accent-shade-1);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -818,12 +674,12 @@ section.update-signup div.circle {
|
|||
height: 12px;
|
||||
margin: 1rem 0;
|
||||
border-radius: 6px;
|
||||
background: var(--btn-secondary);
|
||||
background: var(--bg-shade-3);
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar-inner {
|
||||
height: 100%;
|
||||
background-color: var(--theme);
|
||||
background-color: var(--accent-shade-0);
|
||||
}
|
||||
|
||||
.all-progress-lists {
|
||||
|
|
@ -859,7 +715,7 @@ section.update-signup div.circle {
|
|||
}
|
||||
.progress-title a.github {
|
||||
margin-top: 10px;
|
||||
color: #6D73A2;
|
||||
color: var(--text-shade-0);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
opacity: .75;
|
||||
|
|
@ -867,7 +723,7 @@ section.update-signup div.circle {
|
|||
transition: color 50ms ease-in-out;
|
||||
}
|
||||
.progress-title a.github:focus, .progress-title a.github:hover, .progress-title a.github:visited {
|
||||
color: #6D73A2;
|
||||
color: var(--text-shade-0);
|
||||
text-decoration: none;
|
||||
}
|
||||
.progress-title a.github:hover {
|
||||
|
|
@ -878,7 +734,7 @@ section.update-signup div.circle {
|
|||
margin-right: .4rem;
|
||||
}
|
||||
.feature-list-wrapper.purple .progress-title a.github, .feature-list-wrapper.purple .progress-title a.github:focus, .feature-list-wrapper.purple .progress-title a.github:hover, .feature-list-wrapper.purple .progress-title a.github:visited {
|
||||
color: #c69cf9;
|
||||
color: var(--accent-shade-3);
|
||||
}
|
||||
.feature-list-wrapper .core > .progress-title a.github:hover {
|
||||
color: white;
|
||||
|
|
@ -919,8 +775,8 @@ section.update-signup div.circle {
|
|||
.custom-checkbox {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background: #31365A;
|
||||
color: var(--text);
|
||||
background: var(--bg-shade-3);
|
||||
color: var(--text-shade-3);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -947,90 +803,7 @@ section.update-signup div.circle {
|
|||
.purple-card {
|
||||
padding: 50px 20px;
|
||||
border-radius: 10px;
|
||||
background: #151934;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, fit-content(100%)) 1fr;
|
||||
gap: 7.7vw;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 120px;
|
||||
position: relative;
|
||||
padding: 60px 0;
|
||||
}
|
||||
footer::after {
|
||||
content: "";
|
||||
width: 400vw;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -50vw;
|
||||
background: #15182D;
|
||||
z-index: -1;
|
||||
}
|
||||
footer div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: fit-content;
|
||||
}
|
||||
footer svg.logotype {
|
||||
height: 56px;
|
||||
width: fit-content;
|
||||
margin: -10px 0 24px -10px;
|
||||
}
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
footer h1 {
|
||||
font-size: 20px;
|
||||
margin-top: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
footer a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
}
|
||||
footer a:hover {
|
||||
color: var(--text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
background: #222641;
|
||||
border-radius: 12px;
|
||||
padding: 30px 90px 30px 36px;
|
||||
justify-self: end;
|
||||
}
|
||||
footer div.discord-server-card h1 {
|
||||
font-size: 25px;
|
||||
margin: 0;
|
||||
}
|
||||
footer div.discord-server-card h2 {
|
||||
color: var(--text);
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
footer div.discord-server-card a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #CAB1FB;
|
||||
font-size: 22px;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
margin-left: -2px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
footer div.discord-server-card a:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
footer div.discord-server-card svg {
|
||||
height: 24px;
|
||||
stroke-width: 3px;
|
||||
margin-right: 4px;
|
||||
background: var(--bg-shade-0);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 701px) and (max-width: 1500px) {
|
||||
|
|
@ -1049,8 +822,6 @@ footer div.discord-server-card svg {
|
|||
right: auto;
|
||||
left: 60vw;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
|
|
@ -1065,15 +836,6 @@ footer div.discord-server-card svg {
|
|||
grid-column: span 1;
|
||||
}
|
||||
|
||||
header nav a:not(.keep-on-mobile) {
|
||||
/* You don't really need it on mobile IMO */
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .logo-link {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
|
@ -1175,20 +937,6 @@ footer div.discord-server-card svg {
|
|||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 100px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, fit-content(100%));
|
||||
}
|
||||
footer div {
|
||||
justify-self: center;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
grid-column: 1 / span 4;
|
||||
width: calc(100% - 126px);
|
||||
justify-self: normal;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1254,34 +1002,4 @@ footer div.discord-server-card svg {
|
|||
margin: auto !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(4, fit-content(100%));
|
||||
}
|
||||
footer div {
|
||||
justify-self: start;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
grid-column: 1 / span 1;
|
||||
padding: 30px;
|
||||
width: calc(100% - 60px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
header .logo-link svg text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .logo-link svg {
|
||||
width: 39.876px;
|
||||
}
|
||||
|
||||
header .logo-link {
|
||||
margin-right: 10px;
|
||||
}
|
||||
header nav a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ svg.logotype {
|
|||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
background: #0d0f20;
|
||||
background: var(--bg-shade-0);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
gap: 0 48px;
|
||||
|
|
@ -26,7 +26,7 @@ svg.logotype {
|
|||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: radial-gradient(closest-side, #161d40 0%, transparent 100%);
|
||||
background: radial-gradient(closest-side, var(--bg-shade-1) 0%, transparent 100%);
|
||||
width: 200vh;
|
||||
height: 200vh;
|
||||
top: -100vh;
|
||||
|
|
@ -53,8 +53,7 @@ div.mii-img-wrapper .shadow {
|
|||
left: 6px;
|
||||
height: 72px;
|
||||
width: 512px;
|
||||
background: #1a214c;
|
||||
background: radial-gradient(farthest-side, #1a214c 0%, transparent 100%);
|
||||
background: radial-gradient(farthest-side, var(--bg-shade-2) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
div.params-wrapper {
|
||||
|
|
@ -84,11 +83,11 @@ div.tabs .tabbtn {
|
|||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
div.tabs .tabbtn:hover,
|
||||
div.tabs .tabbtn.active {
|
||||
background: #1d203d;
|
||||
background: var(--bg-shade-1);
|
||||
}
|
||||
|
||||
div.subtabs {
|
||||
|
|
@ -102,7 +101,7 @@ div.subtabs .subtabbtn {
|
|||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
div.subtabs .subtabbtn.active::before,
|
||||
div.subtabs .subtabbtn.active:hover::before {
|
||||
|
|
@ -112,7 +111,7 @@ div.subtabs .subtabbtn.active:hover::before {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: #9D6FF3;
|
||||
background: var(--accent-shade-1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -161,17 +160,17 @@ fieldset input[type="radio"] + label {
|
|||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 18px;
|
||||
background: #393b5f;
|
||||
background: var(--bg-shade-3);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
fieldset input[type="radio"]:checked + label {
|
||||
background: #3f4480;
|
||||
background: var(--bg-shade-4);
|
||||
font-weight: bold;
|
||||
box-shadow: inset 0 0 0 4px #9D70F1;
|
||||
box-shadow: inset 0 0 0 4px var(--accent-shade-1);
|
||||
}
|
||||
fieldset.color input[type="radio"]:checked + label {
|
||||
box-shadow: inset 0 0 0 4px #9D70F1, inset 0 0 0 6px #181B33;
|
||||
box-shadow: inset 0 0 0 4px var(--accent-shade-1), inset 0 0 0 6px var(--bg-shade-1);
|
||||
}
|
||||
div.colorSidebar {
|
||||
margin: auto;
|
||||
|
|
@ -204,12 +203,12 @@ input[type="range"].invert {
|
|||
margin-left: auto;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
.pagination .current-page-index {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
width: 18px;
|
||||
margin-right: 0.7ch;
|
||||
text-align: right;
|
||||
|
|
@ -229,7 +228,7 @@ input[type="range"].invert {
|
|||
pointer-events: none;
|
||||
}
|
||||
.page-btn.disabled svg path {
|
||||
fill: #393B5F;
|
||||
fill: var(--bg-shade-3);
|
||||
}
|
||||
|
||||
button * {
|
||||
|
|
@ -240,7 +239,7 @@ button * {
|
|||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: #181B33;
|
||||
background: var(--bg-shade-1);
|
||||
border-radius: 100%;
|
||||
width: 1308px;
|
||||
height: 1707px;
|
||||
|
|
|
|||
111
public/assets/css/partials/footer.css
Normal file
111
public/assets/css/partials/footer.css
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
footer {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, fit-content(100%)) 1fr;
|
||||
gap: 7.7vw;
|
||||
color: var(--text-shade-1);
|
||||
margin-top: 120px;
|
||||
position: relative;
|
||||
padding: 60px 0;
|
||||
}
|
||||
footer::after {
|
||||
content: "";
|
||||
width: 400vw;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -50vw;
|
||||
background: var(--bg-shade-0);
|
||||
z-index: -1;
|
||||
}
|
||||
footer div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: fit-content;
|
||||
}
|
||||
footer svg.logotype {
|
||||
height: 56px;
|
||||
width: fit-content;
|
||||
margin: -10px 0 24px -10px;
|
||||
}
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
footer h1 {
|
||||
font-size: 20px;
|
||||
margin-top: 0;
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
footer a {
|
||||
color: var(--text-shade-1);
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
}
|
||||
footer a:hover {
|
||||
color: var(--text-shade-3);
|
||||
text-decoration: underline;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
background: var(--bg-shade-2);
|
||||
border-radius: 12px;
|
||||
padding: 30px 90px 30px 36px;
|
||||
justify-self: end;
|
||||
}
|
||||
footer div.discord-server-card h1 {
|
||||
font-size: 25px;
|
||||
margin: 0;
|
||||
}
|
||||
footer div.discord-server-card h2 {
|
||||
color: var(--text-shade-3);
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
footer div.discord-server-card a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--accent-shade-3);
|
||||
font-size: 22px;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
margin-left: -2px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
footer div.discord-server-card a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
footer div.discord-server-card svg {
|
||||
height: 24px;
|
||||
stroke-width: 3px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
footer {
|
||||
margin-top: 100px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, fit-content(100%));
|
||||
}
|
||||
footer div {
|
||||
justify-self: center;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
grid-column: 1 / span 4;
|
||||
width: calc(100% - 126px);
|
||||
justify-self: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 580px) {
|
||||
footer {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(4, fit-content(100%));
|
||||
}
|
||||
footer div {
|
||||
justify-self: start;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
grid-column: 1 / span 1;
|
||||
padding: 30px;
|
||||
width: calc(100% - 60px);
|
||||
}
|
||||
}
|
||||
155
public/assets/css/partials/header.css
Normal file
155
public/assets/css/partials/header.css
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 35px;
|
||||
}
|
||||
header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
header .logo-link,
|
||||
header .logo-link svg {
|
||||
display: block;
|
||||
}
|
||||
header nav a:first-child {
|
||||
margin-left: 40px;
|
||||
}
|
||||
header nav a {
|
||||
color: var(--text-shade-1);
|
||||
margin: 0 17px;
|
||||
text-decoration: none;
|
||||
}
|
||||
header nav a:hover {
|
||||
color: var(--text-shade-3);
|
||||
transition: color 50ms ease-in-out;
|
||||
}
|
||||
|
||||
header .right-section {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: 24px;
|
||||
margin-left: auto;
|
||||
z-index: 2;
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
|
||||
header .locale-dropdown-toggle {
|
||||
width: fit-content;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
transition: color 150ms;
|
||||
cursor: pointer;
|
||||
}
|
||||
header .locale-dropdown-toggle:hover,
|
||||
header .locale-dropdown-toggle.active {
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
header .user-widget-wrapper {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
header .user-widget-wrapper a.login-link {
|
||||
color: var(--text-shade-1);
|
||||
text-decoration: none;
|
||||
transition: color 150ms;
|
||||
}
|
||||
header .user-widget-wrapper a.login-link:hover {
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
header .user-widget-wrapper.logged-in {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
header .user-widget-wrapper.logged-in .user-widget-toggle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--text-shade-0);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
header .user-widget-wrapper .user-widget-toggle img,
|
||||
header .user-widget .user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
header .user-widget {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
box-sizing: border-box;
|
||||
transition: max-height 300ms, padding 200ms, opacity 150ms;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 48px;
|
||||
padding: 0;
|
||||
background: var(--bg-shade-2);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
|
||||
box-shadow: 0 0 10px -2px var(--bg-shade-0);
|
||||
}
|
||||
header .user-widget.active {
|
||||
max-height: 100vh;
|
||||
padding: 36px;
|
||||
opacity: 1;
|
||||
}
|
||||
header .user-widget .user-avatar {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin: auto;
|
||||
background: var(--text-shade-0);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
header .user-widget .user-info {
|
||||
margin-top: 12px;
|
||||
}
|
||||
header .user-widget .user-info .mii-name {
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
header .user-widget .buttons {
|
||||
margin-top: 12px;
|
||||
}
|
||||
header .user-widget .button {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
padding: 8px 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
header .user-widget .button.logout {
|
||||
background: var(--bg-shade-3);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
header nav a:not(.keep-on-mobile) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .logo-link {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
header .logo-link svg text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .logo-link svg {
|
||||
width: 39.876px;
|
||||
}
|
||||
|
||||
header .logo-link {
|
||||
margin-right: 10px;
|
||||
}
|
||||
header nav a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,14 +8,11 @@
|
|||
position: absolute;
|
||||
top: -800px;
|
||||
content: "";
|
||||
background: #111531;
|
||||
background: var(--bg-shade-0);
|
||||
border-radius: 100%;
|
||||
width: 1600px;
|
||||
height: 1400px;
|
||||
}
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.back-arrow {
|
||||
position: absolute;
|
||||
|
|
@ -24,12 +21,13 @@ body.modal-open {
|
|||
top: 36px;
|
||||
left: max(calc((100vw - 1590px) / 2), 2.5vw);
|
||||
padding: 6px 10px;
|
||||
background: var(--btn-secondary);
|
||||
background: var(--bg-shade-3);
|
||||
border-radius: 24px;
|
||||
|
||||
transition: filter 150ms;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
z-index: 5;
|
||||
}
|
||||
.back-arrow:hover {
|
||||
filter: brightness(1.5)
|
||||
|
|
@ -46,7 +44,7 @@ body.modal-open {
|
|||
display: flex;
|
||||
flex-flow: column;
|
||||
width: min(1200px, 100%);
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
margin: 0 auto 48px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -57,7 +55,7 @@ body.modal-open {
|
|||
}
|
||||
|
||||
h1.title {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
p.caption {
|
||||
width: min(100%, 500px);
|
||||
|
|
@ -70,7 +68,7 @@ p.caption {
|
|||
margin: 0 auto 72px;
|
||||
padding: 24px;
|
||||
border-radius: 6px;
|
||||
background: #1b1f3b;
|
||||
background: var(--bg-shade-2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.account-form-wrapper .progress-bar-wrapper p {
|
||||
|
|
@ -78,7 +76,7 @@ p.caption {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
.account-form-wrapper .progress-bar-wrapper p span {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -105,14 +103,14 @@ form .tier-radio:checked + label::before {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: inset 0 0 0 4px #9d70f1;
|
||||
box-shadow: inset 0 0 0 4px var(--accent-shade-1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
form .tier-radio:checked + label::after {
|
||||
content: url(/assets/images/check.svg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #9d70f1;
|
||||
background: var(--accent-shade-1);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -129,7 +127,7 @@ label.tier {
|
|||
border-radius: 10px;
|
||||
align-items: center;
|
||||
padding-top: calc(50px + 1rem);
|
||||
background: #393b5f;
|
||||
background: var(--bg-shade-3);
|
||||
cursor: pointer;
|
||||
transition: all 150ms;
|
||||
margin-top: 50px;
|
||||
|
|
@ -151,7 +149,7 @@ label.tier .tier-thumbnail {
|
|||
position: absolute;
|
||||
top: -50px;
|
||||
z-index: 2;
|
||||
background: #47496d;
|
||||
background: var(--bg-shade-4);
|
||||
}
|
||||
form .tier-radio:checked + label .tier-thumbnail::before {
|
||||
content: "";
|
||||
|
|
@ -160,7 +158,7 @@ form .tier-radio:checked + label .tier-thumbnail::before {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: inset 0 0 0 4px #9d70f1;
|
||||
box-shadow: inset 0 0 0 4px var(--accent-shade-1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -171,7 +169,7 @@ label.tier .tier-text {
|
|||
}
|
||||
|
||||
label.tier .tier-name {
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
|
@ -188,7 +186,7 @@ label.tier .tier-perks div {
|
|||
}
|
||||
label.tier .tier-perks svg {
|
||||
stroke-width: 5px;
|
||||
stroke: #59c9a5;
|
||||
stroke: var(--green-shade-1);
|
||||
stroke-linecap: square;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -201,7 +199,7 @@ label.tier p.price {
|
|||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #47496d;
|
||||
background: var(--bg-shade-4);
|
||||
margin: 0;
|
||||
padding: 1.5rem 1rem;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -209,7 +207,7 @@ label.tier p.price {
|
|||
}
|
||||
label.tier p.price span {
|
||||
font-size: 2rem;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
font-weight: bold;
|
||||
margin-right: 0.5ch;
|
||||
}
|
||||
|
|
@ -227,11 +225,11 @@ button {
|
|||
font-size: 1rem;
|
||||
height: fit-content;
|
||||
|
||||
background: var(--btn);
|
||||
background: var(--accent-shade-0);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text);
|
||||
color: var(--text-shade-3);
|
||||
width: 100%;
|
||||
|
||||
transition: filter 300ms;
|
||||
|
|
@ -248,7 +246,7 @@ form button.disabled {
|
|||
form button.unsubscribe {
|
||||
position: relative;
|
||||
background: none;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-shade-1);
|
||||
margin-top: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -259,69 +257,7 @@ form button.unsubscribe.hidden {
|
|||
z-index: -1;
|
||||
}
|
||||
form button.unsubscribe:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
div.unsub-modal-wrapper,
|
||||
div.switch-tier-modal-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
div.unsub-modal-wrapper.hidden,
|
||||
div.switch-tier-modal-wrapper.hidden {
|
||||
display: none;
|
||||
}
|
||||
div.unsub-modal,
|
||||
div.switch-tier-modal {
|
||||
background: #393b5f;
|
||||
padding: 48px;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
width: min(660px, 90%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.unsub-modal h1,
|
||||
div.switch-tier-modal h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
p.unsub-modal-caption,
|
||||
p.switch-tier-modal-caption {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
p.unsub-modal-caption span,
|
||||
p.switch-tier-modal-caption span {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.unsub-modal-button-wrapper,
|
||||
.switch-tier-modal-button-wrapper {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.unsub-modal-button-wrapper button,
|
||||
.switch-tier-modal-button-wrapper button {
|
||||
margin-left: 12px;
|
||||
width: fit-content;
|
||||
}
|
||||
.unsub-modal-button-wrapper button.cancel,
|
||||
.switch-tier-modal-button-wrapper button.cancel {
|
||||
background: none;
|
||||
}
|
||||
.unsub-modal-button-wrapper button.confirm,
|
||||
.switch-tier-modal-button-wrapper button.confirm {
|
||||
padding: 12px 24px;
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
|
|
@ -353,15 +289,11 @@ p.switch-tier-modal-caption span {
|
|||
left: -100vw;
|
||||
width: 200vw;
|
||||
height: 300%;
|
||||
background: #111531;
|
||||
background: var(--bg-shade-0);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
div.unsub-modal {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
label.tier .tier-perks {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ document.getElementById('remove-discord-connection')?.addEventListener('click',
|
|||
.catch(console.log);
|
||||
});
|
||||
|
||||
const onlineFilesModal = document.querySelector('.online-files-modal-wrapper');
|
||||
const onlineFilesModal = document.querySelector('.modal-wrapper#onlinefiles');
|
||||
const onlineFilesModalButtonConfirm = document.getElementById('onlineFilesConfirmButton');
|
||||
const onlineFilesModalButtonClose = document.getElementById('onlineFilesCloseButton');
|
||||
const onlineFilesModalPasswordInput = document.getElementById('password');
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ document.querySelectorAll('.feature-list-wrapper').forEach(progressListElement =
|
|||
datasets: [
|
||||
{
|
||||
data,
|
||||
backgroundColor: isInBrightCard ? ['white', 'rgba(195, 178, 227, 0.5)'] : ['#9D6FF3', '#4C5174']
|
||||
backgroundColor: isInBrightCard ? ['white', 'rgba(195, 178, 227, 0.5)'] : ['#9D6FF3', '#31365A']
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -65,13 +65,13 @@ buttons.submit.addEventListener('click', function(e) {
|
|||
|
||||
// If the user is already subscribed to another tier, we show the confirm modal, else if this is a new subscription we submit the form.
|
||||
if (currentTierElement) {
|
||||
const oldTierNameSpan = document.querySelector('.switch-tier-modal-caption span.oldtier');
|
||||
const newTierNameSpan = document.querySelector('.switch-tier-modal-caption span.newtier');
|
||||
const oldTierNameSpan = document.querySelector('#switchtier .modal-caption span.oldtier');
|
||||
const newTierNameSpan = document.querySelector('#switchtier .modal-caption span.newtier');
|
||||
oldTierNameSpan.innerText = currentTierElement.dataset.tierName;
|
||||
newTierNameSpan.innerText = document.querySelector('input[name="tier"]:checked').dataset.tierName;
|
||||
|
||||
document.body.classList.add('modal-open');
|
||||
document.querySelector('.switch-tier-modal-wrapper').classList.remove('hidden');
|
||||
document.querySelector('.modal-wrapper#switchtier').classList.remove('hidden');
|
||||
} else {
|
||||
submitForm();
|
||||
}
|
||||
|
|
@ -80,19 +80,19 @@ buttons.submit.addEventListener('click', function(e) {
|
|||
buttons.unsubModal.show.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const tierNameSpan = document.querySelector('.unsub-modal-caption span');
|
||||
const tierNameSpan = document.querySelector('#unsub .modal-caption span');
|
||||
tierNameSpan.innerText = currentTierElement.dataset.tierName;
|
||||
|
||||
// Show the unsubscribe modal
|
||||
document.body.classList.add('modal-open');
|
||||
document.querySelector('.unsub-modal-wrapper').classList.remove('hidden');
|
||||
document.querySelector('.modal-wrapper#unsub').classList.remove('hidden');
|
||||
});
|
||||
buttons.unsubModal.close.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Hide the unsubscribe modal
|
||||
document.body.classList.remove('modal-open');
|
||||
document.querySelector('.unsub-modal-wrapper').classList.add('hidden');
|
||||
document.querySelector('.modal-wrapper#unsub').classList.add('hidden');
|
||||
});
|
||||
buttons.unsubModal.confirm.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -105,7 +105,7 @@ buttons.switchTierModal.close.addEventListener('click', function(e) {
|
|||
|
||||
// Hide the switch tier modal
|
||||
document.body.classList.remove('modal-open');
|
||||
document.querySelector('.switch-tier-modal-wrapper').classList.add('hidden');
|
||||
document.querySelector('.modal-wrapper#switchtier').classList.add('hidden');
|
||||
});
|
||||
buttons.switchTierModal.confirm.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
|
|
|||
|
|
@ -176,14 +176,14 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="online-files-modal-wrapper hidden">
|
||||
<div class="online-files-modal">
|
||||
<div class="modal-wrapper hidden" id="onlinefiles">
|
||||
<div class="modal">
|
||||
<h1 class="title dot">Password</h1>
|
||||
<p class="online-files-modal-caption">Enter your PNID password to download Cemu files</p>
|
||||
<input name="password" id="password" type="password" required>
|
||||
<div class="online-files-modal-button-wrapper">
|
||||
<button class="cancel" id="onlineFilesCloseButton">Cancel</button>
|
||||
<button class="confirm" id="onlineFilesConfirmButton">Confirm</button>
|
||||
<p class="modal-caption">Enter your PNID password to download Cemu files</p>
|
||||
<input name="password" id="password" type="password" required />
|
||||
<div class="modal-button-wrapper">
|
||||
<button class="button cancel" id="onlineFilesCloseButton">Cancel</button>
|
||||
<button class="button primary confirm" id="onlineFilesConfirmButton">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -76,26 +76,26 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<div class="unsub-modal-wrapper hidden">
|
||||
<div class="unsub-modal">
|
||||
<div class="modal-wrapper hidden" id="unsub">
|
||||
<div class="modal">
|
||||
<h1 class="title dot">Unsubscribe</h1>
|
||||
<p class="unsub-modal-caption">Are you sure you want to unsubscribe from <span>tiername</span>?
|
||||
<p class="modal-caption">Are you sure you want to unsubscribe from <span>tiername</span>?
|
||||
You will lose access to the perks associated with that tier.</p>
|
||||
<div class="unsub-modal-button-wrapper">
|
||||
<button class="cancel" id="unsubModalCloseButton">Cancel</button>
|
||||
<button class="confirm" id="unsubModalConfirmButton">Unsubscribe</button>
|
||||
<div class="modal-button-wrapper">
|
||||
<button class="button cancel" id="unsubModalCloseButton">Cancel</button>
|
||||
<button class="button primary confirm" id="unsubModalConfirmButton">Unsubscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="switch-tier-modal-wrapper hidden">
|
||||
<div class="switch-tier-modal">
|
||||
<div class="modal-wrapper hidden" id="switchtier">
|
||||
<div class="modal">
|
||||
<h1 class="title dot">Change tier</h1>
|
||||
<p class="switch-tier-modal-caption">Are you sure you want to unsubscribe
|
||||
<p class="modal-caption">Are you sure you want to unsubscribe
|
||||
from <span class="oldtier">oldtiername</span> and subscribe to <span class="newtier">newtiername</span>?</p>
|
||||
<div class="switch-tier-modal-button-wrapper">
|
||||
<button class="cancel" id="switchTierCloseButton">Cancel</button>
|
||||
<button class="confirm" id="switchTierConfirmButton">Confirm</button>
|
||||
<div class="modal-button-wrapper">
|
||||
<button class="button cancel" id="switchTierCloseButton">Cancel</button>
|
||||
<button class="button primary confirm" id="switchTierConfirmButton">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@
|
|||
|
||||
<!-- css files -->
|
||||
<link rel="stylesheet" href="/assets/css/dropdown.css" />
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
<link rel="stylesheet" href="/assets/css/components.css" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<h1 class="title dot">{{ localeHelper locale "localizationPage" "title" }}</h1>
|
||||
<p class="caption">{{ localeHelper locale "localizationPage" "description" }}</p>
|
||||
<a href="https://github.com/PretendoNetwork/Pretendo/blob/master/CONTRIBUTING.md#localization" target="_blank" class="localization-instr">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--theme-light)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent-shade-2)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
||||
{{ localeHelper locale "localizationPage" "instructions" }}
|
||||
</a>
|
||||
<form class="localization-form" autocomplete="off">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<link rel="stylesheet" href="/assets/css/partials/footer.css" /></link>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<svg class="logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 39.876" preserveAspectRatio="xMinYMin meet">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<link rel="stylesheet" href="/assets/css/partials/header.css" ></link>
|
||||
|
||||
<header>
|
||||
<a href="/" class="logo-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user