UI text alignment work

This commit is contained in:
Antoine Pilote
2021-07-15 16:03:39 -04:00
parent 8ecab5c3ad
commit c3c995bc5f
19 changed files with 311 additions and 117 deletions

View File

@@ -1,13 +1,51 @@
.screen{
.screen {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: row;
align-content:flex-start;
}
.rect{
height: 200px;
width: 200px;
.logo {
width: 500px;
height: 50%;
margin: 0px 0px 0px 0px;
justify-content: center;
align-content: center;
flex-direction: column;
}
.panel {
display: flex;
height: 33%;
width: 33%;
justify-content: space-around;
align-items: center;
align-content: flex-start;
}
.panel-top {
width: 100%;
height: 75%;
justify-content: flex-start;
flex-direction:column;
}
.panel-bottom {
width:100%;
height: 25%;
justify-content: space-around;
align-items: center;
align-content: flex-end;
}
.rect {
display: flex;
justify-content: space-around;
align-items: center;
align-content: center;
}
.normal-text {
font-size: 2.0;
}

View File

@@ -1,11 +1,32 @@
<Canvas
script="Scripts/test Test"
stylesheet="Interface/Testing.css"
stylesheet="resources/Interface/Testing.css"
groups="screen"
color="33 33 33 255"
height="100%"
width="100%"
padding="8px 8px 8px 8px"
>
<p groups="header">Hello, world!</p>
<Rect onclick="hello()"
groups="rect">
<Rect groups="logo"
color="25 25 25 0">
<p font-size="1.5" margin="0 0 0 12px">Nuake Engine</p>
<p groups="normal-text">You can load a project, or create a new one.</p>
<Rect groups="panel-bottom">
<Rect
groups="rect"
height="50px"
width="49%"
border="8px 8px 8px 8px"
color="18 18 18 255">
<p groups="normal-text">New Project</p>
</Rect>
<Rect
groups="rect"
height="50px"
width="49%"
border="8px 8px 8px 8px"
color="18 18 18 255">
<p groups="normal-text">Load Project</p>
</Rect>
</Rect>
</Rect>
</Canvas>