fipamo/public/assets/css/dash/page-editor.css
ro 84c6fa7a1a
theme color correction, editor responsive tweaks
the theme color for the dashboard was incorrect, so that has been
updated and the responsive sticky for the text formatter in the page
editor went funky with posts that had a lot of text so that's been
adjusted so it behaves as it should when it has to resize and stick
2024-11-02 14:07:53 -06:00

334 lines
7.4 KiB
CSS

/* 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%;
}
}