ro
a53723f7c8
the role attribute is being used incorrectly through out the site, which is bad for screen reader, so they need to be removed and replaced with the class attribute the page editor was the biggest culprit, so that one has been converted first
328 lines
7.4 KiB
CSS
328 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;
|
|
color: var(--primary);
|
|
}
|
|
|
|
main section.page-meta textarea#post-tags {
|
|
font-family: var(--base-type);
|
|
width: 100%;
|
|
height: 80px;
|
|
color: var(--primary);
|
|
}
|
|
|
|
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: 97%;
|
|
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%;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|