[COMPONENTS][CSS] Adding components styling properly.

components/Left/Left.php

@@ -19,8 +19,21 @@
 
 namespace Component\Left;
 
+use App\Core\Event;
 use App\Core\Modules\Component;
 
 class Left extends Component
 {
+    /**
+     * Output our dedicated stylesheet
+     *
+     * @param array $styles stylesheets path
+     *
+     * @return bool hook value; true means continue processing, false means stop.
+     */
+    public function onEndShowStyles(array &$styles): bool
+    {
+        $styles[] = 'components/Left/assets/css/left.css';
+        return Event::next;
+    }
 }

templates/left/view.html.twig → components/Left/templates/left/view.html.twig

@@ -1,7 +1,3 @@
-{% block stylesheets %}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/components/left.css') }}">
-{% endblock stylesheets %}
-
 {% block leftpanel %}
 <div class="panel panel-left">
     <input type="checkbox" id="panel-left-toggle" aria-hidden="true" tabindex="-1">

components/Right/Right.php

@@ -19,8 +19,21 @@
 
 namespace Component\Right;
 
+use App\Core\Event;
 use App\Core\Modules\Component;
 
 class Right extends Component
 {
+    /**
+     * Output our dedicated stylesheet
+     *
+     * @param array $styles stylesheets path
+     *
+     * @return bool hook value; true means continue processing, false means stop.
+     */
+    public function onEndShowStyles(array &$styles): bool
+    {
+        $styles[] = 'components/Right/assets/css/right.css';
+        return Event::next;
+    }
 }

templates/right/view.html.twig → components/Right/templates/right/view.html.twig

@@ -1,7 +1,3 @@
-{% block stylesheets %}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/components/right.css') }}">
-{% endblock stylesheets %}
-
 {% block rightpanel %}
 <div class="panel panel-right">
     <input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">

plugins/Cover/Cover.php

@@ -94,7 +94,7 @@ class Cover extends Plugin
      */
     public function onStartShowStyles(array &$styles): bool
     {
-        $styles[] = 'cover/cover.css';
+        $styles[] = 'assets/css/cover.css';
         return Event::next;
     }
 }

public/assets/default_theme/css/core/base.css → public/assets/default_theme/css/base.css

@@ -1,11 +1,10 @@
-@import url("../widgets/buttons.css");
-@import url("../widgets/sections.css");
+@import url("widgets/buttons.css");
+@import url("widgets/sections.css");
+@import url("widgets/feeds.css");
+@import url("widgets/settings.css");
 
-@import url("../../fonts/poppins/poppins.css");
-@import url("../../fonts/opensans/opensans.css");
-
-@import url("feed.css");
-@import url("settings.css");
+@import url("../fonts/poppins/poppins.css");
+@import url("../fonts/opensans/opensans.css");
 
 :root {
     /* FONTS */
@@ -46,7 +45,7 @@
 
     .bg {
         background-color: var(--bg1);
-        background-image: url("../../images/background_dark.png");
+        background-image: url("../images/background_dark.png");
     }
 
     body:after {
@@ -64,7 +63,7 @@
     }
 
     select {
-        background-image: url("../../images/select_drop_dark.png") !important;
+        background-image: url("../images/select_drop_dark.png") !important;
     }
 }
 
@@ -85,11 +84,11 @@
 
     .bg {
         background-color: var(--bg1);
-        background-image: url(../../images/background_light.png);
+        background-image: url(../images/background_light.png);
     }
 
     select {
-        background-image: url("../../images/select_drop_light.png") !important;
+        background-image: url("../images/select_drop_light.png") !important;
     }
 }
 
@@ -324,14 +323,57 @@ and (max-width: 1280px) {
         #panel-left-toggle:checked ~ .panel-content,
         #panel-right-toggle:checked ~ .panel-content,
         a[id|="anchor"]:target ~ .panel-content {
-            background-image: url(../../images/background_dark.png);
+            background-image: url(../images/background_dark.png);
         }
     }
     @media (prefers-color-scheme: light) {
         #panel-left-toggle:checked ~ .panel-content,
         #panel-right-toggle:checked ~ .panel-content,
         a[id|="anchor"]:target ~ .panel-content {
-            background-image: url(../../images/background_light.png);
+            background-image: url(../images/background_light.png);
         }
     }
