schort/static/css/index.css

170 lines
2.6 KiB
CSS
Raw Normal View History

2016-02-10 07:57:22 +01:00
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
body {
display: flex;
justify-content: center;
align-items: center;
2016-02-12 18:00:45 +01:00
font-family: monospace;
2016-02-10 07:57:22 +01:00
}
#main {
width: 40%;
}
#url_input {
border: 1px solid rgb(200, 200, 200);
height: 1.3em;
2016-02-10 07:57:22 +01:00
margin: 0px;
padding-left: 10px;
flex: 1;
font-size: 0.7em;
2016-02-10 07:57:22 +01:00
}
#short_button {
border: 1px solid rgb(200, 200, 200);
height: 1.9em;
2016-02-10 07:57:22 +01:00
margin: 0px;
margin-left: 10px;
2016-02-12 18:00:45 +01:00
font-family: monospace;
font-size: 0.5em;
2016-02-10 07:57:22 +01:00
}
#short_form {
font-size: 3em;
2016-02-10 07:57:22 +01:00
display: flex;
justify-content: center;
align-items: center;
}
#url_text {
margin-right: 10px;
}
#message {
text-align: center;
margin-bottom: 5px;
word-wrap: break-word;
}
.error {
color: red;
}
.info {
color: #848400;
}
2016-02-12 18:00:45 +01:00
#infobar {
font-size: 1em;
2016-02-12 18:00:45 +01:00
display: flex;
margin-top: 10px;
}
a {
color: rgb(150, 150, 150);
2016-02-13 02:14:17 +01:00
display: block;
text-decoration: none;
2016-02-12 18:00:45 +01:00
}
a:hover {
color: black;
2016-02-13 02:14:17 +01:00
text-decoration: underline;
2016-02-12 18:00:45 +01:00
}
2016-02-13 02:56:13 +01:00
a:hover * {
fill: black;
}
#githubLink {
display: flex;
}
#githubLink svg {
margin-right: 5px;
margin-left: 5px;
fill: rgb(150, 150, 150);
width: 1.2em;
height: 1.2em;
2016-02-13 02:56:13 +01:00
}
2016-02-12 18:00:45 +01:00
.infoitem {
flex: 1;
display: flex;
justify-content: center;
border-right: 1px solid #cfcfcf;
}
.infoitem:last-child {
border-right: none;
}
2016-02-13 02:14:17 +01:00
span .description {
color: black;
display: none;
opacity: 0;
text-align: left;
2016-02-13 07:01:42 +01:00
margin-left: -6%;
2016-02-13 02:14:17 +01:00
max-width: 300px;
margin-top: 10px;
padding: 3px;
box-shadow: 3px 3px 10px gray;
2016-02-13 07:01:42 +01:00
max-height: 35%;
2016-02-13 02:14:17 +01:00
overflow-y: auto;
}
a:focus .description {
position: absolute;
display: inline;
opacity: 1;
background-color: white;
pointer-events: auto;
}
2016-02-13 02:23:54 +01:00
a:focus > div {
2016-02-13 02:14:17 +01:00
pointer-events: none;
}
ol, ul {
padding-left: 15px;
margin-top: 0px;
margin-bottom: 5px;
}
.description li {
font-weight: bold;
}
.description li + div {
margin-left: 3px;
margin-right: 5px;
}
.description {
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(50% 0, farthest-side, rgba(0,0,0,.3), rgba(0,0,0,0)),
radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.3), rgba(0,0,0,0)) 0 100%;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.3), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.3), rgba(0,0,0,0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
background-attachment: local, local, scroll, scroll;
}