DolphinQt: Embed custom dark theme for Windows.

This commit is contained in:
Admiral H. Curtiss 2023-07-31 00:32:28 +02:00
parent 5d33f2abd1
commit ea30651cd7
No known key found for this signature in database
GPG Key ID: F051B4C4044F33FB
29 changed files with 635 additions and 0 deletions

View File

@ -363,6 +363,12 @@ add_executable(dolphin-emu
WiiUpdate.h WiiUpdate.h
) )
if (WIN32)
target_sources(dolphin-emu PRIVATE
Styles/Dark/dark.qrc
)
endif()
if (NOT WIN32) if (NOT WIN32)
target_sources(dolphin-emu PRIVATE target_sources(dolphin-emu PRIVATE
QtUtils/SignalDaemon.cpp QtUtils/SignalDaemon.cpp

View File

@ -415,6 +415,10 @@
<ItemGroup> <ItemGroup>
<Natvis Include="qt6.natvis" /> <Natvis Include="qt6.natvis" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<Text Include="Styles\Dark\dark.qss" />
<QtRcc Include="Styles\Dark\dark.qrc" />
</ItemGroup>
<ItemGroup> <ItemGroup>
<ProjectReference Include="$(CoreDir)DolphinLib.vcxproj"> <ProjectReference Include="$(CoreDir)DolphinLib.vcxproj">
<Project>{D79392F7-06D6-4B4B-A39F-4D587C215D3A}</Project> <Project>{D79392F7-06D6-4B4B-A39F-4D587C215D3A}</Project>

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1300" height="1300" viewBox="0 0 1300 1300" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="1200" height="1200" style="stroke:#7e7e7e;stroke-width:100;fill:#505050;" />
<polyline points="250,700 500,950 1100,350" stroke="#7e7e7e" stroke-width="150" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 336 B

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1300" height="1300" viewBox="0 0 1300 1300" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="1200" height="1200" style="stroke:#7e7e7e;stroke-width:100;fill:none;" />
<polyline points="250,700 500,950 1100,350" stroke="#7e7e7e" stroke-width="150" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 333 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1300" height="1300" viewBox="0 0 1300 1300" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="1200" height="1200" style="stroke:#7e7e7e;stroke-width:100;fill:#505050;" />
</svg>

After

Width:  |  Height:  |  Size: 241 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1300" height="1300" viewBox="0 0 1300 1300" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="1200" height="1200" style="stroke:#7e7e7e;stroke-width:100;fill:none;" />
</svg>

After

Width:  |  Height:  |  Size: 238 B

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1300" height="1300" viewBox="0 0 1300 1300" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="1200" height="1200" style="stroke:#7e7e7e;stroke-width:100;fill:#505050;" />
<rect x="350" y="350" width="600" height="600" style="stroke:#7e7e7e;stroke-width:100;fill:#7e7e7e;" />
</svg>

After

Width:  |  Height:  |  Size: 345 B

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1300" height="1300" viewBox="0 0 1300 1300" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="1200" height="1200" style="stroke:#7e7e7e;stroke-width:100;fill:none;" />
<rect x="350" y="350" width="600" height="600" style="stroke:#7e7e7e;stroke-width:100;fill:#7e7e7e;" />
</svg>

After

Width:  |  Height:  |  Size: 342 B

View File

@ -0,0 +1,30 @@
<RCC>
<qresource prefix="/dolphin_dark_win">
<file>dark.qss</file>
<file>checkbox-checked.svg</file>
<file>checkbox-checked-disabled.svg</file>
<file>checkbox-empty.svg</file>
<file>checkbox-empty-disabled.svg</file>
<file>checkbox-half.svg</file>
<file>checkbox-half-disabled.svg</file>
<file>dockwidget-close.svg</file>
<file>dockwidget-undock.svg</file>
<file>down-triangle.svg</file>
<file>down-triangle-spinbox.svg</file>
<file>dropdown-arrow.svg</file>
<file>left-triangle-tabbar.svg</file>
<file>radiobutton-checked.svg</file>
<file>radiobutton-checked-disabled.svg</file>
<file>radiobutton-empty.svg</file>
<file>radiobutton-empty-disabled.svg</file>
<file>right-triangle-tabbar.svg</file>
<file>scrollbar-arrow-down.svg</file>
<file>scrollbar-arrow-left.svg</file>
<file>scrollbar-arrow-right.svg</file>
<file>scrollbar-arrow-up.svg</file>
<file>table-header-sort-arrow-down.svg</file>
<file>table-header-sort-arrow-up.svg</file>
<file>up-triangle.svg</file>
<file>up-triangle-spinbox.svg</file>
</qresource>
</RCC>

View File

@ -0,0 +1,487 @@
/*
Theme for a look and feel like our default Windows theme, but dark
*/
* {
color: #dcdcdc;
}
*:disabled {
color: #7e7e7e;
}
/*
window title bars apparently can't be styled
would be #000000 for active, #2b2b2b for background
*/
QMenu {
border: 1px solid #7e7e7e;
}
QMenuBar {
background-color: #202020;
color: #dcdcdc;
border: 0px;
}
QMenu {
background-color: #202020;
color: #dcdcdc;
border: 1px solid #7e7e7e;
}
QMenuBar::item {
background-color: #202020;
color: #dcdcdc;
border: 0px;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 2px;
margin: 0px;
}
QMenuBar {
border-color: #404040;
}
QMenu::item {
background-color: #202020;
color: #dcdcdc;
border: 0px;
padding-left: 8px;
padding-right: 32px;
padding-top: 4px;
padding-bottom: 4px;
margin: 0px;
}
QMenuBar::item:hover, QMenuBar::item:selected, QMenu::item:hover, QMenu::item:selected {
background-color: #404040;
color: #dcdcdc;
}
QMenuBar::item:disabled, QMenu::item:disabled {
color: #7e7e7e;
}
QMenu::separator {
height: 1px;
background-color: #7e7e7e;
margin-left: 2px;
margin-right: 2px;
margin-top: 5px;
margin-bottom: 5px;
}
QWidget {
background-color: #202020;
}
QColumnView, QListView, QTableView, QTableWidget, QTreeView {
background-color: #202020;
alternate-background-color: #303030;
border: 1px solid #7e7e7e;
selection-background-color: #505050; /* #202050; */
gridline-color: #606060;
}
/*
would be consistent with Explorer, but Qt keeps the focus color even if you click away from the item, which is confusing
QColumnView::item:focus, QListView::item:focus, QTableView::item:focus, QTableWidget::item:focus, QTreeView::item:focus {
background-color: #606060;
}
*/
QHeaderView::section {
background-color: #202020;
border: 0px;
border-right: 1px solid #7e7e7e;
padding: 0px;
text-align: right;
/*
this is a hack, Qt is extremely convinced that the sort arrow belongs on the right side
of the header and will reserve space for it there. so this applies that same space to the left
so the text is still centered correctly.
*/
padding-left: 10px;
}
QHeaderView::section:last {
border-right: 0px;
}
QHeaderView::section:hover, QHeaderView::section:checked {
background-color: #404040;
}
QHeaderView::down-arrow {
subcontrol-origin: margin;
subcontrol-position: top center;
image: url(:/dolphin_dark_win/table-header-sort-arrow-down.svg);
width: 10px;
height: 7px;
background: transparent;
}
QHeaderView::up-arrow {
subcontrol-origin: margin;
subcontrol-position: top center;
image: url(:/dolphin_dark_win/table-header-sort-arrow-up.svg);
width: 10px;
height: 7px;
background: transparent;
}
QTabWidget::pane {
border: 1px solid #7e7e7e;
top: -1px; /* move border behind tabs */
}
QTabWidget::tab-bar {
left: 2px; /* leave space on the side of the tabs */
}
QTabBar {
/* The outline on the focused tab has an incorrect position and as far as I can tell there's no way to move it.
So as a hack, remove it and apply an underline to the text instead. */
outline: 0px;
}
QTabBar::tab {
background-color: #303030;
border-left: 1px solid #7e7e7e;
border-right: 1px solid #7e7e7e;
border-top: 1px solid #7e7e7e;
border-bottom: 1px solid #7e7e7e;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 9px;
padding-right: 10px;
margin-right: -1px; /* so adjacent tab borders overlap */
}
QTabBar::tab:only-one {
margin-right: 0px;
}
QTabBar::tab:last {
margin-right: 0px;
}
QTabBar::tab:hover {
background-color: #404040;
}
QTabBar::tab:selected {
border-bottom: 0px;
background-color: #202020;
padding-bottom: 1px;
}
QTabBar::tab:focus {
text-decoration: underline;
}
QTabBar::tab:!selected {
margin-top: 2px;
}
QDockWidget {
background-color: #404040;
titlebar-close-icon: url(:/dolphin_dark_win/dockwidget-close.svg);
titlebar-normal-icon: url(:/dolphin_dark_win/dockwidget-undock.svg);
}
QPushButton, QToolButton {
background-color: #303030;
border: 1px solid #7e7e7e;
padding: 2px;
min-width: 67px;
}
QPushButton:hover, QToolButton:hover {
background-color: #404040;
}
QPushButton:focus, QToolButton:focus {
background-color: #404040;
}
QPushButton:disabled, QToolButton:disabled {
background-color: #505050;
}
/* the dropdownarrow on the right of the button in menu popup mode */
QToolButton[popupMode="1"] {
padding-right: 19px;
}
QToolButton::menu-button {
border: 0px;
border-left: 1px solid #7e7e7e;
width: 18px;
}
QToolButton::menu-arrow {
image: url(:/dolphin_dark_win/down-triangle.svg);
width: 14px;
}
/* the icon bar at the top of the main window */
QToolBar {
border: 0px;
}
QToolBar QToolButton {
border: 0px;
padding: 0px;
padding-left: 3px;
padding-right: 2px;
min-width: 50px;
background-color: #202020;
}
QToolBar QToolButton:hover {
background-color: #404040;
}
QToolBar QToolButton:focus {
background-color: #404040;
}
QToolBar QToolButton:disabled {
background-color: #202020;
}
QToolBar::separator {
min-width: 0px;
width: 1px;
margin-left: 3px;
margin-right: 2px;
background-color: #7e7e7e;
}
QGroupBox {
border: 1px solid #7e7e7e;
margin-top: 9px;
padding-top: 7px;
padding-bottom: 0px;
padding-left: 1px;
padding-right: 1px;
}
QGroupBox::title {
subcontrol-origin: margin;
subcontrol-position: top left;
left: 9px;
padding-top: 1px;
min-width: 0px;
}
QLineEdit, QTextEdit {
border: 1px solid #7e7e7e;
}
QLineEdit:disabled, QTextEdit:disabled {
background-color: #505050;
}
QComboBox {
background-color: #303030;
border: 1px solid #7e7e7e;
margin: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 1px;
}
QComboBox:disabled {
background-color: #505050;
}
QComboBox:selected {
background-color: #404040;
}
QComboBox:editable {
background-color: #202020;
}
QComboBox::drop-down {
border: 0px;
}
QComboBox::down-arrow {
image: url(:/dolphin_dark_win/dropdown-arrow.svg);
height: 10px;
width: 15px;
}
QComboBox QAbstractItemView {
background-color: #303030;
selection-background-color: #404040;
border: 1px solid #7e7e7e;
padding: 0px;
margin: 0px;
outline: 0px;
}
QComboBox QAbstractItemView::item:selected {
color: #dcdcdc;
background-color: #404040;
}
QComboBox QAbstractItemView::item:last {
border: 0px;
}
QScrollBar:vertical {
border: 0px;
background: #303030;
width: 15px;
margin: 15px 0px;
}
QScrollBar::handle:vertical { /* the bar in the middle */
border: 0px;
background: #606060;
min-height: 20px;
}
QScrollBar::add-line:vertical { /* the down button at the bottom */
border: 0px;
background: #303030;
height: 15px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical { /* the up button at the top */
border: 0px;
background: #303030;
height: 15px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { /* the area between the bar and the up/down buttons */
border: 0px;
background: none;
}
QScrollBar::up-arrow:vertical {
image: url(:/dolphin_dark_win/scrollbar-arrow-up.svg);
height: 15px;
}
QScrollBar::down-arrow:vertical {
image: url(:/dolphin_dark_win/scrollbar-arrow-down.svg);
height: 15px;
}
QScrollBar:horizontal {
border: 0px;
background: #303030;
height: 15px;
margin: 0px 15px;
}
QScrollBar::handle:horizontal { /* the bar in the middle */
border: 0px;
background: #606060;
min-width: 20px;
}
QScrollBar::add-line:horizontal { /* the right button */
border: 0px;
background: #303030;
width: 15px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal { /* the left button */
border: 0px;
background: #303030;
width: 15px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal { /* the area between the bar and the left/right buttons */
border: 0px;
background: none;
}
QScrollBar::left-arrow:horizontal {
image: url(:/dolphin_dark_win/scrollbar-arrow-left.svg);
width: 15px;
}
QScrollBar::right-arrow:horizontal {
image: url(:/dolphin_dark_win/scrollbar-arrow-right.svg);
width: 15px;
}
QSpinBox, QDateEdit, QDateTimeEdit, QTimeEdit, QDoubleSpinBox {
border: 1px solid #7e7e7e;
padding-right: 15px;
}
QSpinBox:disabled, QDateEdit:disabled, QDateTimeEdit:disabled, QTimeEdit:disabled, QDoubleSpinBox:disabled {
background-color: #505050;
}
QSpinBox::up-button, QDateEdit::up-button, QDateTimeEdit::up-button, QTimeEdit::up-button, QDoubleSpinBox::up-button {
border: 1px transparent;
subcontrol-origin: border;
subcontrol-position: top right;
width: 16px;
}
QSpinBox::down-button, QDateEdit::down-button, QDateTimeEdit::down-button, QTimeEdit::down-button, QDoubleSpinBox::down-button {
border: 1px transparent;
subcontrol-origin: border;
subcontrol-position: bottom right;
width: 16px;
}
QSpinBox::up-arrow, QDateEdit::up-arrow, QDateTimeEdit::up-arrow, QTimeEdit::up-arrow, QDoubleSpinBox::up-arrow {
image: url(:/dolphin_dark_win/up-triangle-spinbox.svg);
width: 14px;
height: 7px;
}
QSpinBox::down-arrow, QDateEdit::down-arrow, QDateTimeEdit::down-arrow, QTimeEdit::down-arrow, QDoubleSpinBox::down-arrow {
image: url(:/dolphin_dark_win/down-triangle-spinbox.svg);
width: 14px;
height: 7px;
}
/*
QSlider ticks break if you try to style the groove.
https://stackoverflow.com/questions/27531542/tick-marks-disappear-on-styled-qslider
https://bugreports.qt.io/browse/QTBUG-3564 (yes that's from 2009 and it's still accurate)
Truly bizarre. I'll just refrain from styling it from now...
*/
QSlider::handle {
background-color: #dcdcdc;
}
QSlider::handle:disabled {
background-color: #7e7e7e;
}
QCheckBox {
padding: 2px 0px;
}
QCheckBox::indicator {
padding: 0px;
margin: 0px;
border: 0px;
width: 13px;
height: 13px;
}
QCheckBox::indicator:unchecked {
image: url(:/dolphin_dark_win/checkbox-empty.svg);
}
QCheckBox::indicator:unchecked:disabled {
image: url(:/dolphin_dark_win/checkbox-empty-disabled.svg);
}
QCheckBox::indicator:checked {
image: url(:/dolphin_dark_win/checkbox-checked.svg);
}
QCheckBox::indicator:checked:disabled {
image: url(:/dolphin_dark_win/checkbox-checked-disabled.svg);
}
QCheckBox::indicator:indeterminate {
image: url(:/dolphin_dark_win/checkbox-half.svg);
}
QCheckBox::indicator:indeterminate:disabled {
image: url(:/dolphin_dark_win/checkbox-half-disabled.svg);
}
QRadioButton {
padding: 2px 0px;
}
QRadioButton::indicator {
padding: 0px;
margin: 0px;
border: 0px;
width: 13px;
height: 13px;
}
QRadioButton::indicator:unchecked {
image: url(:/dolphin_dark_win/radiobutton-empty.svg);
}
QRadioButton::indicator:unchecked:disabled {
image: url(:/dolphin_dark_win/radiobutton-empty-disabled.svg);
}
QRadioButton::indicator:checked {
image: url(:/dolphin_dark_win/radiobutton-checked.svg);
}
QRadioButton::indicator:checked:disabled {
image: url(:/dolphin_dark_win/radiobutton-checked-disabled.svg);
}
QListView::indicator:unchecked {
image: url(:/dolphin_dark_win/checkbox-empty.svg);
}
QListView::indicator:checked {
image: url(:/dolphin_dark_win/checkbox-checked.svg);
}
QListView::indicator:indeterminate {
image: url(:/dolphin_dark_win/checkbox-half.svg);
}
QTabBar QToolButton {
background-color: #202020;
min-width: 0px;
}
QTabBar QToolButton::left-arrow {
image: url(:/dolphin_dark_win/left-triangle-tabbar.svg);
}
QTabBar QToolButton::right-arrow {
image: url(:/dolphin_dark_win/right-triangle-tabbar.svg);
}

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1300" height="1300" viewBox="0 0 1300 1300" xmlns="http://www.w3.org/2000/svg">
<line x1="100" y1="100" x2="1200" y2="1200" stroke="#7e7e7e" stroke-width="100" />
<line x1="100" y1="1200" x2="1200" y2="100" stroke="#7e7e7e" stroke-width="100" />
</svg>

After

Width:  |  Height:  |  Size: 303 B

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1300" height="1300" viewBox="0 0 1300 1300" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="350" width="900" height="900" style="stroke:#7e7e7e;stroke-width:100;fill:none;" />
<polyline points="350,350 350,50 1250,50 1250,950 950,950" stroke="#7e7e7e" stroke-width="100" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 347 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="40" viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<polyline points="20,5 50,35 80,5" fill="#dcdcdc" />
</svg>

After

Width:  |  Height:  |  Size: 184 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="20,40 50,70 80,40" fill="#dcdcdc" />
</svg>

After

Width:  |  Height:  |  Size: 188 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="20,50 50,80 80,50" stroke="#dcdcdc" stroke-width="15" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 220 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="40" height="100" viewBox="0 0 40 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="35,20 5,50 35,80" fill="#dcdcdc" />
</svg>

After

Width:  |  Height:  |  Size: 185 B

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<circle cx="500" cy="500" r="450" style="stroke:#7e7e7e;stroke-width:100;fill:#505050;" />
<circle cx="500" cy="500" r="250" style="fill:#7e7e7e;" />
</svg>

After

Width:  |  Height:  |  Size: 287 B

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<circle cx="500" cy="500" r="450" style="stroke:#7e7e7e;stroke-width:100;fill:none;" />
<circle cx="500" cy="500" r="250" style="fill:#7e7e7e;" />
</svg>

After

Width:  |  Height:  |  Size: 284 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<circle cx="500" cy="500" r="450" style="stroke:#7e7e7e;stroke-width:100;fill:#505050;" />
</svg>

After

Width:  |  Height:  |  Size: 228 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<circle cx="500" cy="500" r="450" style="stroke:#7e7e7e;stroke-width:100;fill:none;" />
</svg>

After

Width:  |  Height:  |  Size: 225 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="40" height="100" viewBox="0 0 40 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="5,20 35,50 5,80" fill="#dcdcdc" />
</svg>

After

Width:  |  Height:  |  Size: 184 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="25,35 50,60 75,35" stroke="#dcdcdc" stroke-width="15" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 220 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="65,25 40,50 65,75" stroke="#dcdcdc" stroke-width="15" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 220 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="35,25 60,50 35,75" stroke="#dcdcdc" stroke-width="15" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 220 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="25,65 50,40 75,65" stroke="#dcdcdc" stroke-width="15" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 220 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="60" height="50" viewBox="0 0 60 50" xmlns="http://www.w3.org/2000/svg">
<polyline points="5,10 30,35 55,10" stroke="#dcdcdc" stroke-width="10" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 215 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="60" height="50" viewBox="0 0 60 50" xmlns="http://www.w3.org/2000/svg">
<polyline points="5,35 30,10 55,35" stroke="#dcdcdc" stroke-width="10" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 215 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="40" viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<polyline points="20,35 50,5 80,35" fill="#dcdcdc" />
</svg>

After

Width:  |  Height:  |  Size: 185 B

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="20,60 50,30 80,60" fill="#dcdcdc" />
</svg>

After

Width:  |  Height:  |  Size: 188 B