hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2025-02-22 09:40:11 +00:00
Code Issues Projects Releases Wiki Activity

cleanup css

Browse Source
This commit is contained in:
Harvey Tindall 2020-12-26 15:51:07 +00:00
parent 90c7745a77
commit 9ea72fbc32
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
3 changed files with 176 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

314
base.css
View File

@ -11,158 +11,97 @@
background-color: #101010; background-color: #101010;
} }
.pageContainer { .page-container {
margin: 5% 20% 5% 20%; margin: 5% 20% 5% 20%;
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
.pageContainer { .page-container {
margin: 2%; margin: 2%;
} }
} }
.contactBox {
color: grey; .tab-button {
}
#container {
margin-top: 5%;
margin-bottom: 5%;
}
.tabText {
font-size: 2rem; font-size: 2rem;
} }
.mb-1 {
margin-bottom: 1rem;
}
.mb-half { .mb-half {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.pb-1 {
padding-bottom: 1rem; .mb-1 {
} margin-bottom: 1rem;
.pl-1 {
padding-left: 1rem;
}
.mr-1 {
margin-right: 1rem;
}
.ml-1 {
margin-left: 1rem;
} }
.mb-2 { .mb-2 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.mt-half {
margin-top: 0.5rem;
}
.mt-1 { .mt-1 {
margin-top: 1rem; margin-top: 1rem;
} }
.mt-half {
margin-top: 0.5rem; .ml-1 {
margin-left: 1rem;
} }
.inv-codearea {
/*width: 40%;*/ .mr-1 {
margin-right: 1rem;
} }
.pb-1 {
padding-bottom: 1rem;
}
.pl-1 {
padding-left: 1rem;
}
.al { .al {
text-align: left; text-align: left;
} }
.inline-block {
display: inline-block;
}
.ar { .ar {
text-align: right; text-align: right;
} }
.monospace {
background-color: inherit; .inline-block {
}
.mt-half {
margin-top: 0.5rem;
}
.table-header {
padding-left: 0.5rem;
padding-bottom: 0.2rem;
}
.inv {
overflow: visible;
}
.inv-header {
display: flex;
justify-content: space-between;
}
.button-input {
display: flex;
justify-content: space-between;
}
.inv-row {
display: flex;
justify-content: space-between;
align-items: top;
}
.ib {
display: inline-block; display: inline-block;
} }
.inv-profileselect {
min-width: 100%; .align-top {
} align-items: top;
.inv-table {
font-size: 0.8rem;
}
.no-lp {
padding-left: 0px;
}
.block { display: block; }
.hiding {
animation: slide-out 0.1s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
}
.hidden {
display: none;
}
.visible {
display: block;
/*animation: fade-in 0.2s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;*/
}
@keyframes fade-in {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes slide-out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.toggle-details {
display: none;
}
.rotated {
transform: rotate(180deg);
-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */
} }
.not-rotated { .flex-expand {
transform: rotate(0deg); display: flex;
-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92); justify-content: space-between;
-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */
} }
.flex-row {
display: flex;
flex-direction: row;
}
.flex-row-group {
display: block;
flex-grow: 1;
}
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.col { .col {
flex: 1; flex: 1;
margin: 0.5rem; margin: 0.5rem;
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.row { .row {
flex-direction: column; flex-direction: column;
@ -171,28 +110,108 @@
flex: 45%; flex: 45%;
} }
} }
.input {
box-sizing: border-box; .fr {
float: right;
} }
.submit { .monospace {
border: none; background-color: inherit; /* so we can use a17t code blocks */
outline: none; }
sup.\~critical {
color: var(--color-critical-normal-content);
}
.aside.sm {
font-size: 0.8rem;
padding: 0.8rem;
}
.support.lg {
font-size: 1rem;
}
.table-header {
padding-left: 0.5rem;
padding-bottom: 0.2rem;
}
.inv {
overflow: visible;
}
.inv-table {
font-size: 0.8rem;
}
.inv-profileselect {
min-width: 100%;
}
.input {
box-sizing: border-box; /* fixes weird length issue with inputs */
} }
.button-lg { .button-lg {
height: 3rem; height: 3rem;
} }
.full-width {
box-sizing: border-box; .submit {
border: none;
outline: none; /* remove browser styling on submit buttons */
}
.full-width { /* full width inputs */
box-sizing: border-box; /* TODO: maybe remove if we figure out input thing? */
width: 100%; width: 100%;
} }
.center {
justify-content: center;
}
.no-lp {
padding-left: 0px;
}
.block {
display: block;
}
.focused {
display: block;
}
.unfocused { .unfocused {
display: none; display: none;
} }
.fr {
float: right; .rotated {
transform: rotate(180deg);
-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
transition: all 0.3s cubic-bezier(0,.89,.27,.92);
} }
.not-rotated {
transform: rotate(0deg);
-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
transition: all 0.3s cubic-bezier(0,.89,.27,.92);
}
.stealth-input {
font-size: 1rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
margin-left: 0.5rem;
margin-right: 1rem;
max-width: 50%;
}
.stealth-input-hidden { .stealth-input-hidden {
border-style: none; border-style: none;
--fallback-box-shadow: none; --fallback-box-shadow: none;
@ -201,72 +220,31 @@
padding-top: 0.1rem; padding-top: 0.1rem;
padding-bottom: 0.1rem; padding-bottom: 0.1rem;
} }
.stealth-input {
font-size: 1rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
margin-left: 0.5rem;
margin-right: 1rem;
max-width: 50%;
}
.settings-section-button { .settings-section-button {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 2.5rem; height: 2.5rem;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0,0,0,0);
} }
.settings-section-button:hover {
box-sizing: border-box;
width: 100%;
height: 2.5rem;
background-color: var(--color-neutral-normal-fill);
filter: brightness(var(--settings-section-button-filter)) !important;
} .settings-section-button:hover, .settings-section-button:focus {
.settings-section-button:focus {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 2.5rem; height: 2.5rem;
background-color: var(--color-neutral-normal-fill); background-color: var(--color-neutral-normal-fill);
filter: brightness(var(--settings-section-button-filter)) !important; filter: brightness(var(--settings-section-button-filter)) !important;
} }
.settings-section-button.selected { .settings-section-button.selected {
background-color: var(--color-neutral-normal-fill); background-color: var(--color-neutral-normal-fill);
--button-filter-brightness: var(--settings-section-button-filter); --buton-filter-brightness: var(--settings-section-button-filter);
filter: brightness(var(--settings-section-button-filter)) !important; filter: brightness(var(--settings-section-button-filter)) !important;
} }
.text-critical {
color: var(--color-critical-normal-content);
}
.aside.small {
font-size: 0.8rem;
padding: 0.8rem;
}
.setting { .setting {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.support.large {
font-size: 1rem;
}
.inline {
display: inline;
}
.flex-row {
display: flex;
flex-direction: row;
}
.fw-group {
display: block;
flex-grow: 1;
}
.center {
justify-content: center;
}
.textarea { .textarea {
resize: vertical; resize: vertical;

42
index.html
View File

@ -36,12 +36,12 @@
<span class="heading"><span id="header-modify-user">Modify Settings</span> <span class="modal-close">&times;</span></span> <span class="heading"><span id="header-modify-user">Modify Settings</span> <span class="modal-close">&times;</span></span>
<p class="content">Apply settings from an existing profile, or source them directly from a user.</p> <p class="content">Apply settings from an existing profile, or source them directly from a user.</p>
<div class="flex-row mb-1"> <div class="flex-row mb-1">
<label class="fw-group mr-1"> <label class="flex-row-group mr-1">
<input type="radio" name="modify-user-source" class="hidden" id="radio-use-profile" checked> <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-profile" checked>
<span class="button ~neutral !high supra full-width center">Profile</span> <span class="button ~neutral !high supra full-width center">Profile</span>
</label> </label>
<label class="fw-group ml-1"> <label class="flex-row-group ml-1">
<input type="radio" name="modify-user-source" class="hidden" id="radio-use-user"> <input type="radio" name="modify-user-source" class="unfocused" id="radio-use-user">
<span class="button ~neutral !normal supra full-width center">User</span> <span class="button ~neutral !normal supra full-width center">User</span>
</label> </label>
</div> </div>
@ -52,7 +52,7 @@
<option>Default</option> <option>Default</option>
</select> </select>
</div> </div>
<div id="modify-user-users" class="select ~neutral !normal mb-1 hidden"> <div id="modify-user-users" class="select ~neutral !normal mb-1 unfocused">
<select> <select>
<option>Person</option> <option>Person</option>
<option>Other person</option> <option>Other person</option>
@ -107,13 +107,13 @@
<input type="submit" class="button ~urge !normal full-width center supra submit" value="Submit"> <input type="submit" class="button ~urge !normal full-width center supra submit" value="Submit">
</form> </form>
</div> </div>
<div class="pageContainer max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8"> <div class="page-container max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
<div class="mb-1"> <div class="mb-1">
<header class="flex flex-wrap items-center justify-between"> <header class="flex flex-wrap items-center justify-between">
<div class="text-neutral-700"> <div class="text-neutral-700">
<span id="invitesTab-button" class="tabText portal ~urge active">Invites</span> <span id="invitesTab-button" class="tab-button portal ~urge active">Invites</span>
<span id="accountsTab-button" class="tabText portal">Accounts</span> <span id="accountsTab-button" class="tab-button portal">Accounts</span>
<span id="settingsTab-button" class="tabText portal">Settings</span> <span id="settingsTab-button" class="tab-button portal">Settings</span>
</div> </div>
</header> </header>
</div> </div>
@ -128,7 +128,7 @@
<div class="card ~neutral !low invites mb-1"> <div class="card ~neutral !low invites mb-1">
<span class="heading">Invites</span> <span class="heading">Invites</span>
<div class="inv"> <div class="inv">
<div class="card ~neutral !normal inv-header mt-half"> <div class="card ~neutral !normal inv-header flex-expand mt-half">
<div class="inv-codearea"> <div class="inv-codearea">
<a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a> <a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a>
<span class="button ~info !normal">Copy</span> <span class="button ~info !normal">Copy</span>
@ -138,15 +138,15 @@
<span class="button ~critical !normal">Delete</span> <span class="button ~critical !normal">Delete</span>
<label> <label>
<i class="icon icon-arrow-down not-rotated"></i> <i class="icon icon-arrow-down not-rotated"></i>
<input type="checkbox" class="toggle-details"> <input type="checkbox" class="toggle-details unfocused">
</label> </label>
</div> </div>
</div> </div>
<div class="card ~neutral !normal mt-half inv-details mt-half hidden"> <div class="card ~neutral !normal mt-half inv-details mt-half unfocused">
<div class="inv-row"> <div class="inv-row flex-expand align-top">
<div class="inv-profilearea"> <div class="inv-profilearea">
<p class="supra mb-1">Profile</p> <p class="supra mb-1">Profile</p>
<div class="select ~neutral !normal inv-profileselect ib"> <div class="select ~neutral !normal inv-profileselect inline-block">
<select> <select>
<option>Friends</option> <option>Friends</option>
<option>Family</option> <option>Family</option>
@ -213,7 +213,7 @@
</div> </div>
<div class="card ~neutral !normal col"> <div class="card ~neutral !normal col">
<label class="label supra" for="inv-uses">Number of uses</label> <label class="label supra" for="inv-uses">Number of uses</label>
<div class="button-input mb-1"> <div class="flex-expand mb-1">
<input type="number" min="0" id="inv-uses" class="input ~neutral !normal mr-1" value=1> <input type="number" min="0" id="inv-uses" class="input ~neutral !normal mr-1" value=1>
<label for="inv-inf-uses" class="button ~neutral !normal"> <label for="inv-inf-uses" class="button ~neutral !normal">
<span>∞</span> <span>∞</span>
@ -229,7 +229,7 @@
</select> </select>
</div> </div>
<label class="label supra">Send to</label> <label class="label supra">Send to</label>
<div class="button-input mb-1"> <div class="flex-expand mb-1">
<input type="email" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com"> <input type="email" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com">
<label for="inv-email-enabled" class="button ~neutral !normal"> <label for="inv-email-enabled" class="button ~neutral !normal">
<input type="checkbox" id="inv-email-enabled" aria-label="Send to address enabled"> <input type="checkbox" id="inv-email-enabled" aria-label="Send to address enabled">
@ -284,15 +284,15 @@
</div> </div>
<div class="row"> <div class="row">
<div class="card ~neutral !normal col"> <div class="card ~neutral !normal col">
<aside class="aside small ~info mb-half">Note: <sup class="text-critical">*</sup> indicates a required field, <sup class="text-critical">R</sup> indicates changes require a restart.</aside> <aside class="aside sm ~info mb-half">Note: <sup class="~critical">*</sup> indicates a required field, <sup class="~critical">R</sup> indicates changes require a restart.</aside>
<span class="button ~neutral !low settings-section-button mb-half" id="setting-about">About</span> <span class="button ~neutral !low settings-section-button mb-half" id="setting-about">About</span>
<span class="button ~neutral !low settings-section-button mb-half selected">User Profiles</span> <span class="button ~neutral !low settings-section-button mb-half selected">User Profiles</span>
</div> </div>
<div class="card ~neutral !normal col"> <div class="card ~neutral !normal col">
<div class="settings-section"> <div class="settings-section">
<p class="support large mb-half">Settings section description.</p> <p class="support lg mb-half">Settings section description.</p>
<div class="setting"> <div class="setting">
<label class="label" for="settings-select">Select <sup class="text-critical">R</sup></label> <label class="label" for="settings-select">Select <sup class="~critical">R</sup></label>
<div class="select ~neutral !normal mt-half"> <div class="select ~neutral !normal mt-half">
<select id="settings-select"> <select id="settings-select">
<option>Option 1</option> <option>Option 1</option>
@ -300,13 +300,13 @@
</div> </div>
</div> </div>
<div class="setting"> <div class="setting">
<label class="label" for="settings-input">Input <sup class="text-critical">*</sup></label> <label class="label" for="settings-input">Input <sup class="~critical">*</sup></label>
<input type="text" class="input ~neutral !normal mt-half" placeholder="Value"> <input type="text" class="input ~neutral !normal mt-half" placeholder="Value">
</div> </div>
<div class="setting"> <div class="setting">
<label class="switch settings"> <label class="switch settings">
<input type="checkbox" id="settings-check"> <input type="checkbox" id="settings-check">
<span>Checkbox <sup class="text-critical">R</sup></span> <span>Checkbox <sup class="~critical">R</sup></span>
</label> </label>
</div> </div>
</div> </div>

18
ts/main.ts
View File

@ -31,12 +31,12 @@ const toggles: HTMLInputElement[] = Array.from(document.getElementsByClassName('
for (let toggle of toggles) { for (let toggle of toggles) {
toggle.onclick = () => { toggle.onclick = () => {
const el = toggle.parentElement.parentElement.parentElement.nextElementSibling as HTMLDivElement; const el = toggle.parentElement.parentElement.parentElement.nextElementSibling as HTMLDivElement;
if (el.classList.contains("visible")) { if (el.classList.contains("focused")) {
el.classList.toggle("visible"); el.classList.toggle("focused");
el.classList.toggle("hidden"); el.classList.toggle("unfocused");
} else { } else {
el.classList.toggle("hidden"); el.classList.toggle("unfocused");
el.classList.toggle("visible"); el.classList.toggle("focused");
} }
toggle.previousElementSibling.classList.toggle("rotated"); toggle.previousElementSibling.classList.toggle("rotated");
toggle.previousElementSibling.classList.toggle("not-rotated"); toggle.previousElementSibling.classList.toggle("not-rotated");
@ -115,8 +115,8 @@ const modifySettingsSource = function () {
(user.nextElementSibling as HTMLSpanElement).classList.toggle('!high'); (user.nextElementSibling as HTMLSpanElement).classList.toggle('!high');
(profile.nextElementSibling as HTMLSpanElement).classList.toggle('!normal'); (profile.nextElementSibling as HTMLSpanElement).classList.toggle('!normal');
(profile.nextElementSibling as HTMLSpanElement).classList.toggle('!high'); (profile.nextElementSibling as HTMLSpanElement).classList.toggle('!high');
profileSelect.classList.toggle('hidden'); profileSelect.classList.toggle('unfocused');
userSelect.classList.toggle('hidden'); userSelect.classList.toggle('unfocused');
} }
const radioUseProfile = document.getElementById('radio-use-profile') as HTMLInputElement; const radioUseProfile = document.getElementById('radio-use-profile') as HTMLInputElement;
@ -128,9 +128,9 @@ radioUseUser.checked = false;
const checkDeleteUserNotify = function () { const checkDeleteUserNotify = function () {
if ((document.getElementById('delete-user-notify') as HTMLInputElement).checked) { if ((document.getElementById('delete-user-notify') as HTMLInputElement).checked) {
document.getElementById('textarea-delete-user').classList.remove('hidden'); document.getElementById('textarea-delete-user').classList.remove('unfocused');
} else { } else {
document.getElementById('textarea-delete-user').classList.add('hidden'); document.getElementById('textarea-delete-user').classList.add('unfocused');
} }
}; };