ribbit/assets/css/main.css

356 lines
4.9 KiB
CSS

html {
min-height: 100%;
}
body {
color: #777;
min-height: 100%;
}
a {
text-decoration: none;
}
div.content {
padding: 15px;
min-height: 100%;
color: black;
}
div.half {
width: 50%;
}
.header {
margin-left: 0;
}
.fa-2 {
font-size: 2em;
}
.primary {
color: #0078e7;
}
.primary-bg {
background-color: #0078e7;
}
.error {
color: #DD0000;
}
.error-bg {
background-color: #DD0000;
}
div.optionalfield {
margin: 2em;
}
input.file {
padding: .5em .6em;
display: inline-block;
border: 1px solid #ccc;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
}
input.ranking-input {
width: 50px;
border-radius: 5px;
border: 1px solid #CCC;
text-align: center;
}
i.move-icon {
cursor: ns-resize;
}
#menu {
width: 100%;
height: 40px;
position: relative;
background: #191818;
webkit-overflow-scrolling: touch;
}
#menu .pure-menu-heading {
display: inline-block;
}
#menu .pure-menu-nonlink {
color: #777;
padding: .5em 1em;
display: block;
text-decoration: none;
white-space: nowrap;
}
#menu .menu-button {
display: inline;
position: absolute;
top: 0px;
right: 0px;
margin-top: 10px;
margin-right: 10px;
color: white;
text-decoration: none;
}
.menu-bottom {
width: 150px;
border-top: 1px solid white;
}
#menu .menu-container {
display: none;
position: absolute;
right: 0px;
top: 40px;
background-color: #191818;
}
#menu .menu-container>ul {
background-color: #191818;
}
div.horizontal-scroll {
overflow-x: scroll;
}
img.thumbnail {
height: 100px;
max-height: 100%;
max-width: 100%;
}
.thumbnail-container {
display: block;
height: 100%;
background-color: #EEE;
padding-top: 20px;
}
.padding {
padding: 5px;
}
.space {
margin: 5px;
}
.space-sides {
margin-left: 5px;
margin-right: 5px;
}
.space-vertical {
margin-top: 5px;
margin-bottom: 5px;
}
.large {
font-size: 18px;
}
.big-space {
margin: 10px;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.center-all {
text-align: center;
vertical-align: center;
margin: auto;
}
table.center tbody>td {
text-align: center;
}
table.padding td {
padding: 5px;
}
table tfoot {
border-top: 1px solid #CCC;
}
.pure-button-error {
background-color: #DD0000;
color: #FFF;
}
.pure-button-toggle-first {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.pure-button-toggle-middle {
border-radius: 0px;
margin-left: -5px;
border-left: 1px solid #CCC;
}
.pure-button-toggle-last {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
margin-left: -5px;
border-left: 1px solid #CCC;
}
.pure-button:disabled {
background-color: #CCC;
color: #999;
}
#modal-body {
margin-bottom: 15px;
}
#modal-overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.5);
}
#modal-overlay>div {
margin: 10% 10%;
width: 80%;
margin: 100px auto;
background-color: #FFF;
border: 1px solid #000;
border-radius: 10px;
padding: 15px;
text-align: center;
}
div#embiggenedScreenShot {
cursor: pointer;
background-color: #FFF;
}
div#embiggenedScreenShot>img{
max-width:100%;
max-height:100%;
}
div.fullscreen {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
margin: auto auto;
z-index:1001;
}
.pure-form input[disabled]:not([type]).disabled-but-visible {
background-color: #FFF;
color: #555;
}
input.larger {
width: 400px;
}
@media (min-width: 40em) {
#menu {
width: 150px;
height: 100%;
position: fixed;
}
#menu .menu-button {
display: none;
}
#menu .menu-container{
display: initial;
width: 100%;
}
.menu-bottom {
width: 150px;
position: fixed;
left: 0px;
bottom: 0px;
}
.header {
margin-left: 150px;
}
div.flash {
font-size: 24px;
position: fixed;
top: 0px;
width: 100%;
}
div.flash.error {
background-color: #DD0000;
color: #FFFFFF;
}
div.flash.success {
background-color: #229af9;
color: #FFFFFF;
}
}
/* Small Screens */
@media screen and (max-width:35.5em) {
div.pure-control-group label.control-label {
text-align: left;
}
.only-large {
display: none;
}
.only-small {
display: default;
}
.team-management-buttons {
text-align:left;
}
.team-management-buttons>.pure-button {
margin-top: 1em;
}
}
/* Starting at Small, horizontal */
@media screen and (min-width: 35.5em) {
div.pure-control-group label.control-label {
text-align: left;
}
.only-small {
display: none;
}
}
/* Small Horizontal to Medium */
@media screen and (min-width: 35.5em) and (max-width: 48em) { }
/* Medium Screens */
@media screen and (min-width: 48em) and (max-width:64em) { }
/* Larger Screens */
@media (min-width: 64em) { }