Enlarge the preview window, and make the pics show in the correct direction in phone's browser.
Please don't merge it to Master. I am a newbie. I changed some numbers in the file (filebrowser\frontend\src\css\styles.css) to make the preview window much larger. It looks pretty good. All the buttons and bars are trandsparent and shown above the pics layer. Every thing works great, expect some buttons are not in the correct position, especially in the PC's browser. I don't know how to fix it. And maybe I changed some unnecessary numbers. So, please don't merge it to Master. Just compile it and take a look. I hope some one can improve it. By the way, after the change, the pics' direction is correct in the phone's web browser. Before, the phone's web browser always showed some pics in wrong direction.
This commit is contained in:
niubility000
GitHub
parent
7a5298a755
commit
d856655ae2
362
styles.css
Normal file
362
styles.css
Normal file
@ -0,0 +1,362 @@
|
||||
@import "~normalize.css/normalize.css";
|
||||
@import "~noty/lib/noty.css";
|
||||
@import "~noty/lib/themes/mint.css";
|
||||
@import "./_variables.css";
|
||||
@import "./_buttons.css";
|
||||
@import "./_inputs.css";
|
||||
@import "./_shell.css";
|
||||
@import "./_share.css";
|
||||
@import "./fonts.css";
|
||||
@import "./base.css";
|
||||
@import "./header.css";
|
||||
@import "./listing.css";
|
||||
@import "./dashboard.css";
|
||||
@import "./login.css";
|
||||
|
||||
.link {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* ACTION *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
||||
.action {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease all;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
color: #546E7A;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.action.disabled {
|
||||
opacity: 0.2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action i {
|
||||
padding: 0.4em;
|
||||
transition: .1s ease-in-out all;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.action ul {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
color: #7d7d7d;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.action ul li {
|
||||
line-height: 1;
|
||||
padding: .7em;
|
||||
transition: .1s ease background-color;
|
||||
}
|
||||
|
||||
.action ul li:hover {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
#click-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#click-overlay.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.action .counter {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: .75em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
text-align: center;
|
||||
line-height: 1.25em;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
|
||||
/* PREVIEWER */
|
||||
|
||||
#previewer {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#previewer .bar {
|
||||
bottom: 30%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0.0em;
|
||||
height: 0.0em;
|
||||
}
|
||||
|
||||
#previewer .bar > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#previewer .bar .title {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 0em;
|
||||
line-height: 0.0em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.0em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#previewer .gallery-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
padding: 0.0em;
|
||||
height: 0.0em;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
#previewer .gallery-bar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#previewer .gallery-bar > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#previewer .gallery-bar .title {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 0em;
|
||||
line-height: 0.0em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.0em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#previewer .action {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#previewer .action i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#previewer .action:hover {
|
||||
background-color: rgba(255, 255, 255, 0.3)
|
||||
}
|
||||
|
||||
#previewer .action span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#previewer .preview {
|
||||
margin: 0em auto 0.0em;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#previewer .preview pre {
|
||||
text-align: left;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#previewer .preview pre,
|
||||
#previewer .preview video,
|
||||
#previewer .preview img {
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#previewer .pdf {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#previewer h2.message {
|
||||
color: rgba(255, 255, 255, 0.5)
|
||||
}
|
||||
|
||||
#previewer>button {
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 45%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#previewer>button:first-of-type {
|
||||
left: 0.5em;
|
||||
}
|
||||
|
||||
#previewer>button:last-of-type {
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
/* EDITOR */
|
||||
|
||||
#editor-container {
|
||||
background-color: #fafafa;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#editor-container .bar {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 0.0em;
|
||||
height: 0.0em;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#editor-container .title {
|
||||
margin-right: auto;
|
||||
padding: 0 0em;
|
||||
line-height: 0.0em;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
#previewer .loading {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#editor-container #editor {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#editor-container #breadcrumbs {
|
||||
height: 0.0em;
|
||||
padding: 0 0em;
|
||||
}
|
||||
|
||||
#editor-container #breadcrumbs span {
|
||||
font-size: 0.0px;
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* PROMPT *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
||||
.noty_buttons {
|
||||
text-align: right;
|
||||
padding: 0 10px 10px !important;
|
||||
}
|
||||
|
||||
.noty_buttons button {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
box-shadow: 0 0 0 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* FOOTER *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
||||
.credits {
|
||||
font-size: 0.6em;
|
||||
margin: 3em 2.5em;
|
||||
color: #a5a5a5;
|
||||
}
|
||||
|
||||
.credits > span {
|
||||
display: block;
|
||||
margin: .3em 0;
|
||||
}
|
||||
|
||||
.credits a,
|
||||
.credits a:hover {
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* ANIMATIONS *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(-360deg);
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* SETTINGS RULES *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
||||
.rules > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
.rules input[type="checkbox"] {
|
||||
margin-right: .2rem;
|
||||
}
|
||||
|
||||
.rules input[type="text"] {
|
||||
border: 1px solid#ddd;
|
||||
padding: .2rem;
|
||||
}
|
||||
|
||||
.rules label {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.rules button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.rules button.delete {
|
||||
padding: .2rem .5rem;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
@import './mobile.css';
|
||||
Loading…
Reference in New Issue
Block a user