Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

début implémentation light-mode avec son script : remplacement de tout les valeur de couleur par varriable corespondante, text-shadow autour de du logo pour le contour, changement de fonctionnement pour que svg puisse changer de couleur

Browse source
This commit is contained in:
antonin gallon 2025-11-20 17:31:26 +01:00
parent 8f9e75126e
commit 0585421854
56 changed files with 492 additions and 6978 deletions
Download patch file Download diff file Expand all files Collapse all files

62
site/plugins/code-editor/src/assets/css/abstracts/_variables.scss
View file

@ -1,62 +0,0 @@
/* Colors
---------------------------------*/
$color-black: #000;
$color-white: #fff;
$color-dark: #16171a;
$color-dark-grey: #777;
$color-light: #efefef;
$color-light-grey: #999;
$color-background: $color-light;
$color-positive: #5d800d;
$color-positive-border: $color-positive;
$color-positive-outline: rgba($color-positive, 0.25);
$color-positive-on-dark: #a7bd68;
$color-focus: #4271ae;
$color-focus-border: $color-focus;
$color-focus-outline: rgba($color-focus, 0.25);
$color-focus-on-dark: #81a2be;
$color-notice: #f5871f;
$color-notice-on-dark: #de935f;
$color-negative: #c82829;
$color-negative-border: $color-negative;
$color-negative-outline: rgba($color-negative, 0.25);
$color-negative-on-dark: #d16464;
$color-border: #ccc;
$color-backdrop: rgba($color-dark, 0.6);
$color-inset: #ebebeb;
/* Breakpoint
---------------------------------*/
$breakpoint-small: 30em;
$breakpoint-menu: 45em;
$breakpoint-medium: 65em;
$breakpoint-large: 90em;
$breakpoint-huge: 120em;
/* Fields
---------------------------------*/
$field-input-padding: .5rem;
$field-input-height: 2.25rem;
$field-input-line-height: 1.25rem;
/* Typography
---------------------------------*/
$font-size-tiny: 0.75rem;
$font-size-small: 0.875rem;
$font-size-medium: 1rem;
$font-size-large: 1.25rem;
$font-size-huge: 1.5rem;
$font-size-monster: 1.75rem;
$font-weight-normal: 400;
$font-weight-bold: 600;
$font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-family-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;

29
site/plugins/code-editor/src/assets/css/styles.scss
View file

@ -1,29 +0,0 @@
@import
'abstracts/variables.scss';
.k-code-editor-input {
background: #2d2d2d;
color: #ccc;
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: .9rem;
line-height: 1.5;
padding: 10px;
&[data-size="small"] {
min-height: 7.5rem;
}
&[data-size="medium"] {
min-height: 15rem;
}
&[data-size="large"] {
min-height: 30rem;
}
&[data-size="huge"] {
min-height: 30rem;
}
}
.prism-editor__textarea:focus {
outline: none;
}

29
site/plugins/code-editor/src/components/field/CodeEditor.vue
View file

@ -67,6 +67,31 @@ export default {
};
</script>
<style lang="scss">
@import "../../assets/css/styles.scss";
<style>
.k-code-editor-input {
background: light-dark(var(--color-gray-950), var(--input-color-back));
color: var(--color-gray-200);
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.5;
padding: var(--spacing-2);
border-radius: var(--rounded);
}
.k-code-editor-input[data-size="small"] {
min-height: 7.5rem;
}
.k-code-editor-input[data-size="medium"] {
min-height: 15rem;
}
.k-code-editor-input[data-size="large"] {
min-height: 30rem;
}
.k-code-editor-input[data-size="huge"] {
min-height: 45rem;
}
.prism-editor__textarea:focus {
outline: none;
}
</style>