sarsoo/Mixonomer
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

matching selector ui styles

Browse Source
This commit is contained in:
Andy Pack 2024-10-11 22:11:05 +01:00
parent 78c8c326ce
commit 17c1b311bd
Signed by: sarsoo
GPG Key ID: A55BA3536A5E0ED7
7 changed files with 26 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
music/templates/login.html
View File

@ -5,14 +5,13 @@
<div class="card"> <div class="card">
<form name="login" action="/auth/login" method="POST" onsubmit="return handleLogin()" style="display: grid; gap: 30px;"> <form name="login" action="/auth/login" method="POST" onsubmit="return handleLogin()" style="display: grid; gap: 30px;">
<h1 style="margin:0; text-align: center">Login</h1>
<div> <div>
<p>Username</p> <input type="text" name="username" class="full-width" placeholder="Username" />
<input type="text" name="username" class="full-width" />
</div> </div>
<div> <div>
<p>Password</p> <input type="password" name="password" class="full-width" placeholder="Password" />
<input type="password" name="password" class="full-width" />
</div> </div>
<p id="status" style="display: none; color: red" class="center-text"></p> <p id="status" style="display: none; color: red" class="center-text"></p>

6
src/js/Playlist/PlaylistsList.js
View File

@ -137,8 +137,8 @@ function PlaylistGrid(props){
<Grid container <Grid container
spacing={3} spacing={3}
direction="row" direction="row"
justifyContent="flex-start" justifyContent="center"
alignItems="flex-start" alignItems="stretch"
style={{padding: 24}}> style={{padding: 24}}>
{/* BUTTON BLOCK (NEW/RUN ALL) */} {/* BUTTON BLOCK (NEW/RUN ALL) */}
@ -175,7 +175,7 @@ function PlaylistGrid(props){
function PlaylistCard(props){ function PlaylistCard(props){
return ( return (
<Grid item xs> <Grid item xs>
<Card> <Card className="card">
{/* NAME TITLE */} {/* NAME TITLE */}
<CardContent> <CardContent>

2
src/js/Playlist/View/Count.js
View File

@ -77,7 +77,7 @@ export class Count extends Component {
render() { render() {
return ( return (
<div style={{margin: 'auto', marginTop: '20px'}}> <div style={{margin: 'auto', marginTop: '20px'}}>
<Card align="center"> <Card align="center" className="card">
<CardContent> <CardContent>
<Grid container> <Grid container>

2
src/js/Playlist/View/Edit.js
View File

@ -367,7 +367,7 @@ export class Edit extends Component{
const table = ( const table = (
<div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}> <div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}>
<Card align="center"> <Card align="center" className="card">
<CardContent> <CardContent>
{/* PLAYLIST NAME TITLE */} {/* PLAYLIST NAME TITLE */}

2
src/js/Tag/TagList.js
View File

@ -118,7 +118,7 @@ function TagGrid(props){
function TagCard(props){ function TagCard(props){
return ( return (
<Grid item xs> <Grid item xs>
<Card> <Card className="card">
<CardContent> <CardContent>
{/* TAG NAME */} {/* TAG NAME */}

2
src/js/Tag/View.js
View File

@ -371,7 +371,7 @@ class TagView extends Component{
const table = ( const table = (
<div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}> <div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}>
<Card align="center"> <Card align="center" className="card">
<CardContent> <CardContent>
{/* TAG NAME TITLE */} {/* TAG NAME TITLE */}

42
src/scss/style.scss
View File

@ -1,6 +1,6 @@
$font-stack: 'Roboto', arial; $font-stack: 'Roboto', arial;
$background-colour: #202124; $background-colour: #2b2b2b;
$ui-colour: #131313; $ui-colour: #3c3c3c;
$light-ui: #575757; $light-ui: #575757;
$text-colour: white; $text-colour: white;
$ui-element: #505050; $ui-element: #505050;
@ -48,7 +48,7 @@ p {
} }
.button { .button {
background-color: $ui-element; background-color: #907FA4;
color: $text-colour; color: $text-colour;
display: inline-block; display: inline-block;
@ -79,7 +79,7 @@ p {
input[type=text], input[type=password], input[type=number], select { input[type=text], input[type=password], input[type=number], select {
padding: 15px; padding: 15px;
background-color: $ui-element; background-color: $ui-element;
border: black; border-color: #907FA4;
border-radius: 3px; border-radius: 3px;
color: white; color: white;
} }
@ -193,31 +193,19 @@ input[type=text], input[type=password], input[type=number], select {
} }
.card { .card {
/*background-color: grey;*/ background-color: $ui-colour !important;
background-color: $ui-colour; box-shadow: 5px 5px 0 #0f0f0f !important;
box-shadow: 4px 4px 8px black; padding: 15px !important;
padding: 20px; margin: 5px !important;
//margin: calc($pad-px / 2); transition: box-shadow 0.5s;
/*border-radius: 3px;*/ border-style: solid !important;
border-color: black !important;
h1 { border-width: 5px !important;
text-align: center;
color: $text-colour;
text-shadow: 1px 1px 2px #4f4f4f;
} }
img { .card:hover {
width: 100%; box-shadow: none;
border-radius: 3px; offset: 4px 4px;
margin-bottom: 8px;
box-shadow: 2px 2px 2px black;
margin-left: auto;
margin-right: auto;
}
p {
margin-top: 20px;
}
} }
ul.navbar { ul.navbar {