fixes

computas · Jul 25, 2024 · 75a7189 · 75a7189
1 parent d689604
commit 75a7189
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 17 deletions.
diff --git a/src/app/game/game-word-to-draw/game-word-to-draw.component.scss b/src/app/game/game-word-to-draw/game-word-to-draw.component.scss
@@ -195,6 +195,11 @@ footer {
   font-style: italic;
 }
 
+#draw-btn {
+  margin-right: 1rem;
+  margin-bottom: 0.6rem;
+}
+
 @media only screen and (max-width: 600px) {
   .header {
     font-size: 3em;

diff --git a/src/styles.scss b/src/styles.scss
@@ -54,7 +54,7 @@ body {
   -moz-user-select: none; /* Old versions of Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
-  background-color: black;
+  background-color: $black_color;
   overflow: hidden;
 }
 div,
@@ -71,13 +71,13 @@ button,
 }
 .mat-progress-spinner circle,
 .mat-spinner circle {
-  stroke: $text_secondary_color;
+  stroke: $dark_blue_color;
 }
 .avatar-name {
   font-family: ICTHofmannRegular;
 }
 
-@mixin icon($gradient: false, $back: false, $home: false){
+@mixin icon($gradient: false, $back: false, $home: false) {
   min-height: var(--fontSizeMedium);
   max-height: var(--fontSizeMedium);
   min-width: var(--fontSizeLarge);
@@ -91,40 +91,70 @@ button,
 
   @if $gradient {
     font-size: var(--fontSizeMedium);
-    background: linear-gradient(0deg, #1F60DE 0%, #681FDE 14%, #EC526D 71%, #EDBA86 100%);
+    background: linear-gradient(0deg, #1f60de 0%, #681fde 14%, #ec526d 71%, #edba86 100%);
     background-clip: text;
-    -webkit-text-fill-color: transparent; 
-  }
-  @else if $back {
+    -webkit-text-fill-color: transparent;
+  } @else if $back {
     margin-top: 1rem;
     color: $text_primary_color;
-  } 
-  @else if $home {
+  } @else if $home {
     color: $text_primary_color;
-  } 
+  }
 }
 
 .button-icon {
   @include icon;
 }
 
-.back-button-icon{
-  @include icon(false, true)
+.back-button-icon {
+  @include icon(false, true);
 }
 
-.home-button-icon{
-  @include icon(false, false, true)
+.home-button-icon {
+  @include icon(false, false, true);
 }
 
 .button-icon-gradient {
   @include icon(true);
 }
 
-
-.two-button-container { 
+.two-button-container {
   margin-top: 0;
   display: inline-flex;
   align-items: center;
   gap: 3rem;
   margin-bottom: 50px;
-}
+}
+
+.logo {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 20px;
+  width: var(--logoWidth);
+  height: var(--logoHeight);
+  cursor: default;
+
+  img {
+    width: 100%;
+  }
+}
+
+.container-background {
+  position: relative;
+}
+
+.container-background:before {
+  content: '';
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-image: url('./assets/background/io_rutemoenster-inverted.png');
+  background-size: cover;
+}
+
+.container {
+  min-height: 100vh;
+}