paperapp/src/theme.default.css

deadsimple json-based SPA app-generator for gitlab (static pages)

/* COLORS */
body,
input {
  color: #555;
}

h1,h2,h3,h4,h5{
  font-size:30px
}

label {
  color:#999
}

label,#loader{
  font-size:0.66em;
  line-height: 19px;
}

::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999;
    opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999;
    opacity: 1; /* Firefox */
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #999;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #999;
}

img,
.img {
  border-radius: 0px;
  border: none !important;
  border-image-width:;
}

.border {
  border:1px solid #DDD;
}

.bright {
  color:#27ae60;
}
.bright-bg{
  background-color:#27ae60;
  color:#FFF;
  border:0;
}

.input:focus{
  outline:none;
  border-bottom: 2px solid #27ae60;
  color:#000;
  border-radius: 0px;
}

input,select,textarea {
  border-radius: 5px;  
  height: 55px;
}

input,textarea {
    background: #e8ebed;
}

textarea {
  width:100%;
  border:none;
  padding:15px;
  height:200px;
}

select {
  background:white;
  border:2px solid #e8ebed;
  width:100%;
  padding: 0px 6px;
  margin-right: 15px;
}

option:first-child{
  background-color: #e8ebed;
}

a.btn,
button{
  display: inline-block;
  height: 55px;
  line-height: 40px;
  border: none;
  border-radius: 5px;
  padding: 5px 15px;
  margin-right: 10px;
  cursor:pointer;
  margin-top:25px;
  color:#555;
  background:#FFF;
  text-decoration:none;
  border:1px solid #CCC;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
}

input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 5px 15px;
    outline: none;
    border: none;
    display:block;
    font-size:0.9em;
    padding-right: -15px;
    margin:0 auto;
}

input:valid {
  padding-bottom:0px;
  color:#999;
} 

label {
  text-align:left;
  display:block;
  margin-bottom:9px;
  text-transform:capitalize;
  -webkit-transition: all 0.4s cubic-bezier(0, 1.17, 1, 1);
  -o-transition: all 0.4s cubic-bezier(0, 1.17, 1, 1);
  transition: all 0.4s cubic-bezier(0, 1.17, 1, 1);
  opacity:1.0;
  color:#27ae60;
}

label.hide {
  -webkit-transform: translate(45px,0px);
      -ms-transform: translate(45px,0px);
          transform: translate(45px,0px);
  opacity: 0;
}

button,input{
  margin-bottom: 10px;
  font-size:0.9em;
  line-height: 11px;
}

input:hover{
  -webkit-filter: brightness(1.02);
          filter: brightness(1.02)
}
button:hover{
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1) 
}

.rule{
    height: 2px;
    background: #e8ebed;
    margin: 60px 0px;
}

#menu{
  position: absolute;
  right: 25px;
  top: 65px;
  z-index: 100;
  z-index:1000;
  height:30px;
  width:44px;
  overflow:visible;
  border-bottom: 1px solid #000;
  cursor:pointer;
  transition:all 1s cubic-bezier(0.25, 0.1, 0, 1.03);
}

#menu:before,
#menu:after{
  position:absolute;
  width:44px;
  height: 1px;
  background-color:#000;
  content:"";
}

#menu:after{
  top:14px;
  height: 1px;
}

#menu > select{ 
  transform: translate(0,-20px);
  opacity:0.01;
  cursor:pointer;
}

#fullscreen {
  position:absolute;
  margin-left:25px;
  width:43px;
  height:33px;
  cursor:pointer;
  top:60px;
}

#fullscreen:before,
#fullscreen:after{
  content:'';
  position:absolute;  
  width:10px;
  height:10px;
}
#fullscreen:before {
  top:20px;
  left:28px;
  border-bottom: 1px solid #000;
  border-right:1px solid #000;
}
#fullscreen:after {
  border-top: 1px solid #000;
  border-left:1px solid #000;
}

.menu {
  top:-150px;
  margin-top:-35px;
  top:50px;
}

.slidein {
  -webkit-animation:slidein 0.7s cubic-bezier(0.25, 0.1, 0, 1.01);
          animation:slidein 0.7s cubic-bezier(0.25, 0.1, 0, 1);
}

@-webkit-keyframes slidein {
  from { -webkit-transform:translate(0,-2%); transform:translate(0,-2%); opacity:0; }
  to { -webkit-transform:translate(0,0); transform:translate(0,0); opacity:1.0;}
}

#wallpaper {
  opacity:0.0;
  transition: opacity 2s ease;
}

@media (min-width: 800px) {
 
  body.loaded{
    /* https://www.svgbackgrounds.com/#cornered-stairs */
    top: 0px;
    margin: 0;
    /* margin-top: -60px; */
  }


  body.loaded .menu {
    top:70px;
  }

  body.loaded #wallpaper {
	  opacity:1.0;
  }

  #menu {
    right:50px;
    background-color: FFF;
  }
 
  .card {
    margin-left: 3%;
    margin-right: 3%;
  }

  #fullscreen {
    display:none;
  }

  
  .wrapper.loaded {
    box-shadow: 0px 0px 700px 0px #FFF;
    margin-top:-10px;
  }

  .wrapper .card {
    padding-top:30px;
  }

}

:-webkit-full-screen {
  width: 100% !important;
}
:-moz-full-screen {
  width: 100% !important;
}
:-ms-fullscreen {
  width: 100% !important;
}
:fullscreen {
  width: 100% !important;
}

.code {
  font-family: "Courier";
  font-size:16px;
  line-height:25px;
}