spee.ch/public/assets/css/componentStyle.css
2017-07-21 13:40:01 -07:00

187 lines
2.2 KiB
CSS

/* top bar */
#logo, #title {
display: inline-block;
}
#logo {
height: 1.5em;
}
#title {
margin: 2px 5px 2px 5px;
}
/* publish */
#drop-zone {
border: 1px dashed lightgrey;
padding: 1em;
height: 6em;
}
#asset-preview-holder {
width: 100%;
margin-bottom: 1em;
}
.snapshot-generator {
display: block;
height: 1px;
left: 0;
object-fit: contain;
position: fixed;
top: 0;
width: 1px;
z-index: -1;
}
/* show routes */
.show-asset {
width: 100%;
margin-bottom: 1em;
margin-top: 1em;
}
.show-asset-lite {
margin: 0px;
}
.panel.links {
font-size: small;
}
input.link {
width: 80%;
}
button.copy-button {
padding: 4px;
float: right;
}
.share-option {
margin-bottom: 1em;
}
.metadata-table {
font-size: small;
border-collapse: collapse;
margin-bottom: 1em;
}
.metadata-row {
border-bottom: 1px solid lightgrey;
margin: 2px;
}
.left-column {
width: 30%;
font-weight: bold;
vertical-align: top;
}
/* trending claims */
.grid-item {
width: 23%;
margin: 0px 1% 20px 1%;
}
/* learn more */
.learn-more {
text-align: center;
margin-top: 2px;
padding-top: 2px;
border-top: 1px solid lightgrey;
}
/* examples */
.example {
clear: both;
width: 100%;
margin-bottom: 15px;
overflow: auto;
}
.example-image, .example-code {
float: left;
margin: 2%;
}
.example-image {
width: 21%;
}
.example-code {
float: right;
padding: 4%;
width: 62%;
background-color: lightgrey;
font-family: monospace;
color: #666;
word-wrap: break-word;
}
/* contribute */
#github-logo {
float: right;
height: 1em;
}
/* all claims */
.all-claims-item {
margin-top: 2px;
padding-top: 2px;
border-top: 1px lightgrey solid;
overflow: auto;
}
.all-claims-img {
width: 20%;
float: left;
margin: 5px 30px 5px 0px;
}
.all-claims-details {
word-wrap: break-word;
list-style: none;
list-style-type: none;
}
/* meme */
canvas {
background-color: white;
width: 100%;
height: auto;
}
/* statistics */
.totals-row {
border-top: 1px solid grey;
border-bottom: 1px solid grey;
font-weight: bold;
}
@media (max-width: 750px) {
.all-claims-img {
width:30%;
}
.all-claims-details {
font-size: small;
}
.show-asset-lite {
width: 100%;
}
}
@media (max-width: 475px) {
.all-claims-img {
width:50%;
}
}