mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-11-04 22:38:43 +00:00
Merge branch 'master' of https://github.com/naturalcrit/homebrewery into fix-codemirror
This commit is contained in:
Víctor Losada Hernández
@@ -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; }
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
/*
|
||||
This file basically checks support for Anchor Positioning API in the browser,
|
||||
and then loads the Oddbird polyfill if support is lacking.
|
||||
and then loads the Oddbird polyfill if support is lacking.
|
||||
*/
|
||||
|
||||
let polyfillPromise;
|
||||
|
||||
@@ -46,7 +46,7 @@ const settingsCompartment = new Compartment();
|
||||
|
||||
import { generalKeymap, markdownKeymap, cssKeymap, formatCSS } from './extensions/customKeyMaps.js';
|
||||
import foldOnPages from './extensions/customFolding.js';
|
||||
import { customHighlightStyle , customHighlightPlugin } from './extensions/customHighlight.js';
|
||||
import { customHighlightStyle, customHighlightPlugin } from './extensions/customHighlight.js';
|
||||
import { legacyCustomHighlightStyle } from './extensions/legacyCustomHighlight.js';
|
||||
|
||||
const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
|
||||
|
||||
@@ -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) */
|
||||
|
||||
@@ -7,7 +7,7 @@ const Combobox = createReactClass({
|
||||
displayName : 'Combobox',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
id : '',
|
||||
id : '',
|
||||
className : '',
|
||||
trigger : 'hover',
|
||||
default : '',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
/**
|
||||
* A dropdown menu component that uses the Anchor Positioning API to position the elements. It supports nested submenus as well.
|
||||
* Anchor Positioning is now supported in all major browsers. A polyfill is conditionally loaded for older browsers.
|
||||
*
|
||||
*
|
||||
* As-is, the menus will always open down aligned on left to trigger, submenus open to the right initially.
|
||||
* If no space, menus will still open down, but aligned to the right of the trigger. Submenus will flip to the other side of the top menu.
|
||||
* This could be customized either in more specific CSS, or as a `direction` prop on the component (in future iterations).
|
||||
*
|
||||
*
|
||||
* @param {string} props.groupName - Name of the menu. Appears as the trigger text.
|
||||
* @param {string} [props.icon] - Icon to display in the trigger.
|
||||
* @param {string} [props.color] - Color class to add to the trigger.
|
||||
|
||||
@@ -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
|
||||
}
|
||||
Reference in New Issue
Block a user