mirror of
https://github.com/gamaio/UnPS-Short.git
synced 2024-11-15 05:17:26 +00:00
4091ae8226
This makes better positions the form element on the page, removing the need for the dummy element in index.php
356 lines
8.0 KiB
CSS
356 lines
8.0 KiB
CSS
.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.2);
|
||
-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: 51%;
|
||
padding: 15px;
|
||
margin: 0 auto;
|
||
padding-top: 20%;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
#privacy-link, #tos-link, #reg-link{
|
||
padding-left: .8%;
|
||
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; }
|
||
}
|