VienDesu/vnshed
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: move style properties to components

Browse source
This commit is contained in:
OleSTEEP 2025-10-07 14:37:21 +03:00
parent c95aed01b5
commit faf221c9ba
10 changed files with 289 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/lib/components/add_button.svelte
View file

@ -1,5 +1,37 @@
<script lang="ts">
const { handler } = $props();
const { handler, size = 32 } = $props();
</script>
<button class="plus round" onclick={handler}>+</button>
<button class="plus round" style="height: {size}px;" onclick={handler}>+</button>
<style>
/* Кнопка "плюс" */
.plus {
font-family: Arial, Helvetica, sans-serif;
aspect-ratio: 1 / 1;
font-size: x-large;
cursor: pointer;
}
@media (prefers-color-scheme: light) {
.plus {
background-color: #5C8DC0;
color: white;
}
.plus:hover {
background-color: #567aa1;
}
}
@media (prefers-color-scheme: dark) {
.plus {
background-color: #2791FF;
color: white;
}
.plus:hover {
background-color: #2c7dd4;
}
}
</style>

62
frontend/src/lib/components/calendar.svelte
View file

@ -119,4 +119,66 @@
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
@media (prefers-color-scheme: light) {
.month {
background: #5C8DC0;
}
.month ul li {
color: white;
}
.weekdays {
background-color: #F4F4F4;
}
.weekdays li {
color: black;
}
.days {
background: #F4F4F4;
}
.days li {
color: black;
}
.days li .active {
color: white !important;
background: #5C8DC0;
}
}
@media (prefers-color-scheme: dark) {
.month {
background: #2791FF;
}
.month ul li {
color: white;
}
.weekdays {
background-color: #192431;
}
.weekdays li {
color: white;
}
.days {
background: #192431;
}
.days li {
color: white;
}
.days li .active {
color: white !important;
background: #2791FF;
}
}
</style>

52
frontend/src/lib/components/create_button.svelte
View file

@ -5,4 +5,54 @@
<div class="create">
<button class="rounded" id="create" {onclick}>Создать</button>
</div>
</div>
<style>
/* Поле с кнопкой "Создать" */
.create {
width: 100%;
position: fixed;
bottom: 0;
text-align: center;
display: flex;
flex-direction: column;
}
.create button {
margin: 0.5rem;
padding: 1rem;
cursor: pointer;
}
@media (prefers-color-scheme: light) {
.create {
background-color: #D9D9D9;
}
.create button {
background-color: #3CAA36;
color: white;
}
.create button:hover {
background-color: #3b8d37;
color: white;
}
}
@media (prefers-color-scheme: dark) {
.create {
background-color: #192431;
}
.create button {
background-color: #3CAA36;
color: white;
}
.create button:hover {
background-color: #3b8d37;
color: white;
}
}
</style>

12
frontend/src/lib/components/horisontal_bar.svelte
View file

@ -21,4 +21,14 @@
<Image />
{/if}
</div>
</div>
<style>
/* Вертикальный список */
:global(.horisontal-bar) {
display: flex;
overflow-x: scroll;
align-content: center;
padding: 0.5rem;
}
</style>

31
frontend/src/lib/components/horisontal_item.svelte
View file

@ -4,4 +4,33 @@
<div class="horisontal-item rounded">
{text}
</div>
</div>
<style>
/* Элемент вертикального списка (тег, бадж, жанр) */
.horisontal-item {
padding: 0.25rem;
}
@media (prefers-color-scheme: light) {
.horisontal-item {
background-color: #5C8DC0;
color: white;
}
.horisontal-item:hover {
background-color: #567aa1;
}
}
@media (prefers-color-scheme: dark) {
.horisontal-item {
background-color: #2791FF;
color: white;
}
.horisontal-item:hover {
background-color: #2c7dd4;
}
}
</style>

22
frontend/src/lib/components/image.svelte
View file

