Källkod
Följande filer och mappar finns under mappen webbserverprogrammering.
Mappar visas till vänster och filer till höger. Klicka på en fil eller mapp för att öppna nedan eller visa dess innehåll.
webbserverprogrammering/projects/quiz-extended/css/
1 filer
style.css
240 lines ASCII Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
body {
font-family: Arial;
font-size: 16px;
padding-top: 1px;
margin: 0;
}
main {
margin: 4em auto;
overflow: auto;
width: 50%;
max-width: 1000px;
min-width: 373px;
}
main.centered {
text-align: center;
overflow: auto;
margin-top: 0;
}
main.wideMain {
width: 70%;
}
h1 {
text-align: center;
}
#logo {
font-size: 2.5em;
background: white;
display: inline-block;
padding: 0.2em;
box-shadow: 1px 1px 5px -1px #5c5c5c;
border-radius: 10px;
margin: 0.2em;
color: black;
text-decoration: none;
position: absolute;
transition: all 0.2s;
}
#logo:hover {
background: #fafafa;
transform: translate(-0.6px, -0.6px);
}
.redMessage {
color: red;
font-size: 0.9em;
}
.smallMessage {
font-size: 0.8em;
}
input[type="text"], input[type="password"], input[type="email"], textarea {
margin: 0.4em;
padding: 0.4em;
font-size: 0.9em;
font-family: Arial;
}
input[type="submit"] {
margin: 1.5em 0;
padding: 0.3em;
font-size: 0.9em;
}
label {
text-align: left;
vertical-align: middle;
}
label#quizNameLabel {
display: block;
}
.newQuestion {
margin: 1em 0;
background: #d9d9d9;
padding: 1em;
border-radius: 9px;
}
.newQuestion .btnRemoveQuestion {
width: 1.8em;
height: 1.8em;
margin-right: 2em;
margin-top: 0.5em;
float: right;
background-image: url(../resources/bin.png);
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
cursor: pointer;
filter: grayscale(100%);
transition: 0.3s;
}
.newQuestion .btnRemoveQuestion:hover {
filter: none;
}
.questionText {
width: 71%;
}
.newOptions {
font-size: 0.9em;
background: white;
padding: 0.6em;
padding-bottom: 1em;
border-radius: 10px;
margin: 0.2em 0;
}
.newOption {
margin: 0.8em 0;
}
.newOption .btnRemoveOption {
width: 1.8em;
height: 3.6em;
line-height: 38px;
float: right;
margin-right: 3em;
border: none;
cursor: pointer;
background-color: rgba(255, 255, 255, 0);
background-image: url(../resources/bin.png);
background-position: center;
background-size: 88%;
background-repeat: no-repeat;
filter: grayscale(100%);
transition: 0.3s;
}
.newOption .btnRemoveOption:hover {
filter: none;
}
.newOption .btnRemoveOption:focus {
outline: none;
}
.newOption textarea {
width: 15em;
margin-right: 2em;
margin-left: 0;
}
#mainpopupBg ~ *, #mainpopupBg ~ * * {
filter: blur(2px);
}
#mainpopupBg {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 10;
}
#mainpopupBg > #mainpopupBox {
width: 40em;
height: 16em;
margin: 6em auto;
background: white;
padding: 4em;
padding-top: 3em;
box-sizing: border-box;
border-radius: 15px;
text-align: center;
box-shadow: 0px 0px 13px 2px #767676;
}
#mainpopupBg > #mainpopupBox.successPopup {
background: #14d114;
}
#mainpopupBg a {
color: #000000;
}
#profileHeader {
height: 10em;
width: 90%;
margin: auto;
margin-top: 2em;
margin-bottom: 3em;
text-align: center;
overflow: auto;
}
#profileImage {
height: 100%;
float: left;
background: #d3d3d3;
border-radius: 25% 25%;
}
#profileHeader p {
margin: 0;
}
p#profileDisplayname {
font-size: 3.2em;
margin-top: 0.6em;
}
p#profileUsername {
font-size: 1.2em;
margin-top: 0.6em;
}
table {
width: 100%;
margin-top: 2em;
margin-bottom: 3.5em;
border-collapse: collapse;
}
table th, table td {
text-align: left;
border: 1px solid black;
padding: 0.7em;
}
table td[colspan] {
font-style: italic;
text-align: center;
}
table .centerCell {
text-align: center;
}
table input[type="submit"] {
margin: 0;
}
.cursive {
font-style: italic;
}
.subtitle {
text-align: center;
margin-top: -1em;
}
.pointsResult {
text-align: center;
}
.correctedOption {
border-radius: 6px;
margin: 0.2em;
padding: 0.1em;
}
.correctedOption.answered {
background-color: #ff4c4c;
}
.correctedOption.correct {
background-color: #2bed23;
}