123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326 |
- /**
- * @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);
- cursor: default;
- &:hover { background: white(.02); }
- &:active,
- &--active {
- transition: none;
- 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);
- }
- }
- /* Select ------------------------------------------------*/
- .select {
- display: inline-block;
- position: relative;
- margin: 1px 5px;
- padding: 0;
- width: 110px;
- background: black(.3);
- color: #fff;
- border-radius: 3px;
- border: 1px solid black(.2);
- box-shadow: 0 1px 0 white(.02);
- font-size: 11px;
- line-height: 16px;
- overflow: hidden;
- outline: 0;
- vertical-align: middle;
- &::after {
- position: absolute;
- content: '≡';
- right: 8px;
- top: 4px;
- color: $colorBlue;
- font-size: 16px;
- line-height: 16px;
- font-weight: bold;
- pointer-events: none;
- }
- select {
- margin: 0;
- padding: 4px 8px;
- width: 120%;
- color: #fff;
- font-size: 11px;
- line-height: 16px;
- border: 0;
- outline: 0;
- box-shadow: none;
- border-radius: 0;
- background-color: transparent;
- background-image: none;
- -moz-appearance: none;
- -webkit-appearance: none;
- appearance: none;
- &:focus { outline: none; }
- }
- select option {
- margin: 0;
- padding: 0;
- background: #fff;
- color: #333;
- transition: none;
- }
- }
- /* Version ------------------------------------------------*/
- .version {
- margin: -5px 0 0;
- padding: 0 30px 30px !important;
- color: white(.3);
- font-size: 12px;
- text-align: right;
- span { display: none; }
- span a { color: white(.3); }
- }
- /* 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: auto;
- 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,
- &.warning,
- &.success { animation: none; }
- &.error { color: rgb(233, 42, 0); }
- &.warning { color: rgb(228, 233, 0); }
- &.success { color: rgb(126, 233, 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;
- }
- }
- }
|