You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

796 lines
15 KiB
CSS

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
margin: 0 auto;
background: #eee;
}
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
font-family: 'Open Sans', Arial, sans-serif;
}
a{
color: #1c619a;
}
em {
color: #9A691C;
font-style: normal;
font-weight: bold;
}
pre {
font-family: monospace;
margin-top: 1em;
margin-bottom: 1em;
}
div#captcha > div {
margin: 1em auto;
}
/* Firefox fix */
.formpage.pure-g {
text-align: center;
}
.formpage.pure-g > div{
text-align: left;
}
/***************************************************/
/********************* Top bar */
#topbar{
padding: 0 3%;
color: #737373;
background: #000;
}
#topbar p {
margin: 0;
}
#topbar a:hover{
cursor: pointer;
background: none;
}
#topbar a{
display: inline-block;
color: #2c99f3;
text-decoration: none;
padding: 4px 5px;
}
#topbar a:hover{
background: #222;
}
#topbar .topbar-left{
float: left;
}
#topbar .topbar-right{
float: right;
text-align: right;
}
#topbar .topbar-right a{
font-size: 1.2em;
padding: 2px 5px 2px;
}
/***************************************************/
/********************* Header */
header{
height: 80px;
padding: 0 3%;
color: #fff;
background-color: #1c619a;
border-bottom: 1px solid #000;
}
header #logo{
float: left;
height: 80px;
padding-left: 75px;
background: url(../img/bg-logo.svg) no-repeat;
background-size: 70px;
background-position: left center;
}
header #logo * {
margin: 0;
padding: 0;
border: 0;
}
header #logo h1, header #logo h2 {
font-size: 100%;
}
header #logo h1 a{
margin: 0px;
position: relative;
top: -24px;
font-size: 68px;
}
header #logo h2 a{
display: block;
margin: 0px;
margin-top: 3px;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.425em;
}
header #logo h1 a, header #logo h2 a {
color: white;
text-decoration: none;
}
header nav{
float: right;
font-size: 1.2em;
text-transform: uppercase;
}
header nav ul{
margin: 0px;
padding: 0px;
padding-top: 26px;
}
header nav li{
display: inline;
margin: 0px 7px;
}
header nav li.selected{
border-bottom: 2px solid #ddd;
}
header nav li:hover{
border-bottom: 2px solid #1c80d4;
}
header nav a{
color: #fff;
text-decoration: none;
}
/***************************************************/
/********************* Common layout */
.left-menu {
float: left;
display: block;
width: 200px;
line-height: 20px;
position: absolute;
}
.left-menu p.menu-title {
text-align: center;
padding-top: 1.5em;
margin: 0;
}
.left-menu .title a {
color: white;
font-weight: 600;
}
.left-menu ul {
list-style-type: disc;
padding: 0.5em 1em 0.5em 30px;
margin: 0;
}
.left-menu li {
padding: 0.3em 0;
}
.left-menu a {
text-decoration: none;
}
.left-menu + .content {
margin-left: 200px;
}
.content {
padding: 0em 2em 3em 2em;
background: #fff;
overflow: auto;
-webkit-box-shadow: -1px 1px 2px -1px rgba(0,0,0,0.53);
-moz-box-shadow: -1px 1px 2px -1px rgba(0,0,0,0.53);
box-shadow: -1px 1px 2px -1px rgba(0,0,0,0.53);
}
.content h1 {
font-size: 2em;
color: #1c619a;
text-align: center;
}
.content h2 {
font-size: 1.5em;
font-weight: normal;
}
.content h3 {
font-size: 1em;
padding-left: 2em;
}
footer{
padding-top: 4em;
clear: both;
color: #1c619a;
text-align: center;
}
footer a { color: #1c619a; }
footer p { margin-top: 0.6em; margin-bottom: 0.5em; }
.message p {
text-align: center;
width: 100%;
padding: 1.2em;
margin: 0;
color: white;
}
.message.motd p {
color: black;
}
.message p.info, .message p.success {
background-color: #062D4D;
}
.message p.error, .message p.critical, .message .warning {
background-color: #A7332F;
}
table.admin-list {
width: 100%;
}
table.admin-list thead td {
text-align: center;
font-size: 1.1em;
font-weight: 600;
border: 1px solid #bbb;
border-top: 0;
}
table.admin-list thead tr td:first-child { border-left: 0; }
table.admin-list thead tr td:last-child { border-right: 0; }
table.admin-list tbody tr td:first-child { font-size: 1.1em; border-left: 0; }
table.admin-list tbody tr td { padding: 6px; border: 1px solid #bbb; }
table.admin-list tbody tr td:first-child { border-left: 0; }
table.admin-list tbody tr td:last-child { border-right: 0; }
table.admin-list tbody tr:last-child td { border-bottom: 0; }
table.admin-list tbody tr:nth-child(even) { background: #eee; }
@media screen and (max-width: 64em) {
.content {
padding: 0em 1em 3em 1em;
}
header{
height: 120px;
}
header nav{
float: left;
width: 100%;
}
header nav ul{
text-align: center;
padding-top: 0;
}
}
/***************************************************/
/********************* Forms / Buttons */
.pure-form select {
height: 2.5em;
}
.pure-button-primary, .pure-button-selected,
a.pure-button-primary, a.pure-button-selected {
color: #fff;
background-color: #1c619a;
padding: 0.5em 2em;
}
form p.inputinfo {
font-size: 0.8em;
display: block;
margin: 0.5em 1em 1em 180px;
}
.formpage div.pure-g > div {
margin: auto;
}
.formpage form.pure-form label {
margin-top: 1.25em 0 0.25em 0;
}
.formpage form.pure-form input,
.formpage form.pure-form select,
.formpage form.pure-form textarea {
margin-left: auto;
margin-right: auto;
margin: 0.10em auto;
width: 90%;
}
.formpage form.pure-form {
text-align: center;
}
.formpage form.pure-form input[type=submit] {
margin-top: 1.25em;
}
.formpage form.pure-form {
}
.formpage form.pure-form .inputhelp {
width: 80%;
display: inline-block;
margin: 0;
color: #606060;
font-size: 0.8em;
}
.formpage > div {
margin: auto;
}
ul.errorlist {
list-style-type: none;
color: #b00000;
}
.formpage div.links {
margin: 20px auto 0 auto;
}
.formpage div.links ul{
padding: 0px 20px 0 20px;
}
.formpage div.links ul li{
list-style: none;
}
.formpage div.links ul li:before{
content: "→ ";
}
.formpage div.links a{
text-decoration: none;
}
.formpage div.links a:hover{
text-decoration: underline;
}
.formpage form.pure-form input.button-1-2 {
width: 45%;
}
/***************************************************/
/********************* Help Pages */
.install-guides {
text-align: center;
list-style-type: none;
}
.install-guides li {
display: inline-block;
width: 10em;
padding-top: 1em;
text-align: center;
border: 1px solid #ccc;
border-radius: 5px;
margin: 0 1em;
}
.install-guides li a {
line-height: 3em;
text-decoration: none;
}
.install-guides li i {
display: block;
color: #0b2d4f;
}
.page > .content > p {
margin: 1.5em 0;
}
/***************************************************/
/********************* Home Page */
.home-content {
width: 75%;
margin: 3em auto;
}
.home-item{
float: left;
text-align: center;
}
.home-item img{
width: 60%;
margin: auto;
}
.home-item h2{
color: #1c619a;
text-transform: uppercase;
font-weight: normal;
font-size: 1.5em;
margin: 0.80em 0 0.60em 0;
}
.home-item p{
margin: 0px;
padding: 0.2em;
}
.home-item b{ color: #1c619a; }
.home-item ul{
margin: 0;
padding: 0 1.5em;
}
.home-item ul li{
margin: 0px;
padding: 0px;
list-style: none;
}
.home-signup {
text-align: center;
}
a.home-signup-button {
padding: 0.75em 2em;
}
@media screen and (max-width: 80em) {
.home-content {
width: 100%;
}
}
@media screen and (max-width: 48em) {
.home-content {
width: 100%;
margin-top: 0;
}
.home-item-content {
margin-left: 20%;
}
.home-item h2 {
margin: 1em 0 0.20em 0;
}
.home-item img {
width: 20%;
float: left;
margin-top: 3em;
}
.home-signup-button {
min-width: 50%;
}
}
/***************************************************/
/********************* Account */
.account-status {
text-align: center;
margin-bottom: 2em;
}
.account-status-paid, .account-status-disabled {
font-weight: bold;
}
.account-aff-box {
background: #E6F5FF;
border-radius: 4px;
border: 1px solid #72B6ED;
box-shadow: 1px 1px 3px #aaa;
padding: 0.6em 2em;
margin: 2em 0 0 0;
}
.account-motd {
background: #E6F5FF;
border-radius: 4px;
border: 1px solid #72B6ED;
box-shadow: 1px 1px 3px #aaa;
padding: 0.3em 2em;
text-align: center;
margin: 2em 0 0 0;
}
.account-payment-box form label, .account-giftcode-box form label {
width: 8em;
}
.account-payment-box h3 {
text-align: center;
}
.account-payment-box {
margin-bottom: 2em;
}
.pure-form-aligned.centered-form .pure-controls {
width: 100%;
margin-left: 0;
}
.pure-form-aligned.centered-form .pure-controls input[type=submit] {
display: block;
margin: auto;
}
.account-giftcode-box .pure-control-group {
display: flex;
align-items: center;
justify-content: center;
}
.account-giftcode-box .pure-form-aligned.centered-form .pure-control-group label {
width: auto;
}
.account-payment-tabs {
float : left;
padding: 1em;
}
.account-payment-tab > label {
width: 50%;
text-align: center;
display: block;
float: left;
cursor: pointer;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
height: 2em;
border: 1px solid #ccc;
border-bottom: 0;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
background: #eee;
}
.account-payment-tab > label span {
display: block;
width: 100%;
height: 100%;
padding: 0.3em 0.5em 0 0.5em;
position: relative;
top: 1px;
}
.account-payment-tab [id^="tab"]:checked + label span {
background: #fff;
}
.account-payment-tab [id^="tab"]:checked + label {
background: #fff;
}
.account-payment-tab > input[type="radio"] {
display: none;
}
.account-payment-tab .tab-content {
display: none;
border: 1px solid #ccc;
float: right;
width: 100%;
margin: 2em 0 0 -100%;
padding: 1em 1em 0 1em;
}
.account-payment-tab [id^="tab"]:checked ~ .tab-content {
display: block;
}
.account-payment-tab .tab-content p {
margin: 0.5em 0 0 0;
text-align: center;
font-size: 0.8em;
color: #666;
}
@media screen and (min-width: 64em) {
.account-giftcode-box {
padding-top: 4em;
}
}
/***************************************************/
/********************* Gateways */
#gateways table {
width: 100%;
}
#gateways table thead td {
text-align: center;
font-size: 1.1em;
font-weight: 600;
border: 1px solid #bbb;
border-top: 0;
}
#gateways table thead tr td:first-child {
border-left: 0;
}
#gateways table thead tr td:last-child {
border-right: 0;
}
#gateways table tbody tr td:first-child {
font-size: 1.2em;
border-left: 0;
}
#gateways table tbody tr td {
padding: 10px;
border: 1px solid #bbb;
}
#gateways table tbody tr td:first-child {
border-left: 0;
}
#gateways table tbody tr td:last-child {
border-right: 0;
}
#gateways table tbody tr:last-child td {
border-bottom: 0;
}
#gateways table tbody tr:nth-child(even) {
background: #eee;
}
#gateways table tr td:not(:first-child) {
width: 20%;
}
#gateways table tr td .td-info {
display: block;
font-size: 0.8em;
font-weight: normal;
}
#gateways .host_name {
font-family: monospace;
}
/***************************************************/
/********************* Tickets */
div.ticket-messages {
margin: 2em 2em;
border: 1px solid #c7c7c7;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div.ticket-message {
background: #f4f4f4;
border-bottom: 1px solid #c7c7c7;
padding: 0.25em 1em 1em 1em;
}
div.ticket-message:last-child {
border-bottom: 0;
}
div.ticket-message-user {
background: #e8e8e8;
}
div.ticket-message-staff {
}
div.ticket-message-private {
background: #f8e7e7;
}
.ticket-message-author,
.ticket-message-date {
font-weight: bold;
font-size: 0.9em;
margin: 0;
margin-bottom: 0.5em;
}
.ticket-message-author {
text-align: left;
float: left;
}
.ticket-message-date {
text-align: right;
}
.ticket-message-content {
margin: 0;
}
.ticket-message-reply textarea {
width: 80%;
margin: auto;
}
.ticket-message-reply input[type=submit] {
margin: auto;
}
.pages {
text-align: center;
}
.pages a {
margin: 1em 0.5em;
padding: 0.20em 0.6em;
border: 1px solid #c7c7c7;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
text-decoration: none;
}
/***************************************************/
/********************* Live chat */
#livechat-info {
border-bottom: 1px solid black;
text-align: center;
}
.livechat-thing {
position: fixed;
bottom: 0;
right: 0;
}
.livechat-thing .icon{
width: 1.4em;
height: 1.4em;
display: inline-block;
background: url(../img/chat.svg);
background-size: contain;
background-repeat: no-repeat;
margin-right: 0.4em;
margin-bottom: -0.4em;
}
.livechat-thing a {
display: block;
padding: 0.6em 0.9em;
background-color: #1c619a;
color: white;
text-decoration: none;
font-size: 0.9em;
border-left: 1px solid #1c619a;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
#livechat-iframe {
border: 0;
width: 100%;
height: 80%;
}
.stripe-button-el {
display: block !important;
margin: 4em auto 3em auto;
}
/***************************************************/
/********************* Fonts */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(../fonts/OpenSans.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/OpenSansB.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}