@ -4,8 +4,28 @@
</script>
<div class="{direction} {input ? "input" : ""} image rounded">
<AddButton handler={() => {
<AddButton size=48 handler={() => {
// addImage(plus.id, this.id);
// document.getElementById("screenshots").appendChild(new HorisontalImage().html);
}}/>
</div>
<style>
/* Вертикальное изображение */
.vertical {
aspect-ratio: 11 / 16;
}
/* Горизонтальное изображение */
.horisontal {
aspect-ratio: 16 / 11;
}
:global(.image) {
margin-left: auto;
margin-right: auto;
align-content: center;
text-align: center;
width: 11rem;
}
</style>

42
frontend/src/lib/components/img_button.svelte
View file

@ -4,4 +4,44 @@
<div class="imgbutton {style}">
<img src={image} alt={name}>
</div>
</div>
<style>
/* Кнопка с изображением */
.imgbutton {
height: 100%;
display: flex;
flex-direction: column;
margin: 0;
align-content: center;
text-align: center;
font-size: small;
padding: 0.5rem;
}
.imgbutton img {
margin-left: auto;
margin-right: auto;
width: 2rem;
}
.imgbutton {
color: white;
}
.remove {
background-color: #FC1F1C;
}
.remove:hover {
background-color: #d32522;
}
.edit {
background-color: #1BC304;
}
.edit:hover {
background-color: #1c9d0b;
}
</style>

40
frontend/src/lib/components/queue_item.svelte
View file

@ -12,4 +12,42 @@
<p class="ellipsis">{name}</p>
<ImgButton style="edit" name="Изменить" image={edit_btn}/>
<ImgButton style="remove" name="Удалить" image={remove_btn}/>
</div>
</div>
<style>
/* Элемент в очереди */
.queue-item {
margin: 0;
padding: 0;
}
.queue-item p {
margin: 0.5rem;
}
:global(.queue-item + .queue-item) {
margin-top: 0.5rem;
}
@media (prefers-color-scheme: light) {
.queue-item {
background-color: #5C8DC0;
color: white;
}
.queue-item p {
color: white;
}
}
@media (prefers-color-scheme: dark) {
.queue-item {
background-color: #2791FF;
color: white;
}
.queue-item p {
color: white;
}
}
</style>

109
frontend/src/lib/css/global.css
View file

@ -39,38 +39,6 @@ button {
overflow: hidden;
}
/* Вертикальное изображение */
.vertical {
aspect-ratio: 11 / 16;
}
/* Горизонтальное изображение */
.horisontal {
aspect-ratio: 16 / 11;
}
.image {
margin-left: auto;
margin-right: auto;
align-content: center;
text-align: center;
width: 11rem;
}
/* Кнопка "плюс" */
.plus {
font-family: Arial, Helvetica, sans-serif;
aspect-ratio: 1 / 1;
height: 32px;
font-size: x-large;
cursor: pointer;
}
/* Кнопка "плюс" на изображении должна быть больше */
.image .plus {
height: 48px;
}
/* Поле с обложкой */
.cover {
padding: 2rem;
@ -78,22 +46,6 @@ button {
align-content: center;
}
/* Поле с кнопкой "Создать" */
.create {
width: 100%;
position: fixed;
bottom: 0;
text-align: center;
display: flex;
flex-direction: column;
}
.create button {
margin: 0.5rem;
padding: 1rem;
cursor: pointer;
}
/* Поле с заполняемыми полями */
.fields {
width: 100%;
@ -111,77 +63,16 @@ button {
margin-bottom: 0;
}
/* Вертикальный список */
.horisontal-bar {
display: flex;
overflow-x: scroll;
align-content: center;
padding: 0.5rem;
}
.horisontal-bar * {
margin: 0;
margin-right: 0.5rem;
align-content: center;
}
/* Элемент вертикального списка (тег, бадж, жанр) */
.horisontal-item {
padding: 0.25rem;
cursor: pointer;
}
/* Элемент в очереди */
.queue-item {
margin: 0;
padding: 0;
}
.queue-item + .queue-item {
margin-top: 0.5rem;
}
.queue-item p {
margin: 0.5rem;
}
/* Текст с троеточием в конце */
.ellipsis {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Кнопка с изображением */
.imgbutton {
height: 100%;
display: flex;
flex-direction: column;
margin: 0;
align-content: center;
text-align: center;
font-size: small;
padding: 0.5rem;
}
.imgbutton * {
margin: 0;
}
.imgbutton img {
margin-left: auto;
margin-right: auto;
width: 2rem;
}
/* Кнопка "Удалить" */
.remove {
cursor: pointer;
}
/* Кнопка "Изменить" */
.edit {
cursor: pointer;
margin-left: auto;
}

180
frontend/src/lib/css/themes.css
View file

@ -16,103 +16,13 @@
color: black;
}
.plus {
background-color: #5C8DC0;
color: white;
}
.plus:hover {
background-color: #567aa1;
}
.horisontal-item {
background-color: #5C8DC0;
color: white;
}
.horisontal-item:hover {
background-color: #567aa1;
}
.cover .image {
background-color: white;
}
.create {
background-color: #D9D9D9;
}
.create button {
background-color: #3CAA36;
color: white;
}
.create button:hover {
background-color: #3b8d37;
color: white;
}
.fields {
background-color: white;
}
.queue-item {
background-color: #5C8DC0;
color: white;
}
.queue-item p {
color: white;
}
.imgbutton {
color: white;
}
.month {
background: #5C8DC0;
}
.month ul li {
color: white;
}
.weekdays {
background-color: #F4F4F4;
}
.weekdays li {
color: black;
}
.days {
background: #F4F4F4;
}
.days li {
color: black;
}
.days li .active {
color: white !important;
background: #5C8DC0;
}
.remove {
background-color: #FC1F1C;
}
.remove:hover {
background-color: #d32522;
}
.edit {
background-color: #1BC304;
}
.edit:hover {
background-color: #1c9d0b;
}
}
@media (prefers-color-scheme: dark) {
@ -133,101 +43,11 @@
color: white;
}
.plus {
background-color: #2791FF;
color: white;
}
.plus:hover {
background-color: #2c7dd4;
}
.horisontal-item {
background-color: #2791FF;
color: white;
}
.horisontal-item:hover {
background-color: #2c7dd4;
}
.cover .image {
background-color: #131A22;
}
.create {
background-color: #192431;
}
.create button {
background-color: #3CAA36;
color: white;
}
.create button:hover {
background-color: #3b8d37;
color: white;
}
.fields {
background-color: #131A22;
}
.queue-item {
background-color: #2791FF;
color: white;
}
.queue-item p {
color: white;
}
.imgbutton {
color: white;
}
.month {
background: #2791FF;
}
.month ul li {
color: white;
}
.weekdays {
background-color: #192431;
}
.weekdays li {
color: white;
}
.days {
background: #192431;
}
.days li {
color: white;
}
.days li .active {
color: white !important;
background: #2791FF;
}
.remove {
background-color: #FC1F1C;
}
.remove:hover {
background-color: #d32522;
}
.edit {
background-color: #1BC304;
}
.edit:hover {
background-color: #1c9d0b;
}
}