SOITA/static/style.css

595 lines
9.4 KiB
CSS

.sidenav {
height: 100%;
width: 215px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #FF0B7E;
overflow-x: :hidden;
padding-top: 20px;
overflow-y: scroll;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #FEEFE5;
display: block;
line-height: 1.6;
}
.sidenav a:hover {
color: #00916E;
}
.sidenav p {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #FEEFE5;
display: block;
line-height: 1.6;
text-transform: uppercase;
}
.sidenav-footer {
}
.helpText {
font-size: 18px;
padding-bottom: 15px;
}
.main {
margin-left: 215px;
padding: 0px 40px;
}
.main h1 {
text-align: center;
text-transform: uppercase;
padding-bottom: 50px;
}
.main h2 {
font-weight: bold;
padding-bottom: 20px;
}
.main h3 {
font-weight: bold;
text-align: center;
padding-top: 50px;
padding-bottom: 20px;
font-size: 20px;
}
.main img {
width: 80%;
height: auto;
}
.mainImgCenter {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.tournamentQuestionContainer {
border-radius: 25px;
border: 2px solid #FF0B7E;
padding: 20px;
width: 1500px;
height: 150px;
}
.mainTestContainer {
border-radius: 25px;
border: 2px solid #FF0B7E;
padding: 20px;
width: 750px;
height: 200px;
}
.mainTestName {
font-weight: bold;
font-size: 20px;
padding-bottom: 25px;
}
.solvedTestContainer {
border-radius: 25px;
border: 2px solid #FF0B7E;
padding: 20px;
width: 320px;
height: 250px;
}
.solvedTestContainerMini {
border-radius: 25px;
border: 2px solid #FF0B7E;
padding: 20px;
width: 320px;
height: 200px;
}
.solvedTestText {
font-size: 16px;
padding-bottom: 20px;
}
.mainTestMeta {
padding-bottom: 30px;
/*transform: translate(150%,0%);*/
width:100%;
}
.mainTestMetaLine {
padding-bottom: 10px;
display: flex;
justify-content: space-between;
}
.mainTestMetaInfoText {
width: 250px;
color: #808080;
font-size: 13px;
text-align: center;
}
.mainTestMetaLineLabels {
padding-bottom: 10px;
padding-top: 10px;
margin-left: 15%;
margin-right: 15%;
display: flex;
justify-content: space-between;
}
.mainTestMetaLabels {
font-weight: bold;
font-size: 16px;
color: #000000;
text-align: center;
}
.left {
float:left;
width: 175px;
}
.center {
display: inline-block;
margin:0 auto;
width: 175px;
}
.right {
float:right;
width: 175px;
}
.mainTestContainer button {
height: 30px;
width: 150px;
color: #FFF;
font-size: 17px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
transform: translate(200%,0%);
}
.solvedTestContainer button {
height: 30px;
width: 150px;
color: #FFF;
font-size: 17px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
}
.solvedTestContainer a {
color: inherit;
text-decoration: inherit;
}
.doubleButton button{
height: 30px;
width: 150px;
color: #FFF;
font-size: 17px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
transform: translate(150%,0%);
}
.tripleButton button{
color: #FFF;
background: #00916E;
font-size: 17px;
height: 30px;
width: 150px;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
transform: translate(115%,0%);
}
.defaultButton {
height: 30px;
width: 150px;
color: #FFF;
font-size: 17px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
}
.defaultButton a {
color: inherit;
text-decoration: inherit;
}
.defaultButton a:hover{
color: inherit;
text-decoration: inherit;
}
.tournamentButton {
height: 30px;
width: 300px;
color: #FFF;
font-size: 17px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
}
.tournamentButton a {
color: inherit;
text-decoration: inherit;
}
.tournamentButton a:hover{
color: inherit;
text-decoration: inherit;
}
.mainTestContainer a {
color: inherit;
text-decoration: inherit;
}
.mainTestDesc{
padding-bottom: 15px;
text-align: center;
}
.mainTestQuest {
}
.authContent {
top: 50%;
left: 50%;
position: absolute;
width: 400px;
height: 550px;
padding: 80px 40px;
background-color: #FEEFE5;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color: #2B3D41;
}
.authContent h2 {
margin: 0;
padding: 0 0 20px;
text-align: center;
text-transform: uppercase;
}
.authContent h3 {
margin: 0;
padding: 0 0 20px;
text-align: center;
}
.authContent p {
margin: 0;
padding: 0;
font-weight: bold;
line-height: 1.5;
}
.authContent input {
width: 100%;
margin-bottom: 20px;
}
.authContent input[type=text],
.authContent input[type=email],
.authContent input[type=password]{
border: none;
border-bottom: 1px solid #2B3D41;;
background: transparent;
outline: none;
height: 35px;
color: #2B3D41;;
}
.authContent input[type=submit]{
height: 30px;
color: #FFF;
font-size: 15px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
margin-top: 15px;
}
input[type=checkbox]{
width: 20%;
}
.titleBar {
height: 50px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #2B3D41;
padding-top: 20px;
text-align: center;
text-decoration: none;
font-size: 30px;
color: #FEEFE5;
display: block;
}
.authContent button{
width: 100%;
margin-bottom: 20px;
height: 30px;
color: #FFF;
font-size: 15px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
margin-top: 15px;
}
background-color:#FF0B7E
.resultContainer{
border-radius: 25px;
border: 2px solid #FF0B7E;
padding: 20px;
width: 800px;
height: 1000px;
padding-bottom: 15px;
}
.resultContainer label {
font-weight: bold;
font-size: 20px;
}
.resultContainerSpace {
padding-bottom: 15px;
}
.resultImage{
}
.resultMsg {
font-weight: bold;
font-size: 24px;
}
.resultScore {
font-weight: bold;
font-size: 20px;
}
.resultText {
font-weight: normal;
font-size: 16px;
}
.accountInfoContainer{
border-radius: 25px;
padding: 20px;
width: 800px;
height: 1000px;
padding-bottom: 15px;
}
.accountInfoName {
font-weight: bold;
font-size: 20px;
}
.accountInfoText {
padding-bottom: 20px;
}
.accountInfoContainer img {
width: auto;
height: auto;
}
.accountInfoContainer button{
background-color: #00916E;
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
width: 250px; /* Set a width if needed */
display: block; /* Make the buttons appear below each other */
border-radius: 25px;
}
.accountInfoContainer button:not(:last-child) {
border-bottom: none; /* Prevent double borders */
}
/* Add a background color on hover */
.accountInfoContainer button:hover {
background-color: #3e8e41;
}
.accountInfoContainer a{
color: inherit;
text-decoration: inherit;
}
/*.defaultButton a {
color: inherit;
text-decoration: inherit;
}*/
.accountInfoContainer input[type=submit]{
height: 30px;
color: #FFF;
font-size: 15px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
.testContent{
padding-top: 15px;
padding-bottom: 15px;
padding-left: 20px;
}
.testContent a{
color: inherit;
text-decoration: inherit;
}
.testContent a:hover{
color: inherit;
text-decoration: inherit;
}
.testContent input[type=submit]{
height: 30px;
width: 200px;
color: #FFF;
font-size: 17px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
}
.linkDefault {
padding-top: 15px;
}
.linkDefault a {
color: #00916E;
text-decoration: none;
font-weight: bold;
}
.newContainer input[type=submit]{
height: 30px;
width: 150px;
color: #FFF;
font-size: 17px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
}
.newContainer input[type=text]{
width: 500px;
}
.newQuestionSection {
border-radius: 25px;
border: 2px solid #FF0B7E;
padding: 20px;
width: 750px;
height: 350px;
}
.questionSectionLabelText {
font-weight: bold;
font-size: 16px;
padding-bottom: 20px;
}
.addQuestionButton {
}
.editContainer {
overflow: scroll;
}
.editContainerLine {
padding: 0px 0px 0px 0px;
}
.editContainerSection {
padding-bottom: 15px;
}
.editContainerSection h2 {
display: inline;
}
span {
margin-right: 10px;
}
.starChecked {
color: gold;
}
.fireChecked {
color: red;
}
.locked {
color: #19647E;
}