246 lines
2.9 KiB
CSS
246 lines
2.9 KiB
CSS
/*
|
|
Infinity Squared CSS
|
|
https://github.com/tomslominski/infinity-squared
|
|
*/
|
|
|
|
/* Set up */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-size: 62.5%;
|
|
}
|
|
|
|
body {
|
|
background: #F1F1F1;
|
|
color: black;
|
|
font-family: 'Ubuntu', sans-serif, Helvetica, Arial;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(1,63,109,0.7);
|
|
color: #FFF;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: rgba(1,63,109,0.7);
|
|
color: #FFF;
|
|
}
|
|
|
|
.icon-inline {
|
|
vertical-align: top;
|
|
height: 1.2rem;
|
|
width: 1.2rem;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
/* Structure and global design */
|
|
a, a:visited {
|
|
color: #013F6D;
|
|
fill: #013F6D;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wrapper {
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.content {
|
|
background: white;
|
|
padding: 15px;
|
|
margin-top: 15px;
|
|
border: 1px solid #D8D8D8;
|
|
box-shadow: 0 0 3px 0 #CCC;
|
|
}
|
|
|
|
/* Header */
|
|
.site-header {
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.site-title {
|
|
background-color: #013F6D;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 7rem;
|
|
border-top: 4px #000 solid;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.site-title a, .site-tite a:visited {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-title a:hover {
|
|
border-bottom: #FFF 1px dashed;
|
|
}
|
|
|
|
.menu {
|
|
background: black;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
color: white;
|
|
}
|
|
|
|
.menu a {
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
padding: 12px;
|
|
background: none;
|
|
transition: background 0.8s;
|
|
}
|
|
|
|
.menu a:hover {
|
|
transition: background 0.8s;
|
|
background: #292929;
|
|
}
|
|
|
|
/* Forms */
|
|
.form-item {
|
|
padding: 2% 0;
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.half-width {
|
|
width: 50%;
|
|
}
|
|
|
|
label.primary {
|
|
font-weight: bold;
|
|
}
|
|
|
|
label.secondary {
|
|
color: #CCC;
|
|
}
|
|
|
|
input:not([type=submit]):not([type=file]) {
|
|
width: 100%;
|
|
padding: 10px;
|
|
}
|
|
|
|
|
|
/* Tooltips */
|
|
.qtip-default {
|
|
border-color: #013F6D;
|
|
background-color: #013F6D;
|
|
color: #FFF;
|
|
}
|
|
|
|
.ui-tooltip-titlebar,
|
|
.ui-tooltip-content{
|
|
border-color: #013F6D;
|
|
background-color: #013F6D;
|
|
color: #FFF;
|
|
}
|
|
|
|
/* Output */
|
|
.output label {
|
|
width: 30%;
|
|
float: left;
|
|
}
|
|
|
|
.output input {
|
|
width: 70%
|
|
}
|
|
|
|
.error {
|
|
color: red;
|
|
padding-bottom: 20px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.social-sharer {
|
|
display: inline-block;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.output label {
|
|
width: 20%;
|
|
}
|
|
|
|
.output input {
|
|
width: 60%
|
|
}
|
|
|
|
.output button {
|
|
float: right;
|
|
}
|
|
|
|
.output button.active {
|
|
color:#013F6D;
|
|
}
|
|
|
|
svg#url-qr-code {
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
text-align: center;
|
|
border-top: 2px solid #000;
|
|
}
|
|
|
|
.footer p {
|
|
font-size: 1.2rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.footer a:hover {
|
|
text-decoration: none;
|
|
border-bottom: dashed 1px #013F6D;
|
|
}
|
|
|
|
/* Mobile */
|
|
@media screen and (max-width: 720px) {
|
|
body {
|
|
background:white;
|
|
margin:0;
|
|
}
|
|
|
|
#container {
|
|
min-width:0;
|
|
width:100%;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
header {
|
|
width:100%;
|
|
padding:0;
|
|
}
|
|
|
|
.menu li {
|
|
margin-top:0;
|
|
}
|
|
|
|
.desktop-only, .zclip {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
/* Error page */
|
|
#wrap > h1 > a {
|
|
display: none;
|
|
}
|
|
|
|
#wrap > h2,
|
|
#wrap > p {
|
|
color: red;
|
|
}
|
|
|
|
/* Importing custom user styles */
|
|
@import url("public/user-style.css");
|