forked from projects/fipamo
ro
8794ffc715
The colors just needed to be tweaked a bit for the sake on better contrast and readability. Still some trouble spots but will adjust as needed
389 lines
8.4 KiB
CSS
389 lines
8.4 KiB
CSS
/* FILE MANAGER */
|
|
main > section[role="file-manager"] {
|
|
width: 100%;
|
|
background: var(--primary-highlight);
|
|
padding: 20px 0;
|
|
margin-top: 75px;
|
|
}
|
|
|
|
main > section[role="file-manager"] label[role="list-title"] {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
display: block;
|
|
color: var(--primary);
|
|
}
|
|
|
|
main > section[role="file-manager"] > div[role="file-drop"] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
min-height: 100px;
|
|
background: var(--white);
|
|
color: var(--primary);
|
|
vertical-align: middle;
|
|
border-radius: 5px;
|
|
max-width: 900px;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
main > section[role="file-manager"] > div[role="page-images-list"],
|
|
main > section[role="file-manager"] > div[role="page-files-list"] {
|
|
max-width: 900px;
|
|
width: 100%;
|
|
margin: 10px auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
main > section[role="file-manager"] > div[role="page-images-list"] > div,
|
|
main > section[role="file-manager"] > div[role="page-files-list"] > div {
|
|
width: 100%;
|
|
height: 150px;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-images-list"]
|
|
> div
|
|
> div.item-progress {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--primary);
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="text-editor-control"] button {
|
|
border-radius: 0;
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="text-editor-control"] button > i {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
main
|
|
> section[role="text-editor"]
|
|
> div[role="text-editor-control"]
|
|
> button:nth-child(1) {
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
main
|
|
> section[role="text-editor"]
|
|
> div[role="text-editor-control"]
|
|
> button:nth-child(10) {
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-images-list"]
|
|
> div
|
|
> button.media-remove,
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div
|
|
> button.media-remove {
|
|
color: var(--white);
|
|
margin: 5px;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-images-list"]
|
|
> div.video-item
|
|
> video {
|
|
object-fit: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-images-list"]
|
|
> div.video-item
|
|
> button,
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div.audio-item
|
|
> button,
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div.file-item
|
|
> button {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
main > section[role="file-manager"] > div[role="page-files-list"] > div.audio-item {
|
|
background: url("/assets/images/global/upload-audio.png") no-repeat center center /
|
|
cover;
|
|
}
|
|
|
|
main > section[role="file-manager"] > div[role="page-files-list"] > div.file-item {
|
|
background: url("/assets/images/global/upload-doc.png") no-repeat center center / cover;
|
|
}
|
|
|
|
main > section[role="file-manager"] > div[role="page-files-list"] > div.file-item > a {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: var(--secondary);
|
|
padding: 2px;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div.audio-item
|
|
> audio {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* PAGE META */
|
|
|
|
main > section[role="page-meta"] {
|
|
width: 100%;
|
|
background: var(--secondary-highlight);
|
|
}
|
|
|
|
main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
main section[role="page-meta"] textarea#post-title-text {
|
|
font-family: var(--base-type);
|
|
width: 100%;
|
|
height: 80px;
|
|
font-size: 2em;
|
|
color: var(--primary);
|
|
}
|
|
|
|
main section[role="page-meta"] textarea#post-tags {
|
|
font-family: var(--base-type);
|
|
width: 100%;
|
|
height: 80px;
|
|
color: var(--primary);
|
|
}
|
|
|
|
main section[role="page-meta"] select {
|
|
background: var(--primary);
|
|
color: var(--secondary);
|
|
border-radius: 3px;
|
|
border-color: var(--primary);
|
|
width: 100%;
|
|
height: 45px;
|
|
padding: 5px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
main section[role="page-meta"] div[role="page-options"] {
|
|
width: 100%;
|
|
}
|
|
|
|
main
|
|
section[role="page-meta"]
|
|
div[role="page-meta-wrapper"]
|
|
div[role="page-options"]
|
|
button {
|
|
width: 25%;
|
|
height: 45px;
|
|
transition: all 0.3s linear;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
}
|
|
|
|
main
|
|
> section[role="page-meta"]
|
|
> div[role="page-meta-wrapper"]
|
|
> div[role="page-options"]
|
|
> button.post-option-btn:nth-child(3) {
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
main
|
|
> section[role="page-meta"]
|
|
> div[role="page-meta-wrapper"]
|
|
> div[role="page-options"]
|
|
> a
|
|
> button {
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
|
|
main
|
|
section[role="page-meta"]
|
|
div[role="page-meta-wrapper"]
|
|
div[role="page-created"]
|
|
input {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* TEXT EDITOR */
|
|
|
|
main > section[role="text-editor"] {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
main section[role="text-editor"] .icon-hide {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="text-editor-control"] {
|
|
display: grid;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
}
|
|
|
|
.control-freeze {
|
|
position: fixed;
|
|
z-index: 300;
|
|
width: 97%;
|
|
top: 65px;
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="edit-post-wrapper"] textarea:focus {
|
|
outline: none;
|
|
border-color: var(--secondary-highlight);
|
|
}
|
|
|
|
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
|
|
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
|
|
font-family: var(--mono-type);
|
|
border: 0;
|
|
width: 100%;
|
|
min-height: 300px;
|
|
height: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: auto;
|
|
word-wrap: normal;
|
|
white-space: pre-wrap;
|
|
line-break: normal;
|
|
font-size: 1.1em;
|
|
line-height: 1.2;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight-content {
|
|
word-wrap: normal;
|
|
white-space: pre-wrap;
|
|
line-break: normal;
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #edit {
|
|
z-index: 1;
|
|
background: transparent;
|
|
color: transparent;
|
|
caret-color: var(--secondary-highlight);
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #highlight {
|
|
z-index: 0;
|
|
}
|
|
|
|
main section[role="text-editor"] div[role="edit-post-wrapper"] pre,
|
|
main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* RESPONSIVE */
|
|
|
|
@media only screen and (max-width: 900px) {
|
|
main > section[role="file-manager"] > div[role="file-drop"],
|
|
main > section[role="file-manager"] > div[role="page-images-list"],
|
|
main > section[role="file-manager"] > div[role="page-files-list"],
|
|
main > section[role="page-meta"] > div[role="page-meta-wrapper"],
|
|
main > section[role="text-editor"] {
|
|
width: 97%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 480px) {
|
|
main > section[role="file-manager"] > div[role="page-images-list"],
|
|
main > section[role="file-manager"] > div[role="page-files-list"] {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
main > section[role="file-manager"] > div[role="file-drop"],
|
|
main > section[role="file-manager"] > div[role="page-images-list"],
|
|
main > section[role="file-manager"] > div[role="page-files-list"],
|
|
main > section[role="page-meta"] > div[role="page-meta-wrapper"],
|
|
main > section[role="text-editor"] {
|
|
width: 95%;
|
|
}
|
|
|
|
main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="text-editor-control"] {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
main
|
|
> section[role="text-editor"]
|
|
> div[role="text-editor-control"]
|
|
> button:nth-child(1) {
|
|
border-radius: 3px 0;
|
|
}
|
|
|
|
main
|
|
> section[role="text-editor"]
|
|
> div[role="text-editor-control"]
|
|
> button:nth-child(5) {
|
|
border-radius: 0 3px;
|
|
}
|
|
|
|
main
|
|
> section[role="text-editor"]
|
|
> div[role="text-editor-control"]
|
|
> button:nth-child(6) {
|
|
border-radius: 0 0 0 3px;
|
|
}
|
|
|
|
main
|
|
> section[role="text-editor"]
|
|
> div[role="text-editor-control"]
|
|
> button:nth-child(10) {
|
|
border-radius: 0 0 3px;
|
|
}
|
|
|
|
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
|
|
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
|
|
font-size: 0.8em;
|
|
}
|
|
}
|