ro
714485c6a6
there were some nagging space issues in the new meta ui layout, so those were addressed. it'll will probably change a billion more times, but it's starting from a solid place the text editor ui now only display when text is selected and goes away after an operation has been completed or when text is deselected, making the overall page editing experience streamlined
349 lines
7.6 KiB
CSS
349 lines
7.6 KiB
CSS
section.meta {
|
|
background: var(--primary-highlight);
|
|
display: grid;
|
|
grid-template-columns: 70% 1fr;
|
|
width: 90%;
|
|
max-width: 800px;
|
|
margin: 50px auto 0;
|
|
position: absolute;
|
|
top: 215px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 10px;
|
|
z-index: 500;
|
|
border-radius: 3px;
|
|
transition: all 0.2s linear;
|
|
font-size: 0.8em;
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* FILE MANAGER */
|
|
main > section > div.file-manager {
|
|
width: 100%;
|
|
}
|
|
|
|
main > section > div.file-manager label.list-title {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
display: block;
|
|
color: var(--primary);
|
|
}
|
|
|
|
main > section > div.file-manager > div.file-drop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
min-height: 108px;
|
|
color: var(--white);
|
|
background: var(--primary);
|
|
vertical-align: middle;
|
|
border-radius: 3px;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
main > section > div.file-manager > div.page-images-list,
|
|
main > section > div.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 > div.file-manager > div.page-images-list > div,
|
|
main > section > div.file-manager > div.page-files-list > div {
|
|
width: 100%;
|
|
height: 150px;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
main > section > div.file-manager > div.page-images-list > div > div.item-progress {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--primary);
|
|
}
|
|
|
|
main > div.text-editor-control button {
|
|
border-radius: 0;
|
|
}
|
|
|
|
main > div.text-editor-control button > i {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
main > div.text-editor-control > button:nth-child(1) {
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
main > div.text-editor-control > button:nth-child(10) {
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
|
|
main > section > div.file-manager > div.page-images-list > div > button.media-remove,
|
|
main > section > div.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 > div.file-manager > div.page-images-list > div.video-item > video {
|
|
object-fit: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
main > section > div.file-manager > div.page-images-list > div.video-item > button,
|
|
main > section > div.file-manager > div.page-files-list > div.audio-item > button,
|
|
main > section > div.file-manager > div.page-files-list > div.file-item > button {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
main > section > div.file-manager > div.page-files-list > div.audio-item {
|
|
background: url("/assets/images/global/upload-audio.png") no-repeat center center /
|
|
cover;
|
|
}
|
|
|
|
main > section > div.file-manager > div.page-files-list > div.file-item {
|
|
background: url("/assets/images/global/upload-doc.png") no-repeat center center / cover;
|
|
}
|
|
|
|
main > section > div.file-manager > div.page-files-list > div.file-item > a {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: var(--secondary);
|
|
padding: 2px;
|
|
}
|
|
|
|
main > section > div.file-manager > div.page-files-list > div.audio-item > audio {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* PAGE META */
|
|
|
|
main > section > div.page-meta {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
main div.page-meta textarea#post-title-text {
|
|
font-family: var(--base-type);
|
|
width: 100%;
|
|
height: 80px;
|
|
font-size: 2em;
|
|
}
|
|
|
|
main div.page-meta textarea#post-tags {
|
|
font-family: var(--base-type);
|
|
width: 100%;
|
|
}
|
|
|
|
main div.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 div.page-meta div.page-options {
|
|
width: 100%;
|
|
}
|
|
|
|
main div.page-meta 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 > div.page-meta > div.page-options > button.post-option-btn:nth-child(3) {
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
main > section > div.page-meta > div.page-options > a > button {
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
|
|
main div.page-meta div.page-created input {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* TEXT EDITOR */
|
|
|
|
main > section.text-editor {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 90px auto;
|
|
}
|
|
|
|
main > section.text-editor .page-title #post-title-text {
|
|
font-size: 2em;
|
|
font-family: var(--base-type);
|
|
width: 99%;
|
|
padding: 5px;
|
|
font-weight: 550;
|
|
height: 48px;
|
|
border-bottom: 1px solid var(--primary-highlight);
|
|
border-radius: 0;
|
|
}
|
|
|
|
main section.text-editor .icon-hide {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
main > div.text-editor-control {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
position: absolute;
|
|
z-index: 400;
|
|
left: 35px;
|
|
top: 105px;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
.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 > div.file-manager > div.file-drop,
|
|
main > div.file-manager > div.page-images-list,
|
|
main > div.file-manager > div.page-files-list,
|
|
main > div.page-meta > div.page-meta-wrapper,
|
|
main > section.text-editor {
|
|
width: 97%;
|
|
}
|
|
|
|
.control-freeze {
|
|
width: 97%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 480px) {
|
|
main > div.file-manager > div.page-images-list,
|
|
main > div.file-manager > div.page-files-list {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
main > div.file-manager > div.file-drop,
|
|
main > div.file-manager > div.page-images-list,
|
|
main > div.file-manager > div.page-files-list,
|
|
main > div.page-meta > div.page-meta-wrapper,
|
|
main > section.text-editor {
|
|
width: 95%;
|
|
}
|
|
|
|
main > div.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%;
|
|
}
|
|
}
|