forked from projects/fipamo
ro
f53716dba9
edits to the settings page threw of some form styles throughout the the dashboard, so some quick css edits were needed to polish them up
326 lines
7.3 KiB
CSS
326 lines
7.3 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: 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;
|
|
}
|
|
}
|