body {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
body {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
nav{
width: 100%;
display: inline-block;
text-align: left;
}
::-webkit-scrollbar {
display: none;
}
body{
font-family: 'Roboto', sans-serif;
display: block;
justify-content: space-between;
border-radius: 2px;
/*very blue*/
background: #0575E6;
background: -webkit-linear-gradient(to top, #021B79, #0575E6);
background: linear-gradient(to top, #021B79, #0575E6);
background:#00213A;
/*background: url(../images/grass.jpg);*/
background-attachment: fixed;
background-position: unset;
background-size: cover;
background-repeat: no-repeat;
perspective: 800px;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight:300;
}
main{
text-align: center;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
button{
/*
display: inline-block;
width: 100%;
line-height: 44px;
padding: 10px 10px 8px 10px;
margin: 2px;
border: 1px solid transparent;
background: #2E68AA;
text-align: left;
transition: transform .2s;
display: inline-block;
width: 70%;
line-height: 44px;
*/
/*
text-shadow: 1px 1px 1px #888;
padding: 10px 10px 8px 10px;
margin: 2px;
border: 1px solid transparent;
text-align: left;
transition: transform .2s;
border-left: double;
border-right: double;
border-left-color: dodgerblue;
border-right-color: dodgerblue;
display: inline-block;
border-radius: 40px;
margin: 2px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 0px;
border-bottom: 0px;
background: rgba(0,0,0,0.2);
*/
display: inline-block;
width: auto;
line-height: 44px;
padding: 10px 10px 8px 10px;
margin: 2px;
border: 1px solid transparent;
text-align: left;
transition: transform .2s;
border-left: 2px double dodgerblue;
border-right: 1px double dodgerblue;
display: inline-block;
border-radius: 50px 0px 50px 0px;
margin: 2px;
padding: 10px 0px 10px 0px;
/*text-align: center;*/
border-top: 0px;
border-bottom: 0px;
background: rgba(0,0,0,0.2);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
display: inline-block;
width: auto;
line-height: 44px;
padding: 10px 10px 8px 10px;
margin: 2px;
/* border: 1px solid transparent; */
text-align: left;
transition: transform .2s;
border: none;
/* border-right: 1px double dodgerblue; */
display: inline-block;
/* border-radius: 50px 0px 50px 0px; */
/* margin: 2px; */
padding: 0px;
/* text-align: center; */
border-top: 0px;
border-bottom: 0px;
background: rgba(0,0,0,0.2);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
background:none;
border-radius:0px;
}
button:hover, button:hover button p{
background:rgba(0,0,0,0.4);
cursor:pointer;
/*
text-shadow: 1px 1px 1px #222;
*/
transform: scale(1.05);
}
.img40{
width:40px;
height:40px;
}
#layout{
width: 100%;
display: flex;
justify-content: center;
}
.layout_button{
width:25%;
text-align:center;
display:inline-block;
}
.items_button{
padding:2px 10px;
}
.nav_button, .layout_button{
padding: 2px 10px 2px 10px;
margin: 8px;
margin-bottom: 0px;
margin-right: 0px;
height: 50px;
background: rgba(0,0,0,0.2);
}
.nav_button:hover, .layout_button:hover{
background: rgba(0,92,140,0.4);
}
.nav_button_up{
padding: 4px 10px;
}
.nav_button_p{
vertical-align: middle;
display:inline-block;
}
.button_up{
padding:0px;
}
.logo{
width: 400px;
height: 200px;
border-radius: 10px;
border-top: 1px dotted #fff;
border-bottom: 1px dotted #fff;
background: rgba(0,0,0,0.4);
}
.folder, .file{
display: inline-block;
animation-timing-function: ease-in-out;
animation-duration: 0.2s;
animation-name: anim;
}
.folder_img, .file_img{
width: 140px;
height: 140px;
}
.file_p{
width:100px;
}
.button_up_img{
/*
width: 40px;
height: 40px;
display: inline-block;
display: inline-block;
vertical-align: middle;
*/
width: 40px;
height: 40px;
display: inline-block;
display: inline-block;
vertical-align: middle;
}
.spacer44{
margin-top:44px;
}
content{
width: 60%;
background: rgba(0,0,0,0.2);
display: inline-block;
padding: 20px;
text-align: left;
border-radius: 2px;
font-family: 'Roboto', sans-serif;
font-weight:300;
}
select{
font-size: 1.2rem;
vertical-align: middle;
height: 40px;
width: calc(30% + 8px);
font-family: 'Roboto', sans-serif;
font-weight:300;
}
input{
font-family: 'Roboto', sans-serif;
font-weight:300;
}
.list_input{
height:40px;
font-size:1.2rem;
width: 30%;
}
@media (min-width: 700px) and (max-width: 1200px){
button{
width:100%;
}
}
@media (max-width:699px){
main{
width:80%;
}
button{
width:100%;
}
}
/*
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
*/
.animation_00001{
animation-duration: 5s;
animation-name: anim;
}
/*
@keyframes anim {
from { transform: rotateY(0deg); }
to { transform: rotateY(90deg); }
}
*/
/*
button{
-webkit-transform: rotateY(120deg);
transform: rotateY(100deg);
}
*/
/*
main > button {
-webkit-animation: moveSquare 4s infinite ease-in-out alternate;
animation: moveSquare 4s infinite ease-in-out alternate;
}
*/
@-webkit-keyframes anim {
from {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
/*-webkit-transform: translateX(0px) rotateX(0deg);
transform: translateX(0px) rotateX(0deg);*/
}
to {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
/*-webkit-transform: translateX(0px) rotateX(0deg);
transform: translateX(0px) rotateX(0deg);*/
}
}
/*
#button_portfolio{
background-color: fuschia;
-webkit-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-ms-transition: all 2.5s ease-in-out;
-o-transition: all 2.5s ease-in-out;
transition: all 2.5s ease-in-out;
}
*/
|
Download
