DIDS-Coursework/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/template.css

170 lines
3.3 KiB
CSS
Raw Normal View History

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Yeseva+One&display=swap');
@import "normalize.css";
:root {
--primary: hsla(220, 60%, 50%, 1);
--hover: hsl(240, 50%, 22%);
--secondary: hsl(210, 100%, 95%, 1);
--accent: hsla(15, 99%, 57%, 1);
--light: hsla(90, 8%, 85%, 1);
--mutedBlack: hsla(0, 0%, 0%, 0.25)
}
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
}
body {
font-size: 1em;
font-weight: 400;
font-family: "Fira Sans", sans-serif;
}
h1, h2 {
font-weight: 400;
font-family: "Yeseva One", cursive;
}
.btn {
outline: none;
border: none;
padding: 0.875em 1.75em;
cursor: pointer;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
.btnPrimary {
background-color: var(--primary);
color: #FFFFFF;
}
.btnPrimary:hover {
background-color: var(--hover);
}
div.formControl {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 0.5em;
width: 100%;
}
input:not([type="submit"]), form .formControl textarea {
width: 100%;
border: 4px solid var(--primary);
background: 0 0;
outline: 0;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: .5em;
padding: 0 .5em;
height: 3em;
}
input:not([type="submit"]):hover, form .formControl textarea:hover {
border: 4px solid var(--hover);
}
.selectDiv {
position: relative;
min-width: 300px;
cursor: pointer;
}
.selectDiv:before {
content: '';
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: -5px;
top: 13px;
padding: 0 0 2px;
position: absolute;
width: 46px;
background-color: var(--primary);
height: 30px;
border-top-right-radius: 0.5em;
border-top-left-radius: 0.5em;
}
.selectDiv:after {
content: '<>';
font: 18px "Consolas", monospace;
color: #FFFFFF;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 6px;
top: 18px;
padding: 0 0 2px;
position: absolute;
}
.selectDiv select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
display: block;
outline: none;
width: 100%;
height: 3em;
margin: 6px 0;
padding: 0 24px;
background-color: #ffffff;
background-image: none;
border: 4px solid var(--primary);
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
word-break: normal;
}
.selectDiv:hover select, .selectDiv select:hover {
border: 4px solid var(--hover);
}
.selectDiv:hover:before {
background-color: var(--hover);
}
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid #DDDDDD;
padding: 0.5em;
min-width: 7.5em;
}
table tr:nth-child(even) {
background-color: var(--secondary);
}
table tr:hover {
background-color: #ddd;
}
table th {
padding: 0.75em 0;
text-align: left;
background-color: var(--primary);
color: #FFFFFF;
}
main #title {
align-self: flex-start;
}