Extract noLibrariesWidget theme and use themed line assets
Some checks failed
Build / Initialization (push) Has been cancelled
Build / Code Format Validation (push) Has been cancelled
Build / Linux (Qt6) (push) Has been cancelled
Build / Linux (Qt6 + 7zip) (push) Has been cancelled
Build / macOS (Qt6 Universal) (push) Has been cancelled
Build / Windows x64 (Qt6) (push) Has been cancelled
Build / Windows ARM64 (Qt6) (push) Has been cancelled
Build / Docker amd64 Image (push) Has been cancelled
Build / Docker arm64 Image (push) Has been cancelled
Build / Publish Dev Builds (push) Has been cancelled
Build / Publish Release (push) Has been cancelled
Build / Publish YACReader10 Pre-release Builds (push) Has been cancelled

This commit is contained in:
luisangelsm
2026-03-21 20:55:23 +01:00
parent f65fd08e65
commit 2560174a84
14 changed files with 228 additions and 54 deletions

View File

@ -42,7 +42,7 @@
<file>../images/flow3.png</file>
<file>../images/flow4.png</file>
<file>../images/flow5.png</file>
<file>../images/glowLine.png</file>
<file>../images/glowLine.svg</file>
<file>../images/metadata_dialog/loadCustomCover.svg</file>
<file>../images/import/coversToggle.svg</file>
<file>../images/icon-new.svg</file>
@ -74,7 +74,7 @@
<file>../images/library_dialogs/new.svg</file>
<file>../images/metadata_dialog/nextCoverPage.svg</file>
<file>../images/noLibrariesIcon.svg</file>
<file>../images/noLibrariesLine.png</file>
<file>../images/noLibrariesLine.svg</file>
<file>../images/notCover.png</file>
<file>../images/library_dialogs/openLibrary.svg</file>
<file>../images/metadata_dialog/previousCoverPage.svg</file>
@ -111,13 +111,11 @@
<file>../images/import/updatingIcon.svg</file>
<file>../images/custom_dialog/custom_close_button.svg</file>
<file>../images/whats_new/whatsnew_header.svg</file>
<file>../images/lists/default_0.svg</file>
<file>../images/lists/default_1.svg</file>
<file>../images/lists/default_2.svg</file>
<file>../images/lists/label_template.svg</file>
<file>../images/lists/list.svg</file>
<file>../images/clearSearchNew.svg</file>
<file>../images/iconSearchNew.svg</file>
</qresource>

View File

