/********/
/* Page */
/********/
body {
background-color: #222222;
font-family: Helvetica, sans-serif;
font-size: 1em;
}
#title {
font-family: 'Bowlby One SC', Impact, sans-serif;
font-weight: bold;
font-size: 2.5em;
color: #a20e0e;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/*********/
/* Table */
/*********/
#checklist_table {
width: 60em;
margin-left: auto;
margin-right: auto;
border: 0;
border-spacing: 0;
}
.header_name {
font-family: 'Bowlby One SC', Impact, sans-serif;
font-weight: bold;
font-size: 1.75em;
color: #a20e0e;
}
.topic td {
background-color: #5a5a5a;
color: #d6d6d6;
font-family: 'Bowlby One SC', Impact, sans-serif;
font-size: 1.25em;
padding: 0.1em 0.1em 0.1em 0.5em;
}
.activity td {
font-weight: bold;
font-size: 1em;
text-align: center;
padding-top: 0.4em;
}
tbody:nth-child(even) {
background-color: #e4e2e2;
}
tbody:nth-child(odd) {
background-color: #fdfdfd;
}
.dom_cell {
border-right: solid 1px #d0d0d0;
}
/*****************/
/* Radio sliders */
/*****************/
.radio_slider {
position: relative;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;
height: 1.25em;
width: 30em;
}
.radio_slider input {
display: none;
}
.radio_slider > * {
float: left;
}
.radio_slider label {
display: block;
width: 7em;
margin: 0 0.25em;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
text-align: center;
}
.radio_slider label p {
vertical-align: middle;
}
.radio_slider input:checked+label {
background: rgba(0, 0, 0, 0.2);
}
.experience {
margin: 0.2em;
}
.interest {
margin: 0.2em;
}
.experience label {
width: 7em;
}
.interest label {
width: 4.5em;
}
.radio_slider input:checked+label.interest1 {
background-color: #cc0000;
}
.radio_slider input:checked+label.interest2 {
background-color: #cc8f00;
}
.radio_slider input:checked+label.interest3 {
background-color: #cccc00;
}
.radio_slider input:checked+label.interest4 {
background-color: #aacc00;
}
.radio_slider input:checked+label.interest5 {
background-color: #5ca329;
}
.radio_slider input:checked+label.interest6 {
background-color: #00cc00;
}
.radio_slider input:checked+label.experience1 {
background-color: #b5b5b5;
}
.radio_slider input:checked+label.experience2 {
background-color: #9fa6cb;
}
.radio_slider input:checked+label.experience3 {
background-color: #8997e1;
}
.radio_slider input:checked+label.experience4 {
background-color: #7289f8;
}
/***********/
/* URL box */
/***********/
#url_area {
width: 60em;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
margin-bottom: 4em;
text-align: center;
}
#url_text {
width: 25em;
margin-right: 1em;
font-family: Helvetica, sans-serif;
font-size: 1em;
padding: 0.2em;
}
/***********/
/* Buttons */
/***********/
button {
background-color: transparent;
border: none;
color: #d6d6d6;
font-family: Helvetica, sans-serif;
font-size: 1em;
cursor: pointer;
}
button:hover {
color: #5a5a5a;
}
button:active {
color: #a20e0e;
}
#dom_edit_buttons {
display: block;
margin-left: -25em;
margin-top: -2em;
margin-bottom: 0.75em;
}
#sub_edit_buttons {
display: block;
margin-left: 25em;
margin-top: -2em;
margin-bottom: 0.75em;
}
.tool_tip {
visibility: hidden;
background-color: #5a5a5a;
color: #d6d6d6;
text-align: center;
padding: 0.5em;
margin-top: -4em;
margin-left: -3em;
border-radius: 0.5em;
position: absolute;
z-index: 1;
}
button:hover .tool_tip {
visibility: visible;
}
button:active .tool_tip {
background-color: #a20e0e;
}
#clear_dom .tool_tip,
#clear_sub .too_ltip {
margin-left: -4em;
}
#edit_dom .tool_tip,
#edit_sub .tool_tip {
margin-left: -1.5em;
}
/* Button icons from https://iconoir.com/ */
*[class^="iconoir-"]::before,
*[class*=" iconoir-"]::before {
content: " ";
display: block;
background: currentColor;
mask-size: cover;
-webkit-mask-size: cover;
width: 1em;
height: 1em;
}
*[class^="iconoir-"],
*[class*=" iconoir-"] {
display: block;
}
.iconoir-copy::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
transform: scale(2);
}
.iconoir-trash::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
transform: scale(1.5);
}
.iconoir-edit-pencil::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
transform: scale(1.5);
}