forked from projects/fipamo
07b422a9c3
This one is a doozy, so let's breakt it down into what areas where touched. - updated package json to remove unneeded dependencies. - rebuilt file uploading to simply a very convuluted process - began proces to replace icons with https://tabler-icons.io - began process of removing the need for css preprocessor and using pure css - login completed - dashboard index completed - page edit ui completed - page edit ui text editor tweaked so syntax highlighting is cleaner and more accurate The settings and navigation UIs still remain and then polishing the responsive for the new css structure
346 lines
6.6 KiB
CSS
346 lines
6.6 KiB
CSS
/* FILE MANAGER */
|
|
main > section[role="file-manager"] {
|
|
width: 100%;
|
|
background: var(--tertiary);
|
|
padding: 20px 0;
|
|
margin-top: 75px;
|
|
}
|
|
|
|
main > section[role="file-manager"] label[role="list-title"] {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
display: block;
|
|
color: var(--primary);
|
|
}
|
|
|
|
main > section[role="file-manager"] > div[role="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[role="file-manager"] > div[role="page-images-list"],
|
|
main > section[role="file-manager"] > div[role="page-files-list"] {
|
|
max-width: 900px;
|
|
width: 100%;
|
|
margin: 10px auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
main > section[role="file-manager"] > div[role="page-images-list"] > div,
|
|
main > section[role="file-manager"] > div[role="page-files-list"] > div {
|
|
width: 100%;
|
|
height: 150px;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-images-list"]
|
|
> div
|
|
> div.item-progress {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--primary);
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-images-list"]
|
|
> div
|
|
> button.media-remove,
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div
|
|
> button.media-remove {
|
|
color: var(--white);
|
|
margin: 5px;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-images-list"]
|
|
> div.video-item
|
|
> video {
|
|
object-fit: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-images-list"]
|
|
> div.video-item
|
|
> button,
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div.audio-item
|
|
> button,
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div.file-item
|
|
> button {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div.audio-item {
|
|
background: url("/assets/images/global/upload-audio.png") no-repeat center
|
|
center / cover;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div.file-item {
|
|
background: url("/assets/images/global/upload-doc.png") no-repeat center
|
|
center / cover;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div.file-item
|
|
> a {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: var(--secondary);
|
|
padding: 2px;
|
|
}
|
|
|
|
main
|
|
> section[role="file-manager"]
|
|
> div[role="page-files-list"]
|
|
> div.audio-item
|
|
> audio {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* PAGE META */
|
|
|
|
main > section[role="page-meta"] {
|
|
width: 100%;
|
|
background: var(--highlight);
|
|
}
|
|
|
|
main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 10px auto;
|
|
color: var(--white);
|
|
}
|
|
|
|
main section[role="page-meta"] textarea#post-title-text {
|
|
background: var(--white);
|
|
font-family: var(--base-type);
|
|
width: 100%;
|
|
height: 80px;
|
|
font-size: 2em;
|
|
color: var(--primary);
|
|
}
|
|
|
|
main section[role="page-meta"] textarea#post-tags {
|
|
background: var(--white);
|
|
font-family: var(--base-type);
|
|
width: 100%;
|
|
height: 80px;
|
|
color: var(--primary);
|
|
}
|
|
|
|
main section[role="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[role="page-meta"] div[role="page-options"] {
|
|
width: 100%;
|
|
}
|
|
|
|
main
|
|
section[role="page-meta"]
|
|
div[role="page-meta-wrapper"]
|
|
div[role="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[role="page-meta"]
|
|
> div[role="page-meta-wrapper"]
|
|
> div[role="page-options"]
|
|
> button.post-option-btn:nth-child(3) {
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
|
|
main
|
|
> section[role="page-meta"]
|
|
> div[role="page-meta-wrapper"]
|
|
> div[role="page-options"]
|
|
> a
|
|
> button {
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
|
|
main
|
|
section[role="page-meta"]
|
|
div[role="page-meta-wrapper"]
|
|
button[data-active="false"] {
|
|
background: var(--primary);
|
|
}
|
|
|
|
main
|
|
section[role="page-meta"]
|
|
div[role="page-meta-wrapper"]
|
|
button[data-active="false"]
|
|
svg {
|
|
fill: var(--secondary);
|
|
}
|
|
|
|
main
|
|
section[role="page-meta"]
|
|
div[role="page-meta-wrapper"]
|
|
div[role="page-options"]
|
|
button[data-active="true"] {
|
|
background: var(--tertiary);
|
|
}
|
|
|
|
main
|
|
section[role="page-meta"]
|
|
div[role="page-meta-wrapper"]
|
|
div[role="page-options"]
|
|
button[data-active="true"]
|
|
svg {
|
|
fill: var(--primary);
|
|
}
|
|
|
|
main
|
|
section[role="page-meta"]
|
|
div[role="page-meta-wrapper"]
|
|
div[role="page-created"]
|
|
input {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* TEXT EDITOR */
|
|
|
|
main > section[role="text-editor"] {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
main section[role="text-editor"] .icon-hide {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="text-editor-control"] {
|
|
display: grid;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
gap: 5px;
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
main
|
|
> section[role="text-editor"]
|
|
> div[role="edit-post-wrapper"]
|
|
textarea:focus {
|
|
outline: none;
|
|
border-color: var(--highlight);
|
|
}
|
|
|
|
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
|
|
main section[role="text-editor"] div[role="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[role="text-editor"]
|
|
div[role="edit-post-wrapper"]
|
|
#highlight-content {
|
|
word-wrap: normal;
|
|
white-space: pre-wrap;
|
|
line-break: normal;
|
|
}
|
|
|
|
main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #edit {
|
|
z-index: 1;
|
|
background: transparent;
|
|
color: transparent;
|
|
caret-color: var(--highlight);
|
|
}
|
|
|
|
main
|
|
> section[role="text-editor"]
|
|
> div[role="edit-post-wrapper"]
|
|
> #highlight {
|
|
z-index: 0;
|
|
}
|
|
|
|
main section[role="text-editor"] div[role="edit-post-wrapper"] pre,
|
|
main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|