mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-08-25 18:17:49 -05:00
style: create components.css, reuse code
This commit is contained in:
Ash Monty
@@ -1,7 +1,3 @@
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Removing until it's done */
|
||||
.setting-card a.edit,
|
||||
.sign-in-history a {
|
||||
@@ -223,21 +219,6 @@ fieldset {
|
||||
cursor: pointer;
|
||||
background: var(--bg-shade-3);
|
||||
}
|
||||
.setting-card 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;
|
||||
}
|
||||
.setting-card input[type="checkbox"]:checked {
|
||||
background: no-repeat center/contain url(../images/check.svg), var(--accent-shade-0);
|
||||
}
|
||||
|
||||
.setting-card.span-both-columns {
|
||||
grid-column: 1 / span 2;
|
||||
@@ -277,99 +258,6 @@ fieldset {
|
||||
background: var(--red-shade-1);
|
||||
}
|
||||
|
||||
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: var(--bg-shade-2);
|
||||
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-shade-1);
|
||||
}
|
||||
p.online-files-modal-caption span {
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.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(--accent-shade-0);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text-shade-3);
|
||||
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: var(--bg-shade-3);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text-shade-2);
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
background-color: var(--bg-shade-4);
|
||||
outline: none;
|
||||
transition: 150ms;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
@@ -88,6 +88,7 @@
|
||||
cursor: pointer;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -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: var(--bg-shade-3);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text-shade-3);
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
form.account input:focus {
|
||||
background-color: var(--bg-shade-4);
|
||||
outline: none;
|
||||
transition: 150ms;
|
||||
}
|
||||
|
||||
form.account label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
@@ -64,25 +44,8 @@ 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-shade-3);
|
||||
padding: 12px 30px;
|
||||
background: var(--bg-shade-3);
|
||||
margin-top: 18px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
form.account button[type="submit"] {
|
||||
background: var(--accent-shade-0);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
form.account a {
|
||||
|
||||
@@ -216,25 +216,9 @@ img.emoji {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.hero .buttons a {
|
||||
display: block;
|
||||
}
|
||||
.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-shade-3);
|
||||
padding: 12px 48px;
|
||||
background: var(--bg-shade-3);
|
||||
}
|
||||
.button.primary {
|
||||
background: var(--accent-shade-0);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hero .button.secondary {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -245,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 {
|
||||
|
||||
@@ -13,9 +13,6 @@
|
||||
width: 1600px;
|
||||
height: 1400px;
|
||||
}
|
||||
body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.back-arrow {
|
||||
position: absolute;
|
||||
@@ -30,6 +27,7 @@ body.modal-open {
|
||||
transition: filter 150ms;
|
||||
text-decoration: none;
|
||||
color: var(--text-shade-3);
|
||||
z-index: 5;
|
||||
}
|
||||
.back-arrow:hover {
|
||||
filter: brightness(1.5)
|
||||
@@ -70,7 +68,7 @@ p.caption {
|
||||
margin: 0 auto 72px;
|
||||
padding: 24px;
|
||||
border-radius: 6px;
|
||||
background: var(--bg-shade-0);
|
||||
background: var(--bg-shade-2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.account-form-wrapper .progress-bar-wrapper p {
|
||||
@@ -262,68 +260,6 @@ form button.unsubscribe:hover {
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
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: var(--bg-shade-3);
|
||||
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-shade-1);
|
||||
}
|
||||
p.unsub-modal-caption span,
|
||||
p.switch-tier-modal-caption span {
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.account-form-wrapper {
|
||||
width: min(500px, 100%);
|
||||
@@ -357,11 +293,7 @@ p.switch-tier-modal-caption span {
|
||||
}
|
||||
}
|
||||
|
||||
@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');
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user