Skip to content

Commit

Permalink
trim base css of most redundant classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@hrfee
hrfee committed Dec 24, 2023
1 parent d56d45a commit 2be7bae
Show file tree
Hide file tree
Showing 14 changed files with 58 additions and 174 deletions.
118 changes: 1 addition & 117 deletions css/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,48 +106,6 @@ div.card:contains(section.banner.footer) {
padding-bottom: 0px;
}

.tab-button {
font-size: 2rem;
}

.al {
text-align: left;
}

.ar {
text-align: right;
}

.ac {
text-align: center;
}

.w-100 {
width: 100%;
}

.h-100 {
height: 100%;
}

.inline-block {
display: inline-block;
}

.align-top {
align-items: top;
}

.flex-expand {
display: flex;
justify-content: space-between;
}

.flex-row-group {
display: block;
flex-grow: 1;
}

.row {
display: flex;
flex-wrap: wrap;
Expand All @@ -172,23 +130,7 @@ span.sm:not(.heading) {
margin: .25rem;
}

.flex-col {
display: flex;
flex-direction: column;
}

.flex-form {
display: flex;
flex-direction: column;
}

@media screen and (min-width: 768px) {
.flex-form {
flex: 1;
margin: 0.5rem;
}
}

/* Who knows for half of these to be honest */
@media screen and (max-width: 400px) {
.row {
flex-direction: column;
Expand Down Expand Up @@ -219,52 +161,6 @@ sup.\~critical, .text-critical {
font-size: 1rem;
}

.inv {
overflow: visible;
}

.inv-profileselect {
min-width: 100%;
}

.inv-codearea {
max-width: 40%;
min-width: 10rem;
display: flex;
justify-content: start;
align-items: center;
}

.inv-empty .inv-codearea {
justify-content: start;
}


.invite-link {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: auto;
}

.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.no-pad {
padding: 0px 0px 0px 0px;
}

.elem-pad > * {
margin: var(--spacing-4, 1rem);
}

.icon.clickable {
padding: 0.5rem 0.6rem;
}

.input {
box-sizing: border-box; /* fixes weird length issue with inputs */
}
Expand All @@ -283,10 +179,6 @@ sup.\~critical, .text-critical {
width: 100%;
}

.flex-auto {
flex: auto;
}

.center {
justify-content: center;
}
Expand All @@ -295,14 +187,6 @@ sup.\~critical, .text-critical {
align-items: center;
}

.no-lp {
padding-left: 0px;
}

.block {
display: block;
}

.focused {
display: block;
}
Expand Down
34 changes: 17 additions & 17 deletions html/admin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@
</a>
<div class="dropdown-display">
<div class="card ~neutral @low">
<a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~neutral mb-2 w-100 lang-link">GitHub</a>
<a href="https://ko-fi.com/hrfee" target="_blank" class="button ~neutral mb-2 w-100 lang-link">Ko-fi</a>
<a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~neutral mb-2 w-full lang-link">GitHub</a>
<a href="https://ko-fi.com/hrfee" target="_blank" class="button ~neutral mb-2 w-full lang-link">Ko-fi</a>
</div>
</div>
</div>
Expand All @@ -84,11 +84,11 @@
<span class="heading"><span id="header-modify-user"></span> <span class="modal-close">&times;</span></span>
<p class="content my-4">{{ .strings.modifySettingsDescription }}</p>
<div class="flex flex-row mb-4">
<label class="flex-row-group mr-2">
<label class="grow mr-2">
<input type="radio" name="modify-user-source" class="unfocused" id="radio-use-profile" checked>
<span class="button ~neutral @high supra full-width center">{{ .strings.profile }}</span>
</label>
<label class="flex-row-group ml-2">
<label class="grow ml-2">
<input type="radio" name="modify-user-source" class="unfocused" id="radio-use-user">
<span class="button ~neutral @low supra full-width center">{{ .strings.user }}</span>
</label>
Expand All @@ -115,11 +115,11 @@
<span class="heading"><span id="header-enable-referrals-user"></span> <span class="modal-close">&times;</span></span>
<p class="content my-4">{{ .strings.enableReferralsDescription }}</p>
<div class="flex flex-row mb-4">
<label class="flex-row-group mr-2">
<label class="grow mr-2">
<input type="radio" name="enable-referrals-user-source" class="unfocused" id="radio-referrals-use-profile" checked>
<span class="button ~neutral @high supra full-width center">{{ .strings.profile }}</span>
</label>
<label class="flex-row-group ml-2">
<label class="grow ml-2">
<input type="radio" name="enable-referrals-user-source" class="unfocused" id="radio-referrals-use-invite">
<span class="button ~neutral @low supra full-width center">{{ .strings.invite }}</span>
</label>
Expand Down Expand Up @@ -365,7 +365,7 @@
<p class="content my-4" id="settings-backed-up-location"></p>
<p class="content my-4">{{ .strings.backupCanDownload }}</p>
<div>
<button class="button flex w-100 ~info @low mb-2"><span class="flex items-center" id="settings-backed-up-download">{{ .strings.download }}</span></button>
<button class="button flex w-full ~info @low mb-2"><span class="flex items-center" id="settings-backed-up-download">{{ .strings.download }}</span></button>
</div>
</div>
</div>
Expand Down Expand Up @@ -708,13 +708,13 @@ <h1 class="ac" id="telegram-pin"></h1>
</div>
<div id="tab-accounts" class="unfocused">
<div class="card @low dark:~d_neutral accounts mb-4 overflow-visible">
<div id="accounts-filter-dropdown" class="dropdown manual z-10 w-100">
<div id="accounts-filter-dropdown" class="dropdown manual z-10 w-full">
<div class="flex flex-col md:flex-row align-middle gap-2">
<div class="flex flex-row align-middle justify-between md:justify-normal">
<span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
<span class="dropdown-manual-toggle"><button class="h-100 button ~neutral @low center" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button></span>
<span class="dropdown-manual-toggle"><button class="h-full button ~neutral @low center" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button></span>
</div>
<div class="flex flex-row align-middle w-100">
<div class="flex flex-row align-middle w-full">
<input type="search" class="field ~neutral @low input search mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
<span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
</div>
Expand All @@ -734,7 +734,7 @@ <h1 class="ac" id="telegram-pin"></h1>
<div class="flex flex-row flex-wrap gap-3 mb-4">
<span class="button ~neutral @low center " id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
<div id="accounts-announce-dropdown" class="dropdown pb-0i " tabindex="0">
<span class="w-100 button ~info @low center items-baseline" id="accounts-announce">{{ .strings.announce }}</span>
<span class="w-full button ~info @low center items-baseline" id="accounts-announce">{{ .strings.announce }}</span>
<div class="dropdown-display">
<div class="card ~neutral @low">
<span class="supra sm">{{ .strings.templates }}</span>
Expand All @@ -747,7 +747,7 @@ <h1 class="ac" id="telegram-pin"></h1>
<span class="button ~urge @low center " id="accounts-enable-referrals">{{ .strings.enableReferrals }}</span>
{{ end }}
<div id="accounts-expiry-dropdown" class="dropdown pb-0i " tabindex="0">
<span class="w-100 button ~positive @low center items-baseline" id="accounts-expiry-dropdown-button">{{ .strings.expiry }} <i class="ri-arrow-down-s-line ml-2"></i></span>
<span class="w-full button ~positive @low center items-baseline" id="accounts-expiry-dropdown-button">{{ .strings.expiry }} <i class="ri-arrow-down-s-line ml-2"></i></span>
<div class="dropdown-display">
<div class="card ~neutral @low">
<span class="button ~warning full-width @low center" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
Expand All @@ -756,7 +756,7 @@ <h1 class="ac" id="telegram-pin"></h1>
</div>
</div>
<div id="accounts-disable-enable-dropdown" class="dropdown manual pb-0i " tabindex="0">
<span class="w-100 button ~positive @low center" id="accounts-disable-enable">{{ .strings.disable }}</span>
<span class="w-full button ~positive @low center" id="accounts-disable-enable">{{ .strings.disable }}</span>
<div class="dropdown-display">
<div class="card ~neutral @low">
<span class="button ~urge full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span>
Expand Down Expand Up @@ -807,16 +807,16 @@ <h1 class="ac" id="telegram-pin"></h1>
</div>
<div id="tab-activity" class="unfocused">
<div class="card @low dark:~d_neutral activity mb-4 overflow-visible">
<div id="activity-filter-dropdown" class="dropdown manual z-10 w-100" tabindex="0">
<div id="activity-filter-dropdown" class="dropdown manual z-10 w-full" tabindex="0">
<div class="flex flex-col md:flex-row align-middle gap-2">
<div class="flex flex-row align-middle justify-between md:justify-normal">
<span class="text-3xl font-bold mr-4">{{ .strings.activity }}</span>
<div class="flex flex-row align-middle">
<span class="dropdown-manual-toggle"><button class="h-100 button ~neutral @low center" id="activity-filter-button">{{ .strings.filters }}</button></span>
<span class="dropdown-manual-toggle"><button class="h-full button ~neutral @low center" id="activity-filter-button">{{ .strings.filters }}</button></span>
<button class="button ~neutral @low ml-2" id="activity-sort-direction">{{ .strings.sortDirection }}</button>
</div>
</div>
<div class="flex flex-row align-middle w-100">
<div class="flex flex-row align-middle w-full">
<input type="search" class="field ~neutral @low input search mr-2" id="activity-search" placeholder="{{ .strings.search }}">
<span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none activity-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
<button class="button ~info @low ml-2" id="activity-refresh" aria-label="{{ .strings.refresh }}" disabled><i class="ri-refresh-line"></i></button>
Expand Down Expand Up @@ -872,7 +872,7 @@ <h1 class="ac" id="telegram-pin"></h1>
<span class="ml-2">{{ .strings.advancedSettings }} </span>
</label>
</div>
<div class="flex flex-row justify-start md:justify-end gap-2 w-100">
<div class="flex flex-row justify-start md:justify-end gap-2 w-full">
<span class="button ~neutral @low" id="settings-logs">{{ .strings.logs }}</span>
<span class="button ~info @low" id="settings-backups">{{ .strings.backups }}</span>
<span class="button ~neutral @low" id="settings-restart">{{ .strings.settingsRestart }}</span>
Expand Down
2 changes: 1 addition & 1 deletion html/crash.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<a class="button ~critical mb-4" target="_blank" href="https://github.com/hrfee/jfa-go/issues/new/choose">Create an Issue</a>
</section>
<section class="section ~neutral @low">
<div class="flex-expand">
<div class="flex flex-row justify-between">
<span class="subheading">Full Log</span>
<span class="button ~urge ml-4" id="copy-log">Copy</span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions html/login-modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@
{{ if and .userPageEnabled .showUserPageLink }}
<div class="card mx-2 flex-initial w-[100%] lg:w-[35%] mb-4 lg:mb-0 dark:~d_neutral @low content">
<span class="heading row">{{ .strings.loginNotAdmin }}</span>
<a class="button ~info h-12 w-100" href="{{ .urlBase }}/my/account"><i class="ri-account-circle-fill mr-2"></i>{{ .strings.myAccount }}</a>
<a class="button ~info h-12 w-full" href="{{ .urlBase }}/my/account"><i class="ri-account-circle-fill mr-2"></i>{{ .strings.myAccount }}</a>
</div>
{{ end }}
{{ end }}
<form class="card mx-2 flex-auto form-login w-[100%] lg:w-[55%] mb-0" href="">
<form class="card mx-2 form-login w-[100%] lg:w-[55%] mb-0" href="">
<span class="heading">{{ .strings.login }}</span>
<input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user">
<input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password">
Expand Down
2 changes: 1 addition & 1 deletion html/password-reset.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<aside class="aside ~warning">
{{ .strings.changeYourPassword }}
</aside>
<span class="button ~urge @low w-100 text-center text-xl p-1 mt-4" id="pin" title="{{ .strings.copy }}">{{ .pin }}</span>
<span class="button ~urge @low w-full text-center text-xl p-1 mt-4" id="pin" title="{{ .strings.copy }}">{{ .pin }}</span>
{{ end }}
</div>
<i class="content">{{ .contactMessage }}</i>
Expand Down
Loading

0 comments on commit 2be7bae

Please sign in to comment.