css/theme.css

   1 /* Simple example of css used to stylize the login screen */
   2 * {
   3   /* webkit2 is very slow, this is supposed to speed up animations */
   4   backface-visibility: hidden;
   5 }
   6 @font-face {
   7         font-family: 'MyFont';
   8         src: url('NotoSansJP-Regular.otf') format('opentype');
   9
  10 }
  11 .gaussfade-out{
  12   animation: rotation 2s ease 0s 1 alternate none running;
  13 }
  14 @keyframes rotation {
  15   0% {
  16     filter: blur(0px);
  17   }
  18
  19   50% {
  20     filter: blur(100px);
  21   }
  22
  23   100% {
  24     filter: blur(0px);
  25   }
  26 }
  27 body {
  28   display: flex;
  29   min-height: 100vh;
  30   flex-direction: column;
  31   color: white;
  32   background-color: #0b2d49;
  33   overflow: hidden;
  34         font-family: 'MyFont';
  35   background-image: url("../images/LOCKSCREEN1920x1080.png");
  36   background-position:center center;
  37   background-size:contain;
  38   width:100%;
  39   height:100vh;
  40 }
  41 body::before {
  42   content: '';
  43   position: absolute;
  44   /* 輪郭がぼやけてしまうのでブラー範囲を広げる */
  45   top: -5px;
  46   bottom: -5px;
  47   left: -5px;
  48   right: -5px;
  49   background: inherit;
  50   z-index: -1;
  51   filter: blur(5px);
  52 }
  53 main {
  54   flex: 1 0 auto;
  55 }
  56 input {
  57   color: white;
  58 }
  59
  60 .caret {
  61   fill: grey !important;
  62 }
  63 .row{
  64   margin: 0 auto 30px;
  65 }
  66 .col.right{
  67   height: 25px;
  68 }
  69 .col.right .row{
  70   margin: 0;
  71 }
  72 .power-button {
  73   vertical-align: bottom;
  74   fill: #bdc3c7;
  75 }
  76 .power-button:hover {
  77   fill: #ecf0f1;
  78 }
  79 .power-button:active {
  80   fill: white;
  81   transform: scale(0.95);
  82 }
  83 .input-field.col.s2.offset-s1{
  84   margin-bottom: 20px;
  85 }
  86 div#console {
  87   z-index: 9999;
  88   position: absolute;
  89   top: 10px;
  90 }
  91 div#console .terminal {
  92   overflow-y: scroll;
  93   background-color: rgba(0,0,0,0.8);
  94   font-size: 14pt;
  95   color: white;
  96   height: 30vh;
  97   width: 85vw;
  98   resize: both;
  99 }
 100 div#console .terminal text {
 101   display: block;
 102   padding: 0;
 103   margin: 0;
 104 }
 105 .welcome-text {
 106   font-size: 3vh;
 107   font-weight: lighter;
 108 }
 109 .logo-ubuntu {
 110   height: 10vh;
 111 }
 112 .logo-alter {
 113   width: 70%;
 114   height: auto;
 115 }