DV8/GameExpo23
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/GameExpo23.git synced 2025-06-13 12:13:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Consistent styling on login screen

Browse source 
Adjustment of the way sessions are displayed
Removing useless styling
This commit is contained in:
Michał Gdula 2023-06-13 01:38:32 +03:00
parent 26ce573726
commit 22b5fa13fb
7 changed files with 101 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

10
TFR/server/static/js/search.js
View file

@ -1,5 +1,5 @@
function showHint() {
let search = document.querySelector('.search > input');
let search = document.querySelector('#search');
let searchPos = search.getBoundingClientRect();
let hint = document.querySelector('.search-hint');
@ -18,7 +18,7 @@ function hideHint() {
function updateHint() {
let search = document.querySelector('.search > input');
let search = document.querySelector('#search');
let searchPos = search.getBoundingClientRect();
let hint = document.querySelector('.search-hint');
@ -29,7 +29,7 @@ function updateHint() {
function getSearch() {
let search = document.querySelector('.search > input').value;
let search = document.querySelector('#search').value;
let hint = document.querySelector('.search-hint');
if (search.length === 0) {
@ -54,7 +54,7 @@ function getSearch() {
el.innerHTML = user;
el.onmousedown = function (event) {
event.preventDefault();
search = document.querySelector('.search > input');
search = document.querySelector('#search');
search.value = user.toString();
search.blur();
}
@ -69,7 +69,7 @@ function getSearch() {
window.onload = () => {
let typingTimer;
let search = document.querySelector('.search > input');
let search = document.querySelector('#search');
if (search === null) {
return;

30
TFR/server/static/sass/block.sass Normal file
View file

@ -0,0 +1,30 @@
.block
margin-bottom: 1rem
padding: 1rem
display: flex
flex-direction: column
background-color: rgba($black, 0.5)
border-radius: 2px
border: 1px solid RGBA(var(--white),0.05)
> h2
margin: 0 0 0.2rem 0
font-size: 1.3em
color: RGB($white)
> p
margin: 0 0 1rem 0
font-size: 1em
&.secondary
border: 1px solid RGB($secondary)
> h2
color: RGB($secondary)
form
display: flex
flex-direction: column
gap: 0.5rem

8
TFR/server/static/sass/button.sass
View file

@ -4,7 +4,6 @@
display: flex
align-items: center
gap: 0.5rem
text-decoration: none
white-space: nowrap
@ -39,7 +38,7 @@
font-size: 1.25em
display: block
.search
.text-input
margin: auto 0
width: 100%
@ -49,6 +48,7 @@
> label
padding: 0.5rem 0.7rem
min-width: 6rem
text-decoration: none
white-space: nowrap
@ -59,13 +59,9 @@
border-radius: 2px 0 0 2px
> input
margin: 0
padding: 0.5rem 0.7rem
width: 100%
text-decoration: none
white-space: nowrap
font-size: 0.9em
background-color: RGBA($white, 0.02)

113
TFR/server/static/sass/style.sass
View file

@ -16,6 +16,7 @@ $bronze: var(--bronze)
--bronze: 193, 145, 69
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap')
@import "block"
@import "button"
@import "hint"
@ -57,15 +58,16 @@ body
display: flex
flex-direction: column
background-color: rgba($black, 0.4)
background-color: rgba($black, 0.5)
backdrop-filter: blur(5px)
z-index: 2
.table
width: 100%
height: auto
background-color: rgba($black, 0.7)
background-color: rgba($black, 0.5)
border-radius: 2px
border: 1px solid RGBA(var(--white),0.05)
overflow: hidden
> table
@ -248,108 +250,13 @@ main
max-height: 15rem
border-radius: 2px
.block
margin-bottom: 1rem
padding: 1rem
display: flex
flex-direction: column
background-color: rgba($black, 0.7)
border-radius: 2px
> h2
margin: 0 0 0.2rem 0
font-size: 1.3em
color: RGB($white)
> p
margin: 0 0 1rem 0
font-size: 1em
> table
width: 100%
border-collapse: collapse
> tbody > tr > td
padding: 0 0.5rem 0.5rem 0
text-align: left
font-size: 0.9em
color: RGB($white)
transition: filter 0.2s ease-in-out
&:last-child
width: 100%
&.hidden
filter: blur(5px)
&.secondary
border: 1px solid RGB($secondary)
> h2
color: RGB($secondary)
form
display: flex
flex-direction: column
> input
margin: 0 0 1rem 0
padding: 0.7rem 1rem
border: 1px solid RGB($white)
border-radius: 2px
background-color: RGB($black)
color: RGB($white)
&:focus
outline: none
border-color: RGB($primary)
&.error
border-color: RGB($secondary)
> button
margin: 0
padding: 0.75rem 1rem
font-weight: bolder
border: transparent
border-radius: 2px
background-color: RGB($primary)
color: RGB($black)
&:focus-visible, &:hover
outline: none
background-color: RGBA($primary, 0.3)
color: RGB($primary)
&.disabled
pointer-events: none
opacity: 0.5
&.secondary
background-color: RGB($secondary)
color: RGB($black)
&:focus-visible, &:hover
background-color: RGBA($secondary, 0.3)
color: RGB($secondary)
footer
padding: 0.5rem 1rem
width: 100%
display: flex
flex-direction: row
background-image: linear-gradient(to top, RGB(var(--black)), transparent)
> p
p
margin: 0
width: 100%
text-align: center
@ -357,9 +264,9 @@ footer
white-space: nowrap
color: RGB($white)
> a
color: RGB($secondary)
text-decoration: none
a
color: RGB($secondary)
text-decoration: none
&:hover
text-decoration: underline
&:hover
text-decoration: underline