@ -23,6 +23,8 @@ class YACReaderActivityIndicatorWidget : public QWidget
{
public:
YACReaderActivityIndicatorWidget(QWidget *parent = 0);
void setPixmaps(const QPixmap &normalLine, const QPixmap &glowLine);
public slots:
private:
@ -31,16 +33,11 @@ private:
};
YACReaderActivityIndicatorWidget::YACReaderActivityIndicatorWidget(QWidget *parent)
: QWidget(parent)
: QWidget(parent), normal(nullptr), glow(nullptr)
{
QPixmap line(":/images/noLibrariesLine.png");
QPixmap glowLine(":/images/glowLine.png");
normal = new QLabel(this);
glow = new QLabel(this);
normal->setPixmap(line);
glow->setPixmap(glowLine);
auto layout = new QHBoxLayout();
layout->addWidget(normal, 0, Qt::AlignVCenter);
@ -50,11 +47,6 @@ YACReaderActivityIndicatorWidget::YACReaderActivityIndicatorWidget(QWidget *pare
layout->setContentsMargins(4, 4, 4, 4);
layout->setSpacing(0);
// setFixedHeight(3);
// resize(579,3);
glow->setGeometry(4, 4, glowLine.width(), glowLine.height());
// normal->setGeometry(0,1,579,1);
auto effect = new QGraphicsOpacityEffect();
// effect->setOpacity(1.0);
@ -80,6 +72,13 @@ YACReaderActivityIndicatorWidget::YACReaderActivityIndicatorWidget(QWidget *pare
animation->start();
}
void YACReaderActivityIndicatorWidget::setPixmaps(const QPixmap &normalLine, const QPixmap &glowLine)
{
normal->setPixmap(normalLine);
glow->setPixmap(glowLine);
glow->setGeometry(4, 4, glowLine.width(), glowLine.height());
}
ImportWidget::ImportWidget(QWidget *parent)
: QWidget(parent)
{
@ -88,7 +87,7 @@ ImportWidget::ImportWidget(QWidget *parent)
iconLabel = new QLabel();
auto activityIndicator = new YACReaderActivityIndicatorWidget();
activityIndicator = new YACReaderActivityIndicatorWidget();
text = new QLabel();
textDescription = new QLabel();
@ -399,6 +398,9 @@ void ImportWidget::applyTheme(const Theme &theme)
bottomDecorator->setPixmap(importTheme.bottomCoversDecoration);
bottomDecorator->setFixedHeight(importTheme.bottomCoversDecoration.height());
const auto &noLibrariesWidget = theme.noLibrariesWidget;
activityIndicator->setPixmaps(noLibrariesWidget.noLibrariesLinePixmap, importTheme.glowLinePixmap);
// Apply text colors
updateTextColors();
}

View File

@ -14,6 +14,8 @@
#include <QToolButton>
#include <QWidget>
class YACReaderActivityIndicatorWidget;
class ImportWidget : public QWidget, protected Themable
{
Q_OBJECT
@ -57,6 +59,7 @@ private:
QToolButton *hideButton;
QLabel *topDecorator;
QLabel *bottomDecorator;
YACReaderActivityIndicatorWidget *activityIndicator;
void resizeEvent(QResizeEvent *event) override;
void updateTextColors();

View File

@ -13,9 +13,7 @@ NoLibrariesWidget::NoLibrariesWidget(QWidget *parent)
iconLabel = new QLabel();
QPixmap line(":/images/noLibrariesLine.png");
QLabel *lineLabel = new QLabel();
lineLabel->setPixmap(line);
lineLabel = new QLabel();
text = new QLabel(tr("You don't have any libraries yet"));
text->setStyleSheet("QLabel {font-size:25px;font-weight:bold;}");
@ -75,19 +73,20 @@ NoLibrariesWidget::NoLibrariesWidget(QWidget *parent)
void NoLibrariesWidget::applyTheme(const Theme &theme)
{
auto emptyTheme = theme.emptyContainer;
auto nlwTheme = theme.noLibrariesWidget;
QPalette p(palette());
p.setColor(QPalette::Window, emptyTheme.backgroundColor);
p.setColor(QPalette::Window, nlwTheme.backgroundColor);
setPalette(p);
QPalette textPalette = text->palette();
textPalette.setColor(QPalette::WindowText, emptyTheme.textColor);
textPalette.setColor(QPalette::WindowText, nlwTheme.textColor);
text->setPalette(textPalette);
QPalette descPalette = textDescription->palette();
descPalette.setColor(QPalette::WindowText, emptyTheme.descriptionTextColor);
descPalette.setColor(QPalette::WindowText, nlwTheme.descriptionTextColor);
textDescription->setPalette(descPalette);
iconLabel->setPixmap(emptyTheme.noLibrariesIcon);
iconLabel->setPixmap(nlwTheme.noLibrariesIcon);
lineLabel->setPixmap(nlwTheme.noLibrariesLinePixmap);
}

View File

@ -25,6 +25,7 @@ private:
QLabel *iconLabel;
QLabel *text;
QLabel *textDescription;
QLabel *lineLabel;
};
#endif // NO_LIBRARIES_WIDGET_H

View File

@ -39,9 +39,7 @@
},
"emptyContainer": {
"backgroundColor": "#2a2a2a",
"descriptionTextColor": "#aaaaaa",
"searchIconColor": "#4c4c4c",
"textColor": "#cccccc",
"iconColor": "#4c4c4c",
"titleTextColor": "#cccccc"
},
"gridAndInfoView": {
@ -97,6 +95,7 @@
"coversViewBackgroundColor": "#3a3a3a",
"currentComicTextColor": "#aaaaaa",
"descriptionTextColor": "#aaaaaa",
"glowLineColor": "#ffe100",
"iconCheckedColor": "#aaaaaa",
"iconColor": "#cccccc",
"modeIconColor": "#4a4a4a",
@ -179,6 +178,13 @@
"selectionBackgroundColor": "#2e2e2e",
"textColor": "#dddfdf"
},
"noLibrariesWidget": {
"backgroundColor": "#2a2a2a",
"descriptionTextColor": "#aaaaaa",
"iconColor": "#4c4c4c",
"noLibrariesLineColor": "#a8a8a8",
"textColor": "#cccccc"
},
"readingListIcons": {
"currentlyReadingMainColor": "#ffcc00",
"currentlyReadingMainSelectedColor": "#ffcc00",

View File

@ -39,9 +39,7 @@
},
"emptyContainer": {
"backgroundColor": "#2a2a2a",
"descriptionTextColor": "#aaaaaa",
"searchIconColor": "#4c4c4c",
"textColor": "#cccccc",
"iconColor": "#4c4c4c",
"titleTextColor": "#cccccc"
},
"gridAndInfoView": {
@ -97,6 +95,7 @@
"coversViewBackgroundColor": "#3a3a3a",
"currentComicTextColor": "#aaaaaa",
"descriptionTextColor": "#aaaaaa",
"glowLineColor": "#ffe100",
"iconCheckedColor": "#aaaaaa",
"iconColor": "#cccccc",
"modeIconColor": "#4a4a4a",
@ -179,6 +178,13 @@
"selectionBackgroundColor": "#2e2e2e",
"textColor": "#dddfdf"
},
"noLibrariesWidget": {
"backgroundColor": "#2a2a2a",
"descriptionTextColor": "#aaaaaa",
"iconColor": "#4c4c4c",
"noLibrariesLineColor": "#a8a8a8",
"textColor": "#cccccc"
},
"readingListIcons": {
"currentlyReadingMainColor": "#ffcc00",
"currentlyReadingMainSelectedColor": "#ffcc00",

View File

@ -39,9 +39,7 @@
},
"emptyContainer": {
"backgroundColor": "#ffffff",
"descriptionTextColor": "#565959",
"searchIconColor": "#cccccc",
"textColor": "#495252",
"iconColor": "#cccccc",
"titleTextColor": "#888888"
},
"gridAndInfoView": {
@ -97,6 +95,7 @@
"coversViewBackgroundColor": "#e6e6e6",
"currentComicTextColor": "#565959",
"descriptionTextColor": "#565959",
"glowLineColor": "#ffe100",
"iconCheckedColor": "#565959",
"iconColor": "#495252",
"modeIconColor": "#e6e6e6",
@ -179,6 +178,13 @@
"selectionBackgroundColor": "#333133",
"textColor": "#000000"
},
"noLibrariesWidget": {
"backgroundColor": "#ffffff",
"descriptionTextColor": "#565959",
"iconColor": "#cccccc",
"noLibrariesLineColor": "#a8a8a8",
"textColor": "#495252"
},
"readingListIcons": {
"currentlyReadingMainColor": "#ffcc00",
"currentlyReadingMainSelectedColor": "#ffcc00",

View File

@ -122,11 +122,6 @@ struct EmptyContainerTheme {
QColor backgroundColor;
QString titleLabelQSS;
// For NoLibrariesWidget
QColor textColor;
QColor descriptionTextColor;
QPixmap noLibrariesIcon;
// Search-related icons (themed from search_result.svg)
QPixmap searchingIcon; // For ClassicComicsView searching state
QPixmap noSearchResultsIcon; // For NoSearchResultsWidget empty state
@ -139,6 +134,14 @@ struct EmptyContainerTheme {
QMap<int, QPixmap> emptyLabelIcons; // Keyed by YACReader::LabelColors enum value
};
struct NoLibrariesWidgetTheme {
QColor backgroundColor; // Background of the widget
QColor textColor; // Main title text color
QColor descriptionTextColor; // Description text color
QPixmap noLibrariesIcon; // Icon displayed in the widget
QPixmap noLibrariesLinePixmap; // Themed horizontal line separator
};
struct SidebarTheme {
QColor backgroundColor;
QColor separatorColor;
@ -172,6 +175,7 @@ struct ImportWidgetTheme {
QPixmap importingIcon;
QPixmap updatingIcon;
QIcon coversToggleIcon;
QPixmap glowLinePixmap; // Themed glow line animation
};
struct NavigationTreeThemeTemplates {
@ -491,6 +495,7 @@ struct Theme {
HelpAboutDialogTheme helpAboutDialog;
WhatsNewDialogTheme whatsNewDialog;
EmptyContainerTheme emptyContainer;
NoLibrariesWidgetTheme noLibrariesWidget;
SidebarTheme sidebar;
SidebarIconsTheme sidebarIcons;
LibraryItemTheme libraryItem;

View File

@ -60,11 +60,15 @@ struct EmptyContainerParams {
QColor backgroundColor;
QColor titleTextColor;
// For NoLibrariesWidget
QColor iconColor;
};
struct NoLibrariesWidgetParams {
QColor backgroundColor;
QColor textColor;
QColor descriptionTextColor;
QColor searchIconColor; // Color for search-related icons (replaces #f0f in search_result.svg)
QColor iconColor;
QColor noLibrariesLineColor;
};
struct SidebarParams {
@ -94,6 +98,7 @@ struct ImportWidgetParams {
QColor modeIconColor;
QColor iconColor;
QColor iconCheckedColor;
QColor glowLineColor;
};
struct NavigationTreeParams {
@ -345,6 +350,7 @@ struct ThemeParams {
MetadataScraperDialogParams metadataScraperDialogParams;
HelpAboutDialogTheme helpAboutDialogParams;
EmptyContainerParams emptyContainerParams;
NoLibrariesWidgetParams noLibrariesWidgetParams;
SidebarParams sidebarParams;
SidebarIconsParams sidebarIconsParams;
LibraryItemParams libraryItemParams;
@ -457,21 +463,19 @@ Theme makeTheme(const ThemeParams &params)
theme.emptyContainer.backgroundColor = ec.backgroundColor;
theme.emptyContainer.titleLabelQSS = ect.titleLabelQSS.arg(ec.titleTextColor.name());
theme.emptyContainer.textColor = ec.textColor;
theme.emptyContainer.descriptionTextColor = ec.descriptionTextColor;
theme.emptyContainer.noLibrariesIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/noLibrariesIcon.svg", ec.searchIconColor, params.meta.id), 165, 160, qApp->devicePixelRatio());
{
const qreal dpr = qApp->devicePixelRatio();
theme.emptyContainer.searchingIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/search_result.svg", ec.searchIconColor, params.meta.id, { .suffix = "_searching" }), 97, dpr);
theme.emptyContainer.noSearchResultsIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/search_result.svg", ec.searchIconColor, params.meta.id, { .suffix = "_no_results" }), 239, dpr);
const auto &rli = params.readingListIconsParams;
theme.emptyContainer.emptyFolderIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_folder.svg", ec.searchIconColor, params.meta.id), 319, 243, dpr);
theme.emptyContainer.emptyFavoritesIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_favorites.svg", QColor(0xe84853), params.meta.id), 238, 223, dpr);
theme.emptyContainer.emptyCurrentReadingsIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_current_readings.svg", ec.searchIconColor, params.meta.id), 167, 214, dpr);
theme.emptyContainer.emptyReadingListIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_reading_list.svg", ec.searchIconColor, params.meta.id), 248, 187, dpr);
theme.emptyContainer.searchingIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/search_result.svg", ec.iconColor, params.meta.id, { .suffix = "_searching" }), 97, dpr);
theme.emptyContainer.noSearchResultsIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/search_result.svg", ec.iconColor, params.meta.id, { .suffix = "_no_results" }), 239, dpr);
theme.emptyContainer.emptyFolderIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_folder.svg", ec.iconColor, params.meta.id), 319, 243, dpr);
theme.emptyContainer.emptyFavoritesIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_favorites.svg", rli.favoritesMainColor, params.meta.id), 238, 223, dpr);
theme.emptyContainer.emptyCurrentReadingsIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_current_readings.svg", ec.iconColor, params.meta.id), 167, 214, dpr);
theme.emptyContainer.emptyReadingListIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_reading_list.svg", ec.iconColor, params.meta.id), 248, 187, dpr);
// Generate empty label icons for each label color
const auto &rli = params.readingListIconsParams;
for (int c = YACReader::YRed; c <= YACReader::YDark; ++c) {
auto labelColor = static_cast<YACReader::LabelColors>(c);
auto colorName = YACReader::colorToName(labelColor);
@ -484,6 +488,21 @@ Theme makeTheme(const ThemeParams &params)
}
// end EmptyContainer
// NoLibrariesWidget
const auto &nlw = params.noLibrariesWidgetParams;
const qreal dprNLW = qApp->devicePixelRatio();
theme.noLibrariesWidget.backgroundColor = nlw.backgroundColor;
theme.noLibrariesWidget.textColor = nlw.textColor;
theme.noLibrariesWidget.descriptionTextColor = nlw.descriptionTextColor;
theme.noLibrariesWidget.noLibrariesIcon = renderSvgToPixmap(
recoloredSvgToThemeFile(":/images/noLibrariesIcon.svg", nlw.iconColor, params.meta.id),
165, 160, dprNLW);
theme.noLibrariesWidget.noLibrariesLinePixmap = renderSvgToPixmap(
recoloredSvgToThemeFile(":/images/noLibrariesLine.svg", nlw.noLibrariesLineColor, params.meta.id),
579, 1, dprNLW);
// end NoLibrariesWidget
// Sidebar
const auto &sb = params.sidebarParams;
theme.sidebar.backgroundColor = sb.backgroundColor;
@ -508,6 +527,8 @@ Theme makeTheme(const ThemeParams &params)
theme.importWidget.bottomCoversDecoration = QPixmap(recoloredSvgToThemeFile(":/images/import/importBottomCoversDecoration.svg", iw.coversDecorationBgColor, iw.coversDecorationShadowColor, params.meta.id));
theme.importWidget.importingIcon = QPixmap(recoloredSvgToThemeFile(":/images/import/importingIcon.svg", iw.modeIconColor, params.meta.id));
theme.importWidget.updatingIcon = QPixmap(recoloredSvgToThemeFile(":/images/import/updatingIcon.svg", iw.modeIconColor, params.meta.id));
// glowLine: 579x5 glow line animation
theme.importWidget.glowLinePixmap = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/glowLine.svg", iw.glowLineColor, params.meta.id), 579, 5, qApp->devicePixelRatio());
{
QIcon coversToggle;
const QString normalPath = recoloredSvgToThemeFile(":/images/import/coversToggle.svg", iw.iconColor, params.meta.id);
@ -1005,9 +1026,17 @@ Theme makeTheme(const QJsonObject &json)
auto &ec = p.emptyContainerParams;
ec.backgroundColor = colorFromJson(o, "backgroundColor", ec.backgroundColor);
ec.titleTextColor = colorFromJson(o, "titleTextColor", ec.titleTextColor);
ec.textColor = colorFromJson(o, "textColor", ec.textColor);
ec.descriptionTextColor = colorFromJson(o, "descriptionTextColor", ec.descriptionTextColor);
ec.searchIconColor = colorFromJson(o, "searchIconColor", ec.searchIconColor);
ec.iconColor = colorFromJson(o, "iconColor", ec.iconColor);
}
if (json.contains("noLibrariesWidget")) {
const auto o = json["noLibrariesWidget"].toObject();
auto &nlw = p.noLibrariesWidgetParams;
nlw.backgroundColor = colorFromJson(o, "backgroundColor", nlw.backgroundColor);
nlw.textColor = colorFromJson(o, "textColor", nlw.textColor);
nlw.descriptionTextColor = colorFromJson(o, "descriptionTextColor", nlw.descriptionTextColor);
nlw.iconColor = colorFromJson(o, "iconColor", nlw.iconColor);
nlw.noLibrariesLineColor = colorFromJson(o, "noLibrariesLineColor", nlw.noLibrariesLineColor);
}
if (json.contains("sidebar")) {
@ -1058,6 +1087,7 @@ Theme makeTheme(const QJsonObject &json)
iw.modeIconColor = colorFromJson(o, "modeIconColor", iw.modeIconColor);
iw.iconColor = colorFromJson(o, "iconColor", iw.iconColor);
iw.iconCheckedColor = colorFromJson(o, "iconCheckedColor", iw.iconCheckedColor);
iw.glowLineColor = colorFromJson(o, "glowLineColor", iw.glowLineColor);
}
if (json.contains("serverConfigDialog")) {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 460 B

75
images/glowLine.svg Normal file
View File

@ -0,0 +1,75 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 589 3.5">
<defs>
<style>
.cls-1 {
stroke: url(#linear-gradient);
}
.cls-1, .cls-2, .cls-3 {
fill: none;
stroke-miterlimit: 10;
}
.cls-2 {
stroke: url(#linear-gradient-3);
}
.cls-2, .cls-3 {
stroke-width: 2px;
}
.cls-3 {
stroke: url(#linear-gradient-2);
}
</style>
<linearGradient id="linear-gradient" x1="9.67" y1=".42" x2="588.67" y2=".42" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f0f" stop-opacity=".1"/>
<stop offset=".03" stop-color="#f0f" stop-opacity=".2"/>
<stop offset=".1" stop-color="#f0f" stop-opacity=".41"/>
<stop offset=".17" stop-color="#f0f" stop-opacity=".59"/>
<stop offset=".24" stop-color="#f0f" stop-opacity=".74"/>
<stop offset=".3" stop-color="#f0f" stop-opacity=".85"/>
<stop offset=".37" stop-color="#f0f" stop-opacity=".93"/>
<stop offset=".44" stop-color="#f0f" stop-opacity=".98"/>
<stop offset=".5" stop-color="#f0f"/>
<stop offset=".56" stop-color="#f0f" stop-opacity=".98"/>
<stop offset=".63" stop-color="#f0f" stop-opacity=".93"/>
<stop offset=".7" stop-color="#f0f" stop-opacity=".85"/>
<stop offset=".76" stop-color="#f0f" stop-opacity=".74"/>
<stop offset=".83" stop-color="#f0f" stop-opacity=".59"/>
<stop offset=".9" stop-color="#f0f" stop-opacity=".41"/>
<stop offset=".97" stop-color="#f0f" stop-opacity=".2"/>
<stop offset="1" stop-color="#f0f" stop-opacity=".1"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="9.67" y1="1.92" x2="588.67" y2="1.92" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f0f" stop-opacity="0"/>
<stop offset=".5" stop-color="#f0f"/>
<stop offset="1" stop-color="#f0f" stop-opacity="0"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="9.67" y1="2.92" x2="588.67" y2="2.92" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f0f" stop-opacity="0"/>
<stop offset=".08" stop-color="#f0f" stop-opacity=".01"/>
<stop offset=".15" stop-color="#f0f" stop-opacity=".05"/>
<stop offset=".21" stop-color="#f0f" stop-opacity=".12"/>
<stop offset=".26" stop-color="#f0f" stop-opacity=".21"/>
<stop offset=".32" stop-color="#f0f" stop-opacity=".33"/>
<stop offset=".37" stop-color="#f0f" stop-opacity=".48"/>
<stop offset=".42" stop-color="#f0f" stop-opacity=".66"/>
<stop offset=".47" stop-color="#f0f" stop-opacity=".86"/>
<stop offset=".5" stop-color="#f0f"/>
<stop offset=".53" stop-color="#f0f" stop-opacity=".86"/>
<stop offset=".58" stop-color="#f0f" stop-opacity=".66"/>
<stop offset=".63" stop-color="#f0f" stop-opacity=".48"/>
<stop offset=".68" stop-color="#f0f" stop-opacity=".33"/>
<stop offset=".74" stop-color="#f0f" stop-opacity=".21"/>
<stop offset=".79" stop-color="#f0f" stop-opacity=".12"/>
<stop offset=".85" stop-color="#f0f" stop-opacity=".05"/>
<stop offset=".92" stop-color="#f0f" stop-opacity=".01"/>
<stop offset="1" stop-color="#f0f" stop-opacity="0"/>
</linearGradient>
</defs>
<line class="cls-1" x1="9.67" y1=".42" x2="588.67" y2=".42"/>
<line class="cls-3" x1="9.67" y1="1.92" x2="588.67" y2="1.92"/>
<line class="cls-2" x1="9.67" y1="2.92" x2="588.67" y2="2.92"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 238 B

View File

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 579 1">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
stroke: url(#linear-gradient-2);
stroke-miterlimit: 10;
}
</style>
<linearGradient id="linear-gradient" x1="0" y1=".5" x2="579" y2=".5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f0f" stop-opacity="0"/>
<stop offset="0" stop-color="#f0f" stop-opacity=".04"/>
<stop offset=".02" stop-color="#f0f" stop-opacity=".22"/>
<stop offset=".05" stop-color="#f0f" stop-opacity=".39"/>
<stop offset=".07" stop-color="#f0f" stop-opacity=".53"/>
<stop offset=".1" stop-color="#f0f" stop-opacity=".66"/>
<stop offset=".13" stop-color="#f0f" stop-opacity=".77"/>
<stop offset=".16" stop-color="#f0f" stop-opacity=".85"/>
<stop offset=".2" stop-color="#f0f" stop-opacity=".92"/>
<stop offset=".25" stop-color="#f0f" stop-opacity=".97"/>
<stop offset=".31" stop-color="#f0f" stop-opacity=".99"/>
<stop offset=".5" stop-color="#f0f"/>
<stop offset=".69" stop-color="#f0f" stop-opacity=".99"/>
<stop offset=".75" stop-color="#f0f" stop-opacity=".97"/>
<stop offset=".8" stop-color="#f0f" stop-opacity=".92"/>
<stop offset=".84" stop-color="#f0f" stop-opacity=".85"/>
<stop offset=".87" stop-color="#f0f" stop-opacity=".77"/>
<stop offset=".9" stop-color="#f0f" stop-opacity=".66"/>
<stop offset=".93" stop-color="#f0f" stop-opacity=".53"/>
<stop offset=".95" stop-color="#f0f" stop-opacity=".39"/>
<stop offset=".98" stop-color="#f0f" stop-opacity=".22"/>
<stop offset="1" stop-color="#f0f" stop-opacity=".04"/>
<stop offset="1" stop-color="#f0f" stop-opacity="0"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0" y1=".5" x2="579" y2=".5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f0f" stop-opacity="0"/>
<stop offset=".5" stop-color="#f0f"/>
<stop offset="1" stop-color="#f0f" stop-opacity="0"/>
</linearGradient>
</defs>
<line class="cls-1" y1=".5" x2="579" y2=".5"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB