Make app function.
This commit is contained in:
Tyler-A
parent
e4c81beefe
commit
af75bbc522
14 changed files with 865 additions and 0 deletions
293
style.css
Normal file
293
style.css
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
:root {
|
||||
--spotify-green: #1DB954;
|
||||
--spotify-white: #FFFFFF;
|
||||
--spotify-black: #000000;
|
||||
|
||||
--accent1: #7289da;
|
||||
--accent2: #00aa00;
|
||||
|
||||
--error: #ff0000;
|
||||
|
||||
--background: #23272A;
|
||||
--background-text: var(--spotify-white);
|
||||
|
||||
--card-colour: #2C2F33;
|
||||
--card-text: #ffffff80;
|
||||
|
||||
--on-card-colour: #4c4c4c;
|
||||
--on-card-text: var(--spotify-green);
|
||||
|
||||
--fonts: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
html, body, #app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
font-family: var(--fonts);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: var(--spotify-black);
|
||||
color: var(--spotify-white);
|
||||
padding: 15px;
|
||||
border-style: none;
|
||||
border-radius: 7px;
|
||||
font-family: var(--fonts);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: var(--spotify-green);
|
||||
border-style: none;
|
||||
border-radius: 50px;
|
||||
font-size: larger;
|
||||
font-family: var(--fonts);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
background-color: var(--spotify-black);
|
||||
color: var(--spotify-white);
|
||||
padding: 15px;
|
||||
border-style: none;
|
||||
border-radius: 7px;
|
||||
font-family: var(--fonts);
|
||||
outline: none;
|
||||
}
|
||||
input[type=number]:active {
|
||||
border-color: var(--spotify-green);
|
||||
}
|
||||
|
||||
|
||||
div.body {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 95%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
[v-cloak], .hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#login {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--spotify-green);
|
||||
}
|
||||
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
background-color: var(--card-colour);
|
||||
color: var(--card-text);
|
||||
margin: 10px auto;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.flex-row > div {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 90%;
|
||||
background-color: var(--card-colour);
|
||||
color: var(--card-text);
|
||||
margin: 10px auto;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error);
|
||||
border-style: solid;
|
||||
border-radius: 5px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
color: var(--card-text);
|
||||
padding: 20px;
|
||||
margin: 5px;
|
||||
background-color: var(--card-colour);
|
||||
border-radius: 7px;
|
||||
font-size: large;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
color: var(--spotify-white);
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
--profile-pic-width: 50px;
|
||||
width: var(--profile-pic-width);
|
||||
height: var(--profile-pic-width);
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip Styling */
|
||||
.tooltip {
|
||||
display: none !important;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-inner {
|
||||
background: var(--spotify-black);
|
||||
color: var(--spotify-green);
|
||||
border-radius: 16px;
|
||||
padding: 5px 10px 4px;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: black;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tooltip[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tooltip[x-placement^="top"] .tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tooltip[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.tooltip[x-placement^="bottom"] .tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tooltip[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.tooltip[x-placement^="right"] .tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.tooltip[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tooltip[x-placement^="left"] .tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.tooltip.popover .popover-inner {
|
||||
background: #f9f9f9;
|
||||
color: black;
|
||||
padding: 24px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 30px rgba(black, .1);
|
||||
}
|
||||
|
||||
.tooltip.popover .popover-arrow {
|
||||
border-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.tooltip[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
}
|
||||
|
||||
.tooltip[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
/* End of Tooltip */
|
||||
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.tooltip {
|
||||
display: block !important;
|
||||
}
|
||||
div.body {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 90%;
|
||||
}
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.card {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue