Initial style

pad.css

@@ -0,0 +1,203 @@
+:root {
+    --body-width: 1000px;
+    --toolbar-background: rgb(42, 42, 42);
+    --toolbar-text: rgb(249, 249, 249);
+    --toolbar-button-background: rgb(70, 70, 70);
+}
+
+@font-face {
+    font-family: "Terminal Grotesque";
+    src: url("./fonts/terminal-grotesque.ttf");
+}
+
+@font-face {
+    font-family: "Mattone";
+    src: url("./fonts/Mattone-Regular.ttf");
+}
+
+@font-face {
+    font-family: "Mattone";
+    src: url("./fonts/Mattone-Bold.ttf");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Mattone";
+    src: url("./fonts/Mattone-Black.ttf");
+    font-weight: bolder;
+}
+
+@font-face {
+    font-family: "Courier Prime";
+    src: url("./fonts/CourierPrime-Regular.ttf");
+}
+
+@font-face {
+    font-family: "Courier Prime";
+    src: url("./fonts/CourierPrime-Italic.ttf");
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Courier Prime";
+    src: url("./fonts/CourierPrime-Bold.ttf");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Courier Prime";
+    src: url("./fonts/CourierPrime-BoldItalic.ttf");
+    font-weight: bold;
+    font-style: italic;
+}
+
+#editbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: stretch;
+    border: none;
+    background: transparent;
+
+    .menu_left {
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
+
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    max-width: min(var(--body-width), calc( 100vw - 20px ));
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
+    padding: 0;
+    padding-right: 110px;
+    z-index: 10;
+
+    .menu_left,
+    .menu_right,
+    .history-controls {
+        background: var(--toolbar-background);
+        color: var(--toolbar-text);
+        border-radius: 5px;
+        padding: 5px;
+    }
+
+    &.toolbar.cropped .menu_left {
+        height: 38px;
+        padding-bottom: 0px;
+
+        & > * {
+            margin-bottom: 5px;
+        }
+    }
+
+    & > * {
+        padding: 0;
+        border: none;
+    }
+}
+
+.toolbar ul li {
+    margin: 0;
+}
+
+.toolbar ul li a,
+select,
+.nice-select,
+.mobile-layout .toolbar .menu_right {
+    background: transparent;
+}
+
+.toolbar .nice-select .list,
+.popup .nice-select .list {
+    background: var(--toolbar-background);
+    color: var(--toolbar-text);
+    top: unset !important;
+    bottom: 50px !important;
+    transform-origin: 50% 100%;
+
+    & > .selected {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    & > *:hover {
+        background: rgba(255, 255, 255, 0.3);
+    }
+}
+
+#chaticon {
+    position: fixed;
+    bottom: 10px;
+    right: calc(10px + ((50vw - ( min(var(--body-width), 100vw - 20px ) / 2 )  - 10px)));
+
+    width: 100px;
+
+    background: var(--toolbar-background);
+    color: var(--toolbar-text);
+    height: 2rem;
+    padding: 5px;
+    border-radius: 5px;
+    border: none;
+    box-sizing: border-box;
+}
+
+.mobile-layout #editorcontainerbox {
+    margin: 0;
+}
+
+/* Rollback default style */
+.mobile-layout .toolbar .menu_right {
+    position: relative;
+}
+
+#innerdocbody {
+
+    font-family: "Courier Prime", monospace;
+    font-weight: normal;
+    font-style: normal;
+    font-size: 1.2rem;
+    line-height: 1.2;
+
+    .ace-line:last-child {
+        min-height: 25vh;
+    }
+
+    h1 {
+        font-family: "Terminal Grotesque", sans-serif;
+        font-weight: bold;
+        font-size: 6rem;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+
+        .ace-line:first-child & {
+            margin-top: max(5vh, 0.5em);
+        }
+    }
+
+    h2, h3, h4 {
+        font-family: "Mattone";
+        font-weight: bold;
+        margin-top: 2em;
+        margin-bottom: 1em;
+
+        b {
+            font-weight: bolder;
+        }
+    }
+
+    h2 {
+        font-size: 2.5rem;
+    }
+
+    h3 {
+        font-size: 2rem;
+    }
+
+    h4 {
+        font-size: 1.5rem;
+        font-weight: normal;
+    }
+}