123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259 |
- /**
- * @copyright 2015 by Tobias Reich
- */
- .basicModalContainer {
- background-color: black(.85);
- }
- .basicModal {
- background: linear-gradient(to bottom, #444, #333);
- border: 1px solid black(.7);
- border-bottom: 1px solid black(.8);
- box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05);
- p {
- display: block;
- padding: 10px 30px;
- color: white(.9);
- font-size: 14px;
- text-align: left;
- text-shadow: $shadow;
- line-height: 20px;
- b {
- font-weight: bold;
- color: white(1);
- }
- a {
- color: white(.9);
- text-decoration: none;
- border-bottom: 1px dashed #888;
- }
- &:first-of-type { padding-top: 42px; }
- &:last-of-type { padding-bottom: 40px; }
- &.signIn:first-of-type { padding-top: 30px; }
- &.signIn:last-of-type { padding-bottom: 30px; }
- &.less { padding-bottom: 30px; }
- }
- /* Buttons ------------------------------------------------*/
- .basicModal__button {
- padding: 13px 0 15px;
- background: black(.02);
- color: white(.5);
- text-shadow: $shadow;
- border-top: 1px solid black(.2);
- box-shadow: inset 0 1px 0 white(.02);
- &:hover { background: white(.02); }
- &:active,
- &--active { background: black(.1); }
- &#basicModal__action {
- color: $colorBlue;
- box-shadow: inset 0 1px 0 white(.02), inset 1px 0 0 black(.2);
- }
- &#basicModal__action.red { color: $colorRed; }
- &.hidden { display: none; }
- }
- /* Inputs ------------------------------------------------*/
- input.text {
- width: calc(100% - 4px);
- padding: 9px 2px;
- background-color: transparent;
- color: #fff;
- text-shadow: $shadow;
- border: none;
- // Do not use rgba() for border-bottom
- // to avoid a blurry line in Safari on non-retina screens
- border-bottom: 1px solid #222;
- border-radius: 0;
- box-shadow: 0 1px 0 white(.05);
- outline: none;
- &:focus { border-bottom-color: $colorBlue; }
- &.error { border-bottom-color: $colorRed; }
- &:first-child { margin-top: 10px; }
- &:last-child { margin-bottom: 10px; }
- }
- /* Radio Buttons ------------------------------------------------*/
- .choice {
- padding: 0 30px 15px;
- width: calc(100% - 60px);
- color: #fff;
- &:last-child { padding-bottom: 40px; }
- label {
- float: left;
- color: white(1);
- font-size: 14px;
- font-weight: 700;
- text-shadow: $shadow;
- }
- label input {
- position: absolute;
- margin: 0;
- opacity: 0;
- }
- label .checkbox {
- float: left;
- display: block;
- width: 16px;
- height: 16px;
- background: black(.5);
- border-radius: 3px;
- box-shadow: 0 0 0 1px black(.7);
- .iconic {
- box-sizing: border-box;
- fill: $colorBlue;
- padding: 2px;
- opacity: 0;
- transform: scale(0);
- transition: opacity .2s $timing, transform .2s $timing;
- }
- }
- /* Checked */
- label input:checked ~ .checkbox {
- background: black(.5);
- .iconic {
- opacity: 1;
- transform: scale(1);
- }
- }
- /* Active */
- label input:active ~ .checkbox {
- background: black(.3);
- .iconic { opacity: .8; }
- }
- label .label { margin: 0 0 0 18px; }
- p {
- clear: both;
- padding: 2px 0 0 35px;
- margin: 0;
- width: calc(100% - 35px);
- color: white(.6);
- font-size: 13px;
- }
- input.text {
- display: none;
- margin-top: 5px;
- margin-left: 35px;
- width: calc(100% - 39px);
- }
- }
- /* Version ------------------------------------------------*/
- .version {
- padding: 0px 30px 20px;
- color: #888;
- font-size: 12px;
- text-align: left;
- span { display: none; }
- span a { color: #888; }
- }
- /* Title ------------------------------------------------*/
- h1 {
- float: left;
- width: 100%;
- padding: 12px 0;
- color: #fff;
- font-size: 16px;
- font-weight: bold;
- text-shadow: $shadow;
- text-align: center;
- }
- /* Rows ------------------------------------------------*/
- .rows {
- margin: 0 8px 8px;
- width: calc(100% - 16px);
- height: 300px;
- background-color: black(.4);
- overflow: hidden;
- overflow-y: scroll;
- border-radius: 3px;
- box-shadow: inset 0 0 3px black(.4);
- }
- /* Row ------------------------------------------------*/
- .rows .row {
- float: left;
- padding: 8px 0;
- width: 100%;
- background-color: white(.02);
- &:nth-child(2n) { background-color: white(0); }
- a.name {
- float: left;
- padding: 5px 10px;
- width: calc(70% - 20px);
- color: #fff;
- font-size: 14px;
- white-space: nowrap;
- overflow: hidden;
- }
- a.status {
- float: left;
- padding: 5px 10px;
- width: calc(30% - 20px);
- color: white(.5);
- font-size: 14px;
- text-align: right;
- animation-name: pulse;
- animation-duration: 2s;
- animation-timing-function: ease-in-out;
- animation-iteration-count: infinite;
- &.error,
- &.success { animation: none; }
- &.error { color: rgb(213, 24, 24); }
- &.success { color: rgb(42, 213, 0); }
- }
- p.notice {
- display: none;
- float: left;
- padding: 2px 10px 5px;
- width: calc(100% - 20px);
- color: white(.5);
- font-size: 12px;
- overflow: hidden;
- line-height: 16px;
- }
- }
- }
|