[COMPONENTS][CSS] Adding components styling properly.
This commit is contained in:
parent
441c411efe
commit
d38ad60c76
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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">
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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">
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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 {
|
||||
-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;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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 %}
|
||||
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
{{ block("stylesheets", "/left/view.html.twig") }}
|
||||
{{ block("stylesheets", "/right/view.html.twig") }}
|
||||
{% endblock %}
|
||||
|
||||
{% block leftpanel %}
|
||||
|
|
Loading…
Reference in New Issue
Block a user