[COMPONENTS][CSS] Adding components styling properly.
This commit is contained in:
parent
441c411efe
commit
d38ad60c76
|
@ -19,8 +19,21 @@
|
||||||
|
|
||||||
namespace Component\Left;
|
namespace Component\Left;
|
||||||
|
|
||||||
|
use App\Core\Event;
|
||||||
use App\Core\Modules\Component;
|
use App\Core\Modules\Component;
|
||||||
|
|
||||||
class Left extends 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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 %}
|
{% block leftpanel %}
|
||||||
<div class="panel panel-left">
|
<div class="panel panel-left">
|
||||||
<input type="checkbox" id="panel-left-toggle" aria-hidden="true" tabindex="-1">
|
<input type="checkbox" id="panel-left-toggle" aria-hidden="true" tabindex="-1">
|
|
@ -19,8 +19,21 @@
|
||||||
|
|
||||||
namespace Component\Right;
|
namespace Component\Right;
|
||||||
|
|
||||||
|
use App\Core\Event;
|
||||||
use App\Core\Modules\Component;
|
use App\Core\Modules\Component;
|
||||||
|
|
||||||
class Right extends 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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 %}
|
{% block rightpanel %}
|
||||||
<div class="panel panel-right">
|
<div class="panel panel-right">
|
||||||
<input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
|
<input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
|
|
@ -94,7 +94,7 @@ class Cover extends Plugin
|
||||||
*/
|
*/
|
||||||
public function onStartShowStyles(array &$styles): bool
|
public function onStartShowStyles(array &$styles): bool
|
||||||
{
|
{
|
||||||
$styles[] = 'cover/cover.css';
|
$styles[] = 'assets/css/cover.css';
|
||||||
return Event::next;
|
return Event::next;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
@import url("../widgets/buttons.css");
|
@import url("widgets/buttons.css");
|
||||||
@import url("../widgets/sections.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/poppins/poppins.css");
|
||||||
@import url("../../fonts/opensans/opensans.css");
|
@import url("../fonts/opensans/opensans.css");
|
||||||
|
|
||||||
@import url("feed.css");
|
|
||||||
@import url("settings.css");
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* FONTS */
|
/* FONTS */
|
||||||
|
@ -46,7 +45,7 @@
|
||||||
|
|
||||||
.bg {
|
.bg {
|
||||||
background-color: var(--bg1);
|
background-color: var(--bg1);
|
||||||
background-image: url("../../images/background_dark.png");
|
background-image: url("../images/background_dark.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
body:after {
|
body:after {
|
||||||
|
@ -64,7 +63,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
background-image: url("../../images/select_drop_dark.png") !important;
|
background-image: url("../images/select_drop_dark.png") !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -85,11 +84,11 @@
|
||||||
|
|
||||||
.bg {
|
.bg {
|
||||||
background-color: var(--bg1);
|
background-color: var(--bg1);
|
||||||
background-image: url(../../images/background_light.png);
|
background-image: url(../images/background_light.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
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-left-toggle:checked ~ .panel-content,
|
||||||
#panel-right-toggle:checked ~ .panel-content,
|
#panel-right-toggle:checked ~ .panel-content,
|
||||||
a[id|="anchor"]:target ~ .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) {
|
@media (prefers-color-scheme: light) {
|
||||||
#panel-left-toggle:checked ~ .panel-content,
|
#panel-left-toggle:checked ~ .panel-content,
|
||||||
#panel-right-toggle:checked ~ .panel-content,
|
#panel-right-toggle:checked ~ .panel-content,
|
||||||
a[id|="anchor"]:target ~ .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);
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -123,24 +123,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.favourite-button-container {
|
.favourite-button-container {
|
||||||
-webkit-mask-image: url("../icons/heart.svg") !important;
|
-webkit-mask-image: url("../../icons/heart.svg") !important;
|
||||||
-o-mask-image: url("../icons/heart.svg") !important;
|
-o-mask-image: url("../../icons/heart.svg") !important;
|
||||||
-moz-mask-image: url("../icons/heart.svg") !important;
|
-moz-mask-image: url("../../icons/heart.svg") !important;
|
||||||
mask-image: url("../icons/heart.svg") !important;
|
mask-image: url("../../icons/heart.svg") !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reply-button-container {
|
.reply-button-container {
|
||||||
-webkit-mask-image: url("../icons/reply.svg") !important;
|
-webkit-mask-image: url("../../icons/reply.svg") !important;
|
||||||
-o-mask-image: url("../icons/reply.svg") !important;
|
-o-mask-image: url("../../icons/reply.svg") !important;
|
||||||
-moz-mask-image: url("../icons/reply.svg") !important;
|
-moz-mask-image: url("../../icons/reply.svg") !important;
|
||||||
mask-image: url("../icons/reply.svg") !important;
|
mask-image: url("../../icons/reply.svg") !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeat-button-container {
|
.repeat-button-container {
|
||||||
-webkit-mask-image: url("../icons/repeat.svg") !important;
|
-webkit-mask-image: url("../../icons/repeat.svg") !important;
|
||||||
-o-mask-image: url("../icons/repeat.svg") !important;
|
-o-mask-image: url("../../icons/repeat.svg") !important;
|
||||||
-moz-mask-image: url("../icons/repeat.svg") !important;
|
-moz-mask-image: url("../../icons/repeat.svg") !important;
|
||||||
mask-image: url("../icons/repeat.svg") !important;
|
mask-image: url("../../icons/repeat.svg") !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-actions-unset {
|
.note-actions-unset {
|
||||||
|
@ -169,7 +169,7 @@
|
||||||
|
|
||||||
border-radius: var(--unit-size);
|
border-radius: var(--unit-size);
|
||||||
background-color: var(--translucent);
|
background-color: var(--translucent);
|
||||||
padding: var(--smaller-size);
|
padding: var(--unit-size);
|
||||||
|
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
}
|
}
|
|
@ -85,8 +85,8 @@ class Runtime implements RuntimeExtensionInterface, EventSubscriberInterface
|
||||||
public function getShowStylesheets()
|
public function getShowStylesheets()
|
||||||
{
|
{
|
||||||
$styles = [];
|
$styles = [];
|
||||||
Event::handle('ShowStyles', [&$styles]);
|
Event::handle('EndShowStyles', [&$styles]);
|
||||||
return implode("\n", $styles);
|
return $styles;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -15,11 +15,11 @@
|
||||||
<link rel="preload" href="{{ asset('assets/default_theme/css/reset.css') }}" as="style" type="text/css">
|
<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="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="preload" href="{{ asset('assets/default_theme/css/base.css') }}" as="style" type="text/css">
|
||||||
<link rel="stylesheet" href="{{ asset('assets/default_theme/css/core/base.css') }}">
|
<link rel="stylesheet" href="{{ asset('assets/default_theme/css/base.css') }}">
|
||||||
|
|
||||||
{% for stylesheet in show_stylesheets() %}
|
{% 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 %}
|
{% endfor %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
|
@ -2,8 +2,6 @@
|
||||||
|
|
||||||
{% block stylesheets %}
|
{% block stylesheets %}
|
||||||
{{ parent() }}
|
{{ parent() }}
|
||||||
{{ block("stylesheets", "/left/view.html.twig") }}
|
|
||||||
{{ block("stylesheets", "/right/view.html.twig") }}
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block leftpanel %}
|
{% block leftpanel %}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user