This commit is contained in:
Víctor Losada Hernández
2026-09-28 17:37:35 +02:00
parent 8a372c1454
commit 38f6eb000f
37 changed files with 3025 additions and 5622 deletions
+1 -1
View File
@@ -2,8 +2,8 @@
.anchored-box {
position : absolute;
inset-block-start : anchor(bottom);
visibility : hidden;
justify-self : anchor-center;
inset-block-start : anchor(bottom);
&.active { visibility : visible; }
}
+39 -44
View File
@@ -16,15 +16,15 @@
}
@keyframes slideacross {
0% {
bottom: -200px;
left: -200px;
}
0% {
bottom : -200px;
left : -200px;
}
100% {
bottom:100%;
left:100%;
}
100% {
bottom : 100%;
left : 100%;
}
}
:where(.codeEditor) {
@@ -37,22 +37,22 @@
outline : none !important;
&.cm-flash {
position:relative;
position : relative;
&::after {
position:absolute;
content:'';
bottom:-200px;
left:-200px;
translate:-50%;
width:200%;
height:100px;
background:linear-gradient(0deg, #89eafc00 0px, #89ebfc8e 50px, #89eafc00 100px, transparent);
display:block;
position : absolute;
bottom : -200px;
left : -200px;
display : block;
width : 200%;
height : 100px;
content : '';
background : linear-gradient(0deg, #89EAFC00 0px, #89EBFC8E 50px, #89EAFC00 100px, transparent);
rotate:30deg;
rotate : 30deg;
translate : -50%;
@media screen and (prefers-reduced-motion: no-preference) {
animation: .5s linear 1 slideacross ;
@media screen and (prefers-reduced-motion : no-preference) {
animation : 0.5s linear 1 slideacross;
}
}
}
@@ -134,9 +134,7 @@
vertical-align : sub;
color : rgb(123, 123, 15);
}
.cm-strikethrough {
text-decoration: line-through;
}
.cm-strikethrough { text-decoration : line-through; }
.cm-definitionList {
.cm-definitionTerm { color : rgb(96, 117, 143); }
@@ -196,30 +194,27 @@
}
.cm-image {
position:relative;
position : relative;
.cm-preview {
object-fit: contain;
position:absolute;
bottom:0;
left:0;
height:200px;
width:200px;
height:200px;
padding:5px;
background-color: #fff;
border-radius:10px;
border:3px solid grey;
pointer-events: none;
opacity:0;
transition:0.2s opacity 0.5s;
translate:0 100%;
z-index:1000;
position : absolute;
bottom : 0;
left : 0;
z-index : 1000;
width : 200px;
height : 200px;
padding : 5px;
pointer-events : none;
object-fit : contain;
background-color : #FFFFFF;
border : 3px solid grey;
border-radius : 10px;
opacity : 0;
translate : 0 100%;
transition : 0.2s opacity 0.5s;
}
&:hover .cm-preview {
opacity:1;
}
&:hover .cm-preview { opacity : 1; }
}
/* Tab character visualization (optional) */
+2 -4
View File
@@ -31,14 +31,12 @@
font-family : 'Open Sans';
font-size : 11px;
cursor : default;
&:hover {
background-color : #ddd;
}
&:hover { background-color : #DDDDDD; }
.detail {
width : 100%;
font-size : 9px;
font-style : italic;
color : #7c7c7c;
color : #7C7C7C;
text-align : left;
}
}
+18 -20
View File
@@ -1,37 +1,35 @@
@property --menuColor {
syntax: '<color>';
inherits: true;
initial-value: #DDD;
syntax : '<color>';
inherits : true;
initial-value : #DDDDDD;
}
@property --activeTriggerColor {
syntax: '<color>';
inherits: true;
initial-value: #999;
syntax : '<color>';
inherits : true;
initial-value : #999999;
}
:root{
--activeTriggerColor : var(--activeTriggerColor);
}
:root { --activeTriggerColor : var(--activeTriggerColor); }
.menu-list {
contain : content;
position : fixed;
top : anchor(bottom);
left : anchor(left);
position-try: flip-inline flip-block;
color: inherit; // [popover] gets a `canvastext` color value from useragent.
background: var(--menuColor);
position-try : flip-inline flip-block;
contain : content;
color : inherit; // [popover] gets a `canvastext` color value from useragent.
background : var(--menuColor);
li > .menu-list {
margin: 0 0px;
top : anchor(top);
left : anchor(right);
position-try: flip-inline;
}
top : anchor(top);
left : anchor(right);
margin : 0 0px;
position-try : flip-inline;
}
}
.menu-wrapper:has(:popover-open) > button { // if menu is open...
background-color: var(--activeTriggerColor, hsl(from var(--menuColor) h s calc(l * .85))); // tint menu triggers based on menu color
background-color : var(--activeTriggerColor, hsl(from var(--menuColor) h s calc(l * 0.85))); // tint menu triggers based on menu color
}
.darkMode .menu-wrapper:has(:popover-open) > button { // if menu is open...
--activeTriggerColor : #444; // tint menu triggers based on menu color
--activeTriggerColor : #444444; // tint menu triggers based on menu color
}