333 lines
6.4 KiB
CSS
333 lines
6.4 KiB
CSS
/*
|
|
Created on : Jun 3, 2015, 9:33:11 AM
|
|
Author : Fornax
|
|
*/
|
|
|
|
body{
|
|
background-color: #111;
|
|
background-repeat: repeat;
|
|
font-size: 16px;
|
|
font-family: 'Ubuntu', sans-serif;
|
|
margin: 0;
|
|
text-align: center; /* Center the header and body */
|
|
line-height: 140%;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
color: var(--text_color);
|
|
}
|
|
|
|
html{
|
|
height: 100%;
|
|
}
|
|
|
|
/* Page layout elements */
|
|
|
|
#header{
|
|
position: relative;
|
|
width: auto;
|
|
height: auto;
|
|
margin: 0 -8px 0 -8px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
background-color: #222;
|
|
text-align: center;
|
|
z-index: 101;
|
|
border-bottom: #606060 solid 1px;
|
|
}
|
|
|
|
#header_image{
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.body{
|
|
position: relative;
|
|
display: inline-block;
|
|
max-width: 1000px;
|
|
min-width: 300px;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 0px 8px 0px 8px;
|
|
box-sizing: border-box;
|
|
background-color: #242424;
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
text-align: left;
|
|
box-shadow: #000000 8px 8px 50px 5px;
|
|
z-index: 1;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.navigation a {
|
|
float: none;
|
|
display: inline-block;
|
|
color: var(--text_color);
|
|
text-align: center;
|
|
padding: 4px 6px;
|
|
margin: 0 4px;
|
|
text-decoration: none;
|
|
font-family: "Lato", sans-serif;
|
|
font-weight: bold;
|
|
font-size: 26px;
|
|
}
|
|
.navigation a:hover {
|
|
background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));
|
|
box-shadow: 2px 2px 8px #000000;
|
|
color: #000000;
|
|
text-decoration: none;
|
|
}
|
|
.navigation .icon {
|
|
display: none;
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
.navigation a:not(:first-child) {display: none;}
|
|
.navigation a.icon {
|
|
float: right;
|
|
display: block;
|
|
}
|
|
.navigation.responsive {position: relative;}
|
|
.navigation.responsive .icon {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.navigation.responsive a {
|
|
float: none;
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.highlight_dark,
|
|
.highlight_middle,
|
|
.highlight_light,
|
|
.highlight_green,
|
|
.highlight_blue,
|
|
.highlight_red {
|
|
position: relative;
|
|
width: auto;
|
|
height: auto;
|
|
margin: 0 -8px 0 -8px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
padding: 4px 0px 4px 0px;
|
|
z-index: 101;
|
|
}
|
|
.highlight_light {background-color: #484848;}
|
|
.highlight_middle {background-color: #3a3a3a;}
|
|
.highlight_dark {background-color: #303030;}
|
|
|
|
.border-top {border-top: #686868 1px solid;}
|
|
.border-bottom {border-bottom: #686868 1px solid;}
|
|
|
|
/* Common elements */
|
|
|
|
hr{
|
|
height: 8px;
|
|
border: none;
|
|
background: linear-gradient(#101010, #303030);
|
|
margin: 16px -8px 16px -8px;
|
|
}
|
|
|
|
::-webkit-scrollbar{
|
|
width: 12px; /* for vertical scrollbars */
|
|
height: 12px; /* for horizontal scrollbars */
|
|
}
|
|
::-webkit-scrollbar-track{
|
|
background: rgba(0, 0, 0, 0);
|
|
}
|
|
::-webkit-scrollbar-thumb{
|
|
/*background: rgba(0, 0, 0, 0.5);*/
|
|
background-color: #555;
|
|
}
|
|
::-webkit-scrollbar-corner{
|
|
background: transparent;
|
|
}
|
|
|
|
a{
|
|
color: var(--highlight_color);
|
|
text-decoration: none;
|
|
}
|
|
a:hover{
|
|
text-decoration: underline;
|
|
color: var(--highlight_color);
|
|
}
|
|
|
|
.big_button{
|
|
height: 40px;
|
|
width: 40%;
|
|
min-width: 200px;
|
|
max-width: 400px;
|
|
margin: 10px !important;
|
|
border-radius: 10px;
|
|
font-size: 30px;
|
|
font-weight: normal;
|
|
line-height: 8px;
|
|
}
|
|
|
|
.progress_bar{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0;
|
|
background-color: #555;
|
|
overflow: hidden;
|
|
color: #eeeeee;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
.progressbar_inner{
|
|
position: absolute;
|
|
top: 0;
|
|
width: 0%;
|
|
left: 0;
|
|
height: 100%;
|
|
background-color: var(--highlight_color);;
|
|
overflow: hidden;
|
|
color: #000;
|
|
white-space: nowrap;
|
|
}
|
|
.progress_text{
|
|
overflow: hidden;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.uploads_queue{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
.files_container{
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 0;
|
|
height: auto;
|
|
display: inline-block;
|
|
}
|
|
|
|
.file_button, .file_button:hover{
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 316px;
|
|
max-width: 90%;
|
|
height: 60px;
|
|
float: left;
|
|
margin: 6px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
box-shadow: 2px 2px 5px 2px #111;
|
|
background-color: #111;
|
|
color: var(--text_color);
|
|
word-break: break-all;
|
|
text-align: left;
|
|
line-height: 120%;
|
|
display: block;
|
|
}
|
|
.file_button > img{
|
|
max-height: 60px;
|
|
max-width: 120px;
|
|
margin-right: 5px;
|
|
float: left;
|
|
display: block;
|
|
}
|
|
|
|
/* Form fields */
|
|
|
|
/* BUTTONS */
|
|
button,
|
|
input[type="submit"],
|
|
input[type="button"],
|
|
input[type="color"],
|
|
select{
|
|
border-radius: 4px;
|
|
border: 1px hidden transparent;
|
|
background: linear-gradient(#606060, #404040);
|
|
padding: 6px 10px 6px 10px;
|
|
margin: 2px;
|
|
box-shadow: 2px 2px 8px #000000;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
outline: 0;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
}
|
|
button:hover,
|
|
input[type="submit"]:hover,
|
|
input[type="button"]:hover,
|
|
input[type="color"]:hover,
|
|
select:hover,
|
|
button:focus,
|
|
input[type="submit"]:focus,
|
|
input[type="button"]:focus,
|
|
input[type="color"]:focus,
|
|
select:focus{
|
|
border: 1px solid var(--highlight_color);
|
|
margin: 1px;
|
|
}
|
|
button:active,
|
|
input[type="submit"]:active,
|
|
input[type="button"]:active,
|
|
input[type="color"]:active,
|
|
select:active{
|
|
border: 1px solid var(--highlight_color);
|
|
margin: 1px;
|
|
background: linear-gradient(#404040, #606060);
|
|
box-shadow: inset 3px 3px 6px #000000;
|
|
padding: 8px 8px 4px 12px;
|
|
}
|
|
.button_full_width {width: calc(100% - 4px);}
|
|
.button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));}
|
|
.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color));}
|
|
.button_red {background: linear-gradient(#821C40, #61152F);}
|
|
.button_red:active {background: linear-gradient(#61152F, #821C40);}
|
|
|
|
/* Dropdown list of the select tag */
|
|
option{
|
|
background-color: #404040;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* TEXT FIELDS */
|
|
textarea,
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="email"],
|
|
input[type="number"]{
|
|
border: none;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
background: linear-gradient(#404040, #606060);
|
|
box-shadow: inset 3px 3px 6px #000000;
|
|
padding: 3px 5px;
|
|
color: var(--text_color);
|
|
height: 26px;
|
|
font-size: 18px;
|
|
font-family: 'Ubuntu', sans-serif;
|
|
vertical-align: bottom;
|
|
outline: 0;
|
|
}
|
|
textarea:active,
|
|
input[type="text"]:active,
|
|
input[type="password"]:active,
|
|
input[type="email"]:active,
|
|
input[type="number"]:active,
|
|
textarea:focus,
|
|
input[type="text"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="number"]:focus{
|
|
border: 1px solid var(--highlight_color);
|
|
padding: 3px 4px;
|
|
}
|
|
|
|
input[type=file]{
|
|
visibility: hidden;
|
|
position: static;
|
|
width: 0;
|
|
height: 0;
|
|
}
|