wip #6381 @0.25

diff --git a/style/105-outro.sass b/style/105-outro.sass
index 8a694ee4b2de63a1b0ea52fda298fd6fce4a597e..52d0e7eb9ed8d2f3ffbf5dc13100f8083814ec60 100644 (file)
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -1,11 +1,12 @@
 .score
     border-radius: 16px
     overflow: hidden
-    +flex-config(false,false,row,stretch)
-    +opacity(.48,background-color,$neutral-color)
-    height: 576px //680(hauteur de base) - 80(hauteur du header) - 24(padding inférieure)
+    +flex-config(false, false, row, stretch)
+    +opacity(.64, background-color, $neutral-color)
+    height: 576px
+    //680(hauteur de base) - 80(hauteur du header) - 24(padding inférieure)
     .subtitle
-        +opacity(.8,color,$texts-color)
+        +opacity(.8, color, $texts-color)
 
     h1,
     .score-text .subtitle .word,
@@ -19,18 +20,21 @@
         padding: 24px
         position: relative
         z-index: 1
+
         &.full
             .score-content-wrapper
                 max-width: 60%
                 margin: 0 auto
+
         h1
             +font-size(40)
             margin-bottom: 9px
+
         .subtitle
             +font-size(16)
 
     &-content-wrapper
-        +flex-config(false,false,false,center)
+        +flex-config(false, false, false, center)
         position: relative
         top: var(--space-21-66)
         margin-left: 75px
@@ -44,15 +48,19 @@
         +font-size(80)
         margin-right: 60px
         flex-shrink: 0
+
         &.nok
             #progress-counter *
                 color: $nok-color
+
             #anime-result svg *
                 fill: $nok-color
                 stroke: $nok-color
+
         &.ok
             #progress-counter *
                 color: $ok-color
+
             #anime-result svg *
                 fill: $ok-color
                 stroke: $ok-color
@@ -65,17 +73,20 @@
             left: 0
             border-radius: 100px
             background: transparent
-            +flex-config(center,false,false,center)
+            +flex-config(center, false, false, center)
 
             svg
                 overflow: visible
                 width: 100%
                 position: absolute
                 transform: rotate(270deg)
+
                 circle
                     stroke-width: 8px
+
                 circle:not(#progress-circle)
-                    +opacity(.16,color,$texts-color)
+                    +opacity(.08, color, $texts-color)
+
                 #overlay-circle
                     display: none
 
@@ -91,9 +102,11 @@
         background-color: $neutral-color
         padding: 24px 24px 0
         position: relative
+
         h2
             +font-size(24)
             margin-bottom: 5px
+
             #close-answers
                 position: absolute
                 right: 0
@@ -111,17 +124,20 @@
             position: absolute
             bottom: 0
             left: 0
-            background: linear-gradient(to bottom,transparent, rgba($neutral-color,.8))
+            background: linear-gradient(to bottom, transparent, rgba($neutral-color, .8))
 
     #answers-list
         height: 85%
         padding-right: 24px
+
         .item
             padding-left: 20px
             margin-bottom: 22px
             position: relative
+
             *
                 +font-size(14)
+
             &:after
                 content: ""
                 width: 12px
@@ -130,16 +146,20 @@
                 left: 0
                 top: 4px
                 border-radius: 20px
+
             &.ok
                 //
                 &:after
                     background-color: $ok-color
+
                 .position
                     color: $ok-color
+
             &.nok
                 //
                 &:after
                     background-color: $nok-color
+
                 .position
                     color: $nok-color
 
@@ -147,7 +167,7 @@
                 margin-bottom: 2px
 
             .answer
-                +opacity(.8,color,$texts-color)
+                +opacity(.8, color, $texts-color)
 
     .toggle-answers-review
         display: none
@@ -158,8 +178,10 @@
         bottom: 24px
         z-index: 1
         transform: translateY(calc(100% + 24px))
+
         .restart-sentence
             margin-bottom: 14px
+
         .score-controls
             +flex-config(space-between)
 
@@ -178,6 +200,7 @@
         padding: 12px
         margin: 0 auto
         font-size: 16px
+
         svg
             height: 13px
             margin-right: 6px
@@ -194,39 +217,49 @@
 
 .m
     .score
-        height: 600px //680(hauteur de base) - 80(hauteur du header)
+        height: 600px
+        //680(hauteur de base) - 80(hauteur du header)
         position: static
         border-radius: 0
         background: none
+
         &:after
             content: ""
             width: 100%
             position: absolute
             height: 100%
-            +opacity(.48,background-color,$neutral-color)
+            +opacity(.48, background-color, $neutral-color)
             top: 0
             left: 0
+
         .subtitle
             margin-bottom: 20px
+
         &-content
             padding: 0
+
             h1
                 +font-size(24)
+
             .subtitle
                 +font-size(14)
+
         &-content-wrapper
-            +flex-config(center,false,column,center)
+            +flex-config(center, false, column, center)
             top: 74px
             margin-left: 0
             text-align: center
+
         &-counter
             margin: 0 0 24px
             font-size: 56px
             padding-bottom: 41%
             width: 100%
             max-width: 140px
+
             #overlay-circle
                 display: initial
+
         &-answers-review_container
             width: 100%
             height: 100%
@@ -240,10 +273,12 @@
             visibility: hidden
             //+opacity(0,background-color,$ok-color)
             transition: all .8s
+
             &.active
                 //+opacity(1,background-color,$ok-color)
                 backdrop-filter: blur(4px)
                 visibility: visible
+
                 .score-answers-review
                     transform: none
 
@@ -255,28 +290,37 @@
             border-top-right-radius: 20px
             transform: translateY(100%)
             transition: all .8s ease-out
+
             h2
                 margin-bottom: 12px
                 text-align: center
                 position: relative
                 display: flex
                 font-size: 22px
+
                 svg
                     height: 18px
+
             .subtitle
                 display: none
+
         #answers-list
             height: 90%
             padding-right: 5px
+
         .toggle-answers-review
             display: flex
+
         footer
             width: 100%
             bottom: 0
+
             .btn
                 font-size: 16px
+
             [data-icon='search']
-                +flex-config(center,'','',center)
+                +flex-config(center, '', '', center)
+
                 svg
                     fill: $texts-color
                     margin-right: 10px
@@ -284,6 +328,7 @@
         .restart-sentence,
         .btn.restart
             display: none
+
             &-mobile
                 +flex-config(center)
 

diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index af4d7a866d88b49c3d380e492faf589a49af691d..fa5ef9bec8a4c07549af58185087af48cabdc0f3 100644 (file)
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -13,9 +13,8 @@
                              xml:space="preserve">
                             <style type="text/css">
                                 .circle {
-                                    opacity: 0.16;
                                     fill: none;
-                                    stroke: #FFFFFF;
+                                    stroke: currentColor;
                                     stroke-miterlimit: 10;
                                     enable-background: new;
                                 }