@ -1,3 +1,27 @@
/* Elms */
ul , li {
list-style : none ;
}
body {
touch-action : manipulation ;
overflow : hidden ; /* Used to prevent touch scroll down reloading page. Ref: https://stackoverflow.com/questions/29008194/disabling-androids-chrome-pull-down-to-refresh-feature */
-webkit-touch-callout : none ; /* iOS Safari */
-webkit-user-select : none ; /* Safari */
-khtml-user-select : none ; /* Konqueror HTML */
-moz-user-select : none ; /* Old versions of Firefox */
-ms-user-select : none ; /* Internet Explorer/Edge */
user-select : none ; / * Non-prefixed version , currently
supported by Chrome , Opera and Firefox * /
}
input {
width : 100 % ! important ;
margin : 0 auto ! important ;
background-color : # 00000000 ! important ;
}
/* IDs */
# bg {
position : fixed ;
@ -19,118 +43,50 @@
z-index : -999 ;
}
# file-grid {
display : grid ;
grid-template-columns : repeat ( auto-fit , minmax ( 18em , 1fr ) ) ;
grid-column-gap : 1em ;
grid-row-gap : 1em ;
margin : 5em auto ;
width : 85 % ;
padding : 2em ;
# canvas {
position : relative ;
width : 98 % ;
min-height : 1000px ;
border : 2px solid # c3c3c3 ;
}
/* CLASSES */
. scroller {
scrollbar-color : # 00000084 # ffffff64 ;
scrollbar-width : thin ;
}
. dir-style , . video-style , . file-style {
display : block ;
width : 100 % ;
height : auto ;
# rightClickBtn {
border-style : dashed ;
border-width : 2px ;
overflow : auto ;
padding-bottom : 0 . 5em ;
color : # ffffff ;
text-align : center ;
font-size : 1 . 2em ;
background-color : rgba ( 0 , 0 , 0 , 0 . 64 ) ;
background-repeat : no-repeat ;
background-size : 42px 42px ;
touch-action : manipulation ;
font-size : 280 % ;
}
. dir-style , . file-style {
background-position : 32px center ;
}
. image-style ,
. video-style {
min-height : 6 . 5em ;
width : auto ;
overflow : hidden ;
background-size : 100 % 100 % ;
}
. card-popout-btn {
float : right ;
z-index : 2 ;
width : 2em ;
height : 2em ;
text-align : center ;
background-color : rgba ( 0 , 0 , 0 , 0 . 85 ) ;
color : rgb ( 255 , 255 , 255 ) ;
border-style : solid ;
border-color : rgb ( 255 , 255 , 255 ) ;
}
. close-btn : hover ,
. card-popout-btn : hover ,
. popout-btn : hover {
# rightClickBtn : hover {
background-color : rgba ( 0 , 232 , 255 , 0 . 5 ) ;
cursor : pointer ;
}
.close-btn : hover ,
.card-popout-btn : hover ,
.popout-btn : hover {
background-color: rgba ( 255 , 255 , 255 , 0 . 85 ) ;
color: # 000000 ;
border-color: # 000000 ;
# scrollToggle ,
# mouseHoldToggle ,
# sendKeysBtn {
display : inline-block ;
font-size : 280 % ;
width : 100 % ;
}
. dir-style : hover , . image-style : hover , . video-style : hover , . file-style : hover {
background-color : rgba ( 0 , 141 , 166 , 0 . 56 ) ;
cursor : pointer ;
box-shadow : 0px 0px 15px rgb ( 114 , 184 , 199 ) ;
border-radius : 0 . 5em ;
@ media only screen and ( min-width : 800px ) {
# sendKeysField {
font-size : 300 % ! important ;
}
}
.dir-style : focus , . image-style : focus , . video-style : focus , . file-style : focus {
b ackground-color: rgba ( 0 , 139 , 35 , 0 . 76 ) ;
cursor : pointer ;
box-shadow : 0px 0px 25px rgb ( 114 , 199 , 120 ) ;
border-radius : 0 . 5em ;
@ media only screen and ( min-width : 800px ) {
body {
width : 800px ;
margin : 0 auto ;
}
}
. dir-title , . file-title , . video-title {
white-space : nowrap ;
text-overflow : ellipsis ;
text-align : center ;
overflow : hidden ;
border-style : none ;
font-size : 75 % ;
user-select : none ;
-moz-user-select : none ;
}
. dir-title , . file-title {
width : auto ;
background-color : # 00000000 ;
color : # ffffff ;
}
. video-title {
width : 100 % ;
margin-top : 5 . 5em ;
background-color : rgba ( 0 , 0 , 0 , 0 . 64 ) ;
color : rgb ( 255 , 255 , 255 ) ;
text-align : center ;
border-top : 1px solid rgb ( 255 , 255 , 255 ) ;
border-bottom : 1px solid rgb ( 255 , 255 , 255 ) ;
text-overflow : ellipsis ;
}
/* Classes */
/* Other message text colors */
. errorTxt { color : rgb ( 170 , 18 , 18 ) ; }
. warningTxt { color : rgb ( 255 , 168 , 0 ) ; }
. successTxt { color : rgb ( 136 , 204 , 39 ) ; }