New version. Add Material UI implementation with theme customization, about dialog, and news system

This commit is contained in:
VlastikYoutubeKo 2025-05-20 21:38:31 +02:00
parent 5bc9c9bdb1
commit 1d58835a65
190 changed files with 12296 additions and 54 deletions

View file

@ -0,0 +1,42 @@
<div class="figure-wrapper">
<figure
class="styled-example list"
aria-label="Image of a list and list items of foods with their inventory stock number with a different theme applied"
style="padding-block: 16px;">
<style>
.styled-example {
background-color: #f4fbfa;
}
.styled-example.list md-list {
--md-list-container-color: #f4fbfa;
--md-list-item-label-text-color: #161d1d;
--md-list-item-supporting-text-color: #3f4948;
--md-list-item-trailing-supporting-text-color: #3f4948;
--md-list-item-label-text-font: system-ui;
--md-list-item-supporting-text-font: system-ui;
--md-list-item-trailing-supporting-text-font: system-ui;
}
.styled-example.list md-list [slot="trailing-supporting-text"] {
width: 30px;
text-align: end;
}
</style>
<md-list>
<md-list-item type="button">
<div slot="headline">Apple</div>
<div slot="supporting-text">In stock</div>
<div slot="trailing-supporting-text">+100</div>
</md-list-item>
<md-list-item type="button">
<div slot="headline">Banana</div>
<div slot="supporting-text">In stock</div>
<div slot="trailing-supporting-text">56</div>
</md-list-item>
<md-list-item type="button">
<div slot="headline">Cucumber</div>
<div slot="supporting-text">Low stock</div>
<div slot="trailing-supporting-text">5</div>
</md-list-item>
</md-list>
</figure>
</div>