From 3419a4b6d63a025c92b713b443fb1db3902bd1df Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Wed, 13 Nov 2024 22:53:34 +0100 Subject: [PATCH] fix(style): remove duplicated styles --- docs/configuration.md | 4 +- src/assets/components/base.scss | 98 +++------------------------------ 2 files changed, 11 insertions(+), 91 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index a007aa6..d034c25 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -189,14 +189,14 @@ It can be useful when you access your dashboard through a VPN or ssh tunnel for ## Style Options -Homer uses [bulma CSS](https://bulma.io/), which provides a [modifiers syntax](https://bulma.io/documentation/modifiers/syntax/). You'll notice in the config there is a `tagstyle` option. It can be set to any of the bulma modifiers. You'll probably want to use one of these 4 main colors: +Homer uses [bulma CSS](https://bulma.io/), which provides a [modifiers syntax](https://bulma.io/documentation/start/syntax/). You'll notice in the config there is a `tagstyle` option. It can be set to any of the bulma modifiers. You'll probably want to use one of these 4 main colors: - `is-info` (blue) - `is-success` (green) - `is-warning` (yellow) - `is-danger` (red) -You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state. +You can read the [bulma modifiers page](https://bulma.io/documentation/start/syntax/) for other options regarding size, style, or state. ## Theming & customization diff --git a/src/assets/components/base.scss b/src/assets/components/base.scss index 48a28db..f489a29 100644 --- a/src/assets/components/base.scss +++ b/src/assets/components/base.scss @@ -166,89 +166,7 @@ color: var(--highlight-primary); } } - .media.no-subtitle { - display: flex; - align-items: center; - } - .media-left { - margin-inline-end: 0.5rem; - } - - .media-content { - overflow: hidden; - text-overflow: inherit; - } - - .tag { - position: absolute; - bottom: 1rem; - right: -0.2rem; - width: 3px; - overflow: hidden; - transition: all 0.2s ease-out; - padding: 0; - - &:not([class*="is-"]) { - color: #ffffff; - background-color: var(--highlight-secondary); - } - - .tag-text { - display: none; - } - } - - .card { - border: 1px solid transparent; - border-radius: 0.75rem; - box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); - transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; - overflow: visible; - - a { - outline: none; - } - } - - .card:hover { - transform: translate(0, -3px); - - .tag { - width: auto; - padding: 0 0.75em; - - .tag-text { - display: block; - } - } - } - - .card-content { - height: 84px; - padding: 1.1rem; - } - - .layout-vertical { - h2.group-title { - padding-bottom: 0.75rem; - } - - .card { - border-radius: 0; - } - - .column div:first-of-type .card { - border-top-left-radius: 0.75rem; - border-top-right-radius: 0.75rem; - } - - .column div:last-child .card { - border-bottom-left-radius: 0.75rem; - border-bottom-right-radius: 0.75rem; - } - } - .title { font-size: 1.1em; line-height: 1.2em; @@ -284,6 +202,10 @@ display: flex; align-items: center; } + + .media-left { + margin-inline-end: 0.5rem; + } .media-content { overflow: hidden; @@ -291,8 +213,7 @@ } .tag { - color: var(--highlight-secondary); - background-color: var(--highlight-secondary); + color: #ffffff; position: absolute; bottom: 1rem; right: -0.2rem; @@ -300,6 +221,10 @@ overflow: hidden; transition: all 0.2s ease-out; padding: 0; + + &:not([class*="is-"]) { + background-color: var(--highlight-secondary); + } .tag-text { display: none; @@ -323,7 +248,6 @@ .tag { width: auto; - color: #ffffff; padding: 0 0.75em; .tag-text { @@ -437,10 +361,6 @@ } } - .group-subtitle { - - } - .group-logo { float: left; }