provide backgrounds for the guild page components

This commit is contained in:
2023-03-31 20:22:10 +02:00
parent af11324fb7
commit 101ea0ffb5
3 changed files with 118 additions and 74 deletions
+50 -38
View File
@@ -4,49 +4,61 @@
}
body {
margin: 0;
padding: 0 0 10rem;
min-height: calc(100vh - 10rem);
font-family: 'EB Garamond', serif;
overflow-y: scroll;
user-select: none;
background-size: 25rem;
background-color: rgba(87, 50, 20, 0.45);
background-image: url("/img/background/panels/wood.png");
background-blend-mode: darken;
background-repeat: repeat;
margin: 0;
padding: 0 0 10rem;
min-height: calc(100vh - 10rem);
font-family: 'EB Garamond', serif;
overflow-y: scroll;
user-select: none;
background-size: 25rem;
background-color: rgba(87, 50, 20, 0.45);
background-image: url("/img/background/wood/cut_wood_background.png");
background-blend-mode: darken;
background-repeat: repeat;
}
#app {
width: 100%;
width: 100%;
}
.panel {
&.pinned-paper {
background-image: url("/img/quests/backgrounds/paper.png");
position: relative;
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
.nail {
position: absolute;
width: 2rem;
height: 2rem;
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
&.small {
width: 1rem;
height: 1rem;
}
img {
width: 100%;
height: 100%;
}
&.top-left {
top: 1rem;
left: 1rem;
}
&.top-right {
top: 1rem;
right: 1rem;
}
}
&.pinned-paper {
background-image: url("/img/quests/backgrounds/paper.png");
position: relative;
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
.nail {
position: absolute;
width: 2rem;
height: 2rem;
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
&.small {
width: 1rem;
height: 1rem;
}
img {
width: 100%;
height: 100%;
}
&.top-left {
top: 1rem;
left: 1rem;
}
&.top-right {
top: 1rem;
right: 1rem;
}
}
}
&.note-paper {
background-image: url("/img/background/paper/small_tile_paper.png");
position: relative;
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
border-image: url("/img/borders/metal_corner.png") 30 round;
}
}