topaLE
/
theme.park.app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fb formatting

pull/235/head
Marius 3 years ago
parent
aec095e592
commit
7e4bd7e4de
1 changed files with 170 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 274
      CSS/themes/filebrowser/filebrowser-base.css

274
CSS/themes/filebrowser/filebrowser-base.css
View File

@ -1,4 +1,3 @@
/* dP dP dP */ /* dP dP dP */
/* 88 88 88 */ /* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
@ -11,46 +10,11 @@
/* Made by @gilbN */ /* Made by @gilbN */
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
/* Based on https://github.com/Archmonger/Blackberry-Themes/blob/master/Themes/Blackberry-Flat/bbf_filebrowser.css */
/* Scrollbar */
/* @media only screen and (min-width: 768px) {
html {
height: 100% !important;
width: 100% !important;
overflow: hidden !important;
}
body {
overflow-y: auto !important;
height: 100% !important;
background: var(--main-bg-color) !important;
}
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-thumb {
min-height: 50px;
border: 3px solid transparent;
border-radius: 8px;
background-color: hsla(0,0%,100%,.2);
background-clip: padding-box;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb:hover {
min-height: 50px;
border: 3px solid transparent;
border-radius: 8px;
background-color: hsla(0,0%,100%,.5);
background-clip: padding-box;
} */
/* PLACEHOLDERS */ /* PLACEHOLDERS */
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-webkit-input-placeholder { input:focus::-webkit-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -59,6 +23,7 @@ input:focus::-webkit-input-placeholder {
input:-moz-placeholder { input:-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-moz-placeholder { input:focus:-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -67,6 +32,7 @@ input:focus:-moz-placeholder {
input::-moz-placeholder { input::-moz-placeholder {
color: var(--text); color: var(--text);
} }
input:focus::-moz-placeholder { input:focus::-moz-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -75,6 +41,7 @@ input:focus::-moz-placeholder {
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: var(--text); color: var(--text);
} }
input:focus:-ms-input-placeholder { input:focus:-ms-input-placeholder {
color: var(--text-hover); color: var(--text-hover);
} }
@ -82,6 +49,7 @@ input:focus:-ms-input-placeholder {
.message { .message {
color: #FFF; color: #FFF;
} }
#login { #login {
min-height: 100%; min-height: 100%;
height: auto; height: auto;
@ -94,27 +62,39 @@ input:focus:-ms-input-placeholder {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
body { body {
color: var(--text); color: var(--text);
font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif; font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
} }
h1, h2, h3, h4, h5, h6, th {
h1,
h2,
h3,
h4,
h5,
h6,
th {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
#login input[type=password], #login input[type=text] {
#login input[type=password],
#login input[type=text] {
color: var(--text-hover) !important; color: var(--text-hover) !important;
background-color: rgba(0,0,0,0.15) !important; background-color: rgba(0, 0, 0, 0.15) !important;
border: none; border: none;
} }
#loading { #loading {
background: var(--main-bg-color);background-repeat: repeat, no-repeat; background: var(--main-bg-color);
background-attachment: fixed, fixed; background-repeat: repeat, no-repeat;
background-position: center center, center center; background-attachment: fixed, fixed;
background-size: auto, cover; background-position: center center, center center;
-webkit-background-size: auto, cover; background-size: auto, cover;
-moz-background-size: auto, cover; -webkit-background-size: auto, cover;
-o-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover;
} }
#loading .spinner * { #loading .spinner * {
@ -132,7 +112,8 @@ html {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
body{
body {
background: var(--main-bg-color); background: var(--main-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -142,41 +123,50 @@ body{
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
@media (max-width: 736px){
nav, nav.active { @media (max-width: 736px) {
nav,
nav.active {
background: var(--modal-bg-color) !important; background: var(--modal-bg-color) !important;
} }
#dropdown.active{
#dropdown.active {
background: var(--drop-down-menu-bg) !important; background: var(--drop-down-menu-bg) !important;
} }
} }
nav { nav {
background: rgba(0,0,0,.45); background: rgba(0, 0, 0, .45);
height: 100%; height: 100%;
top: 64px; top: 64px;
width: 240px; width: 240px;
} }
.overlay:not(nav) { .overlay:not(nav) {
background-color: transparent; background-color: transparent;
} }
nav .action{
color:var(--text); nav .action {
color: var(--text);
font-size: 13px; font-size: 13px;
font-family: Open Sans Semibold,Helvetica Neue,Helvetica,Arial,sans-serif; font-family: Open Sans Semibold, Helvetica Neue, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
} }
nav .action:hover{
background-color:rgba(255, 255, 255, 0.05); nav .action:hover {
background-color: rgba(255, 255, 255, 0.05);
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
nav>div{ nav>div {
border-top: none; border-top: none;
} }
header{
header {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -186,14 +176,17 @@ header{
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
border-bottom: transparent; border-bottom: transparent;
box-shadow: 0 3px 6px 0 rgba(0,0,0,.15); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15);
} }
header>div:first-child{
header>div:first-child {
height: 60px; height: 60px;
} }
body{
body {
padding-top: 60px; padding-top: 60px;
} }
.shell { .shell {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -205,35 +198,44 @@ body{
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.shell__prompt i { .shell__prompt i {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.action{
.action {
color: #FFF; color: #FFF;
} }
#listing.list .item{
background-color: rgba(0,0,0,.15); #listing.list .item {
color:var(--text); background-color: rgba(0, 0, 0, .15);
color: var(--text);
border: none; border: none;
} }
#listing.list .item:hover{
background-color:rgba(255, 255, 255, 0.08); #listing.list .item:hover {
color:var(--text-hover); background-color: rgba(255, 255, 255, 0.08);
color: var(--text-hover);
border: none; border: none;
transition: .4s; transition: .4s;
} }
#listing.list .item.header{
background-color: rgba(0,0,0,.45); #listing.list .item.header {
background-color: rgba(0, 0, 0, .45);
color: var(--text-hover); color: var(--text-hover);
border-bottom: none; border-bottom: none;
right: auto; right: auto;
} }
.material-icons, .prompt .file-list ul li:before{
.material-icons,
.prompt .file-list ul li:before {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.action:hover { .action:hover {
background-color: rgba(var(--accent-color),.1); background-color: rgba(var(--accent-color), .1);
} }
.action .counter { .action .counter {
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
color: var(--label-text-color); color: var(--label-text-color);
@ -243,36 +245,46 @@ body{
.share__box { .share__box {
background: transparent; background: transparent;
} }
.share__box__info { .share__box__info {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
} }
.share__box__download { .share__box__download {
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
color: var(--text-hover); color: var(--text-hover);
border-bottom: 1px solid rgb(var(--accent-color)); border-bottom: 1px solid rgb(var(--accent-color));
} }
.share__box__element { .share__box__element {
border-top: 1px solid rgb(255 255 255 / 10%); border-top: 1px solid rgb(255 255 255 / 10%);
} }
svg { svg {
fill: rgb(var(--accent-color)) !important; fill: rgb(var(--accent-color)) !important;
} }
#listing.list .item div:first-of-type i { #listing.list .item div:first-of-type i {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
#listing .item i { #listing .item i {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
#listing.mosaic:hover .item:hover i:hover { #listing.mosaic:hover .item:hover i:hover {
color: var(--accent-color-hover); color: var(--accent-color-hover);
} }
#listing .item[aria-selected=true]{
#listing .item[aria-selected=true] {
background-color: rgba(255, 255, 255, 0.2) !important; background-color: rgba(255, 255, 255, 0.2) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
#listing h2{
#listing h2 {
color: var(--text-hover); color: var(--text-hover);
} }
#listing #multiple-selection { #listing #multiple-selection {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -283,30 +295,37 @@ svg {
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
#breadcrumbs span a { #breadcrumbs span a {
color: var(--text-hover); color: var(--text-hover);
} }
#breadcrumbs { #breadcrumbs {
border-bottom: 1px solid rgb(var(--accent-color)); border-bottom: 1px solid rgb(var(--accent-color));
} }
#listing .item{
background-color: rgba(0,0,0,.15); #listing .item {
color:var(--text); background-color: rgba(0, 0, 0, .15);
color: var(--text);
border: none; border: none;
} }
.input { .input {
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
color: var(--text-hover); color: var(--text-hover);
} }
select>option { select>option {
background: #1f1f1f; background: #1f1f1f;
} }
#search #input { #search #input {
background: #fff; background: #fff;
display: flex; display: flex;
padding: 10px; padding: 10px;
} }
#search #result{
#search #result {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -317,20 +336,25 @@ select>option {
-o-background-size: auto, cover; -o-background-size: auto, cover;
color: var(--text-hover); color: var(--text-hover);
} }
#search .boxes{
background-color: rgba(0,0,0,.15); #search .boxes {
background-color: rgba(0, 0, 0, .15);
padding: 15px; padding: 15px;
} }
#search .boxes h3{
#search .boxes h3 {
color: var(--text-hover); color: var(--text-hover);
} }
#search .boxes>div>div{
background-color: rgba(0,0,0,.10); #search .boxes>div>div {
background-color: rgba(0, 0, 0, .10);
} }
#search .boxes>div>div:hover{
background-color: rgba(255,255,255,.08); #search .boxes>div>div:hover {
background-color: rgba(255, 255, 255, .08);
} }
#search.active #input{
#search.active #input {
background: var(--main-bg-color); background: var(--main-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -342,51 +366,67 @@ select>option {
height: 60px; height: 60px;
color: black; color: black;
} }
#search.active i, #search.active input{
#search.active i,
#search.active input {
color: var(--text-hover); color: var(--text-hover);
} }
#search #result>div>:first-child{
#search #result>div>:first-child {
margin-top: 10px; margin-top: 10px;
} }
.card{
background-color: rgba(0,0,0,.15); .card {
background-color: rgba(0, 0, 0, .15);
} }
.card h3{
.card h3 {
color: var(--text-hover); color: var(--text-hover);
} }
.card#share ul li a { .card#share ul li a {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
select { select {
color: var(--text-hover); color: var(--text-hover);
} }
.card#share .input-group * { .card#share .input-group * {
border: none; border: none;
background: transparent; background: transparent;
} }
input, textarea, select, button { input,
textarea,
select,
button {
color: var(--text-hover); color: var(--text-hover);
} }
.collapsible>label *{
.collapsible>label * {
color: var(--text-hover); color: var(--text-hover);
} }
a, a,
.link, .link,
.breadcrumbs span a, .breadcrumbs span a,
.breadcrumbs, .breadcrumbs span { .breadcrumbs,
.breadcrumbs span {
color: var(--link-color); color: var(--link-color);
} }
a:hover, a:hover,
.link:hover, .link:hover,
.breadcrumbs span a:hover { .breadcrumbs span a:hover {
color: var(--link-color-hover); color: var(--link-color-hover);
} }
table th{
table th {
color: var(--text-hover); color: var(--text-hover);
} }
.card.floating{
.card.floating {
background: var(--modal-bg-color); background: var(--modal-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -396,47 +436,56 @@ table th{
-moz-background-size: auto, cover; -moz-background-size: auto, cover;
-o-background-size: auto, cover; -o-background-size: auto, cover;
} }
#search #input { #search #input {
background-color:rgba(255, 255, 255, 0.08); background-color: rgba(255, 255, 255, 0.08);
} }
#listing.mosaic .item{ #listing.mosaic .item {
box-shadow: none !important; box-shadow: none !important;
} }
#listing.mosaic .item:hover{
#listing.mosaic .item:hover {
box-shadow: none !important; box-shadow: none !important;
background-color: rgba(255,255,255,0.08); background-color: rgba(255, 255, 255, 0.08);
} }
.dashboard p label { .dashboard p label {
color: var(--text-hover); color: var(--text-hover);
} }
.dashboard #nav li.active { .dashboard #nav li.active {
border-color: rgb(var(--accent-color)); border-color: rgb(var(--accent-color));
} }
.dashboard #nav ul li.active { .dashboard #nav ul li.active {
border-color: rgb(var(--accent-color)); border-color: rgb(var(--accent-color));
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.dashboard #nav ul li.active:before { .dashboard #nav ul li.active:before {
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
opacity: .08; opacity: .08;
} }
.dashboard #nav ul li:hover { .dashboard #nav ul li:hover {
background: rgb(var(--accent-color),.15); background: rgb(var(--accent-color), .15);
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.dashboard #nav .wrapper { .dashboard #nav .wrapper {
border-bottom: 2px solid var(--accent-color-hover); border-bottom: 2px solid var(--accent-color-hover);
} }
@media (min-width: 1024px){ @media (min-width: 1024px) {
main{ main {
margin-left: 270px; margin-left: 270px;
} }
} }
@media (max-width: 1024px){
nav{ @media (max-width: 1024px) {
nav {
width: 175px; width: 175px;
} }
} }
@ -446,6 +495,7 @@ table th{
background: var(--button-color); background: var(--button-color);
color: var(--button-text); color: var(--button-text);
} }
.button:hover:not(.button--flat.button--red), .button:hover:not(.button--flat.button--red),
.button:active:not(.button--flat.button--red), .button:active:not(.button--flat.button--red),
.button:focus:not(.button--flat.button--red) { .button:focus:not(.button--flat.button--red) {
@ -453,12 +503,15 @@ table th{
color: var(--button-text-hover); color: var(--button-text-hover);
} }
button:hover:not(.action), input[type=submit]:hover{ button:hover:not(.action),
input[type=submit]:hover {
color: var(--button-text-hover); color: var(--button-text-hover);
} }
.button--flat { .button--flat {
margin-left: 5px; margin-left: 5px;
} }
.button--flat:hover { .button--flat:hover {
background: var(--dark-red); background: var(--dark-red);
color: #FFF; color: #FFF;
@ -469,11 +522,12 @@ button:hover:not(.action), input[type=submit]:hover{
#editor-container { #editor-container {
background: var(--modal-bg-color); background: var(--modal-bg-color);
} }
/* ACE EDITOR */ /* ACE EDITOR */
.ace-chrome .ace_gutter { .ace-chrome .ace_gutter {
background: #282a36 !important; background: #282a36 !important;
color: rgb(144,145,148) !important; color: rgb(144, 145, 148) !important;
} }
.ace-chrome .ace_print-margin { .ace-chrome .ace_print-margin {

Write Preview
Loading…
Cancel
Save