Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 11:36:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Switch button and pop-up styling

Browse source 
again
This commit is contained in:
Michał Gdula 2023-04-19 15:05:54 +00:00
parent 48f6b02755
commit f0e586d0d5
6 changed files with 32 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

2
onlylegs/static/js/login.js
View file

@ -3,6 +3,7 @@ function showLogin() {
// Create elements // Create elements
cancelBtn = document.createElement('button'); cancelBtn = document.createElement('button');
cancelBtn.classList.add('btn-block'); cancelBtn.classList.add('btn-block');
cancelBtn.classList.add('transparent');
cancelBtn.innerHTML = 'nuuuuuuuu'; cancelBtn.innerHTML = 'nuuuuuuuu';
cancelBtn.onclick = popupDissmiss; cancelBtn.onclick = popupDissmiss;
@ -100,6 +101,7 @@ function showRegister() {
// Create buttons // Create buttons
cancelBtn = document.createElement('button'); cancelBtn = document.createElement('button');
cancelBtn.classList.add('btn-block'); cancelBtn.classList.add('btn-block');
cancelBtn.classList.add('transparent');
cancelBtn.innerHTML = 'nuuuuuuuu'; cancelBtn.innerHTML = 'nuuuuuuuu';
cancelBtn.onclick = popupDissmiss; cancelBtn.onclick = popupDissmiss;

2
onlylegs/static/js/popup.js
View file

@ -28,7 +28,7 @@ function popUpShow(titleText, subtitleText, bodyContent=null, userActions=null)
actionsSelector.appendChild(userActions[i]); actionsSelector.appendChild(userActions[i]);
} }
} else { } else {
actionsSelector.innerHTML = '<button class="btn-block" onclick="popupDissmiss()">Close</button>'; actionsSelector.innerHTML = '<button class="btn-block transparent" onclick="popupDissmiss()">Close</button>';
} }
// Stop scrolling and show popup // Stop scrolling and show popup

2
onlylegs/static/sass/components/banner.sass
View file

@ -57,7 +57,7 @@
width: 100% width: 100%
height: 100% height: 100%
background: linear-gradient(to right, RGB($primary), transparent) background: linear-gradient(to right, RGB($bg-100), transparent)
z-index: +1 z-index: +1

38
onlylegs/static/sass/components/buttons/block.sass
View file

@ -1,11 +1,12 @@
@mixin btn-block($color) @mixin btn-block($color)
color: RGB($color)
box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
&:hover, &:focus-visible
background-color: RGBA($color, 0.1) background-color: RGBA($color, 0.1)
color: RGB($color) color: RGB($color)
box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($color, 0.2) // box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
&:hover, &:focus-visible
background-color: RGBA($color, 0.15)
color: RGB($color)
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($color, 0.2)
.btn-block .btn-block
@ -29,7 +30,7 @@
color: RGB($white) color: RGB($white)
border: none border: none
border-radius: $rad-inner border-radius: $rad-inner
box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2) // box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
outline: none outline: none
cursor: pointer cursor: pointer
@ -37,23 +38,24 @@
&:hover, &:focus-visible &:hover, &:focus-visible
background-color: RGBA($white, 0.2) background-color: RGBA($white, 0.2)
box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3) // box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
&.transparent
background-color: transparent
&:hover, &:focus-visible
text-decoration: underline
&.primary &.primary
@include btn-block($primary) @include btn-block($primary)
&.critical &.critical
@include btn-block($critical) @include btn-block($critical)
&.warning &.warning
@include btn-block($warning) @include btn-block($warning)
&.success &.success
@include btn-block($success) @include btn-block($success)
&.info &.info
@include btn-block($info) @include btn-block($info)
&.black &.black
@include btn-block($black) @include btn-block($black)
@ -94,7 +96,7 @@
border: none border: none
border-bottom: 3px solid RGBA($white, 0.1) border-bottom: 3px solid RGBA($white, 0.1)
border-radius: $rad-inner border-radius: $rad-inner
box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2) // box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
outline: none outline: none
cursor: pointer cursor: pointer
@ -134,7 +136,7 @@
color: RGB($white) color: RGB($white)
border: none border: none
border-radius: $rad-inner border-radius: $rad-inner
box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2) // box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
outline: none outline: none
cursor: pointer cursor: pointer
@ -157,17 +159,17 @@
&:hover, &:focus-visible &:hover, &:focus-visible
background-color: RGBA($white, 0.2) background-color: RGBA($white, 0.2)
color: RGB($white) color: RGB($white)
box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3) // box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
&.active &.active
background-color: RGBA($primary, 0.2) background-color: RGBA($primary, 0.2)
color: RGB($primary) color: RGB($primary)
box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($primary, 0.3) // box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($primary, 0.3)
&.edging &.edging
background-color: RGBA($white, 0.2) background-color: RGBA($white, 0.2)
color: RGB($white) color: RGB($white)
box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3) // box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
input input
display: none // So it doesnt get in the way of the drop as that breaks things display: none // So it doesnt get in the way of the drop as that breaks things
@ -175,4 +177,4 @@
&.error &.error
background-color: RGBA($critical, 0.2) background-color: RGBA($critical, 0.2)
color: RGB($critical) color: RGB($critical)
box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($critical, 0.3) // box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($critical, 0.3)

2
onlylegs/static/sass/components/buttons/pill.sass
View file

@ -18,7 +18,7 @@
background-color: RGB($bg-200) background-color: RGB($bg-200)
border-radius: $rad border-radius: $rad
box-shadow: 0 1px 0 RGB($bg-100), 0 -1px 0 RGB($bg-300) // box-shadow: 0 1px 0 RGB($bg-100), 0 -1px 0 RGB($bg-300)
.pill-text .pill-text
margin: 0 margin: 0

26
onlylegs/static/sass/components/pop-up.sass
View file

@ -25,7 +25,7 @@
.pop-up-wrapper .pop-up-wrapper
margin: 0 margin: 0
padding: 0 padding: 1rem
width: 621px width: 621px
height: auto height: auto
@ -46,8 +46,8 @@
transition: transform 0.2s $animation-smooth transition: transform 0.2s $animation-smooth
.pop-up-header .pop-up-header
margin: 0 margin: 0 0 1rem 0
padding: 1rem padding: 0
width: 100% width: 100%
height: auto height: auto
@ -102,17 +102,6 @@
&:hover &:hover
text-decoration: underline text-decoration: underline
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 40vh
border-radius: $rad-inner
form form
margin: 0 margin: 0
padding: 0 padding: 0
@ -128,7 +117,7 @@
.pop-up-controlls .pop-up-controlls
margin: 0 margin: 0
padding: 0.25rem padding: 0
width: 100% width: 100%
height: auto height: auto
@ -136,9 +125,9 @@
display: flex display: flex
flex-direction: row flex-direction: row
justify-content: flex-end justify-content: flex-end
gap: 0.25rem gap: 0.5rem
background-color: RGB($bg-100) // background-color: RGB($bg-100)
&.active &.active
opacity: 1 opacity: 1
@ -158,7 +147,8 @@
img img
max-height: 50vh max-height: 50vh
.pop-up-controlls button .pop-up-controlls
button
width: 100% width: 100%
&.active &.active