matteo-the-prestige/static/games_page.css
2021-01-01 17:03:04 -05:00

391 lines
6.8 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 */
:root {
--background-main: #2f3136; /*discord dark theme background-secondary - the same color as the embeds*/
--background-secondary: #4f545c; /*discord's background-tertiary*/
--background-accent: #4f545c; /*discord's background-accent*/
--highlight: rgb(113, 54, 138); /*matteo purple™*/
}
div, button {
font-family: 'Alegreya', serif;
color: white;
}
#link_div {
text-align: right;
position: absolute;
top: 0px;
right: 30px;
}
#link_div > a {
background-color: transparent;
text-decoration: underline;
}
#link_div > a:link, #link_div > a:visited {
color: lightblue;
}
#link_div > a:hover {
color: white;
}
.container {
display: grid;
grid-template-columns: repeat(3, minmax(500px, 1fr));
grid-gap: 50px 30px; /*space between rows, then columns*/
align-items: center;
justify-items: center;
grid-auto-rows: 360px;
grid-auto-flow: row;
}
#header {
width: 100%;
height: 150px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#header > .page_header {
margin: auto
}
#filters {
display: flex;
justify-content: space-around;
width: max-content;
margin-top: 10px;
}
#filters > * {
padding: 4px 8px;
margin: 0px 8px;
font-size: 16pt;
background: rgba(0,0,0,0);
}
#filters > .filter {
border-radius: 8px;
min-width: 100px;
text-align: center;
border: none;
}
#selected_filter {
background: rgb(113, 54, 138);
}
#footer {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 75px;
}
#footer > div {
text-align: center;
font-size: 20px;
position: relative;
top: 5px;
}
.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:var(--background-main);
border: 4px solid;
border-radius: 4px;
border-color: var(--highlight);
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: var(--background-secondary);
border-top-right-radius: 4px;
height: max-content;
}
.inning {
float: left;
margin: 5px;
margin-left: 8px;
}
.weather {
float: right;
margin: 5px;
margin-right: 8px;
}
.body {
margin: 10px;
display: grid;
grid-template-columns: 60% 40%;
grid-template-areas:
"teams info" "players info" "update update";
grid-template-rows: 90px;
grid-row-gap: 8px;
grid-column-gap: 10px;
flex: 1;
}
.teams {
grid-area: teams;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.team {
display: flex;
justify-content: space-between;
width: 100%;
margin: 5px 0px;
}
.team_name {
overflow: hidden;
white-space: nowrap;
}
.info {
grid-area: info;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
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;
}
.leagueoruser {
font-size: 10pt;
text-align: right;
height: max-content;
padding: 5px;
}
.footer {
display: flex;
justify-content: space-between;
}
.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: var(--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-around;
align-items: start;
height: max-content;
}
.player {
display: flex;
align-items: end;
width: 100%;
flex-direction: column;
margin: 5px 0px;
}
.player_name {
overflow: hidden;
text-align: start;
white-space: nowrap;
width: 95%;
}
.update {
grid-area: update;
margin-right: 10px;
margin-top: 5px;
min-height: 50px;
height: 100%;
background: var(--background-secondary);
border-radius: 4px;
align-items: center;
display: flex;
justify-content: center;
}
.player_type {
width: 100%;
text-align: start;
font-weight: bolder;
}
.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%
}
@media only screen and (max-device-width: 800px) {
.container {
display: grid;
grid-template-columns: repeat(1, minmax(700px, 90%));
grid-template-rows: 400px;
grid-gap: 50px 30px; /*space between rows, then columns*/
align-items: center;
justify-items: center;
grid-auto-rows: 400px;
grid-auto-flow: row;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.emptyslot {
border: none;
border-radius: 15px;
align-self: stretch;
justify-self: stretch;
text-align: center;
color: white;
flex: 1;
}
.batting {
font-size: 15pt;
text-align: left;
height: max-content;
padding: 5px;
}
.leagueoruser {
font-size: 15pt;
text-align: right;
height: max-content;
padding: 5px;
}
.team_name, .score {
font-size: 23px
}
.players {
font-size: 20px;
grid-area: players;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 100%;
padding-right: 50px;
}
.update_emoji, .update_text {
display: inline;
font-size: 20px;
}
}