KnockOutWhist/KnockOutWhist-Web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

refactor(ui): refactored the CSS into a separate stylesheet

Browse Source 
#14 [Subtask] CSS in separate stylesheet
This commit is contained in:
Janis
2025-10-23 16:25:49 +02:00
parent 63689b7a26
commit e9af4dffef
2 changed files with 102 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
knockoutwhistweb/app/views/main.scala.html
View File

@@ -13,109 +13,6 @@
<title>@title</title> <title>@title</title>
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")"> <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")"> <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
<style>
body {
background-image: url("@routes.Assets.versioned("images/background.png")");
}
html, body {
height: 100vh;
margin: 0;
}
#sessions {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
}
#sessions a, h1, p {
color: white;
font-size: 40px;
font-family: Arial;
}
#ingame {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
}
#playercards {
display: flex;
flex-direction: row;
justify-content: center;
height: 20%
}
#cardsplayed {
display: flex;
flex-direction: row;
height: 10%;
min-height: 10%
}
#playedcardplayer {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#playedcardplayer p {
font-size: 12px;
height: 4%;
}
#playedcardplayer img {
height: 90%;
}
#firstCard {
display: flex;
flex-direction: row;
height: 20%;
width: 100%;
justify-content: space-between;
}
#firstCardObject {
display: flex;
flex-direction: column;
margin-right: 4%;
}
#firstCardObject img{
height: 90%;
}
#firstCardObject p{
height: 10%;
font-size: 20px;
}
#trumpsuit {
display: flex;
flex-direction: row;
margin-left: 4%;
}
#nextPlayers {
display: flex;
flex-direction: column;
align-items: center;
height: 0%;
}
#nextPlayers p {
margin-top: 0px;
margin-bottom: 0px;
}
#invisible {
visibility: hidden;
}
#selecttrumpsuit {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
#rules {
color: white;
font-size: 1.5em;
font-family: Arial;
}
</style>
</head> </head>
<body> <body>

102
knockoutwhistweb/public/stylesheets/main.css
View File

@@ -0,0 +1,102 @@
body {
background-image: url("/assets/images/background.png");
}
html, body {
height: 100vh;
margin: 0;
}
#sessions {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
}
#sessions a, h1, p {
color: white;
font-size: 40px;
font-family: Arial;
}
#ingame {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
}
#playercards {
display: flex;
flex-direction: row;
justify-content: center;
height: 20%
}
#cardsplayed {
display: flex;
flex-direction: row;
height: 10%;
min-height: 10%
}
#playedcardplayer {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#playedcardplayer p {
font-size: 12px;
height: 4%;
}
#playedcardplayer img {
height: 90%;
}
#firstCard {
display: flex;
flex-direction: row;
height: 20%;
width: 100%;
justify-content: space-between;
}
#firstCardObject {
display: flex;
flex-direction: column;
margin-right: 4%;
}
#firstCardObject img{
height: 90%;
}
#firstCardObject p{
height: 10%;
font-size: 20px;
}
#trumpsuit {
display: flex;
flex-direction: row;
margin-left: 4%;
}
#nextPlayers {
display: flex;
flex-direction: column;
align-items: center;
height: 0%;
}
#nextPlayers p {
margin-top: 0px;
margin-bottom: 0px;
}
#invisible {
visibility: hidden;
}
#selecttrumpsuit {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
#rules {
color: white;
font-size: 1.5em;
font-family: Arial;
}