CSS Overhaul Part 1
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 structuretoggle-buttons-#109
parent
ec1dc49ba1
commit
07b422a9c3
GPG Key ID:
29B551CDBD4D3B50
@ -1,6 +1,3 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-standard-scss",
|
||||
"stylelint-config-prettier-scss"
|
||||
]
|
||||
"extends": ["stylelint-config-standard"]
|
||||
}
|
||||
|
||||
@ -0,0 +1,53 @@
|
||||
<?php
|
||||
|
||||
namespace brain\api\v1;
|
||||
|
||||
use brain\utility\FileUploader;
|
||||
|
||||
class FilesAPI
|
||||
{
|
||||
public function __construct()
|
||||
{
|
||||
}
|
||||
|
||||
public static function uploadFiles($request, $type = null)
|
||||
{
|
||||
$upload = $request->getUploadedFiles(); //grab uploaded files
|
||||
$file = $upload['upload_files'][0]; //front end sends one by one for progress tracking, so grab first
|
||||
$type = $file->getClientMediaType();
|
||||
$filesPath = '';
|
||||
$path = date('Y') . '/' . date('m');
|
||||
$response = [];
|
||||
switch ($type) {
|
||||
case 'image/jpeg':
|
||||
case 'image/png':
|
||||
case 'image/gif':
|
||||
case 'image/svg':
|
||||
$filesPath = '/assets/images/blog/' . $path . '/';
|
||||
|
||||
break;
|
||||
case 'video/mp4':
|
||||
$filesPath = '/assets/video/blog/' . $path . '/';
|
||||
break;
|
||||
case 'audio/mpeg':
|
||||
$filesPath = '/assets/sound/blog/' . $path . '/';
|
||||
break;
|
||||
case 'application/pdf':
|
||||
case 'text/plain':
|
||||
case 'text/rtf':
|
||||
$filesPath = '/assets/docs/blog/' . $path . '/';
|
||||
break;
|
||||
}
|
||||
|
||||
FileUploader::uploadFile('../public' . $filesPath, $file);
|
||||
|
||||
$response = [
|
||||
'message' => "File Uploaded. Great!",
|
||||
"filePath" => $filesPath . urlencode($file->getClientFileName()),
|
||||
"fileName" => urlencode($file->getClientFileName()),
|
||||
'type' => $type,
|
||||
];
|
||||
|
||||
return $response;
|
||||
}
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="theme-color" content="#FFFFFF"/>
|
||||
<title>
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock %}
|
||||
</title>
|
||||
{% block stylesheets %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div id="notifications" class="notifications">
|
||||
<div id="notify-message" class="notify-message">
|
||||
<div id="notify-good" class="notify-icon">
|
||||
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-flirt"/></svg>
|
||||
</div>
|
||||
<div id="notify-lame" class="notify-icon">
|
||||
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-sad"/></svg>
|
||||
</div>
|
||||
<div id="notify-working" class="notify-icon">
|
||||
<svg id="notify-working-icon" viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-cog"/></svg>
|
||||
</div>
|
||||
|
||||
<div id="notify-text">
|
||||
<div id="notify-progress"></div>
|
||||
<p id="message-text">MESSAGE TEXT</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="main-content" class="main-container">
|
||||
<section id="dash-index-content">
|
||||
{% if status %}
|
||||
<header id="header">
|
||||
<div id="wrapper">
|
||||
{% apply spaceless %}
|
||||
<div id="left">
|
||||
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
|
||||
</div>
|
||||
<div id="right">
|
||||
{% if status %}
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/partials/navigation.twig") }}
|
||||
{% endapply %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endapply %}
|
||||
</div>
|
||||
|
||||
</header>
|
||||
{% endif %}
|
||||
{% apply spaceless %}
|
||||
{% block mainContent %}{% endblock %}
|
||||
{% endapply %}
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer></footer>
|
||||
{% block javascripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,10 @@
|
||||
<div role="notify-message">
|
||||
<div role="notify-icons">
|
||||
<i class="ti ti-mood-smile" role="notify-good"></i>
|
||||
<i class="ti ti-mood-sad" role="notify-notgood"></i>
|
||||
<i class="ti ti-settings" role="notify-working"></i>
|
||||
</div>
|
||||
<div role="notify-text">
|
||||
<span role="response-text">Hey Hey</span>
|
||||
</div>
|
||||
</div>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,43 +0,0 @@
|
||||
{
|
||||
"name": "fipamo-dash",
|
||||
"version": "2.5.1-beta",
|
||||
"private": true,
|
||||
"apidoc": {
|
||||
"name": "Fipamo API",
|
||||
"version": "1.0.0",
|
||||
"description": "The most chill API for the most chill blog framework"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.16.5",
|
||||
"babel-cli": "^6.26.0",
|
||||
"eslint": "^8.11.0",
|
||||
"eslint-plugin-babel": "^5.3.1",
|
||||
"parcel": "^2.0.1",
|
||||
"prettier": "^2.6.0",
|
||||
"stylelint": "^14.8.2",
|
||||
"stylelint-config-prettier-scss": "^0.0.1",
|
||||
"stylelint-config-standard-scss": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.16.5",
|
||||
"@babel/eslint-parser": "^7.16.5",
|
||||
"animejs": "^3.2.1",
|
||||
"babel-plugin-prismjs": "^2.1.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"bulma": "^0.9.3",
|
||||
"caret-pos": "^2.0.0",
|
||||
"jsdoc": "^3.6.7",
|
||||
"minami": "^1.2.3",
|
||||
"prismjs": "^1.25.0",
|
||||
"sass": "^1.45.1",
|
||||
"sortablejs": "^1.14.0"
|
||||
},
|
||||
"license": "UNLICENSED",
|
||||
"author": "Are0h",
|
||||
"scripts": {
|
||||
"watch": "sass --watch src/styles:public/assets/css & npx parcel watch src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts",
|
||||
"build": "sass src/styles:public/assets/css & npx parcel build src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts"
|
||||
},
|
||||
"description": "Front end script for the most chill blog framework ever.",
|
||||
"repository": "https://code.playvicio.us/Are0h/Fipamo"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,22 @@
|
||||
:root {
|
||||
/* BASE COLORS */
|
||||
--primary: #1d3040;
|
||||
--secondary: #b2cce5;
|
||||
--tertiary: #f5ab35;
|
||||
--highlight: #fc6399;
|
||||
--white: #efebe3;
|
||||
--grey: #abb7b7;
|
||||
--black: #32302f;
|
||||
|
||||
/* EDITOR COLORS */
|
||||
--event-cool: #32cd32;
|
||||
--event-lame: #f64747;
|
||||
--editor-primary: #fde3a7;
|
||||
--editor-secondary: #e7903c;
|
||||
--editor-tertiary: #6bb9f0;
|
||||
--editor-string: #dcc6e0;
|
||||
--editor-tag: #e73c4e;
|
||||
|
||||
/* RGB Versions */
|
||||
--primary-rgb: 29 28 24;
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
a {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
p {
|
||||
background: var(--tertiary);
|
||||
color: var(--primary);
|
||||
padding: 5px;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="text"] {
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
font: 18px var(--base-type);
|
||||
display: inline-block;
|
||||
background: var(--primary);
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
color: var(--white);
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="submit"] {
|
||||
background: var(--highlight);
|
||||
color: var(--primary);
|
||||
font: 20px var(--base-type);
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
select {
|
||||
font: 14px var(--base-type);
|
||||
border: 1px solid var(--secondary);
|
||||
appearance: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
font: 25px var(--base-type);
|
||||
color: var(--white);
|
||||
}
|
||||
@ -0,0 +1,131 @@
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font: 400 1.2em/1.4em var(--base-type);
|
||||
}
|
||||
|
||||
html body {
|
||||
background: var(--primary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* GLOBALS */
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--secondary);
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 1px solid var(--highlight);
|
||||
}
|
||||
|
||||
sup {
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#notifications {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
background: var(--black);
|
||||
color: var(--highlight);
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
svg[role="icon"] {
|
||||
fill: var(--white);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
/* HEADER
|
||||
Navigation
|
||||
Notificiations
|
||||
*/
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 10px auto;
|
||||
background: var(--white);
|
||||
height: 50px;
|
||||
border-radius: 5px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
position: fixed;
|
||||
z-index: 500;
|
||||
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
|
||||
}
|
||||
|
||||
header > nav {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr auto;
|
||||
}
|
||||
|
||||
header > nav > div[role="nav-left"] img {
|
||||
width: 40px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
header > nav > div[role="nav-right"] {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
header > nav > div[role="nav-right"] button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
section[role="login"] {
|
||||
margin: 15% auto;
|
||||
padding: 10px;
|
||||
width: 500px;
|
||||
border-radius: 5px;
|
||||
background: var(--white);
|
||||
display: grid;
|
||||
grid-template-columns: 28.5% 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
section[role="login"] form input {
|
||||
width: 95%;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
section[role="login"] form button {
|
||||
padding: 10px 5px;
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
section[role="login"] form a {
|
||||
padding: 10px 5px;
|
||||
border-radius: 5px;
|
||||
width: 10%;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
background: var(--tertiary);
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
margin: 0 0 0 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,85 @@
|
||||
section[role="index-header"] {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 60px auto 0;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a:nth-child(1) {
|
||||
grid-column: 1/4;
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a:nth-child(2) {
|
||||
grid-row: 3/6;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a:nth-child(3) {
|
||||
grid-column: 2/4;
|
||||
grid-row: 3/5;
|
||||
}
|
||||
|
||||
section[role="index-header"] div[role="index-header-right"] {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
section[role="index-header"] div[role="index-header-right"] a {
|
||||
border-bottom: none;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-auto-rows: minmax(200px, auto);
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a button {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] button[data-active="true"] {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] button[data-active="true"] svg {
|
||||
fill: var(--tertiary);
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] button[data-active="false"] {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] button[data-active="false"] svg {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] aside {
|
||||
font-size: 1.1em;
|
||||
color: var(--white);
|
||||
text-shadow: 2px 2px 2px var(--black);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] hr {
|
||||
color: var(--white);
|
||||
border: 0.1px solid;
|
||||
margin: 7px 0;
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
header > nav > div[role="notifications"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header > nav > div[role="notifications"] > div[role="notify-message"] {
|
||||
display: flex;
|
||||
height: 86%;
|
||||
}
|
||||
|
||||
header > nav > div[role="notifications"] > div[role="notify-message"] div {
|
||||
display: inline-block;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
header
|
||||
> nav
|
||||
> div[role="notifications"]
|
||||
> div[role="notify-message"]
|
||||
> div[role="notify-text"] {
|
||||
color: var(--white);
|
||||
border-radius: 5px;
|
||||
height: 79%;
|
||||
margin-top: 5px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
header
|
||||
> nav
|
||||
> div[role="notifications"]
|
||||
> div[role="notify-message"]
|
||||
> div[role="notify-icons"] {
|
||||
margin: 5px;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
header
|
||||
> nav
|
||||
> div[role="notifications"]
|
||||
> div[role="notify-message"]
|
||||
> div[role="notify-text"]
|
||||
span {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
header > nav > div[role="notifications"] > div[role="notify-message"] i {
|
||||
display: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
i[role="notify-working"] {
|
||||
animation: 2s infinite linear spin;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,111 @@
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: var(--editor-primary);
|
||||
background: none;
|
||||
font-family: var(--mono-type);
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
tab-size: 4;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
margin: 0.1em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
:not(pre) {
|
||||
& > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #8292a2;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: var(--editor-secondary);
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.content {
|
||||
color: var(--editor-tertiary);
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: var(--editor-tag);
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: var(--editor-string);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: var(--editor-secondary);
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: normal;
|
||||
}
|
||||
@ -0,0 +1,345 @@
|
||||
/* 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;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
@import url("colors.css");
|
||||
@import url("forms.css");
|
||||
@import url("typography.css");
|
||||
@import url("frame.css");
|
||||
@import url("icons.css");
|
||||
@import url("notifications.css");
|
||||
@import url("index.css");
|
||||
@import url("page-editor.css");
|
||||
@import url("page-editor-highlights.css");
|
||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,29 @@
|
||||
:root {
|
||||
--base-type: helvetica, arial, sans-serif;
|
||||
--mono-type: "Lucida Console", monaco, monospace;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
main > article > h1 {
|
||||
color: var(--primary);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue