diff --git a/components/Right/Right.php b/components/Right/Right.php
index bc60b76806..284e8c5823 100644
--- a/components/Right/Right.php
+++ b/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;
+ }
}
diff --git a/templates/right/view.html.twig b/components/Right/templates/right/view.html.twig
similarity index 91%
rename from templates/right/view.html.twig
rename to components/Right/templates/right/view.html.twig
index 4149d1ff40..ea2f1323b4 100644
--- a/templates/right/view.html.twig
+++ b/components/Right/templates/right/view.html.twig
@@ -1,7 +1,3 @@
-{% block stylesheets %}
-
-{% endblock stylesheets %}
-
{% block rightpanel %}
diff --git a/plugins/Cover/Cover.php b/plugins/Cover/Cover.php
index cd0d5adc87..c343dc3355 100644
--- a/plugins/Cover/Cover.php
+++ b/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;
}
}
diff --git a/plugins/Cover/css/cover/cover.css b/plugins/Cover/assets/css/cover.css
similarity index 100%
rename from plugins/Cover/css/cover/cover.css
rename to plugins/Cover/assets/css/cover.css
diff --git a/public/assets/default_theme/css/core/base.css b/public/assets/default_theme/css/base.css
similarity index 90%
rename from public/assets/default_theme/css/core/base.css
rename to public/assets/default_theme/css/base.css
index df870a18aa..ea08d94a03 100644
--- a/public/assets/default_theme/css/core/base.css
+++ b/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);
}
}
-}
\ No newline at end of file
+}
+
+/* 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);
+ }
+}
diff --git a/public/assets/default_theme/css/core/opensans.css b/public/assets/default_theme/css/core/opensans.css
deleted file mode 100644
index ae550d3e27..0000000000
--- a/public/assets/default_theme/css/core/opensans.css
+++ /dev/null
@@ -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;
-}
-
diff --git a/public/assets/default_theme/css/core/feed.css b/public/assets/default_theme/css/widgets/feeds.css
similarity index 83%
rename from public/assets/default_theme/css/core/feed.css
rename to public/assets/default_theme/css/widgets/feeds.css
index 17dc4bd7c4..3d907dca9d 100644
--- a/public/assets/default_theme/css/core/feed.css
+++ b/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;
}
diff --git a/public/assets/default_theme/css/core/settings.css b/public/assets/default_theme/css/widgets/settings.css
similarity index 100%
rename from public/assets/default_theme/css/core/settings.css
rename to public/assets/default_theme/css/widgets/settings.css
diff --git a/public/assets/default_theme/css/components/left.css b/public/components/Left/assets/css/left.css
similarity index 100%
rename from public/assets/default_theme/css/components/left.css
rename to public/components/Left/assets/css/left.css
diff --git a/public/assets/default_theme/css/components/right.css b/public/components/Right/assets/css/right.css
similarity index 100%
rename from public/assets/default_theme/css/components/right.css
rename to public/components/Right/assets/css/right.css
diff --git a/src/Twig/Runtime.php b/src/Twig/Runtime.php
index 129aa9429b..e1f20390d0 100644
--- a/src/Twig/Runtime.php
+++ b/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;
}
/**
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 23bc7a2c29..dfc30e45ba 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -15,11 +15,11 @@
-
-
+
+
{% for stylesheet in show_stylesheets() %}
-
+
{% endfor %}
{% endblock %}
diff --git a/templates/stdgrid.html.twig b/templates/stdgrid.html.twig
index 00b0567f2a..710555b8ca 100644
--- a/templates/stdgrid.html.twig
+++ b/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 %}