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 showLogin() {
|
||||
popUpShow(
|
||||
'idk what to put here, just login please',
|
||||
'Login!',
|
||||
'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)">\
|
||||
<input class="input-block" type="text" placeholder="Namey" id="username"/>\
|
||||
<input class="input-block" type="password" placeholder="Passywassy" id="password"/>\
|
||||
|
@ -57,7 +58,8 @@ function showRegister() {
|
|||
popUpShow(
|
||||
'Who are you?',
|
||||
'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)">\
|
||||
<input class="input-block" type="text" placeholder="Namey" id="username"/>\
|
||||
<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
|
||||
popupActions.innerHTML = actions;
|
||||
popupActions.innerHTML += '<button class="btn-block" onclick="popupDissmiss()">Nooooooo</button>';
|
||||
|
||||
// Show popup
|
||||
popup.style.display = 'block';
|
||||
|
|
|
@ -264,8 +264,9 @@
|
|||
popUpShow(
|
||||
'DESTRUCTION!!!!!!',
|
||||
'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>',
|
||||
'<img src="/api/file/{{ image.file_name }}?w=1920&h=1080" />'
|
||||
'<button class="btn-block" onclick="popupDissmiss()">Nooooooo</button>\
|
||||
<button class="btn-block critical" onclick="deleteImage()">Dewww eeeet!</button>',
|
||||
'<img src="/api/file/{{ image.file_name }}?w=1920&h=1080"/>'
|
||||
);
|
||||
});
|
||||
function deleteImage() {
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
text-align: center
|
||||
|
||||
background-color: transparent
|
||||
color: $black
|
||||
color: $white
|
||||
border: none
|
||||
border-radius: $rad-inner
|
||||
|
||||
|
@ -37,7 +37,6 @@
|
|||
|
||||
&:hover
|
||||
background-color: $black
|
||||
color: $white
|
||||
|
||||
&:focus-visible
|
||||
outline: 2px solid rgba($black, 0.5)
|
||||
|
@ -74,23 +73,33 @@
|
|||
font-weight: 600
|
||||
text-align: left
|
||||
|
||||
background-color: $black
|
||||
background-color: transparent
|
||||
color: $white
|
||||
|
||||
border: none
|
||||
border-bottom: 3px solid $gray
|
||||
border-radius: $rad-inner
|
||||
|
||||
cursor: pointer
|
||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
|
||||
|
||||
&:hover
|
||||
outline: 2px solid rgba($white, 0.5)
|
||||
&:not(:focus):not([value=""]):not(:placeholder-shown)
|
||||
border-color: $white
|
||||
|
||||
&:focus-visible
|
||||
outline: 2px solid rgba($white, 0.5)
|
||||
&:hover
|
||||
border-color: $white
|
||||
|
||||
&:focus
|
||||
border-color: $primary
|
||||
outline: none
|
||||
|
||||
&.file
|
||||
padding: 0 1rem 0 0
|
||||
border: none
|
||||
background-color: $black2
|
||||
|
||||
&:focus-visible
|
||||
outline: 2px solid rgba($white, 0.5)
|
||||
|
||||
&::file-selector-button
|
||||
margin-right: 1rem
|
||||
|
@ -109,4 +118,3 @@
|
|||
|
||||
&:not([value=""])
|
||||
display: none
|
||||
|
||||
|
|
|
@ -39,7 +39,7 @@
|
|||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
background-color: $white
|
||||
background-color: $black
|
||||
border-radius: $rad
|
||||
overflow: hidden
|
||||
|
||||
|
@ -48,14 +48,14 @@
|
|||
|
||||
.pop-up-content
|
||||
margin: 0
|
||||
padding: 0.5rem 0.5rem 0
|
||||
padding: 1rem
|
||||
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
gap: 1rem
|
||||
|
||||
overflow-y: auto
|
||||
overflow-x: hidden
|
||||
|
@ -75,8 +75,8 @@
|
|||
text-align: center
|
||||
line-height: 1
|
||||
|
||||
color: $black
|
||||
background-color: $white
|
||||
color: $white
|
||||
background-color: $black
|
||||
|
||||
p
|
||||
margin: 0
|
||||
|
@ -88,7 +88,7 @@
|
|||
text-align: center
|
||||
line-height: 1
|
||||
|
||||
color: $black
|
||||
color: $white
|
||||
|
||||
img
|
||||
margin: auto
|
||||
|
@ -126,6 +126,8 @@
|
|||
justify-content: flex-end
|
||||
gap: 0.5rem
|
||||
|
||||
background-color: $black2
|
||||
|
||||
&.active
|
||||
opacity: 1
|
||||
|
||||
|
|
|
@ -43,45 +43,8 @@
|
|||
align-items: center
|
||||
gap: 0.5rem
|
||||
|
||||
input
|
||||
margin: 0
|
||||
padding: 0.5rem 1rem
|
||||
|
||||
input, button
|
||||
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
|
||||
position: absolute
|
||||
|
@ -95,7 +58,7 @@
|
|||
|
||||
|
||||
.container
|
||||
padding: 0.5rem
|
||||
padding: 1rem
|
||||
|
||||
position: absolute
|
||||
bottom: 0
|
||||
|
@ -225,8 +188,6 @@
|
|||
bottom: 3.5rem
|
||||
|
||||
.container
|
||||
padding: 1rem
|
||||
|
||||
width: 100%
|
||||
height: calc(100% - 10rem)
|
||||
|
||||
|
|
|
@ -50,7 +50,7 @@
|
|||
font-size: 1rem
|
||||
font-weight: 600
|
||||
|
||||
color: $primary
|
||||
color: $white
|
||||
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
$black: #151515
|
||||
$black2: #101010
|
||||
$gray: #666
|
||||
$white: #E8E3E3
|
||||
|
||||
$red: #B66467
|
||||
|
|
Loading…
Reference in a new issue