mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-01-01 12:26:13 +00:00
Pop-ups are dark and dont require close button
Change style of block buttons
This commit is contained in:
parent
f9aeb0955d
commit
a6c06ae39c
|
@ -1,9 +1,10 @@
|
||||||
// Function to show login
|
// Function to show login
|
||||||
function showLogin() {
|
function showLogin() {
|
||||||
popUpShow(
|
popUpShow(
|
||||||
'idk what to put here, just login please',
|
'Login!',
|
||||||
'Need an account? <span class="pop-up__link" onclick="showRegister()">Register!</span>',
|
'Need an account? <span class="pop-up__link" onclick="showRegister()">Register!</span>',
|
||||||
'<button class="btn-block primary" form="loginForm" type="submit">Login</button>',
|
'<button class="btn-block" onclick="popupDissmiss()">Cancelee</button>\
|
||||||
|
<button class="btn-block primary" form="loginForm" type="submit">Login</button>',
|
||||||
'<form id="loginForm" onsubmit="return login(event)">\
|
'<form id="loginForm" onsubmit="return login(event)">\
|
||||||
<input class="input-block" type="text" placeholder="Namey" id="username"/>\
|
<input class="input-block" type="text" placeholder="Namey" id="username"/>\
|
||||||
<input class="input-block" type="password" placeholder="Passywassy" id="password"/>\
|
<input class="input-block" type="password" placeholder="Passywassy" id="password"/>\
|
||||||
|
@ -57,7 +58,8 @@ function showRegister() {
|
||||||
popUpShow(
|
popUpShow(
|
||||||
'Who are you?',
|
'Who are you?',
|
||||||
'Already have an account? <span class="pop-up__link" onclick="showLogin()">Login!</span>',
|
'Already have an account? <span class="pop-up__link" onclick="showLogin()">Login!</span>',
|
||||||
'<button class="btn-block primary" form="registerForm" type="submit">Register</button>',
|
'<button class="btn-block" onclick="popupDissmiss()">Canceleee</button>\
|
||||||
|
<button class="btn-block primary" form="registerForm" type="submit">Register</button>',
|
||||||
'<form id="registerForm" onsubmit="return register(event)">\
|
'<form id="registerForm" onsubmit="return register(event)">\
|
||||||
<input class="input-block" type="text" placeholder="Namey" id="username"/>\
|
<input class="input-block" type="text" placeholder="Namey" id="username"/>\
|
||||||
<input class="input-block" type="text" placeholder="E mail!" id="email"/>\
|
<input class="input-block" type="text" placeholder="E mail!" id="email"/>\
|
||||||
|
|
|
@ -12,7 +12,6 @@ function popUpShow(title, body, actions, content) {
|
||||||
|
|
||||||
// Set buttons that will be displayed
|
// Set buttons that will be displayed
|
||||||
popupActions.innerHTML = actions;
|
popupActions.innerHTML = actions;
|
||||||
popupActions.innerHTML += '<button class="btn-block" onclick="popupDissmiss()">Nooooooo</button>';
|
|
||||||
|
|
||||||
// Show popup
|
// Show popup
|
||||||
popup.style.display = 'block';
|
popup.style.display = 'block';
|
||||||
|
|
|
@ -264,8 +264,9 @@
|
||||||
popUpShow(
|
popUpShow(
|
||||||
'DESTRUCTION!!!!!!',
|
'DESTRUCTION!!!!!!',
|
||||||
'This will delete the image and all of its data!!! This action is irreversible!!!!! Are you sure you want to do this?????',
|
'This will delete the image and all of its data!!! This action is irreversible!!!!! Are you sure you want to do this?????',
|
||||||
'<button class="btn-block critical" onclick="deleteImage()">Dewww eeeet!</button>',
|
'<button class="btn-block" onclick="popupDissmiss()">Nooooooo</button>\
|
||||||
'<img src="/api/file/{{ image.file_name }}?w=1920&h=1080" />'
|
<button class="btn-block critical" onclick="deleteImage()">Dewww eeeet!</button>',
|
||||||
|
'<img src="/api/file/{{ image.file_name }}?w=1920&h=1080"/>'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
function deleteImage() {
|
function deleteImage() {
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
color: $black
|
color: $white
|
||||||
border: none
|
border: none
|
||||||
border-radius: $rad-inner
|
border-radius: $rad-inner
|
||||||
|
|
||||||
|
@ -37,7 +37,6 @@
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background-color: $black
|
background-color: $black
|
||||||
color: $white
|
|
||||||
|
|
||||||
&:focus-visible
|
&:focus-visible
|
||||||
outline: 2px solid rgba($black, 0.5)
|
outline: 2px solid rgba($black, 0.5)
|
||||||
|
@ -74,23 +73,33 @@
|
||||||
font-weight: 600
|
font-weight: 600
|
||||||
text-align: left
|
text-align: left
|
||||||
|
|
||||||
background-color: $black
|
background-color: transparent
|
||||||
color: $white
|
color: $white
|
||||||
|
|
||||||
border: none
|
border: none
|
||||||
|
border-bottom: 3px solid $gray
|
||||||
border-radius: $rad-inner
|
border-radius: $rad-inner
|
||||||
|
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
|
||||||
|
|
||||||
&:hover
|
&:not(:focus):not([value=""]):not(:placeholder-shown)
|
||||||
outline: 2px solid rgba($white, 0.5)
|
border-color: $white
|
||||||
|
|
||||||
&:focus-visible
|
&:hover
|
||||||
outline: 2px solid rgba($white, 0.5)
|
border-color: $white
|
||||||
|
|
||||||
|
&:focus
|
||||||
|
border-color: $primary
|
||||||
|
outline: none
|
||||||
|
|
||||||
&.file
|
&.file
|
||||||
padding: 0 1rem 0 0
|
padding: 0 1rem 0 0
|
||||||
|
border: none
|
||||||
|
background-color: $black2
|
||||||
|
|
||||||
|
&:focus-visible
|
||||||
|
outline: 2px solid rgba($white, 0.5)
|
||||||
|
|
||||||
&::file-selector-button
|
&::file-selector-button
|
||||||
margin-right: 1rem
|
margin-right: 1rem
|
||||||
|
@ -109,4 +118,3 @@
|
||||||
|
|
||||||
&:not([value=""])
|
&:not([value=""])
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
|
|
||||||
background-color: $white
|
background-color: $black
|
||||||
border-radius: $rad
|
border-radius: $rad
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
|
||||||
|
@ -48,14 +48,14 @@
|
||||||
|
|
||||||
.pop-up-content
|
.pop-up-content
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0.5rem 0.5rem 0
|
padding: 1rem
|
||||||
|
|
||||||
width: 100%
|
width: 100%
|
||||||
height: auto
|
height: auto
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
gap: 0.5rem
|
gap: 1rem
|
||||||
|
|
||||||
overflow-y: auto
|
overflow-y: auto
|
||||||
overflow-x: hidden
|
overflow-x: hidden
|
||||||
|
@ -75,8 +75,8 @@
|
||||||
text-align: center
|
text-align: center
|
||||||
line-height: 1
|
line-height: 1
|
||||||
|
|
||||||
color: $black
|
color: $white
|
||||||
background-color: $white
|
background-color: $black
|
||||||
|
|
||||||
p
|
p
|
||||||
margin: 0
|
margin: 0
|
||||||
|
@ -88,7 +88,7 @@
|
||||||
text-align: center
|
text-align: center
|
||||||
line-height: 1
|
line-height: 1
|
||||||
|
|
||||||
color: $black
|
color: $white
|
||||||
|
|
||||||
img
|
img
|
||||||
margin: auto
|
margin: auto
|
||||||
|
@ -126,6 +126,8 @@
|
||||||
justify-content: flex-end
|
justify-content: flex-end
|
||||||
gap: 0.5rem
|
gap: 0.5rem
|
||||||
|
|
||||||
|
background-color: $black2
|
||||||
|
|
||||||
&.active
|
&.active
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
|
||||||
|
|
|
@ -43,45 +43,8 @@
|
||||||
align-items: center
|
align-items: center
|
||||||
gap: 0.5rem
|
gap: 0.5rem
|
||||||
|
|
||||||
input
|
input, button
|
||||||
margin: 0
|
|
||||||
padding: 0.5rem 1rem
|
|
||||||
|
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 2.5rem
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 600
|
|
||||||
|
|
||||||
color: $white
|
|
||||||
background-color: $black2
|
|
||||||
|
|
||||||
border: none
|
|
||||||
border-radius: $rad-inner
|
|
||||||
|
|
||||||
&::placeholder
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
button
|
|
||||||
margin: 0
|
|
||||||
padding: 0.5rem 1rem
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 2.5rem
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 600
|
|
||||||
|
|
||||||
color: $white
|
|
||||||
background-color: $primary
|
|
||||||
|
|
||||||
border: none
|
|
||||||
border-radius: $rad-inner
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: $black2
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
.click-off
|
.click-off
|
||||||
position: absolute
|
position: absolute
|
||||||
|
@ -95,7 +58,7 @@
|
||||||
|
|
||||||
|
|
||||||
.container
|
.container
|
||||||
padding: 0.5rem
|
padding: 1rem
|
||||||
|
|
||||||
position: absolute
|
position: absolute
|
||||||
bottom: 0
|
bottom: 0
|
||||||
|
@ -225,8 +188,6 @@
|
||||||
bottom: 3.5rem
|
bottom: 3.5rem
|
||||||
|
|
||||||
.container
|
.container
|
||||||
padding: 1rem
|
|
||||||
|
|
||||||
width: 100%
|
width: 100%
|
||||||
height: calc(100% - 10rem)
|
height: calc(100% - 10rem)
|
||||||
|
|
||||||
|
|
|
@ -50,7 +50,7 @@
|
||||||
font-size: 1rem
|
font-size: 1rem
|
||||||
font-weight: 600
|
font-weight: 600
|
||||||
|
|
||||||
color: $primary
|
color: $white
|
||||||
|
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
$black: #151515
|
$black: #151515
|
||||||
$black2: #101010
|
$black2: #101010
|
||||||
|
$gray: #666
|
||||||
$white: #E8E3E3
|
$white: #E8E3E3
|
||||||
|
|
||||||
$red: #B66467
|
$red: #B66467
|
||||||
|
|
Loading…
Reference in a new issue