init

2024-07-27 00:37:29 +03:00
parent 93cd2e7d53
commit 27e009af41
3 changed files with 377 additions and 0 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,150 @@
+body {
+    margin: 0;
+    padding: .5em .5em 0;
+    background-color: #fafafa;
+
+    height: 100vh;
+    max-height: 100vh;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
+* {
+    font-family: Arial sans-serif;
+    font-size: 15pt;
+
+    box-sizing: border-box;
+}
+
+.settings {
+    display: flex;
+    flex-direction: column;
+    gap: .5em;
+}
+
+.setting-group {
+    display: flex;
+    width: 50%;
+}
+
+.setting-group:last-child{
+    flex-direction: column;
+    gap: .5em;
+}
+
+.input {
+    display: flex;
+}
+
+
+.setting-group:first-child, .input {
+    justify-content: space-between;
+}
+
+
+.setting-group label {
+    display: flex;
+    width: 50%;
+}
+
+.setting-group input {
+    width: 100%;
+}
+
+.input-field {
+    width: 100%;
+    display: flex;
+    gap: .5em;
+}
+
+.args {
+    width: 100%;
+
+    display: flex;
+    gap: .5em;
+
+    flex-wrap: wrap;
+}
+
+.arg {
+    padding: 5px 10px;
+    border: 1px solid;
+
+    border-radius: 15px;
+
+    display: flex;
+
+    gap: .25em;
+    align-items: center;
+}
+
+.delete-arg {
+    font-size: 15px;
+    color: red;
+    font-weight: 600;
+
+    cursor: pointer;
+}
+
+.content {
+    flex-grow: 1;
+    width: 100%;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: .5em;
+}
+
+.content .buttons {
+    width: 100%;
+    display: flex;
+
+    justify-content: space-between;
+}
+
+.content .buttons div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 49%;
+}
+
+.content textarea {
+    height: 100%;
+    width: 49%;
+}
+
+footer {
+    display: flex;
+    width: 100%;
+    padding: .5em;
+    margin-top: .5em;
+
+    font-size: 12pt;
+
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+
+    font-weight: 600;
+
+
+    color: #333;
+}
+
+footer a {
+    text-decoration: none;
+
+    color: #333;
+    transition: color .5s ease;
+}
+
+footer a:hover {
+    color: blueviolet;
+}