Mqleet's picture
[update] templates
a3d3755
/* #body * {
border: 1px dashed blue;
} */
:root {
--text-color: #444;
--shadow: #999;
}
* {
font-family: sans-serif;
color: var(--text-color);
}
body {
background-color: #F9F9F9;
}
#body {
text-align: center;
margin: auto;
padding-top: 1em;
}
/*
#title {
text-align: center;
font-size: 3rem;
margin-bottom: 1.5rem;
max-width: 80%;
margin: auto;
}
*/
p a, table.affiliations a, table.menu a {
border-bottom: solid 1px #ddd;
color: inherit;
text-decoration: none;
}
table.menu {
font-size: 13pt;
font-weight: 500;
}
.title {
font-family: Google Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 250%;
font-weight: 500;
display: block;
text-align: center;
margin-bottom: 14px;
padding-top: 40px;
padding-bottom: 5px;
line-height: 1.5em;
margin-left: auto;
margin-right: auto;
max-width: 1080px;
}
p.author {
font-size: 16pt;
font-weight: 300;
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 1080px;
padding: 0em 3em 0 3em;
line-height: 1.5em;
}
.author {
margin: 0pt 8pt;
}
p.affiliations {
font-size: 14pt;
font-weight: 200;
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 1080px;
padding: 0.5em 4em 0.5em 4em;
line-height: 1.5em;
}
p.venue {
font-size: 14pt;
font-weight: 200;
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 1080px;
padding: 0em 3em 0.5em 3em;
line-height: 1.5em;
}
p.menu {
font-size: 14pt;
font-weight: 500;
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 1080px;
padding: 0em 3em 0.5em 3em;
line-height: 1em;
}
.section{
font-size: 150%;
font-weight: 500;
}
#conference {
color: #666;
font-weight: 100;
}
#content {
display: inline-block;
width: 60%;
min-width: 800px;
margin: auto;
border-right: 3px solid var(--shadow);
border-bottom: 3px solid var(--shadow);
border-radius: 1rem;
overflow: hidden;
background-color: white;
}
#content-teaser {
display: inline-block;
width: 60%;
min-width: 800px;
margin: auto;
border-radius: 1rem;
overflow: hidden;
background-color: white;
}
summary {
text-align: left;
font-size: 1.5rem;
width: calc(100% - 2rem);
padding: 1rem;
background-color: #F3F3F3;
}
details > details {
margin:0 2rem 0 2rem;
font-size: 1.25rem;
}
details details summary {
background-color: white;
border-bottom: 2px solid #999;
}
details details:last-child summary {
border-bottom: none;
}
details > img {
max-width: calc(100% - 2rem);
margin: 1rem;
}
#deepfashion img {
width: 512px;
}
#full_steps div {
width: 15% !important;
display:inline-block
}
#full_steps div * {
width: 100%;
}
.video_label {
display: inline-block;
width: 49%;
}
.video_label video {
display: block !important;
width: 100% !important;
}
#qualitative video {
width: 1024px;
max-width: 100%;
}
#more video {
width: 30%;
}
#failures video {
width: 100%;
}
#table-wrapper {
position:relative;
}
#table-scroll {
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#table-wrapper table * {
background:white;
color:black;
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
/* Parent Container */
.content_img{
position: relative;
}
/* Child Text Container */
.content_img div{
position: absolute;
top: 5%;
right: 10%;
background: black;
color: white;
margin-bottom: 5px;
font-family: sans-serif;
opacity: 0;
visibility: hidden;
-webkit-transition: visibility 0s, opacity 0.5s linear;
transition: visibility 0s, opacity 0.5s linear;
}
/* Hover on Parent Container */
.content_img:hover{
cursor: pointer;
}
.content_img:hover div{
width: 200px;
padding: 8px 15px;
visibility: visible;
opacity: 0.7;
}