failed-galleries/python-gallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2024-12-29 10:56:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix up style of Notifications

Browse source 
Move Notification Sass to its own file
This commit is contained in:
Michał 2023-01-14 10:08:33 +00:00
parent 7605e5ab40
commit 4efd9a04ee
4 changed files with 138 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
gallery/templates/layout.html
View file

@ -131,10 +131,15 @@
div.appendChild(icon);
// Create text element and append to notification
var gwagwa = document.createElement('span');
gwagwa.classList.add('sniffle__notification-text');
gwagwa.innerHTML = text;
div.appendChild(gwagwa);
var description = document.createElement('span');
description.classList.add('sniffle__notification-text');
description.innerHTML = text;
div.appendChild(description);
// Create span to show time remaining
var timer = document.createElement('span');
timer.classList.add('sniffle__notification-time');
div.appendChild(timer);
// Append notification to container
container.appendChild(div);

4
gallery/user/themes/default/buttons/img-tool.scss
View file

@ -32,7 +32,7 @@
color: $red;
span {
background-color: $red;
color: $red;
}
&:hover {
@ -43,7 +43,7 @@
color: $blue;
span {
background-color: $blue;
color: $blue;
}
&:hover {

92
gallery/user/themes/default/style.scss
View file

@ -4,102 +4,12 @@
@import 'ui/reset';
@import 'ui/nav';
@import 'ui/main';
@import 'ui/notification';
@import 'buttons/img-tool';
@import 'buttons/btn';
@import 'buttons/up';
.sniffle {
margin: 0;
padding: 0;
width: 450px;
height: auto;
position: fixed;
top: 0.3rem;
right: 0.3rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
z-index: 6969;
}
.sniffle__notification {
margin: 0;
padding: 0;
width: 450px;
height: auto;
display: flex;
flex-direction: row;
position: relative;
background-color: $black300;
border-radius: $rad;
color: $white100;
box-sizing: border-box;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.sniffle__notification--success {
background-color: $green;
}
.sniffle__notification--error {
background-color: $red;
}
.sniffle__notification--warning {
background-color: $yellow;
}
.sniffle__notification--info {
background-color: $blue;
}
.sniffle__notification-icon {
margin: 0;
padding: 1rem;
width: auto;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($black100, 0.2);
svg {
width: 1.25rem;
height: 1.25rem;
fill: $white100;
}
}
.sniffle__notification-text {
margin: 0;
padding: 1rem;
width: auto;
height: auto;
display: flex;
flex-direction: column;
justify-self: center;
align-self: center;
font-family: $font-body;
font-size: 1rem;
font-weight: 600;
line-height: 1;
text-align: left;
color: $white100;
}
.app {
margin: 0 0 0 3.5rem;
padding: 0.5rem;

126
gallery/user/themes/default/ui/notification.scss Normal file
View file

@ -0,0 +1,126 @@
@keyframes sniffle {
0% {
left: -450px;
}
100% {
left: 0;
}
}
.sniffle {
margin: 0;
padding: 0;
width: 450px;
height: auto;
position: fixed;
top: 0.3rem;
right: 0.3rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
z-index: 6969;
}
.sniffle__notification {
margin: 0;
padding: 0;
width: 450px;
height: auto;
display: flex;
flex-direction: row;
position: relative;
background-color: $black200;
border-radius: $rad;
color: $white100;
box-sizing: border-box;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.sniffle__notification-icon {
margin: 0;
padding: 1rem;
width: auto;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: $black300;
svg {
width: 1.25rem;
height: 1.25rem;
}
}
.sniffle__notification-text {
margin: 0;
padding: 1rem;
width: auto;
height: auto;
display: flex;
flex-direction: column;
justify-self: center;
align-self: center;
font-family: $font-body;
font-size: 1rem;
font-weight: 600;
line-height: 1;
text-align: left;
}
.sniffle__notification-time {
margin: 0;
padding: 0;
width: 450px;
height: 3px;
position: absolute;
bottom: 0px;
left: 0px;
background-color: $white100;
animation: sniffle 2.5s linear;
}
.sniffle__notification--success {
color: $green;
.sniffle__notification-time {
background-color: $green;
}
}
.sniffle__notification--error {
color: $red;
.sniffle__notification-time {
background-color: $red;
}
}
.sniffle__notification--warning {
color: $yellow;
.sniffle__notification-time {
background-color: $yellow;
}
}
.sniffle__notification--info {
color: $blue;
.sniffle__notification-time {
background-color: $blue;
}
}