mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2026-02-11 10:05:41 +00:00
notifications styling
This commit is contained in:
@@ -43,14 +43,17 @@
|
||||
opacity: 0.8;
|
||||
width: 1.5rem;
|
||||
margin: auto 20px;
|
||||
}
|
||||
|
||||
.taskbar__icon {
|
||||
border-radius: 50px;
|
||||
color: $light-text;
|
||||
}
|
||||
|
||||
.taskbar__icon:hover {
|
||||
cursor: grab;
|
||||
background-color: $light-grey;
|
||||
color: $green;
|
||||
background-color: $light-grey;
|
||||
filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
|
||||
brightness(91%) contrast(92%);
|
||||
}
|
||||
|
||||
.taskbar__add-site {
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<ul class="sitekey-list__box">
|
||||
<h1 class="sitekey-list__title">Your Sitekeys</h1>
|
||||
<. for sitekey in sitekeys.iter() { .>
|
||||
<a href="/sitekey/<.= sitekey.key .>/view" class="sitekey-list__item-container">
|
||||
<a href="/sitekey/<.= sitekey.key .>/" class="sitekey-list__item-container">
|
||||
<li class="sitekey-list__item">
|
||||
|
||||
<span class="sitekey-list__name">
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
</label>
|
||||
</div>
|
||||
<ul class="secondary-menu__list">
|
||||
|
||||
<!--
|
||||
<li class="secondary-menu__section-partition"></li>
|
||||
-->
|
||||
|
||||
@@ -8,22 +8,36 @@ include!("../navbar/index.html"); .>
|
||||
<!-- Main menu/ important actions roaster -->
|
||||
<table class="notification__table">
|
||||
<thead class="notification__heading">
|
||||
<th class="notification__title-text">Your Notifications</th>
|
||||
<tr>
|
||||
<th colspan="4" class="notification__title-text">Your Notifications</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="notification__body">
|
||||
<. for notification in n.iter() { .>
|
||||
<tr class="notification__item">
|
||||
<td class="notification__mark-reak">
|
||||
<button class="notification__mark-read-btn">tick</button>
|
||||
</td>
|
||||
<td>
|
||||
<h3 class="notification__item-heading">
|
||||
<.= notification.heading .>
|
||||
</h3>
|
||||
<p class="notification__item-text"><.= notification.message .></p>
|
||||
<div class="notification-data__container">
|
||||
<span class="notification__sender"><.= notification.name .></span>
|
||||
<span>.</span>
|
||||
<span class="notification__received"><.= notification.received .></span>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<td class="notification__mark-read-col">
|
||||
<button class="notification__mark-read-btn">
|
||||
<img
|
||||
class="notification__mark-read"
|
||||
src="<.= crate::FILES
|
||||
.get("./static/cache/img/svg/check.svg")
|
||||
.unwrap() .>"
|
||||
alt="Mark Read"
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
<td class="notification__sender"><.= notification.name .></td>
|
||||
<td class="notification__received"><.= notification.received .></td>
|
||||
</tr>
|
||||
<. } .>
|
||||
</tbody>
|
||||
|
||||
56
templates/panel/notifications/main.scss
Normal file
56
templates/panel/notifications/main.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
/*
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
@import '../../vars';
|
||||
|
||||
.notification__table {
|
||||
background-color: $white;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.notification__title-text {
|
||||
padding-left: 10px;
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border-bottom: 0.1px solid $light-grey;
|
||||
}
|
||||
|
||||
.notification__mark-read-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.notification__mark-read-btn:hover {
|
||||
cursor: grab;
|
||||
background-color: $light-grey;
|
||||
}
|
||||
|
||||
.notification-data__container {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.notification__mark-read {
|
||||
color: $green;
|
||||
margin: auto;
|
||||
filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
|
||||
brightness(91%) contrast(92%);
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
<ul class="sitekey-list__box">
|
||||
<h1 class="sitekey-list__title">Your Sitekeys</h1>
|
||||
<. for sitekey in sitekeys.iter() { .>
|
||||
<a href="/sitekey/<.= sitekey.key .>/view" class="sitekey-list__item-container">
|
||||
<a href="/sitekey/<.= sitekey.key .>/" class="sitekey-list__item-container">
|
||||
<li class="sitekey-list__item">
|
||||
<span class="sitekey-list__name"><.= sitekey.name .></span>
|
||||
<span class="sitekey-list__key"><.= sitekey.key .></span>
|
||||
|
||||
@@ -8,15 +8,11 @@
|
||||
<!-- Main content container -->
|
||||
<div class="inner-container">
|
||||
<!-- Main menu/ important actions roaster -->
|
||||
|
||||
<form class="sitekey-form" action="<.= crate::V1_API_ROUTES.levels.add .>" method="post">
|
||||
<h1 class="form__title">
|
||||
Sitekey: <.= name .>
|
||||
<a href="<.= crate::WIDGET_ROUTES.verification_widget .>/?sitekey=<.= key.>"
|
||||
>Click here to see CAPTCHA widget in action</a>
|
||||
|
||||
|
||||
</h1>
|
||||
<form class="sitekey-form" action="<.= crate::V1_API_ROUTES.levels.add .>" method="post">
|
||||
<h1 class="form__title">Sitekey: <.= name .>
|
||||
<a href="<.= crate::WIDGET_ROUTES.verification_widget .>/?sitekey=<.= key.>"
|
||||
>Click here to see CAPTCHA widget in action</a>
|
||||
</h1>
|
||||
<label class="sitekey-form__label" for="description">
|
||||
Description
|
||||
<input
|
||||
@@ -31,7 +27,6 @@
|
||||
<. } .>
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="sitekey-form__label" for="duration">
|
||||
Cooldown Duratoin(in seconds)
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user