upd: moved all /public/ files to the root folder

1 files changed, 640 insertions, 0 deletions

diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..9aa1ca9
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,640 @@
+:root {
+    --background-color: #c4d1b5;
+    --background-color-hover: #e4eed8;
+    --background-color-disabled: #bec6b3;
+    --border-color: #95a186;
+
+    --background-color-2: #cfdfbd;
+    --border-color-2: #849275;
+
+    --foreground-color: #425514;
+    --foreground-color-hover: #1c220c;
+
+    --body-background: #f2f8ee;
+
+    --profile-background: radial-gradient(#f2f8eebb, #f2f8ee);
+
+    /** NAVBAR */
+    --navbar-background: linear-gradient(0deg, #b9caaf, #eaffdd);
+    --navbar-border-color: #94a58a;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+    background: var(--body-background);
+}
+
+h1 {
+    font-size: 26px;
+}
+
+h2 {
+    font-size: 20px;
+}
+
+h3 {
+    font-size: 16px;
+}
+
+div {
+    display: unset;
+}
+
+table {
+    text-align: left;
+}
+
+table.vertical th {
+    text-align: right;
+}
+
+table.vertical.left th {
+    text-align: left;
+}
+
+table.vertical th,
+table.vertical td {
+    padding: 2px;
+}
+
+a {
+    color: var(--foreground-color);
+    text-decoration: none;
+}
+
+a:hover {
+    color: var(--foreground-color-hover);
+    text-decoration: underline;
+}
+
+input {
+    padding: 2px;
+    border-radius: 4px;
+    border: 1px solid gray;
+}
+
+input[type=file] {
+    max-width: 230px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+form:has(div) {
+    gap: 16px;
+}
+
+label {
+    display: block;
+}
+
+label.inline {
+    display: inline;
+}
+
+textarea {
+    resize: vertical;
+    height: 100px;
+}
+
+.container {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+}
+
+.wrapper {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin: 6px;
+}
+
+.page {
+    display: flex;
+    flex-direction: row;
+}
+
+.screenshots img {
+    height: 128px;
+}
+
+.content.row>.content {
+    margin: 0;
+}
+
+.sidebar {
+    max-width: 300px;
+}
+
+/** 
+------------
+   COUNTER
+------------
+*/
+.counter img:not(:first-child) {
+    margin-left: 32px;
+}
+
+
+/** 
+-----------
+   NAVBAR
+-----------
+*/
+
+.navbar {
+    background: var(--navbar-background);
+    border-bottom: 1px solid var(--navbar-border-color);
+    display: flex;
+    flex-direction: row;
+    padding: 4px;
+    gap: 16px;
+}
+
+.navbar .links {
+    display: flex;
+    align-items: end;
+    gap: 4px;
+}
+
+.navbar .brand {
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+}
+
+/** 
+-------------
+   BUTTONS
+-------------
+*/
+
+button,
+.button {
+    background: lightgray;
+    border: 1px solid gray;
+    border-radius: 4px;
+    padding: 2px 4px;
+    font-size: 14px;
+    text-decoration: none;
+    color: black;
+}
+
+button:disabled {
+    color: gray;
+}
+
+button:disabled:hover {
+    cursor: not-allowed;
+    background: lightgray;
+    color: gray;
+}
+
+button:hover,
+.button:hover {
+    background: #b9b9b9;
+    cursor: pointer;
+    color: black;
+    text-decoration: none;
+}
+
+button.transparent,
+.button.transparent {
+    background: unset;
+    border: unset;
+}
+
+.gem:hover {
+    filter: saturate(2);
+}
+
+.coal:hover {
+    filter: brightness(2);
+}
+
+button.red,
+.button.red {
+    background: #e97272;
+    border-color: #a85252;
+}
+
+button.red:hover,
+.button.red:hover {
+    background: #ec8d8d;
+}
+
+button.green,
+.button.green {
+    background: #6cbb6d;
+    border-color: #52a85d;
+}
+
+button.green:hover,
+.button.green:hover {
+    background: #85dd8a;
+}
+
+button.purple,
+.button.purple,
+.twitch {
+    background: #9a7ad2 !important;
+    border-color: #6d5595 !important;
+}
+
+button.purple:hover,
+.button.purple:hover {
+    background: #ac88ea;
+}
+
+button.big,
+.button.big {
+    padding: 8px 24px;
+    font-size: 18px;
+}
+
+/** 
+----------
+   LIST
+----------
+*/
+
+.items {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.items.content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.navtab {
+    position: relative;
+    width: 50%;
+    top: 2px;
+}
+
+.full {
+    flex-grow: 1;
+}
+
+.right {
+    justify-content: flex-end;
+}
+
+/** 
+---------
+   BOX
+---------
+*/
+
+.box {
+    background: var(--background-color);
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    padding: 8px;
+}
+
+.box.navtab {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: unset;
+    margin: 0;
+}
+
+.box:has(.navtab) {
+    background: unset;
+    border: unset;
+    border-radius: unset;
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.box:has(.navtab) .content {
+    flex-grow: 1;
+    margin: 0;
+    padding: 16px;
+}
+
+.box .content .box {
+    background: var(--background-color-2);
+    border-color: var(--border-color-2);
+}
+
+.box .content a.box:hover {
+    background: linear-gradient(0deg, var(--background-color-hover), var(--background-color-2));
+    cursor: pointer;
+}
+
+.box hr {
+    border-color: var(--border-color);
+    border-width: 1px;
+}
+
+.box.emote {
+    width: 96px;
+    height: 96px;
+}
+
+.box.background {
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    overflow: hidden;
+}
+
+.box.background h1 {
+    color: white;
+    text-shadow: -1px 1px 4px black;
+}
+
+.box.emote h1 {
+    font-size: 16px;
+    font-weight: 600;
+
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.box.emote p {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10px;
+}
+
+.box.emote:has(.emote-desc) img {
+    max-width: 64px;
+    max-height: 64px;
+}
+
+.box.emote:has(.emote-desc.none) img {
+    max-width: 96px;
+    max-height: 96px;
+}
+
+a.box {
+    text-decoration: none;
+    color: black;
+}
+
+a.box:hover {
+    background: linear-gradient(0deg, var(--background-color-hover), var(--background-color-disabled));
+    cursor: pointer;
+}
+
+.emote-showcase {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 32px;
+    margin: 32px 0;
+}
+
+.alert.red {
+    background: #e27777;
+    border-color: #9f5050;
+}
+
+.emote-check {
+    position: relative;
+    left: 35px;
+    top: 10px;
+    width: 24px;
+    height: 24px;
+    z-index: 2;
+}
+
+.emote:has(.emote-check) img {
+    margin-top: -15px;
+}
+
+/** RATINGS */
+.rating.gemerald {
+    font-weight: bolder;
+    text-shadow: 0 0 5px blue;
+    color: #b4dbeb;
+}
+
+.rating.gemerald img {
+    filter: hue-rotate(50deg) brightness(1.5);
+}
+
+.rating.gem {
+    font-weight: bold;
+    color: #2e7b99;
+}
+
+.rating.coal {
+    font-weight: bold;
+    color: #2d3335;
+    text-shadow: 0 0 2px black;
+}
+
+.rating.brimstone {
+    font-weight: bolder;
+    color: orange;
+    text-shadow: 0 0 4px red;
+}
+
+/** 
+-------------
+   ACCOUNTS
+-------------
+*/
+
+.accman {
+    flex-grow: 0;
+    width: 400px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.badge {
+    padding: 2px 8px;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+}
+
+.badge img {
+    max-width: 16px;
+    max-height: 16px;
+    vertical-align: middle;
+}
+
+/** 
+---------------------------------
+   SOMETHING FROM TAILWINDCSS
+---------------------------------
+*/
+
+.row {
+    display: flex;
+    flex-direction: row;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+}
+
+.grow {
+    flex-grow: 1;
+}
+
+.small-gap {
+    gap: 8px;
+}
+
+.big-gap {
+    gap: 32px;
+}
+
+.no-gap {
+    gap: 0;
+}
+
+.center {
+    justify-content: center;
+    align-items: center;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.items-bottom {
+    align-items: end;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-bottom {
+    justify-content: end;
+}
+
+.font-small {
+    font-size: 12px;
+}
+
+.p-16 {
+    padding: 16px;
+}
+
+.m-8 {
+    margin: 8px;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.none {
+    display: none;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.font-weight-normal,
+.font-weight-normal th {
+    font-weight: normal;
+}
+
+.rounded {
+    border-radius: 4px;
+}
+
+/** 
+-------------
+   USER
+-------------
+*/
+
+.background {
+    position: absolute;
+    background-position: center center;
+    top: 61px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+}
+
+.background-layer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--profile-background);
+}
+
+/** 
+-------------
+   CHAT
+-------------
+*/
+
+.chat-message {
+    background: linear-gradient(0deg, #202020, #303030);
+    color: #fff;
+    padding: 8px;
+}
+
+.chat .chat-message:nth-child(even) {
+    background: linear-gradient(0deg, #353535, #454545);
+
+    border-top: 1px solid #707070;
+    border-bottom: 1px solid #707070;
+}
+
+.chat.rounded .chat-message:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.chat.rounded .chat-message:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
\ No newline at end of file