Merge pull request #12 from magicsword-io/frontend/tailwind-ui

redo of frontend with tailwind ui css framework

static/css/style.css

@@ -1,128 +1,125 @@
-/* Variables */
+/* Color Definitions */
 :root {
-  --font: 'Roboto', sans-serif;
-  --bg: #1c1c1e;
-  --text: #ececec;
-  --bold-text: #2ebd52;
-  --accent: #007BFF;
-  --border-color: #19191b;
-  --light: #D3D3D3;
+  --sigma-blue: #00bbe6;
+  --sigma-dark: #12141c;
 }
 
-/* Font Import for Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
+::selection {
+  color: white;
+  background: var(--sigma-blue);
+}
+
+.text-sigma-blue {
+  color: var(--sigma-blue);
+}
 
-/* New Styles */
-body, html {
-  scroll-behavior: smooth;
-  scroll-padding-top: 1rem;
-  font-kerning: normal;
-  -webkit-text-size-adjust: 100%;
-  font-size: 18px;
-  background-color: var(--bg);
-  color: var(--text);
+.bg-sigma-blue {
+  background-color: var(--sigma-blue);
 }
 
-a {
-  text-decoration: none;
-  color: inherit;
+.border-sigma-blue {
+  border-color: var(--sigma-blue);
+}
+
+.text-sigma-dark {
+  color: var(--sigma-dark);
+}
+
+.bg-sigma-dark {
+  background-color: var(--sigma-dark);
+}
+
+.border-sigma-dark {
+  border-color: var(--sigma-dark);
+}
+
+/* Code Area CSS */
+pre:has(> #rule-code),
+pre:has(> #query-code) {
+  min-height: 200px;
+  cursor: text;
 }
 
-/* Updated existing styles */
-.dark-mode {
-  background-color: var(--bg);
-  color: var(--text);
+pre:has(> #rule-code:empty)::after {
+  content: "start writing your sigma rule...";
+  color: #c5c8c6;
+  width: 20px;
 }
 
-/* Lighter background for code display */
 div[class*="language-"],
 code[class*="language-"],
 code[class*="language-"] *,
 pre[class*="language-"] {
-  background-color: #2d2d2f;  /* Lighter than the previous */
   word-break: break-word !important;
-  white-space: pre-wrap !important;
+  white-space: pre-line !important;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background-color: var(--sigma-dark) !important;
 }
 
 div[class*="language-"]::selection,
 div[class*="language-"] span::selection,
 code[class*="language-"]::selection,
 code[class*="language-"] span::selection {
-  background: hsl(320, 80%, 25%);
-  color: hsla(0, 0%, 100%, .8);
+  background: var(--sigma-blue);
+  color: var(--sigma-dark);
 }
 
-.font-size-10 {
-  font-size: 1.0rem !important;
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.property,
+.token.keyword,
+.token.string {
+  color: var(--sigma-blue) !important;
 }
 
-.row {
-  padding-left: 3% !important;
-  padding-right: 3% !important;
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+  color: white !important;
 }
 
-.dark-mode .ui.selection.dropdown,
-.dark-mode .ui.selection.dropdown:hover,
-.dark-mode .ui.selection.active.dropdown .menu,
-.dark-mode .ui.selection.active.dropdown:hover .menu,
-.dark-mode .ui.selection.active.visible.dropdown,
-.dark-mode .ui.selection.active.visible.dropdown:hover {
-  border-color: var(--light);
+/* tom-select css override */
+.select-sigma > .ts-control,
+.select-sigma > .ts-control input {
+  color: white;
+  background-color: var(--sigma-dark) !important;
+  border-color: var(--sigma-blue) !important;
 }
 
-.dark-mode .ui.selection.dropdown, .dark-mode .ui.selection.active.dropdown > div.text {
-  color: var(--text);
-  background-color: rgba(255,255,255,.05);
-  border-color: var(--border-color);
+.select-sigma > .ts-dropdown [data-selectable].option {
+  color: var(--sigma-blue);
+  background-color: var(--sigma-dark);
 }
 
-.dark-mode .ui.selection.active.dropdown div.item {
-  color: var(--text);
-  background-color: #1d1f21;
-  border-color: var(--border-color);
+.select-sigma > .ts-dropdown [data-selectable].option.active {
+  color: white;
+  background-color: var(--sigma-blue);
 }
 
-.dark-mode .ui.form .field>label {
-  color: var(--text);
+.select-sigma input[type="checkbox"] {
+  background-color: var(--sigma-dark);
 }
 
-pre[class*=language-] {
-  min-height: 49px;
-  cursor: text;
+.select-sigma input[type="checkbox"]:checked {
+  background-color: var(--sigma-blue);
+  border-color: var(--sigma-dark);
 }
 
-.notification-box {
-  position: fixed !important;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
-  display: none;
-}
-
-.dark-mode .ui.modal>.header,
-.dark-mode .ui.modal>.content {
+.select-sigma.ts-wrapper.multi .ts-control > div {
   color: white;
-  background-color: var(--bg);
-}
-
-@media only screen and (max-width: 768px) {
-  .ui.selection.dropdown {
-    width: 100% !important;
-  }
+  background-color: var(--sigma-dark);
+  border: 1px solid var(--sigma-blue);
+  border-radius: 2px;
 }
 
-/* Increase contrast for text boxes */
-.ui.selection.dropdown, .ui.selection.active.dropdown > div.text {
-  color: #ffffff;
-  background-color: #1c1c1e;
-  border-color: #2ebd52;
-}
-
-/* Add a minimum width to the cli-code box to prevent clashing */
-#cli-code {
-  min-width: 300px;
-}
-/* Add a minimum width to the dropdowns to prevent clashing */
-.field .ui.selection.dropdown {
-  min-width: 200px;
+.select-sigma > .ts-dropdown,
+.select-sigma.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
+  border-color: var(--sigma-blue);
 }