login mechanism

src/styles/colors.scss

@@ -1,6 +1,21 @@
+$color_red: #ff3344;
+$color_yellow: #ffd60f;
+$color_blue: complement($color_red);
+//$color_yellow: complement($color_red);
+//$color_yellow: yellow;
+
 $main_bg_color: #161616;
 $main_text_color: white;
 
 $content_bg_color: #222222;
+$content_bg_secondary: darken($content_bg_color, 3%);
 
 $cell_bg: transparentize(white, 0.95);
+
+$text_normal: 16px;
+$text_small: 14px;
+$text_big: 20px;
+$text_sign: 22px;
+
+$input_bg_color: transparentize(black, 0.8);
+$button_bg_color: #ff3344;

src/styles/global.scss

@@ -25,6 +25,18 @@ body {
   }
 }
 
+:global(.gap) {
+  height: $gap;
+}
+
+:global(.spc) {
+  height: $spc;
+
+  &:global(.double) { height: $spc * 2; }
+  &:global(.quadro) { height: $spc * 4; }
+  &:global(.sixty)  { height: $spc * 6; }
+}
+
 :global(.padded) {
   padding: $gap;
 }
@@ -46,3 +58,4 @@ body {
 :global(.footer) {
   height: 40px;
 }
+

src/styles/variables.scss

@@ -6,6 +6,33 @@ $gap: 8px;
 $spc: $gap * 2;
 $panel_radius: 1px;
 
+$grid_line: 4px;
+
+$input_height: 32px;
+$input_radius: 2px;
+
+$info_height: 24px;
+
 @mixin outer_shadow() {
-  box-shadow: transparentize(white, 0.92) -1px -1px, transparentize(black, 0.8) 1px 1px;
+  box-shadow: inset transparentize(white, 0.95) 0 1px,
+              inset transparentize(black, 0.5) 0 -1px;
+}
+
+@mixin inner_shadow() {
+  box-shadow: inset transparentize(white, 0.95) 0 -1px,
+              inset transparentize(black, 0.5) 0 1px;
+}
+
+@mixin input_shadow() {
+  box-shadow: inset transparentize(white, 0.92) 0 -1px,
+              inset transparentize(black, 0.8) 0 1px;
+}
+
+@mixin modal_mixin() {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }