123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208 |
- /**
- * @copyright 2014 by Tobias Reich
- */
- .message_overlay {
- position: fixed;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background-color: rgba(0, 0, 0, .85);
- z-index: 1000;
- }
- .message {
- position: absolute;
- display: inline-block;
- width: 500px;
- margin-left: -250px;
- margin-top: -95px;
- background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
- border-radius: 5px;
- box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
- /* Animation */
- animation-name: moveUp;
- animation-duration: .3s;
- animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
- /* Header ------------------------------------------------*/
- h1 {
- float: left;
- width: 100%;
- padding: 12px 0;
- color: #fff;
- font-size: 16px;
- font-weight: bold;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
- text-align: center;
- }
- .close {
- position: absolute;
- top: 0;
- right: 0;
- padding: 12px 14px 6px 7px;
- color: #aaa;
- font-size: 20px;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
- cursor: pointer;
- &:hover { color: #fff; }
- }
- /* Text ------------------------------------------------*/
- p {
- float: left;
- width: 90%;
- margin-top: 1px;
- padding: 12px 5% 15px 5%;
- color: #eee;
- font-size: 14px;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
- line-height: 20px;
- b {
- font-weight: bold;
- color: #fff;
- }
- a {
- color: #eee;
- text-decoration: none;
- border-bottom: 1px dashed #888;
- }
- }
- /* Button ------------------------------------------------*/
- .button {
- float: right;
- margin: 15px 15px 15px 0;
- padding: 7px 10px 8px 10px;
- color: #ccc;
- font-size: 14px;
- font-weight: bold;
- text-align: center;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
- border-radius: 5px;
- border: 1px solid rgba(0,0,0,.4);
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .05);
- cursor: pointer;
- &:first-of-type { margin: 15px 5% 18px 0; }
- &.active {
- color: #fff;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .1), 0 0 4px #005ecc;
- }
- &:hover { background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57)); }
- &:active,
- &.pressed { background-image: linear-gradient(to bottom, rgb(57, 57, 57), rgb(60, 60, 60)); }
- }
- /* Input ------------------------------------------------*/
- input.text {
- float: left;
- width: calc(100% - 10px);
- padding: 17px 5px 9px 5px;
- margin-top: 10px;
- background-color: transparent;
- color: #fff;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
- border: none;
- box-shadow: 0 1px 0 rgba(255, 255, 255, .1);
- border-bottom: 1px solid #222;
- border-radius: 0px;
- outline: none;
- }
- input.less { margin-bottom: -10px; }
- input.more { margin-bottom: 30px; }
- .copylink { margin-bottom: 20px; }
- /* Radio Buttons ------------------------------------------------*/
- .choice {
- float: left;
- margin: 12px 5%;
- width: 90%;
- color: #fff;
- input { float: left; }
- h2 {
- float: left;
- margin: 1px 0 0 8px;
- color: #fff;
- font-size: 14px;
- font-weight: 700;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
- }
- p {
- margin-top: 2px;
- padding: 0 5% 0 25px;
- color: #aaa;
- font-size: 13px;
- }
- p input {
- width: 100%;
- padding: 10px 1px 9px;
- margin-top: 10px;
- }
- }
- /* Version ------------------------------------------------*/
- #version {
- display: inline-block;
- margin-top: 23px;
- margin-left: 5%;
- color: #888;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
- span { display: none; }
- span a { color: #888; }
- }
- }
- /* Sign in ------------------------------------------------*/
- .sign_in {
- float: left;
- width: 100%;
- margin-top: 1px;
- padding: 5px 0;
- color: #eee;
- font-size: 14px;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
- line-height: 20px;
- /* Input ------------------------------------------------*/
- input {
- float: left;
- width: 88%;
- padding: 7px 1% 9px 1%;
- margin: 0 5%;
- background-color: transparent;
- color: #fff;
- text-shadow: 0 -1px 0 #222;
- border: none;
- border-bottom: 1px solid #222;
- box-shadow: 0 1px 0 rgba(255,255,255,.1);
- border-radius: 0;
- outline: none;
- &:first-of-type { margin-bottom: 10px; }
- &.error:focus { box-shadow: 0 1px 0 rgba(204, 0, 7, .6); }
- }
- }
|