matteo-the-prestige/static/games_page.css

223 lines
3.7 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Goldman:wght@700&display=swap');
body {
background-image: url("prism.png");
}
/* Background pattern from Toptal Subtle Patterns */
.container {
font-family: 'Alegreya', serif;
display: grid;
grid-template-columns: repeat(3, minmax(500px, 1fr));
grid-template-rows: 100px 330px;
grid-gap: 50px 30px; /*space between rows, then columns*/
align-items: center;
justify-items: center;
grid-auto-rows: 300px;
grid-auto-flow: row;
}
#title {
grid-column: 2;
grid-row: 1;
}
.link{
position: relative;
top: 10px;
}
.h1 {
margin: auto;
width: 45%;
color: white;
font-family: 'Alegreya', serif;
}
.page_header {
color: white;
font-family: 'Goldman', cursive;
}
.emptyslot {
border: 2px dashed white;
border-radius: 15px;
align-self: stretch;
justify-self: stretch;
text-align: center;
color: white;
flex: 1;
}
.game {
font-family: 'Alegreya', serif;
color: white;
align-self: stretch;
justify-self: stretch;
text-align: center;
display: flex;
flex-direction: column;
background: #2f3136; /*discord dark theme background-secondary - the same color as the embeds*/
border: 4px solid;
border-radius: 4px;
border-color: rgb(113, 54, 138); /*matteo purple™*/
border-top: none;
border-right: none;
border-bottom: none;
flex: 1;
}
h2 {
font-family: 'Alegreya', serif;
color: white;
text-align: center;
}
.header {
width: 100%;
background-color: #4f545c; /*discord's background-tertiary*/
border-top-right-radius: 4px;
height: max-content;
}
.inning {
float: left;
margin: 5px;
}
.weather {
float: right;
margin: 5px;
}
.body {
margin: 10px;
display: grid;
grid-template-columns: 60% 40%;
grid-template-areas:
"teams info"
"players players"
"update update";
grid-template-rows: 130px;
grid-row-gap: 10px;
grid-column-gap: 10px;
flex: 1;
}
.teams {
grid-area: teams;
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 1;
}
.team {
display: flex;
justify-content: space-between;
width: 100%;
}
.team_name {
overflow: hidden;
}
.info {
grid-area: info;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background: #4f545c;
padding-top: 8px;
padding-bottom: 4px;
margin-left: 15%;
margin-right: 10px;
border-radius: 4px;
}
.batting {
font-size: 10pt;
text-align: left;
height: max-content;
padding: 5px;
}
.outs {
display: flex;
justify-content: space-between;
align-items: center;
width: 60%;
}
.outs_title {
font-weight: bolder;
}
.outs_count {
display: flex;
}
.out {
height: 20px;
}
.team_name, .score {
font-size: 25px
}
.score {
background: #4f545c; /*discord's background-accent*/
width: 40px;
min-width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 10px;
}
.players {
grid-area: players;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: max-content;
width: 100%;
}
.player {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 250px;
}
.player_name {
overflow: hidden;
margin-left: 15px;
}
.update {
grid-area: update;
}
.update_emoji, .update_text {
display: inline
}
.field {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.base {
height: 60px;
}
.base_2 {
margin-bottom: -25%
}