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
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;
|
|
}
|
|
|
|
|
|
|