hades/client/styles.css

109 lines
1.6 KiB
CSS

/* You can add global styles to this file, and also import other style files */
body
{
--main-bg-color: linear-gradient(45deg, #2b3044 0%, #43526d 100%);
--nav-bg-color:rgb(49, 40, 82);
--text-color:rgb(117, 130, 155);
--text-visible-color:rgb(220,220,220);
--border-nav-color:rgba(255,255,255,0.1)
}
html,body,app-root
{
margin: 0;
height: 100%;
min-height: 100vh;
}
app-root
{
display: flex;
flex-direction: row;
height: 100%;
align-items: stretch;
background:var(--main-bg-color) ;
color:var(--text-color) ;
}
app-root > section
{
flex:1;
padding: 5px;
}
.center
{
text-align: center;
}
h1,h2
{
color:var(--text-visible-color)
}
nav
{
padding: 20px 40px;
background:var(--main-bg-color) ;
min-width: 200px;
border-right: 1px solid var(--border-nav-color)
}
nav a
{
color:var(--text-color);
text-decoration: none;
}
nav a > div
{
margin: 30px 10px;
}
.container
{
width: 400px;
margin: auto;
padding: 20px;
box-shadow: 3px 2px 42px 0px rgba(0, 0, 0, 0.1);
background-color: rgba(67, 82, 109,0.5);
border-radius: 5px;
/*background: var(--main-bg-color)*/
/*background-color: #2a5b8c;*/
/*background-image: linear-gradient(33deg, #2a5b8c50 0%, #2b366b50 100%);*/
}
.server-status.badge {
display: inline-block;
color: white;
padding: 3px;
border-radius: 5px;
position: relative;
bottom: 3px;
text-transform: capitalize;
}
.server-status.running {
background: green;
}
.server-status.closed {
background: grey;
}
.server-status.pin {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
}