Browse Source

[COMPONENTS][CSS] Adding components styling properly.

remotes/upstream/experimental
Eliseu Amaro 7 months ago
parent
commit
d38ad60c76
15 changed files with 101 additions and 133 deletions
  1. +13
    -0
      components/Left/Left.php
  2. +0
    -4
      components/Left/templates/left/view.html.twig
  3. +13
    -0
      components/Right/Right.php
  4. +0
    -4
      components/Right/templates/right/view.html.twig
  5. +1
    -1
      plugins/Cover/Cover.php
  6. +0
    -0
      plugins/Cover/assets/css/cover.css
  7. +56
    -14
      public/assets/default_theme/css/base.css
  8. +0
    -90
      public/assets/default_theme/css/core/opensans.css
  9. +13
    -13
      public/assets/default_theme/css/widgets/feeds.css
  10. +0
    -0
      public/assets/default_theme/css/widgets/settings.css
  11. +0
    -0
      public/components/Left/assets/css/left.css
  12. +0
    -0
      public/components/Right/assets/css/right.css
  13. +2
    -2
      src/Twig/Runtime.php
  14. +3
    -3
      templates/base.html.twig
  15. +0
    -2
      templates/stdgrid.html.twig

+ 13
- 0
components/Left/Left.php View File

@@ -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 View File

@@ -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">

+ 13
- 0
components/Right/Right.php View File

@@ -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 View File

@@ -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">

+ 1
- 1
plugins/Cover/Cover.php View File

@@ -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;
}
}

plugins/Cover/css/cover/cover.css → plugins/Cover/assets/css/cover.css View File


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

@@ -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);
}
}

+ 0
- 90
public/assets/default_theme/css/core/opensans.css View File

@@ -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 View File

@@ -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;
}

public/assets/default_theme/css/core/settings.css → public/assets/default_theme/css/widgets/settings.css View File


public/assets/default_theme/css/components/left.css → public/components/Left/assets/css/left.css View File


public/assets/default_theme/css/components/right.css → public/components/Right/assets/css/right.css View File


+ 2
- 2
src/Twig/Runtime.php View File

@@ -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;
}

/**


+ 3
- 3
templates/base.html.twig View File

@@ -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 %}



+ 0
- 2
templates/stdgrid.html.twig View File

@@ -2,8 +2,6 @@

{% block stylesheets %}
{{ parent() }}
{{ block("stylesheets", "/left/view.html.twig") }}
{{ block("stylesheets", "/right/view.html.twig") }}
{% endblock %}

{% block leftpanel %}


Loading…
Cancel
Save