first commit

www/style.css

@@ -0,0 +1,202 @@
+:root {
+    --background: black;
+    --foreground: white;
+    --saBORbackground: rgba(54, 54, 54, 0.5);
+    --saBORforeground: darkgrey;
+    --impostorColor: rgb(60, 0, 0);
+    --civilColor: rgb(0, 50, 0);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: var(--background);
+    color: var(--foreground);
+    line-height: 1.6;
+    display: flex;
+    flex-direction: column;
+    padding: 2em;
+    gap: 1em;
+    height: 100vh;
+    width: 30vw;
+    margin: auto;
+}
+
+header {
+    text-align: center;
+}
+
+header img {
+    height: 8em;
+}
+
+h1 {
+    font-size: 2.5rem;
+    font-family: monospace;
+}
+
+main {
+    text-align: center;
+    margin-top: 40px;
+}
+
+p {
+    font-size: 1.2rem;
+    margin-bottom: 20px;
+}
+
+#playersList input {
+    width: 100%;
+}
+
+button, input, textarea {
+    padding: .6em;
+    border: none;
+    border-radius: 5px;
+}
+
+input, #gameLog {
+    background-color: var(--saBORbackground);
+    color: var(--foreground);
+}
+
+#gameLog {
+    font-size: 1.4em;
+    border: medium solid var(--foreground);
+    padding: 1em;
+    border-radius: 5px;
+}
+
+input {
+    transition: .2s;
+    border: medium solid var(--saBORforeground);
+}
+
+input:focus {
+    border-color: var(--foreground);
+    background-color: var(--foreground);
+    color: var(--background);
+    outline: none;
+}
+
+button {
+    transition: .2s;
+    background-color: var(--foreground);
+    color: var(--background);
+    /* text-shadow: 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 2px rgba(255, 255, 255, 1); */
+}
+
+/* button:hover {
+    background-color: var(--foreground);
+    color: var(--background);
+} */
+
+.playerHolder {
+    margin-bottom: 1em;
+    display: flex;
+    gap: .6em;
+    
+    button {
+        background-color: transparent;
+        font-family: monospace;
+        color: white;
+        text-shadow: none;
+    }
+}
+
+input:focus {
+    border-color: var(--foreground);
+}
+
+#newPlayerButton {
+    width: 100%;
+    margin-bottom: 1em;
+}
+
+#startGame {
+    margin-top: auto;
+    margin-left: auto;
+}
+
+#gameLog {
+    display: none;
+    margin: auto 0;
+    text-align: center;
+    transition: .4s;
+    
+    p {
+        margin: 0;
+    }
+}
+
+#gameLog.impostor {
+    background-color: var(--impostorColor);
+}
+
+#gameLog.civil {
+    background-color: var(--civilColor);
+}
+
+body.game #playlistHolder {
+    display: none;
+}
+
+body.game #gameLog {
+    display: unset;
+}
+
+#bottomBar {
+    margin-top: auto;
+    display: flex;
+    gap: 1em;
+}
+
+#hintCheckHolder p {
+    margin: auto 0 auto 0;
+}
+
+#hintCheckHolder {
+    display: flex;
+    gap: .4em;
+}
+
+.playerName {
+    font-size: x-large;
+    font-weight: bolder;
+}
+
+.rainbowText {
+    background: linear-gradient(to right, var(--foreground), var(--background), var(--foreground), var(--impostorColor), var(--foreground), var(--civilColor));    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: rainbow_animation 10s ease-in-out infinite;
+    background-size: 400% 100%;
+    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.2);
+}
+
+@keyframes rainbow_animation {
+    0%,100% {
+        background-position: 0 0;
+    }
+    
+    50% {
+        background-position: 100% 0;
+    }
+}
+
+@media (max-width: 1280px) {
+    body {
+        width: 60vw;
+    }
+}
+
+@media (max-width: 720px) {
+    body {
+        width: 96vw;
+    }
+}