summaryrefslogtreecommitdiff
path: root/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/style.css')
-rw-r--r--static/style.css640
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
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-12 13:46:53 +0000