piratebox-web/css/page_style.css

413 lines
5.9 KiB
CSS

* {
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body, div, object, iframe, fieldset {
border: 0;
}
ol, ul {
list-style: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
header, footer, footer, nav, section, article, hgroup, figure {
display: block;
}
legend {
display: none;
}
body {
color: #1b1d1e;
font-family: sans-serif;
font-size: 100%;
}
h1 {
font-size: 1em;
font-weight: bold;
margin: 0;
}
h2 {
font-size: 1.3em;
font-weight: bold;
margin: 0 0 0.25em;
}
h3 {
font-size: 1em;
font-weight: bold;
margin: 0 0 0.25em;
}
p {
font-size: 1em;
font-weight: normal;
margin: 0 0 1em;
}
a {
color: #ad000b;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.current {
color: white;
}
#top-nav a {
display: block;
font-size: 1.5em;
font-weight: normal;
line-height: 1.5em;
margin: 0;
}
input {
font-size: .75em;
}
label {
color: white;
font-size: .75em;
}
footer {
color: #e7e9ea;
}
.message date {
font-size: .625em;
color: #979ea1;
margin-right: 0.5em;
}
.message name {
font-size: .75em;
font-weight: bold;
margin-right: 0.5em;
}
.message data {
font-size: .75em;
margin-right: 0.5em;
}
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
.orange {
color: #ff8040;
}
body {
background: #e7e9ea;
}
header, footer {
background: #1b1d1e;
}
header img, footer img {
vertical-align: bottom;
}
#logo {
background-image: url('../img/piratebox-logo-horizontal-white.png');
width: 215px;
height: 36px;
float: left;
overflow: hidden;
}
#menu-icon {
background-image: url('../img/menu.png');
float: right;
width: 36px;
height: 36px;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#top-nav {
clear: both;
display: none;
padding: 1em 0 0 0;
}
#thanks {
float: right;
}
#upload iframe {
border: 1px solid #979ea1;
border-radius: 3px;
margin: 0 0 1em;
}
#shoutbox {
height: 350px;
width: 100%;
border: 1px solid #979ea1;
border-radius: 3px;
margin: 0 0 1em;
padding: 0.5em;
}
#shoutbox .message {
margin: 0 0 .25em 0;
}
#shoutbox-input {
margin: 0 0 1em 0;
}
#shoutbox-input .nickname,
#shoutbox-input .message,
#shoutbox-input .button {
width: 100%;
}
#shoutbox-options label {
float: left;
overflow: hidden;
border-radius: 3px;
margin: 0 0.5em 0.5em 0;
padding: 0.5em 1em;
}
#shoutbox-options label input {
margin: 0 .5em 0 0;
}
#shoutbox-options .bg-black {
background: #1b1d1e;
}
#shoutbox-options .bg-blue {
background: blue;
}
#shoutbox-options .bg-green {
background: green;
}
#shoutbox-options .bg-orange {
background: #ff8040;
}
#shoutbox-options .bg-red {
background: red;
}
input {
height: 3em;
border: 1px solid #979ea1;
border-radius: 3px;
margin: 0 0 1em;
padding: 0 0.5em;
}
input[type=file] {
border: 0;
}
input[type=radio] {
height: 1.3em;
margin: 0 .5em 0 0;
}
.button {
background: #979ea1;
border: 0;
color: white;
margin: 0;
}
.button:active {
background: #7c8589;
color: #cccccc;
-webkit-box-shadow: #4b5154 0px -3px 0px inset;
box-shadow: #4b5154 0px -3px 0px inset;
}
.card {
background: white;
border-radius: 3px;
-webkit-box-shadow: #979ea1 0px 3px 0px;
box-shadow: #979ea1 0px 3px 0px;
margin: 0 0 1em;
padding: 1em;
}
.container {
height: 100%;
padding: 1em;
width: 100%;
}
.list table {
width: 100%;
}
.list table thead {
text-align: left;
}
.list table tbody tr {
height: 2em;
vertical-align: middle;
}
.list table tbody tr:hover {
background: #e7e9ea;
}
.list table .m, .list table .s, .list table .t {
display: none;
}
@media screen and (min-width: 801px) {
#logo {
margin: 0 2em 0 0;
}
#menu-icon {
display: none;
}
#top-nav {
clear: none;
display: table-cell;
padding: 0;
vertical-align: middle;
}
#top-nav ul li {
float: left;
}
#top-nav ul li a {
margin: 0 1em 0 0;
padding: 0;
}
#sidebar {
float: right;
width: 40%;
}
#main {
float: left;
padding: 0 1em 0 0;
width: 60%;
}
#shoutbox-input .nickname {
float: left;
margin: 0 1em 0 0;
width: 20%;
}
#shoutbox-input .message {
float: left;
margin: 0 1em 0 0;
width: 60%;
}
#shoutbox-input .button {
float: right;
margin: 0;
width: 15%;
}
.to-top {
display: none;
}
.container {
margin: 0 auto;
max-width: 1280px;
width: 90%;
}
.list table .m,
.list table .s,
.list table .t {
display: table-cell;
}
}
/*
Progress bar used from the Bootstrap Library:
https://github.com/twbs/bootstrap
Licensed under the MIT license.
*/
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #F5F5F5;
border-radius: 4px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
}
.progress-bar {
float: left;
width: 0px;
font-size: 12px;
line-height: 20px;
color: #FFF;
text-align: center;
background-color: #337AB7;
box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.15) inset;
transition: width 0.6s ease 0s;
}
body,html {
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
.container, #content {
flex:1;
}
.filesize {
float: right;
font-family: monospace;
}
#upform {
overflow: hidden;
}
#upform input[type=submit] {
width: 100%;
}
.piratebox-version {
float: right;
}