ro
5e3d2ea49f
the label for uploading files in the meta ui was not accessible by keyboard, so that element was changed to a button that can be tabbed to and clicked to open the file upload ui there were also so minor css issues with the options toolbar, so those have been tweaked
358 lines
7.7 KiB
CSS
358 lines
7.7 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: 225px;
|
|
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%;
|
|
}
|
|
|
|
button#files-upload {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
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
|
|
> section.meta
|
|
> div.page-meta
|
|
> div.page-options
|
|
> div
|
|
> button.post-option-btn:nth-child(1) {
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
main > section.meta > div.page-meta > div.page-options > div > 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%;
|
|
}
|
|
}
|