mirror of
https://github.com/estruyf/vscode-front-matter.git
synced 2026-08-12 03:43:01 +02:00
Changes for new panel view
This commit is contained in:
Elio Struyf
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{font-family:'Futura-CondensedExtraBold';}
|
||||
.st1{font-size:11.3081px;}
|
||||
.st2{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
|
||||
.st3{font-family:'Futura-CondensedMedium';}
|
||||
.st4{font-size:10px;}
|
||||
.st5{fill:none;}
|
||||
</style>
|
||||
<text transform="matrix(0.7959 0 0 1 1.6978 11.391)" class="st0 st1">FRONT</text>
|
||||
<rect class="st2" width="28" height="28"/>
|
||||
<text transform="matrix(1 0 0 1 1.9325 24.496)" class="st3 st4">MATTER</text>
|
||||
<rect x="-33.5" y="14" class="st5" width="8.6" height="14"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 880 B |
@@ -0,0 +1,23 @@
|
||||
|
||||
(function () {
|
||||
const vscode = acquireVsCodeApi();
|
||||
|
||||
window.addEventListener('message', event => {
|
||||
const message = event.data;
|
||||
|
||||
switch (message.type) {
|
||||
case 'addColor':
|
||||
addColor();
|
||||
break;
|
||||
case 'clearColors':
|
||||
colors = [];
|
||||
updateColorList(colors);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
window.onload = function() {
|
||||
vscode.postMessage({ command: 'get-data' });
|
||||
console.log('Ready to accept data.');
|
||||
};
|
||||
}());
|
||||
@@ -0,0 +1,30 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/* Styling: https://code.visualstudio.com/api/references/theme-color */
|
||||
|
||||
@-webkit-keyframes load7 {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2.5em 0 -1.3em;
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0 2.5em 0 0;
|
||||
}
|
||||
}
|
||||
@keyframes load7 {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2.5em 0 -1.3em;
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0 2.5em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner,
|
||||
.spinner:before,
|
||||
.spinner:after {
|
||||
border-radius: 50%;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
animation-fill-mode: both;
|
||||
animation: load7 1.8s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
color: var(--vscode-panelSectionHeader-foreground);
|
||||
font-size: 10px;
|
||||
margin: 80px auto;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0);
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
.spinner:before,
|
||||
.spinner:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.spinner:before {
|
||||
left: -3.5em;
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.spinner:after {
|
||||
left: 3.5em;
|
||||
}
|
||||
|
||||
|
||||
.frontmatter h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.frontmatter p,
|
||||
.frontmatter h4,
|
||||
.frontmatter ul {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.seo__status__details {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.not-valid {
|
||||
color: var(--vscode-errorForeground);
|
||||
}
|
||||
|
||||
.article__actions {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.article__action {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.article__tags {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.article__tags ul {
|
||||
color: var(--vscode-dropdown-foreground);
|
||||
background-color: var(--vscode-dropdown-background);
|
||||
}
|
||||
|
||||
.article__tags li {
|
||||
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
|
||||
}
|
||||
|
||||
.article__tags li:active {
|
||||
color: var(--vscode-button-foreground);
|
||||
background-color: var(--vscode-button-background);
|
||||
}
|
||||
|
||||
.article__tags li[data-focus="true"] {
|
||||
background-color: var(--vscode-button-hoverBackground);
|
||||
}
|
||||
|
||||
.article__tags li[aria-disabled="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article__tags__items {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.article__tags__items__btn {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
margin-right: .5rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.article__tags__items__btn span {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.article__tags__items__pill_notexists {
|
||||
color: var(--vscode-inputValidation-errorForeground);
|
||||
background-color: var(--vscode-inputValidation-errorBackground);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
:root {
|
||||
--container-paddding: 20px;
|
||||
--input-padding-vertical: 6px;
|
||||
--input-padding-horizontal: 4px;
|
||||
--input-margin-vertical: 4px;
|
||||
--input-margin-horizontal: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0 var(--container-paddding);
|
||||
color: var(--vscode-foreground);
|
||||
font-size: var(--vscode-font-size);
|
||||
font-weight: var(--vscode-font-weight);
|
||||
font-family: var(--vscode-font-family);
|
||||
background-color: var(--vscode-editor-background);
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: var(--container-paddding);
|
||||
}
|
||||
|
||||
body > *,
|
||||
form > * {
|
||||
margin-block-start: var(--input-margin-vertical);
|
||||
margin-block-end: var(--input-margin-vertical);
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline-color: var(--vscode-focusBorder) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--vscode-textLink-foreground);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
color: var(--vscode-textLink-activeForeground);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: var(--vscode-editor-font-size);
|
||||
font-family: var(--vscode-editor-font-family);
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
outline: 1px solid transparent;
|
||||
outline-offset: 2px !important;
|
||||
color: var(--vscode-button-foreground);
|
||||
background: var(--vscode-button-background);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
background: var(--vscode-button-hoverBackground);
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline-color: var(--vscode-focusBorder);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background: var(--vscode-button-background);
|
||||
filter: brightness(40%);
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
color: var(--vscode-button-secondaryForeground);
|
||||
background: var(--vscode-button-secondaryBackground);
|
||||
}
|
||||
|
||||
button.secondary:hover {
|
||||
background: var(--vscode-button-secondaryHoverBackground);
|
||||
}
|
||||
|
||||
button.secondary:disabled {
|
||||
background: var(--vscode-button-secondaryBackground);
|
||||
filter: brightness(40%);
|
||||
}
|
||||
|
||||
input:not([type='checkbox']),
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
font-family: var(--vscode-font-family);
|
||||
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
|
||||
color: var(--vscode-input-foreground);
|
||||
outline-color: var(--vscode-input-border);
|
||||
background-color: var(--vscode-input-background);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--vscode-input-placeholderForeground);
|
||||
}
|
||||
Reference in New Issue
Block a user