diff --git a/style.css b/style.css deleted file mode 100644 index 6c2c495..0000000 --- a/style.css +++ /dev/null @@ -1,296 +0,0 @@ -: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); - - --modal-container-background: #0e0f10eb; - --modal-background: var(--card-colour); - --modal-text: var(--card-text); - - --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:hover { cursor: pointer; } -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; -} -button:hover { cursor: pointer; } - -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; -} - -div#login > div { - 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: 2; -} - -.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; - } - div#login > div { - width: 33%; - } -} \ No newline at end of file