diff --git a/public/assets/css/account.css b/public/assets/css/account.css
index 4445339..91f3f62 100644
--- a/public/assets/css/account.css
+++ b/public/assets/css/account.css
@@ -12,7 +12,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 +23,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 +41,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 +56,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 +84,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 +104,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 +115,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 +125,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 +134,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 +152,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 +168,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 +183,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 +193,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 +221,22 @@ fieldset {
padding: 12px 48px;
align-self: flex-end;
cursor: pointer;
- background: #383f6b;
+ background: var(--bg-shade-3);
}
.setting-card input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
- background: #383f6b;
+ background: var(--bg-shade-3);
padding: 12px;
margin: 4px;
margin-left: 0;
border-radius: 4px;
vertical-align: -65%;
+ width: fit-content;
+ cursor: pointer;
}
.setting-card input[type="checkbox"]:checked {
- background: no-repeat center/contain url(../images/check.svg), var(--theme);
+ background: no-repeat center/contain url(../images/check.svg), var(--accent-shade-0);
}
.setting-card.span-both-columns {
@@ -269,10 +271,10 @@ fieldset {
z-index: 3;
}
.banner-notice.success div {
- background: #37a985;
+ background: var(--green-shade-0);
}
.banner-notice.error div {
- background: #a9375b;
+ background: var(--red-shade-1);
}
div.online-files-modal-wrapper {
@@ -293,7 +295,7 @@ div.online-files-modal-wrapper.hidden {
display: none;
}
div.online-files-modal {
- background: #393b5f;
+ background: var(--bg-shade-2);
padding: 48px;
border-radius: 8px;
text-align: left;
@@ -305,10 +307,10 @@ div.online-files-modal h1 {
margin-top: 0;
}
p.online-files-modal-caption {
- color: var(--text-secondary);
+ color: var(--text-shade-1);
}
p.online-files-modal-caption span {
- color: var(--text);
+ color: var(--text-shade-3);
}
.online-files-modal-button-wrapper {
@@ -335,11 +337,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;
@@ -354,16 +356,16 @@ input {
display: block;
font-family: Poppins, Arial, Helvetica, sans-serif;
font-size: 1rem;
- background-color: black; /*change me*/
+ background-color: var(--bg-shade-3);
border: none;
border-radius: 4px;
padding: 12px;
- color: var(--text);
+ color: var(--text-shade-2);
width: calc(100% - 24px);
}
input:focus {
- background-color: #4b5595;
+ background-color: var(--bg-shade-4);
outline: none;
transition: 150ms;
}
diff --git a/public/assets/css/aprilfools.css b/public/assets/css/aprilfools.css
index 4dbb2db..bf7f813 100644
--- a/public/assets/css/aprilfools.css
+++ b/public/assets/css/aprilfools.css
@@ -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) {
diff --git a/public/assets/css/blog.css b/public/assets/css/blog.css
index 89f0648..e75115c 100644
--- a/public/assets/css/blog.css
+++ b/public/assets/css/blog.css
@@ -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;
}
diff --git a/public/assets/css/blogpost.css b/public/assets/css/blogpost.css
index b4bd9f6..e6af5a1 100644
--- a/public/assets/css/blogpost.css
+++ b/public/assets/css/blogpost.css
@@ -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;
diff --git a/public/assets/css/documentation.css b/public/assets/css/documentation.css
index 7f56e7f..5a1ab01 100644
--- a/public/assets/css/documentation.css
+++ b/public/assets/css/documentation.css
@@ -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;
}
diff --git a/public/assets/css/dropdown.css b/public/assets/css/dropdown.css
index 3da4a25..8dbf1ae 100644
--- a/public/assets/css/dropdown.css
+++ b/public/assets/css/dropdown.css
@@ -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;
diff --git a/public/assets/css/highlightjs.css b/public/assets/css/highlightjs.css
index e71ac73..00f60cd 100644
--- a/public/assets/css/highlightjs.css
+++ b/public/assets/css/highlightjs.css
@@ -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 {
diff --git a/public/assets/css/localization.css b/public/assets/css/localization.css
index 82caa8f..684eb5b 100644
--- a/public/assets/css/localization.css
+++ b/public/assets/css/localization.css
@@ -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;
}
diff --git a/public/assets/css/login.css b/public/assets/css/login.css
index 04d99b3..d7b6033 100644
--- a/public/assets/css/login.css
+++ b/public/assets/css/login.css
@@ -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 {
@@ -42,16 +42,16 @@ form.account input {
display: block;
font-family: Poppins, Arial, Helvetica, sans-serif;
font-size: 1rem;
- background-color: #353c6a;
+ background-color: var(--bg-shade-3);
border: none;
border-radius: 4px;
padding: 12px;
- color: var(--text);
+ color: var(--text-shade-3);
width: calc(100% - 24px);
}
form.account input:focus {
- background-color: #4b5595;
+ background-color: var(--bg-shade-4);
outline: none;
transition: 150ms;
}
@@ -71,9 +71,9 @@ form.account button {
border-radius: 4px;
font-family: Poppins, Arial, Helvetica, sans-serif;
font-size: 1rem;
- color: var(--text);
+ color: var(--text-shade-3);
padding: 12px 30px;
- background: #353c6a;
+ background: var(--bg-shade-3);
margin-top: 18px;
cursor: pointer;
width: 100%;
@@ -81,20 +81,20 @@ form.account button {
}
form.account button[type="submit"] {
- background: var(--btn);
+ background: var(--accent-shade-0);
margin: auto;
}
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 +135,7 @@ form.account a.register {
z-index: 3;
}
.banner-notice.error div {
- background: #a9375b;
+ background: var(--red-shade-1);
}
form.account.register {
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index d5de5ba..e430591 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -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;
@@ -345,14 +228,15 @@ img.emoji {
border-radius: 6px;
font-family: Poppins, Arial, Helvetica, sans-serif;
font-size: 1rem;
- color: var(--text);
+ color: var(--text-shade-3);
+ padding: 12px 48px;
+ background: var(--bg-shade-3);
}
.button.primary {
- padding: 12px 48px;
- background: var(--btn);
+ background: var(--accent-shade-0);
}
-.button.secondary {
- background: var(--btn-secondary);
+.hero .button.secondary {
+ padding: 0;
}
.button.secondary.discord svg {
margin-bottom: -1px;
@@ -400,13 +284,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 +303,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 +321,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 +355,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 +371,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 +389,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 +428,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 +446,7 @@ section.team {
margin: 0;
}
.card .sub {
- color: #59C9A5;
+ color: var(--green-shade-1);
font-size: .875rem;
}
.card .title {
@@ -581,7 +465,7 @@ section.team {
display: block;
}
.card .text {
- color: var(--text-secondary);
+ color: var(--text-shade-1);
}
section.team-helpers {
@@ -597,7 +481,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 +514,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 +534,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 +545,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 +562,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 +599,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 +635,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 +659,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 +676,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 +687,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 +702,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 +743,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 +751,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 +762,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 +803,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 +831,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 +850,6 @@ footer div.discord-server-card svg {
right: auto;
left: 60vw;
}
-
-
}
@media screen and (max-width: 900px) {
@@ -1065,15 +864,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 +965,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 +1030,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;
- }
-}
+}
\ No newline at end of file
diff --git a/public/assets/css/miieditor.css b/public/assets/css/miieditor.css
index bad5146..b27aa03 100644
--- a/public/assets/css/miieditor.css
+++ b/public/assets/css/miieditor.css
@@ -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;
diff --git a/public/assets/css/partials/footer.css b/public/assets/css/partials/footer.css
new file mode 100644
index 0000000..85f0ddb
--- /dev/null
+++ b/public/assets/css/partials/footer.css
@@ -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);
+ }
+}
diff --git a/public/assets/css/partials/header.css b/public/assets/css/partials/header.css
new file mode 100644
index 0000000..6a3278a
--- /dev/null
+++ b/public/assets/css/partials/header.css
@@ -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;
+ }
+}
diff --git a/public/assets/css/upgrade.css b/public/assets/css/upgrade.css
index 87885ab..b630ee5 100644
--- a/public/assets/css/upgrade.css
+++ b/public/assets/css/upgrade.css
@@ -8,7 +8,7 @@
position: absolute;
top: -800px;
content: "";
- background: #111531;
+ background: var(--bg-shade-0);
border-radius: 100%;
width: 1600px;
height: 1400px;
@@ -24,12 +24,12 @@ 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);
}
.back-arrow:hover {
filter: brightness(1.5)
@@ -46,7 +46,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 +57,7 @@ body.modal-open {
}
h1.title {
- color: var(--text);
+ color: var(--text-shade-3);
}
p.caption {
width: min(100%, 500px);
@@ -70,7 +70,7 @@ p.caption {
margin: 0 auto 72px;
padding: 24px;
border-radius: 6px;
- background: #1b1f3b;
+ background: var(--bg-shade-0);
box-sizing: border-box;
}
.account-form-wrapper .progress-bar-wrapper p {
@@ -78,7 +78,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 +105,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 +129,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 +151,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 +160,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 +171,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 +188,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 +201,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 +209,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 +227,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 +248,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,7 +259,7 @@ form button.unsubscribe.hidden {
z-index: -1;
}
form button.unsubscribe:hover {
- color: var(--text);
+ color: var(--text-shade-3);
}
div.unsub-modal-wrapper,
@@ -283,7 +283,7 @@ div.switch-tier-modal-wrapper.hidden {
}
div.unsub-modal,
div.switch-tier-modal {
- background: #393b5f;
+ background: var(--bg-shade-3);
padding: 48px;
border-radius: 8px;
text-align: left;
@@ -297,11 +297,11 @@ div.switch-tier-modal h1 {
}
p.unsub-modal-caption,
p.switch-tier-modal-caption {
- color: var(--text-secondary);
+ color: var(--text-shade-1);
}
p.unsub-modal-caption span,
p.switch-tier-modal-caption span {
- color: var(--text);
+ color: var(--text-shade-3);
}
.unsub-modal-button-wrapper,
@@ -353,7 +353,7 @@ p.switch-tier-modal-caption span {
left: -100vw;
width: 200vw;
height: 300%;
- background: #111531;
+ background: var(--bg-shade-0);
}
}
diff --git a/public/assets/js/progress-charts.js b/public/assets/js/progress-charts.js
index cca71f3..c4bcc19 100644
--- a/public/assets/js/progress-charts.js
+++ b/public/assets/js/progress-charts.js
@@ -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']
}
]
},
diff --git a/views/localization.handlebars b/views/localization.handlebars
index 74f8c83..90d3125 100644
--- a/views/localization.handlebars
+++ b/views/localization.handlebars
@@ -9,7 +9,7 @@
{{ localeHelper locale "localizationPage" "title" }}
{{ localeHelper locale "localizationPage" "description" }}
-
+
{{ localeHelper locale "localizationPage" "instructions" }}