juggl/juggl-server/css/style.css
2020-11-08 21:40:07 +01:00

125 lines
No EOL
2.1 KiB
CSS

body {
margin: 0;
background-color: #222;
}
* {
color: white;
font-family: 'Karla', sans-serif;
transition-duration: 0.1s;
}
.hidden {
display: none;
}
header {
width: 100%;
height: 4rem;
position: fixed;
top: 0px;
background-color: #222;
/* background: rgb(10, 133, 168);
background: linear-gradient(137deg, rgba(10, 133, 168, 1) 0%, rgba(136, 0, 0, 1) 100%); */
/* background: rgb(10, 133, 168);
background: linear-gradient(137deg, rgba(10, 133, 168, 1) 0%, rgba(255, 255, 255, 1) 48%, rgba(136, 0, 0, 1) 100%); */
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0px 0px 2rem 1rem #000D;
}
main {
max-width: 800px;
padding: 0px 20px;
margin: auto;
margin-top: 6rem;
background-color: #0000;
}
#header-container {
max-width: 1000px;
padding: 0px 20px;
margin: auto;
list-style: none;
}
#header-container img {
margin-top: 0.5rem;
height: 3rem;
width: auto;
}
#header-container>* {
line-height: 4rem;
vertical-align: baseline;
display: inline-block;
}
textarea:focus, input:focus, button:focus {
outline: none;
}
input, button {
border-radius: 2px;
border: solid red 1px;
background-color: #0000;
color: #BBB;
padding: 5px;
font-size: 12pt;
}
button:hover {
color: white;
background-color: #F007;
cursor: pointer;
}
button:active {
transform: translate(0px, 2px);
}
table {
border-collapse: collapse;
width: 100%;
}
thead * {
color: #AAA;
text-align: left;
}
#project-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
padding: 5px;
}
#project-list>* {
margin: 5px;
border: 1px dashed #AAA;
border-radius: 5px;
color: white;
padding: 10px;
}
#project-list>*:hover {
color: red;
border-color: red;
cursor: pointer;
}
#project-list h1 {
font-weight: bold;
font-size: 24pt;
margin: 0px;
padding: 0px;
}
#project-list p {
font-size: 10pt;
color: #AAA;
margin: 0px;
padding: 0px;
}