-}
+}
+
+/* ANIMATIONS */
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    100% {
+        opacity: unset;
+        transform: none;
+    }
+}
+
+@keyframes fadeOut {
+    100% {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    0% {
+        opacity: unset;
+        transform: none;
+    }
+}
+
+@keyframes highlight {
+    0% {
+        box-shadow: initial;
+        border-radius: var(--unit-size);
+    }
+
+    50% {
+        border-radius: var(--unit-size);
+        box-shadow: inset 0 20px 40px var(--white);
+        transition: box-shadow 0.3s ease-in-out;
+    }
+
+    100% {
+        box-shadow: initial;
+        border-radius: var(--unit-size);
+    }
+}

public/assets/default_theme/css/core/opensans.css

@@ -1,90 +0,0 @@
-@font-face {
-    font-family: 'Open Sans';
-    src: local('Open Sans Italic'), local('OpenSans-Italic'),
-        url('OpenSans-Italic.woff') format('woff');
-    font-weight: 900;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: local('Open Sans Light'), local('OpenSans-Light'),
-        url('OpenSans-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: local('Open Sans Regular'), local('OpenSans-Regular'),
-        url('OpenSans-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
-        url('OpenSans-BoldItalic.woff') format('woff');
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
-        url('OpenSans-SemiBoldItalic.woff') format('woff');
-    font-weight: 600;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
-        url('OpenSans-ExtraBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: local('Open Sans Bold'), local('OpenSans-Bold'),
-        url('OpenSans-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-        url('OpenSans-SemiBold.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: local('Open Sans Italic'), local('OpenSans-Italic'),
-        url('OpenSans-Italic.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Open Sans';
-    src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
-        url('OpenSans-LightItalic.woff') format('woff');
-    font-weight: 300;
-    font-style: italic;
-    font-display: swap;
-}
-

public/assets/default_theme/css/core/feed.css → public/assets/default_theme/css/widgets/feeds.css

@@ -123,24 +123,24 @@
 }
 
 .favourite-button-container {
-    -webkit-mask-image: url("../icons/heart.svg") !important;
-    -o-mask-image: url("../icons/heart.svg") !important;
-    -moz-mask-image: url("../icons/heart.svg") !important;
-    mask-image: url("../icons/heart.svg") !important;
+    -webkit-mask-image: url("../../icons/heart.svg") !important;
+    -o-mask-image: url("../../icons/heart.svg") !important;
+    -moz-mask-image: url("../../icons/heart.svg") !important;
+    mask-image: url("../../icons/heart.svg") !important;
 }
 
 .reply-button-container {
-    -webkit-mask-image: url("../icons/reply.svg") !important;
-    -o-mask-image: url("../icons/reply.svg") !important;
-    -moz-mask-image: url("../icons/reply.svg") !important;
-    mask-image: url("../icons/reply.svg") !important;
+    -webkit-mask-image: url("../../icons/reply.svg") !important;
+    -o-mask-image: url("../../icons/reply.svg") !important;
+    -moz-mask-image: url("../../icons/reply.svg") !important;
+    mask-image: url("../../icons/reply.svg") !important;
 }
 
 .repeat-button-container {
-    -webkit-mask-image: url("../icons/repeat.svg") !important;
-    -o-mask-image: url("../icons/repeat.svg") !important;
-    -moz-mask-image: url("../icons/repeat.svg") !important;
-    mask-image: url("../icons/repeat.svg") !important;
+    -webkit-mask-image: url("../../icons/repeat.svg") !important;
+    -o-mask-image: url("../../icons/repeat.svg") !important;
+    -moz-mask-image: url("../../icons/repeat.svg") !important;
+    mask-image: url("../../icons/repeat.svg") !important;
 }
 
 .note-actions-unset {
@@ -169,7 +169,7 @@
 
     border-radius: var(--unit-size);
     background-color: var(--translucent);
-    padding: var(--smaller-size);
+    padding: var(--unit-size);
 
     align-self: flex-start;
 }

src/Twig/Runtime.php

@@ -85,8 +85,8 @@ class Runtime implements RuntimeExtensionInterface, EventSubscriberInterface
     public function getShowStylesheets()
     {
         $styles = [];
-        Event::handle('ShowStyles', [&$styles]);
-        return implode("\n", $styles);
+        Event::handle('EndShowStyles', [&$styles]);
+        return $styles;
     }
 
     /**

templates/base.html.twig

@@ -15,11 +15,11 @@
         <link rel="preload" href="{{ asset('assets/default_theme/css/reset.css') }}" as="style" type="text/css">
         <link rel="stylesheet" href="{{ asset('assets/default_theme/css/reset.css') }}">
 
-        <link rel="preload" href="{{ asset('assets/default_theme/css/core/base.css') }}" as="style" type="text/css">
-        <link rel="stylesheet" href="{{ asset('assets/default_theme/css/core/base.css') }}">
+        <link rel="preload" href="{{ asset('assets/default_theme/css/base.css') }}" as="style" type="text/css">
+        <link rel="stylesheet" href="{{ asset('assets/default_theme/css/base.css') }}">
 
         {% for stylesheet in show_stylesheets() %}
-            <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/' ~ stylesheet) }}">
+            <link rel='stylesheet' type='text/css' href="{{ asset(stylesheet) }}">
         {% endfor %}
     {% endblock %}
 

templates/stdgrid.html.twig

@@ -2,8 +2,6 @@
 
 {% block stylesheets %}
     {{ parent() }}
-    {{ block("stylesheets", "/left/view.html.twig") }}
-    {{ block("stylesheets", "/right/view.html.twig") }}
 {% endblock %}
 
 {% block leftpanel %}