walnut.js/lib/com.daplie.walnut/styles.css

377 lines
7.4 KiB
CSS

/*
orange: #f7a148;
blue: #5c6fda;
white: #ffffff;
offwhite: #dfdfdf;
lightgrey: #acacac;
gray: #808080;
darkgrey: #4d4d4d;
black: #0f0f0f;
*/
@font-face {
font-family: 'Brown';
src: url('Brown-Regular.otf');
}
body {
display: block;
font-family: 'Brown';
width: 100%;
height: 100%;
position: relative;
margin: auto;
border: 1px solid black;
padding: 0px;
background-color: #0f0f0f;
}
a:hover {
text-decoration: none;
}
.header {
width: 100%;
position: fixed;
display: block;
padding: 2.3vh 1.5vw;
background-color: #191919;
top: 0px;
z-index: 100;
}
.header .navbar-form {
margin: -2.2vh;
border: none;
padding: 0.3vh 4vw;
background-color: #191919;
}
.header .navbar-form .form-group .form-control {
border-radius: 5px;
display: inline-block;
width: 66vw;
padding: 1em 1em;
}
.header .navbar-form .form-group .navbar-btn {
border-top: 1px solid #434343;
border-right: 1px solid #020202;
border-bottom: 1px solid #020202;
border-left: 1px solid #020202;
margin-top: 1.4vh;
color: #e2e2e2;
background: -webkit-linear-gradient(#202020, #151515); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#202020, #151515); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#202020, #151515); /* For Firefox 3.6 to 15 */
background: linear-gradient(#202020, #151515); /* Standard syntax */
}
.header .select:focus {
border: 3px solid #555;
}
.btn {
padding: 1.1vh 7.92vw;
font-size: 1em;
}
.spacer {
display: block;
height: 9vh;
}
.breadcrumb {
height: 6.2vh;
border-radius: 0px;
padding: 1.2vh 1.5vw;
background-color: #111111;
margin-bottom: 1vh;
}
.breadcrumb li {
height: 5.1vh;
padding: 1vh 0vw 0vh 0vw;
background-color: #191919;
border-radius: 5px;
border: 1px solid #464646;
font-size: 4vw;
text-align: center;
}
.breadcrumb li a {
color: #f7a148;
}
.results {
background-color: #808080;
}
.display-menu {
height: 12vh;
display: flex;
color: #c5c5c5;
background-color: #222222;
border-top: 1px solid #424242;
align-content: center;
padding-top: 3vh;
border-bottom: 1px solid #000000;
}
.sort {
margin: 1vh 4vw 0 2.25vw;
font-size: 4vw;
}
.dropdown-toggle {
width: 55vw;
margin: 0 10vw 0 0;
color: #c5c5c5;
border: none;
border-top: 1px solid #7e7e7e;
background: -webkit-linear-gradient(#323232, #222222); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#323232, #222222); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#323232, #222222); /* For Firefox 3.6 to 15 */
background: linear-gradient(#323232, #222222); /* Standard syntax */
box-shadow: 0px 0px 2px 1px #000000;
text-align: left;
display: flex;
justify-content: space-between;
}
.caret {
position: absolute;
left: 50vw;
top: 3vh;
}
.viewstyle-left {
border: none;
border-radius: 5px 0 0 5px;
}
.viewstyle-right {
border: none;
border-radius: 0 5px 5px 0;
}
.viewstyle-inactive {
color: #e2e2e2;
border-top: 1px solid #7e7e7e;
background: -webkit-linear-gradient(#323232, #222222); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#323232, #222222); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#323232, #222222); /* For Firefox 3.6 to 15 */
background: linear-gradient(#323232, #222222); /* Standard syntax */
height: 75%;
box-shadow: 0px 0px 2px 1px #000000;
}
.viewstyle-active {
color: #5268df;
background-color: #000000;
height: 75%;
box-shadow: 0px 0px 2px 1px #000000;
}
.folders {
color: #c5c5c5;
background-color: #242424;
padding-top: 3vh;
}
.folders-intro {
padding: 0 4vw 2.5vh 2.25vw;
display: flex;
justify-content: space-between;
font-size: 5vw;
}
.folder-content-item {
color: #e2e2e2;
margin: 0 .75vw;
}
.image-placeholder {
height: 30vw;
width: 30vw;
box-shadow: -2px 2px 2px 0px #272727;
}
.folder-content-item p {
height: 5vh;
width: 30vw;
border-radius: 0 0 5px 5px;
background-color: #2d2d2d;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: -2px 2px 2px 0px #272727;
}
.phantom-folder-content-item {
visibility: hidden;
margin: 0 .75vw;
}
.files {
color: #c5c5c5;
background-color: #242424;
padding-bottom: 15vh;
}
.files-intro {
padding: 2.5vh 4vw 2.5vh 2.25vw;
display: flex;
justify-content: space-between;
font-size: 5vw;
}
.files-upload {
background-color: #dfdfdf;
width: 33vw;
border-radius: 5px;
}
.content {
display: flex;
flex-wrap: wrap;
padding: 0 1.5vw;
}
.files-content-item {
color: #e2e2e2;
margin: 0 .75vw;
}
.files-content-item p {
width: 30vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.footer {
width: 100%;
height: 9vh;
position: fixed;
bottom: 0px;
display: block;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#434343, #292929); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#434343, #292929); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#434343, #292929); /* For Firefox 3.6 to 15 */
background: linear-gradient(#434343, #292929); /* Standard syntax */
border-top: 1px solid #7e7e7e;
font-size: 3vh;
}
.footermenu {
display: flex;
justify-content: space-between;
position: fixed;
/*padding: 1vh 2.5vw;*/
padding: 0;
list-style: none;
width: 100%;
height: 12vh;
}
.footermenu li {
/*margin: 20px;*/
width: 20vw;
height: 100%;
padding: 0;
}
.footer-li-active {
background-color: #000000;
}
.footermenu li a {
color: #999999;
margin: 0 auto;
text-align: center;
}
.footer-li-active a {
color: #5268df !important;
}
.test-div {
padding: 0.5vh 2vw;
}
.test-div span {
display: block;
margin-top: 1em;
}
.test-div i::before {
top: 0.2em;
}
.middle-button i::before {
top: 0.1em;
}
.test-div i, .middle-button i, .test-div span, .middle-button span {
font-size: 0.75em;
line-height: 0em;
}
.test-div i::before, .middle-button i::before {
font-size: 2em;
display: block;
position: relative;
}
.middle-button {
height: 10vh;
width: 20vw;
position: fixed;
bottom: 0;
background-color: red;
border-radius: 5px 5px 0 0;
font-size: 3vh;
padding-top: 1.6vh;
/*padding: 3.1vh 0 0 4.8vw;*/
text-align: center;
color: #999999;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#434343, #292929); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#434343, #292929); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#434343, #292929); /* For Firefox 3.6 to 15 */
background: linear-gradient(#434343, #292929); /* Standard syntax */
border-top: 1px solid #7e7e7e;
/*border-width: 3px;*/
box-shadow: 0px 5px 3px 2px rgba(0,0,0,0.9);
/*-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7e7e7e), to(rgba(41,41,41,0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(#7e7e7e, rgba(41,41,41,0)) 1 100%;
-moz-border-image: -moz-linear-gradient(#7e7e7e, rgba(41,41,41,0)) 1 100%;
-o-border-image: -o-linear-gradient(#7e7e7e, rgba(41,41,41,0)) 1 100%;
border-image: linear-gradient(to bottom, #7e7e7e, rgba(41,41,41,0)) 1 100%;*/
}
.footermenu li:last-child {
padding-top: 1vh;
}
@media only screen and (min-width: 768px) {
body {
max-width: 800px;
max-height: 1280px;
}
}
@media only screen and (min-width: 992px) {
body {
}
}
@media only screen and (min-width: 1200px) {
body {
}
}