Added CSS components

2025-09-23 00:48:19 +02:00
parent 9b7b19992c
commit 36f9f62a0e
6 changed files with 992 additions and 0 deletions
--- a/static/styles/newstyle.css
+++ b/static/styles/newstyle.css
@@ -0,0 +1,220 @@
+* {
+box-sizing:border-box
+}
+
+@font-face {
+    font-family: FreePixel;
+    font-style: normal;
+    font-weight: 400;
+    src: url("/fonts/FreePixel.ttf");
+}
+
+body {
+    /*font-family: "FreePixel";
+     *   font-size:16px;*/
+    
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    color:var(--main-fg-color);
+    
+    background-image: /*url(../images/light.png)*/var(--background-image);
+    background-repeat: repeat-x;
+    background-color: var(--main-bg-end-color);
+    background-position: left top;
+    
+    padding-bottom:26px;
+    
+    text-rendering: optimizelegibility;
+    text-shadow: rgba(0,0,0,.01) 0 0 1px;
+    
+}
+
+main{
+    width: 75%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.content,#footnote{    
+    min-height: calc(80vh - 200px);
+    border-style: solid;
+    border-width: 1px;
+    background: var(--main-color);
+    
+    padding: 10px 10px 10px 10px;
+    
+    .titlebar {
+        margin: -10px -10px 0 -10px;
+        background: var(--main-bg-color);
+        color: var(--main-title-fg-color);
+        padding: 5px 5px 5px 10px;
+        margin-bottom: 10px;
+        text-align: var(--title-align);
+        border-style: var(--border-style);
+        border-width: var(--border-width);
+    }
+    
+    
+}
+
+.fit,#footnote{
+    min-height: fit-content;
+}
+
+.smol{
+    max-height: 200px;
+    
+    div{
+        overflow: auto;
+        max-height: 150px;
+    }
+}
+
+footer{
+    height:fit-content;
+    background-color: var(--main-color);
+    color: var(--main-fg-color);
+    display:flex;
+    padding:0 10px;
+    align-items:center;
+    overflow-x:hidden;
+    position:fixed;
+    
+    font-family: "FreePixel";
+    
+    bottom:0;
+    width:100%
+}
+
+#footnote{
+    margin-bottom: 20px;
+    height: max-content;
+    border-style: solid;
+    border-width: 1px;
+
+    padding: 10px 10px 10px 10px;
+
+    margin-right: auto;
+    margin-left: auto;
+
+    background-color: var(--main-color);
+}
+
+#gif{
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    scale: 100%;
+
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center;
+    gap:10px;
+
+    margin-bottom: 40px;
+
+}
+
+.text-center{
+    text-align:center;
+    display: block;
+    width: max-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
+.columnsplitter{
+    display: grid;
+    
+    columns: 2;
+    grid-template-columns: auto 300px;
+    column-gap: 20px;
+}
+
+.singlecolumn{
+    grid-template-columns: auto;
+}
+
+.rowsplitter{
+    display: grid;
+    
+    columns: 1;
+    row-gap: 20px;
+}
+
+.chatbox{
+    margin-top: 10px;
+    
+    textarea {
+        font-family: "FreePixel";
+        resize: none;
+    }
+    
+    input{
+        border-style: solid;
+        border-width: 1px;
+        border-color: black;
+
+    }
+}
+
+.info {
+    background-color: red;
+    color: var(--main-bg-color);
+}
+
+.tworowtext {
+    dl dt{
+        float:left;
+        clear:left;
+        text-align:right;
+        width:130px;
+        font-weight:700
+    }
+    
+    dl dd{
+        margin-left:calc(130px + 20px)
+    }
+}
+
+.button-container{
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center;
+    gap:20px;
+    
+    margin-bottom: 20px;
+}
+
+.squeeze{
+    width: auto;
+    img{
+        width: 100%;
+        image-rendering: optimizespeed;
+    }
+}
+
+.leftpad{
+    float: right;
+}
+
+.list-left{
+    ul{
+        text-align: left;
+        list-style: disclosure-closed;
+        list-style-position: inside;
+        padding-left: 0px;
+    }
+}
+
+.centered{
+    margin-left: auto;
+    margin-right: auto;
+    width: fit-content;
+}
+
+.rndText {
+    
+    
+}