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">
<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>
<p>Username</p>
<input type="text" name="username" class="full-width" />
<input type="text" name="username" class="full-width" placeholder="Username" />
</div>
<div>
<p>Password</p>
<input type="password" name="password" class="full-width" />
<input type="password" name="password" class="full-width" placeholder="Password" />
</div>
<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
spacing={3}
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
justifyContent="center"
alignItems="stretch"
style={{padding: 24}}>
{/* BUTTON BLOCK (NEW/RUN ALL) */}
@ -175,7 +175,7 @@ function PlaylistGrid(props){
function PlaylistCard(props){
return (
<Grid item xs>
<Card>
<Card className="card">
{/* NAME TITLE */}
<CardContent>

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

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

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

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

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

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

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

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

44
src/scss/style.scss
View File

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