mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2025-03-14 13:08:27 +03:00
settings page styling
This commit is contained in:
parent
b603208d48
commit
2c2f79e1cd
9 changed files with 184 additions and 43 deletions
|
@ -32,3 +32,11 @@ $blue-link: rgb(3, 102, 214);
|
|||
|
||||
$form-content-width: 90%;
|
||||
$form-input-height: 40px;
|
||||
|
||||
@mixin light-text-icon-filter {
|
||||
filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(325deg)
|
||||
brightness(105%) contrast(101%);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
$red: #d10028;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<span class="show-password-container">
|
||||
<img class="show-password--show" src="<.=
|
||||
crate::FILES.get("./static/cache/img/svg/eye.svg").unwrap() .>" alt="" />
|
||||
crate::FILES.get("./static/cache/img/svg/eye.svg").unwrap() .>" alt="Show Password" />
|
||||
<img class="show-password--hide" src="<.=
|
||||
crate::FILES.get("./static/cache/img/svg/eye-off.svg").unwrap() .>" alt="" />
|
||||
crate::FILES.get("./static/cache/img/svg/eye-off.svg").unwrap() .>" alt="Hide Password" />
|
||||
</span>
|
||||
|
|
|
@ -38,6 +38,8 @@ $img-width: #{$form-input-height * $img-height};
|
|||
position: relative;
|
||||
top: -#{$form-input-height * ($img-height * 1.15)};
|
||||
left: #{$form-content-width * 0.99};
|
||||
display: block;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
|
||||
.show-password-container:hover {
|
||||
|
|
|
@ -19,6 +19,7 @@ import './mobile.scss';
|
|||
import './auth/css/mobile.scss';
|
||||
import './components/details-footer/mobile.scss';
|
||||
import './panel/css/mobile.scss';
|
||||
import './panel/settings/mobile.scss';
|
||||
import './panel/header/taskbar/mobile.scss';
|
||||
import './panel/navbar/mobile.scss';
|
||||
import './panel/help-banner/mobile.scss';
|
||||
|
|
|
@ -29,18 +29,8 @@
|
|||
margin-top: 40px;
|
||||
}
|
||||
|
||||
li.help-text__instructions::marker {
|
||||
background-color: $violet;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.help-text__instructions {
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
|
@ -20,4 +20,11 @@
|
|||
|
||||
.help-text {
|
||||
flex-direction: column;
|
||||
justify-content: normal;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.help-text__instructions {
|
||||
width: 86%;
|
||||
}
|
||||
|
|
|
@ -17,39 +17,71 @@
|
|||
<h1 class="form__title">
|
||||
<.= PAGE .>
|
||||
</h1>
|
||||
<form action="<.= crate::V1_API_ROUTES.account.update_email .>" method="post">
|
||||
<label class="sitekey-form__label" for="description">
|
||||
<form class="settings__form "
|
||||
action="<.= crate::V1_API_ROUTES.account.update_email .>"
|
||||
method="post">
|
||||
<label class="settings-form__label" for="email">
|
||||
Email
|
||||
<input
|
||||
class="sitekey-form__input"
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
<. if let Some(email) = email { .>
|
||||
<. if !email.trim().is_empty() { .>
|
||||
value="<.= email .>"
|
||||
<. } .>
|
||||
<. } .>
|
||||
/>
|
||||
<input
|
||||
class="settings-form__input"
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
<. if let Some(email) = email { .>
|
||||
<. if !email.trim().is_empty() { .>
|
||||
value="<.= email .>"
|
||||
<. } .>
|
||||
<. } .>
|
||||
/>
|
||||
</label>
|
||||
<button class="settings__submit-btn" type="submit">Update</button>
|
||||
</form>
|
||||
|
||||
<form
|
||||
class="settings__form"
|
||||
action="<.= crate::V1_API_ROUTES.account.update_secret .>"
|
||||
method="post">
|
||||
<label class="settings-form__label" for="secret">
|
||||
<div class="settings__label-group">
|
||||
Secret
|
||||
<. include!("../../components/clipboard/index.html"); .>
|
||||
</div>
|
||||
<input
|
||||
class="settings-form__input"
|
||||
type="password"
|
||||
name="secret-password"
|
||||
readonly='readonly'
|
||||
id="secret"
|
||||
value="<.= secret .>"
|
||||
/>
|
||||
<. include!("../../components/showPassword/index.html"); .>
|
||||
</label>
|
||||
<button class="sitekey-form__submit" type="submit">Update</button>
|
||||
<button class="settings__submit-btn" type="submit">
|
||||
Refresh
|
||||
<img
|
||||
class="settings__refresh-sitekey"
|
||||
src="<.=crate::FILES.get("./static/cache/img/svg/refresh.svg").unwrap() .>"
|
||||
alt="Refresh Secret"
|
||||
/>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<label class="sitekey-form__label" for="secret">
|
||||
Cooldown Duratoin(in seconds)
|
||||
<input
|
||||
class="sitekey-form__input"
|
||||
type="password"
|
||||
name="secret-password"
|
||||
id="secret"
|
||||
value="<.= secret .>"
|
||||
/>
|
||||
<. include!("../../components/showPassword/index.html"); .>
|
||||
<. include!("../../components/clipboard/index.html"); .>
|
||||
</label>
|
||||
<a class="settings__delete-account-link" href="<.= crate::PAGES.panel.sitekey.add .>">
|
||||
<button class="settings__delete-account-btn" type="submit">Delete Account</button>
|
||||
</a>
|
||||
<form
|
||||
class="settings__form"
|
||||
action="<.= crate::V1_API_ROUTES.account.update_secret .>"
|
||||
method="post">
|
||||
<label class="settings-form__label--danger" for="delete-account">
|
||||
<b>Delete your account</b>
|
||||
<button id="delete-account" class="settings__submit-btn--danger" type="submit">
|
||||
Delete Account
|
||||
<img
|
||||
class="settings__delete-account-icon"
|
||||
src="<.=crate::FILES.get("./static/cache/img/svg/trash.svg").unwrap() .>"
|
||||
alt="Delete Account"
|
||||
/>
|
||||
</button>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of container -->
|
||||
|
|
|
@ -14,17 +14,98 @@
|
|||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import '../../components/clipboard/copy';
|
||||
@import '../../components/forms';
|
||||
@import '../../components/button';
|
||||
|
||||
.settings__secret-copy {
|
||||
@include copy-icon;
|
||||
}
|
||||
|
||||
.settings__secret-copy:hover .settings__secret-copy-done:hover {
|
||||
.settings__secret-copy:hover,
|
||||
.settings__secret-copy-done:hover {
|
||||
@include copy-icon-hover;
|
||||
}
|
||||
|
||||
.settings__secret-copy-done {
|
||||
@include copy-done-icon;
|
||||
}
|
||||
|
||||
.settings-form__input {
|
||||
@include form-input;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settings-form__label {
|
||||
@include form-label;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings-form__label--danger {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.settings__label-group {
|
||||
display: flex;
|
||||
width: 15%;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.settings__secret-copy-container {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.settings__submit-btn {
|
||||
align-self: end;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
display: inline;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.settings__form {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings__delete-account-icon {
|
||||
margin: auto;
|
||||
@include light-text-icon-filter;
|
||||
}
|
||||
|
||||
.settings__refresh-sitekey {
|
||||
@include light-text-icon-filter;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.settings__submit-btn {
|
||||
@include violet-button;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.settings__submit-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings__submit-btn--danger {
|
||||
@include violet-button;
|
||||
background-color: $red;
|
||||
width: 200px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
20
templates/panel/settings/mobile.scss
Normal file
20
templates/panel/settings/mobile.scss
Normal file
|
@ -0,0 +1,20 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net>
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.settings__form {
|
||||
margin: 10px 0;
|
||||
}
|
Loading…
Add table
Reference in a new issue