fipamo/public/assets/css/dash/page-editor.css

334 lines
7.4 KiB
CSS
Raw Permalink Normal View History

/* FILE MANAGER */
main > section.file-manager {
width: 100%;
background: var(--primary-highlight);
padding: 20px 0;
margin-top: 75px;
}
main > section.file-manager label.list-title {
width: 100%;
max-width: 900px;
margin: 0 auto;
display: block;
color: var(--primary);
}
main > section.file-manager > div.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.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list {
max-width: 900px;
width: 100%;
margin: 10px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
}
main > section.file-manager > div.page-images-list > div,
main > section.file-manager > div.page-files-list > div {
width: 100%;
height: 150px;
border-radius: 3px;
overflow: hidden;
position: relative;
cursor: pointer;
}
main > section.file-manager > div.page-images-list > div > div.item-progress {
width: 100%;
height: 100%;
background: var(--primary);
}
main > section.text-editor > div.text-editor-control button {
border-radius: 0;
}
main > section.text-editor > div.text-editor-control button > i {
font-size: 1.6em;
}
main > section.text-editor > div.text-editor-control > button:nth-child(1) {
border-radius: 3px 0 0 3px;
}
main > section.text-editor > div.text-editor-control > button:nth-child(10) {
border-radius: 0 3px 3px 0;
}
main > section.file-manager > div.page-images-list > div > button.media-remove,
main > section.file-manager > div.page-files-list > div > button.media-remove {
color: var(--white);
margin: 5px;
padding: 10px 15px 7px;
font-size: 1.5em;
}
main > section.file-manager > div.page-images-list > div.video-item > video {
object-fit: cover;
height: 100%;
width: 100%;
}
main > section.file-manager > div.page-images-list > div.video-item > button,
main > section.file-manager > div.page-files-list > div.audio-item > button,
main > section.file-manager > div.page-files-list > div.file-item > button {
position: absolute;
top: 0;
left: 0;
}
main > section.file-manager > div.page-files-list > div.audio-item {
background: url("/assets/images/global/upload-audio.png") no-repeat center center /
cover;
}
main > section.file-manager > div.page-files-list > div.file-item {
background: url("/assets/images/global/upload-doc.png") no-repeat center center / cover;
}
main > section.file-manager > div.page-files-list > div.file-item > a {
position: absolute;
bottom: 0;
background: var(--secondary);
padding: 2px;
}
main > section.file-manager > div.page-files-list > div.audio-item > audio {
height: 100%;
width: 100%;
}
/* PAGE META */
main > section.page-meta {
width: 100%;
background: var(--secondary-highlight);
}
main > section.page-meta > div.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.page-meta textarea#post-title-text {
font-family: var(--base-type);
width: 100%;
height: 80px;
font-size: 2em;
}
main section.page-meta textarea#post-tags {
font-family: var(--base-type);
width: 100%;
height: 80px;
}
main section.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.page-meta div.page-options {
width: 100%;
}
main section.page-meta div.page-meta-wrapper div.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.page-meta
> div.page-meta-wrapper
> div.page-options
> button.post-option-btn:nth-child(3) {
border-radius: 3px 0 0 3px;
}
main > section.page-meta > div.page-meta-wrapper > div.page-options > a > button {
border-radius: 0 3px 3px 0;
}
main section.page-meta div.page-meta-wrapper div.page-created input {
display: none;
visibility: hidden;
}
/* TEXT EDITOR */
main > section.text-editor {
width: 100%;
max-width: 900px;
margin: 10px auto;
}
main section.text-editor .icon-hide {
display: none;
visibility: hidden;
}
main > section.text-editor > div.text-editor-control {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.control-freeze {
position: fixed;
z-index: 300;
width: 900px;
top: 65px;
}
main > section.text-editor > div.edit-post-wrapper {
width: 100%;
max-width: 900px;
border-radius: 5px;
position: relative;
margin: 10px 0;
}
main > section.text-editor > div.edit-post-wrapper textarea:focus {
outline: none;
border-color: var(--secondary-highlight);
}
main section.text-editor div.edit-post-wrapper #edit,
main section.text-editor div.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.text-editor div.edit-post-wrapper #highlight-content {
word-wrap: normal;
white-space: pre-wrap;
line-break: normal;
}
main > section.text-editor > div.edit-post-wrapper > #edit {
z-index: 1;
background: transparent;
color: transparent;
caret-color: var(--secondary-highlight);
}
main > section.text-editor > div.edit-post-wrapper > #highlight {
z-index: 0;
}
main section.text-editor div.edit-post-wrapper pre,
main section.text-editor div.edit-post-wrapper pre code {
padding: 0;
margin: 0;
}
/* RESPONSIVE */
@media only screen and (max-width: 900px) {
main > section.file-manager > div.file-drop,
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list,
main > section.page-meta > div.page-meta-wrapper,
main > section.text-editor {
width: 97%;
}
.control-freeze {
width: 97%;
}
}
@media only screen and (max-width: 480px) {
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list {
grid-template-columns: 1fr 1fr 1fr;
}
main > section.file-manager > div.file-drop,
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list,
main > section.page-meta > div.page-meta-wrapper,
main > section.text-editor {
width: 95%;
}
main > section.page-meta > div.page-meta-wrapper {
grid-template-columns: 1fr;
}
main > section.text-editor > div.text-editor-control {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
main > section.text-editor > div.text-editor-control > button:nth-child(1) {
border-radius: 3px 0;
}
main > section.text-editor > div.text-editor-control > button:nth-child(5) {
border-radius: 0 3px;
}
main > section.text-editor > div.text-editor-control > button:nth-child(6) {
border-radius: 0 0 0 3px;
}
main > section.text-editor > div.text-editor-control > button:nth-child(10) {
border-radius: 0 0 3px;
}
main section.text-editor div.edit-post-wrapper #edit,
main section.text-editor div.edit-post-wrapper #highlight {
font-size: 0.8em;
}
.control-freeze {
width: 96%;
}
}