UnPS-Short/assets/css/elements.css
Arctic Code 0f0fde578f Add a loading animation to run when the form gets submitted
This is to show that the page is actually doing something
if the return message doesn't get shown right away for whatever
reason (slow connection, overloaded server, memory leaks, etc)
2014-02-13 12:51:01 -06:00

375 lines
8.4 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.hidden { display: none; }
.unhidden { display: block; }
body{
line-height:1;
font-family:"Lucida Grande", Arial, Helvetica, Sans-Serif;
background-color: #434C56;
background-image: url(../images/body.jpg);
}
.navbar-wrapper {
position: relative;
z-index: 15;
}
.navbar{
background: rgba(34, 34, 34, 0.5);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
.navbar-nav a{
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
.navbar-nav a:hover{
background-color: #000;
color: #248;
webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 15px rgba(94, 125, 142, 0.9) !important;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 15px rgba(94, 125, 142, 0.9) !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 15px rgba(94, 125, 142, 0.9) !important;
}
.navbar-nav a:focus{
background: rgba(0, 0, 0, 0.275) !important;
}
#selected{
background: rgba(0, 0, 0, 0.275);
-webkit-box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
-moz-box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
}
/* Set widths on the navbar form inputs since otherwise they're 100% wide */
.navbar-form input[type="text"], .navbar-form input[type="password"] {
width: 140px;
}
.dropdown-menu{
background-color: rgba(34, 34, 34, 0.775);
color: #ffffff;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
.dropdown-menu li a{
color: #ffffff;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
-webkit-transition: all 0.70s ease-in-out;
-moz-transition: all 0.70s ease-in-out;
-ms-transition: all 0.70s ease-in-out;
-o-transition: all 0.70s ease-in-out;
display: block;
}
#profile-pic{
max-height: 18px;
max-width: 18px;
border-radius: 20%;
-webkit-border-radius: 20%;
-moz-border-radius: 20%;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
#uname-dropdown{
color: rgb(96, 123, 152);
}
#uname-dropdown:hover{
color: rgb(152, 123, 96);
}
#logout-link:hover{
color: red;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -46px;
padding: 0 0 46px;
}
#note{
color: #eee;
font-size: 12px;
margin: 0 auto;
padding: 4px;
text-align: center;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
width: 400px;
}
.form-shorten {
max-width: 600px;
padding: 15px;
margin: 0 auto;
}
.form-shorten .form-shorten-heading{
margin-bottom: 10px;
color: #eee;
}
.form-shorten .radio-center .btn{
color: #eee;
}
.form-shorten #radio-center .btn:checked{
border: 1px solid rgba(200, 200, 200, 0.64);
background-color: #1e3148;
}
.form-shorten input[type="text"], .form-shorten textarea{
position: relative;
font-size: 14px;
padding: 7px;
margin-bottom: -1px;
box-shadow: 0;
border: 1px solid rgba(200, 200, 200, 0.64);
padding: 6px 0px 6px 6px;
resize: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-shorten input[type="text"]:focus, .form-shorten textarea:focus{
z-index: 2;
border: 1px solid rgba(200, 200, 200, 0.64);
box-shadow: 0;
}
.form-shorten .radio-center input[type="radio"]:hover{
background:#200;
}
.form-shorten .btn-primary{
background-color: #333;
border: 1px solid #444;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
padding-bottom: 5px;
text-shadow: 0.1em 0.1em 0.2em #222;
}
.form-shorten .btn-primary:hover{
background-color: #3c6190;
border: 1px solid rgba(81, 203, 238, 1);
text-shadow: 0.1em 0.1em 0.2em #222;
}
.form-shorten input[type="radio"]{
display:none;
}
.form-shorten .fbtn{
width:58.47% !important;
}
#message{
float: center;
text-align: center;
color: #bbb;
padding-left: 25.6% !important;
}
#message #error{
float: center;
text-align: center;
background: rgba(203, 52, 52, 0.7);
color: #fff;
border-radius: 5px;
padding: 5px;
width: 66%;
}
#message #success{
float: center;
text-align: center;
background: rgba(0, 158, 0, 0.7);
color: #fff;
border-radius: 5px;
padding: 5px;
width: 66%;
}
#message a{
color: #76b4ef;
}
#message a:hover{
color: #e2e6e9;
}
#footer {
height: 38px;
background-color: rgba(51, 51, 51, 0.5);
color: #eee;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, .8);
box-shadow: 0 0 2px rgba(0, 0, 0, .8);
}
@media (max-width: 767px) {
#footer {
margin-left: -17px;
margin-right: -20px;
padding-left: 17px;
padding-right: 20px;
}
}
#privacy-link, #tos-link, #reg-link{
float: right;
padding-right: 2%;
color: #eee;
}
#privacy-link:hover, #tos-link:hover, #reg-link:hover{
-webkit-box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
-moz-box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
box-shadow: 0 8px 6px -6px rgba(94, 125, 142, 0.9);
-webkit-transition: all 0.90s ease-in-out;
-moz-transition: all 0.90s ease-in-out;
-ms-transition: all 0.90s ease-in-out;
-o-transition: all 0.90s ease-in-out;
}
input[type=text], textarea, input[type=password] {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus, input[type=password]:focus {
box-shadow: 0 0 5px rgba(200, 200, 200, 0.64);
border: 1px solid rgba(200, 200, 200, 0.64);
padding: 6px 0px 6px 6px;
}
h2 {
background: -webkit-linear-gradient(#fff, #bbb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0.1em 0.1em 0.2em #222;
}
.pre-scrollable{
max-height: 480px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .675);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .675);
box-shadow: 0 0 8px rgba(0, 0, 0, .675);
}
.loginbox{
height: 28px;
max-height: 35px;
box-shadow: 0 0 5px rgba(106, 90, 205, .5);
border: 1px solid rgba(106, 90, 205, 1);
padding: 3px 0px 3px 3px;
}
.loginbtn{
height: 28px;
width: 100%;
font-size: 12px;
line-height: 1.428561429;
}
.gab{
background: url(http://placehold.it/570x80.png);
border-radius: 5px;
max-width: 570px;
}
#theLoader{ display: none; }
#loading{
position: relative;
left: 53.6%;
top: 15%;
margin: -22px 0 0 -15px;
color: #aaa;
}
#ajaxloader{ /* Modified from http://unps.us/?ygi1h9 */
position: relative;
width: 30px;
height: 30px;
left: 50%;
top: 15%;
margin: 0 0 0 -15px;
border: 8px solid #fff;
border-right-color: transparent;
border-top: 0 none;
border-bottom: 0 none;
border-left: 1 none;
border-radius: 50%;
box-shadow: 0 0 25px 2px #eee;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin
{
from { -webkit-transform: rotate(0deg); opacity: 0.4; }
50% { -webkit-transform: rotate(180deg); opacity: 1; }
to { -webkit-transform: rotate(360deg); opacity: 0.4; }
}
@-moz-keyframes spin
{
from { -moz-transform: rotate(0deg); opacity: 0.4; }
50% { -moz-transform: rotate(180deg); opacity: 1; }
to { -moz-transform: rotate(360deg); opacity: 0.4; }
}
@-ms-keyframes spin
{
from { -ms-transform: rotate(0deg); opacity: 0.4; }
50% { -ms-transform: rotate(180deg); opacity: 1; }
to { -ms-transform: rotate(360deg); opacity: 0.4; }
}
@-o-keyframes spin
{
from { -o-transform: rotate(0deg); opacity: 0.4; }
50% { -o-transform: rotate(180deg); opacity: 1; }
to { -o-transform: rotate(360deg); opacity: 0.4; }
}
@keyframes spin
{
from { transform: rotate(0deg); opacity: 0.2; }
50% { transform: rotate(180deg); opacity: 1; }
to { transform: rotate(360deg); opacity: 0.2; }
}