2017-11-23 06:47:58 +00:00
|
|
|
:root {
|
|
|
|
|
--header-narrow-min-height: 12em;
|
2020-11-08 08:12:42 +00:00
|
|
|
--fixed-padding: unset;
|
2017-11-23 06:47:58 +00:00
|
|
|
}
|
|
|
|
|
|
2017-07-12 18:52:44 +00:00
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font: 12px arial,sans-serif;
|
|
|
|
|
}
|
2017-08-31 21:52:38 +00:00
|
|
|
|
|
|
|
|
#global-progress {
|
|
|
|
|
position: fixed;
|
|
|
|
|
height: 4px;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
background-color: hsla(180, 66%, 36%, .25);
|
|
|
|
|
border-left: 0 solid darkcyan;
|
|
|
|
|
z-index: 2147483647;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transition: opacity 2s;
|
2020-11-08 08:12:42 +00:00
|
|
|
contain: strict;
|
2017-08-31 21:52:38 +00:00
|
|
|
}
|
|
|
|
|
#global-progress[title] {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
2017-11-23 06:47:58 +00:00
|
|
|
.hidden {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-23 20:22:41 +00:00
|
|
|
|
|
|
|
|
/************ embedded popup for simple-window editor ************/
|
|
|
|
|
#popup-iframe {
|
|
|
|
|
max-height: 600px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 1001;
|
|
|
|
|
border: none;
|
|
|
|
|
background: #fff;
|
|
|
|
|
box-shadow: 0 0 30px #000;
|
|
|
|
|
}
|
|
|
|
|
#popup-iframe:not([data-loaded]) {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
#popup-button {
|
|
|
|
|
position: fixed;
|
|
|
|
|
right: 7px;
|
|
|
|
|
top: 11px;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: filter .25s;
|
|
|
|
|
}
|
|
|
|
|
#popup-button:hover {
|
|
|
|
|
filter: drop-shadow(0 0 3px hsl(180, 70%, 50%));
|
|
|
|
|
}
|
2020-11-24 09:54:39 +00:00
|
|
|
.usercss body:not(.compact-layout) #popup-button {
|
2020-11-23 20:22:41 +00:00
|
|
|
right: 24px;
|
|
|
|
|
}
|
2017-12-03 23:40:22 +00:00
|
|
|
/************ checkbox & select************/
|
2018-07-16 16:37:01 +00:00
|
|
|
.options-column > div[class="option"] {
|
2017-12-03 23:40:22 +00:00
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-16 16:37:01 +00:00
|
|
|
.options-column > .usercss-only {
|
|
|
|
|
margin-bottom: .75rem;
|
2017-12-13 03:09:51 +00:00
|
|
|
}
|
|
|
|
|
|
2017-12-03 23:40:22 +00:00
|
|
|
label {
|
|
|
|
|
padding-left: 16px;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-12 18:52:44 +00:00
|
|
|
/************ header ************/
|
|
|
|
|
#header {
|
|
|
|
|
width: 280px;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
2018-07-16 16:37:01 +00:00
|
|
|
padding: 1rem;
|
2017-07-12 18:52:44 +00:00
|
|
|
border-right: 1px dashed #AAA;
|
2017-11-23 06:47:58 +00:00
|
|
|
box-shadow: 0 0 3rem -1.2rem black;
|
2017-07-12 18:52:44 +00:00
|
|
|
box-sizing: border-box;
|
2017-11-23 06:47:58 +00:00
|
|
|
z-index: 10;
|
2017-11-27 14:02:23 +00:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
#header h1 {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
#sections {
|
|
|
|
|
padding-left: 280px;
|
2020-03-03 16:13:21 +00:00
|
|
|
min-height: 0;
|
2020-10-11 14:13:25 +00:00
|
|
|
height: 100%;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
#sections h2 {
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
margin-left: 1.7rem;
|
|
|
|
|
}
|
|
|
|
|
.aligned {
|
2017-12-04 16:14:04 +00:00
|
|
|
display: table-row;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2017-12-04 16:14:04 +00:00
|
|
|
.aligned > *:not(.svg-inline-wrapper) {
|
|
|
|
|
display: table-cell;
|
|
|
|
|
margin-top: 0.1rem;
|
|
|
|
|
min-height: 1.4rem;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2017-12-03 23:40:22 +00:00
|
|
|
|
2017-07-12 18:52:44 +00:00
|
|
|
/* basic info */
|
|
|
|
|
#basic-info {
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
#name {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
#basic-info-name {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
2020-10-11 15:12:06 +00:00
|
|
|
#reset-name {
|
|
|
|
|
margin: 0 .25em 0 .5em;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#url {
|
|
|
|
|
margin-left: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
#url:not([href^="http"]) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2018-01-10 18:56:14 +00:00
|
|
|
|
|
|
|
|
#basic-info-enabled {
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
line-height: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#basic-info-enabled > * {
|
|
|
|
|
margin-right: 1em;
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#basic-info-enabled > :last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#basic-info-enabled input,
|
|
|
|
|
#basic-info-enabled svg {
|
|
|
|
|
margin: auto 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#basic-info-enabled svg {
|
|
|
|
|
left: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#preview-errors {
|
|
|
|
|
background-color: red;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 0 6px;
|
|
|
|
|
border-radius: 9px;
|
|
|
|
|
margin-left: -.5em;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
2017-07-12 18:52:44 +00:00
|
|
|
.svg-icon {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
transition: fill .5s;
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
2017-12-12 18:33:41 +00:00
|
|
|
}
|
|
|
|
|
.svg-inline-wrapper {
|
|
|
|
|
margin-left: .2rem;
|
|
|
|
|
display: inline-block;
|
2017-12-13 03:09:51 +00:00
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
#colorpicker-settings.svg-inline-wrapper {
|
|
|
|
|
margin: -2px 0 0 .1rem;
|
|
|
|
|
}
|
|
|
|
|
.svg-inline-wrapper.applies-to-help {
|
2018-07-16 16:37:01 +00:00
|
|
|
margin: 0 0 0 .25rem;
|
2017-12-12 18:33:41 +00:00
|
|
|
}
|
|
|
|
|
.aligned .svg-inline-wrapper {
|
2017-12-13 03:09:51 +00:00
|
|
|
margin: -2px 0 0 .3rem;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2017-12-13 03:09:51 +00:00
|
|
|
#sections-help {
|
|
|
|
|
margin-left: -1px;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2017-11-27 05:16:42 +00:00
|
|
|
.svg-icon.info {
|
2017-07-12 18:52:44 +00:00
|
|
|
width: 14px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
}
|
|
|
|
|
.svg-icon:hover,
|
2017-08-17 19:08:48 +00:00
|
|
|
.svg-icon.info,
|
|
|
|
|
.svg-icon.settings {
|
2017-07-12 18:52:44 +00:00
|
|
|
fill: #666;
|
|
|
|
|
}
|
|
|
|
|
.svg-icon,
|
2017-08-17 19:08:48 +00:00
|
|
|
.svg-icon.info:hover,
|
|
|
|
|
.svg-icon.settings:hover {
|
2017-07-12 18:52:44 +00:00
|
|
|
fill: #000;
|
|
|
|
|
}
|
2017-12-06 22:19:51 +00:00
|
|
|
#options span .svg-icon {
|
|
|
|
|
margin-top: -3px; /* inline info and config icons */
|
|
|
|
|
}
|
2017-11-21 23:20:09 +00:00
|
|
|
input:invalid {
|
|
|
|
|
background-color: rgba(255, 0, 0, 0.1);
|
|
|
|
|
color: darkred;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#enabled {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
2017-11-23 05:10:35 +00:00
|
|
|
/* collapsibles */
|
|
|
|
|
#header summary {
|
2017-09-01 09:46:41 +00:00
|
|
|
align-items: center;
|
|
|
|
|
margin-left: -13px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2017-12-03 23:40:22 +00:00
|
|
|
|
2017-11-23 05:10:35 +00:00
|
|
|
#header summary h2 {
|
2017-09-01 09:46:41 +00:00
|
|
|
display: inline-block;
|
2017-11-29 16:05:47 +00:00
|
|
|
border-bottom: 1px dotted transparent;
|
2017-12-03 23:40:22 +00:00
|
|
|
margin-top: .1em;
|
|
|
|
|
margin-bottom: .1em;
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
margin-left: -13px;
|
|
|
|
|
padding-left: 13px; /* clicking directly on details-marker doesn't set pref so we cover it with h2 */
|
2017-11-23 05:10:35 +00:00
|
|
|
}
|
2017-12-03 23:40:22 +00:00
|
|
|
|
2020-11-08 08:12:42 +00:00
|
|
|
#options-wrapper {
|
|
|
|
|
padding: .5rem 0;
|
|
|
|
|
}
|
2017-12-03 23:40:22 +00:00
|
|
|
#header summary:hover h2 {
|
2017-11-23 05:10:35 +00:00
|
|
|
border-color: #bbb;
|
|
|
|
|
}
|
2017-12-03 23:40:22 +00:00
|
|
|
|
2017-11-23 05:10:35 +00:00
|
|
|
#header summary svg {
|
|
|
|
|
margin-top: -3px;
|
2017-09-01 09:46:41 +00:00
|
|
|
}
|
2017-12-07 02:31:42 +00:00
|
|
|
|
2020-11-08 08:12:42 +00:00
|
|
|
#details-wrapper {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#header details {
|
|
|
|
|
margin-top: .5rem;
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-16 16:37:01 +00:00
|
|
|
#actions > * {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#mozilla-format-buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
2020-11-08 08:12:42 +00:00
|
|
|
align-items: center;
|
2018-07-16 16:37:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#actions > div > a {
|
|
|
|
|
height: min-content;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#actions button,
|
|
|
|
|
#actions > div > a {
|
|
|
|
|
margin: 0 .2rem .5rem 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#actions #cancel-button {
|
|
|
|
|
margin: 0;
|
2017-12-07 02:31:42 +00:00
|
|
|
}
|
|
|
|
|
|
2017-11-23 06:47:58 +00:00
|
|
|
#options:not([open]) + #lint h2 {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
#lint:not([open]) h2 {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
2017-11-23 05:10:35 +00:00
|
|
|
/* options */
|
2017-07-12 18:52:44 +00:00
|
|
|
#options [type="number"] {
|
2017-10-31 09:51:27 +00:00
|
|
|
width: 3.5em;
|
|
|
|
|
text-align: left;
|
|
|
|
|
padding-left: .25em;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2017-12-03 23:40:22 +00:00
|
|
|
#options .option.aligned > label {
|
2017-12-04 16:14:04 +00:00
|
|
|
padding: .1rem .25rem 0 0;
|
|
|
|
|
vertical-align: middle;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2017-10-11 14:23:39 +00:00
|
|
|
/* footer */
|
2017-12-07 02:31:42 +00:00
|
|
|
.usercss #footer {
|
|
|
|
|
display: block;
|
2017-10-11 14:23:39 +00:00
|
|
|
margin-top: 1em;
|
2017-11-23 06:47:58 +00:00
|
|
|
margin-bottom: .5em;
|
2017-10-11 14:23:39 +00:00
|
|
|
}
|
2017-12-01 03:17:24 +00:00
|
|
|
#lint:not([open]) + #footer {
|
|
|
|
|
margin-top: 4em;
|
|
|
|
|
}
|
2019-06-20 19:36:27 +00:00
|
|
|
/************ section editor ***********/
|
2020-04-17 11:36:37 +00:00
|
|
|
.CodeMirror-vscrollbar,
|
|
|
|
|
.CodeMirror-hscrollbar {
|
2020-11-08 08:12:42 +00:00
|
|
|
box-shadow: none !important;
|
2020-04-17 11:36:37 +00:00
|
|
|
pointer-events: auto !important; /* FF bug */
|
|
|
|
|
}
|
2019-06-20 19:36:27 +00:00
|
|
|
.section-editor .section {
|
2018-11-07 06:09:29 +00:00
|
|
|
margin: 0 0.7rem;
|
|
|
|
|
padding: 1rem;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2019-06-20 19:36:27 +00:00
|
|
|
.section-editor .section:not(:first-child) {
|
2018-07-16 16:37:01 +00:00
|
|
|
border-top: 2px solid hsl(0, 0%, 80%);
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2018-07-22 08:59:56 +00:00
|
|
|
.add-section:after {
|
|
|
|
|
content: attr(short-text);
|
|
|
|
|
}
|
|
|
|
|
#sections > div:only-of-type .add-section:after {
|
|
|
|
|
content: attr(long-text);
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#sections > div:only-of-type .remove-section {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
.edit-actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
.edit-actions button {
|
2018-11-07 06:09:29 +00:00
|
|
|
margin-right: .2rem;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
.dirty > label::before {
|
|
|
|
|
content: "*";
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
#sections {
|
|
|
|
|
counter-reset: codebox;
|
|
|
|
|
}
|
2020-12-14 22:52:10 +00:00
|
|
|
#sections > .section:not(.removed) > label {
|
2020-11-08 08:12:42 +00:00
|
|
|
padding: 0 0 4px 0;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-size: 13px;
|
2017-09-01 09:23:49 +00:00
|
|
|
animation: 2s highlight;
|
|
|
|
|
animation-play-state: paused;
|
|
|
|
|
animation-direction: reverse;
|
|
|
|
|
animation-fill-mode: both;
|
|
|
|
|
}
|
2018-07-22 08:59:56 +00:00
|
|
|
#sections > .section > label::after {
|
2017-07-12 18:52:44 +00:00
|
|
|
counter-increment: codebox;
|
2020-11-08 08:12:42 +00:00
|
|
|
content: counter(codebox) ": " attr(data-text);
|
2017-07-12 18:52:44 +00:00
|
|
|
margin-left: 0.25rem;
|
|
|
|
|
}
|
2020-11-08 08:12:42 +00:00
|
|
|
.single-editor .applies-to > label::before {
|
|
|
|
|
content: attr(data-index) ":";
|
|
|
|
|
margin-right: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
.code-label[data-text] {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
#toc {
|
|
|
|
|
counter-reset: codelabel;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: .5rem 0;
|
|
|
|
|
}
|
|
|
|
|
#toc li {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
#toc li.current:not(:only-child) {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
#toc li[tabindex="-1"] {
|
|
|
|
|
opacity: .25;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
#toc li:hover {
|
|
|
|
|
background-color: hsla(180, 50%, 36%, .2);
|
|
|
|
|
}
|
|
|
|
|
#toc li[tabindex="0"]::before {
|
|
|
|
|
counter-increment: codelabel;
|
|
|
|
|
content: counter(codelabel) ": ";
|
|
|
|
|
}
|
2018-07-22 08:59:56 +00:00
|
|
|
.section:only-of-type .move-section-up,
|
|
|
|
|
.section:only-of-type .move-section-down {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2018-11-07 06:09:29 +00:00
|
|
|
.section .CodeMirror {
|
|
|
|
|
margin-bottom: .875rem;
|
2019-06-20 19:36:27 +00:00
|
|
|
box-sizing: border-box;
|
2018-11-07 06:09:29 +00:00
|
|
|
}
|
|
|
|
|
/* deleted section */
|
|
|
|
|
.deleted-section {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
.section .deleted-section {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.section.removed .deleted-section {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.section.removed .code-label,
|
|
|
|
|
.section.removed .applies-to,
|
|
|
|
|
.section.removed .edit-actions,
|
|
|
|
|
.section.removed .CodeMirror {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2018-07-22 08:59:56 +00:00
|
|
|
.move-section-up:after {
|
|
|
|
|
content: "";
|
|
|
|
|
display: block;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-width: 0 .3em .5em .3em;
|
|
|
|
|
border-color: transparent transparent currentColor transparent;
|
|
|
|
|
}
|
|
|
|
|
.move-section-down:after {
|
|
|
|
|
content: "";
|
|
|
|
|
display: block;
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-width: .5em .3em 0 .3em;
|
|
|
|
|
border-color: currentColor transparent transparent transparent;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
/* code */
|
|
|
|
|
.code {
|
|
|
|
|
height: 10rem;
|
|
|
|
|
width: 40rem;
|
|
|
|
|
}
|
2017-09-13 12:28:19 +00:00
|
|
|
.resize-grip-enabled .CodeMirror-scroll {
|
2017-08-09 13:55:07 +00:00
|
|
|
height: auto !important;;
|
|
|
|
|
position: absolute !important;
|
2017-07-12 18:52:44 +00:00
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 6px; /* resize-grip height */
|
|
|
|
|
}
|
2017-09-13 12:28:19 +00:00
|
|
|
.resize-grip-enabled .CodeMirror-vscrollbar {
|
2017-07-12 18:52:44 +00:00
|
|
|
margin-bottom: 7px; /* make space for resize-grip */
|
|
|
|
|
}
|
2017-09-13 12:28:19 +00:00
|
|
|
.resize-grip-enabled .CodeMirror-hscrollbar {
|
2018-07-16 16:37:01 +00:00
|
|
|
bottom: 7px; /* make space for resize-grip */
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2017-09-13 12:28:19 +00:00
|
|
|
.resize-grip-enabled .CodeMirror-scrollbar-filler {
|
2017-07-12 18:52:44 +00:00
|
|
|
bottom: 7px; /* make space for resize-grip */
|
|
|
|
|
}
|
2018-11-28 04:48:45 +00:00
|
|
|
body:not(.find-open) .cm-matchhighlight,
|
|
|
|
|
body:not(.find-open) .CodeMirror-selection-highlight-scrollbar {
|
2017-07-12 18:52:44 +00:00
|
|
|
animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98);
|
|
|
|
|
animation-fill-mode: both;
|
|
|
|
|
}
|
2018-11-28 04:48:45 +00:00
|
|
|
body:not(.find-open) [data-match-highlight-count="1"] .cm-matchhighlight,
|
|
|
|
|
body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-highlight-scrollbar {
|
2018-11-25 13:28:37 +00:00
|
|
|
animation: none;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2020-10-23 16:41:20 +00:00
|
|
|
@keyframes highlight {
|
2017-07-12 18:52:44 +00:00
|
|
|
from {
|
|
|
|
|
background-color: #ff9;
|
|
|
|
|
}
|
|
|
|
|
to {
|
2017-12-17 19:07:15 +00:00
|
|
|
background-color: inherit;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@keyframes fadein {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@keyframes fadein-match-highlighter {
|
|
|
|
|
from { background-color: transparent; }
|
|
|
|
|
to { background-color: rgba(1, 151, 193, 0.1); }
|
|
|
|
|
}
|
|
|
|
|
.resize-grip {
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: block;
|
|
|
|
|
height: 6px;
|
|
|
|
|
content: "";
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
cursor: n-resize;
|
|
|
|
|
background-color: inherit;
|
|
|
|
|
border-top-width: 1px;
|
|
|
|
|
border-top-style: solid;
|
|
|
|
|
border-top-color: inherit;
|
|
|
|
|
}
|
|
|
|
|
.resize-grip:after {
|
|
|
|
|
content: "";
|
|
|
|
|
bottom: 2px;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
margin: 0 8px;
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
border-top-width: 2px;
|
|
|
|
|
border-top-style: dotted;
|
|
|
|
|
border-top-color: inherit;
|
|
|
|
|
}
|
|
|
|
|
/* applies-to */
|
|
|
|
|
.applies-to {
|
|
|
|
|
display: flex;
|
2018-07-16 16:37:01 +00:00
|
|
|
align-items: flex-start;
|
|
|
|
|
min-height: 30px;
|
|
|
|
|
flex-wrap: wrap;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2020-11-08 08:12:42 +00:00
|
|
|
.applies-to.error {
|
|
|
|
|
background-color: #f002;
|
|
|
|
|
border-color: #f008;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
.applies-to label {
|
2018-07-16 16:37:01 +00:00
|
|
|
display: flex;
|
|
|
|
|
padding: 0;
|
|
|
|
|
height: 22px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 0 .2em 0 0;
|
|
|
|
|
white-space: nowrap;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
.applies-to ul {
|
|
|
|
|
flex: auto;
|
2018-07-16 16:37:01 +00:00
|
|
|
flex-grow: 1;
|
2017-07-12 18:52:44 +00:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
.applies-to li {
|
|
|
|
|
display: flex;
|
2018-07-16 16:37:01 +00:00
|
|
|
flex-wrap: wrap;
|
2017-07-12 18:52:44 +00:00
|
|
|
list-style-type: none;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
.applies-to li.applies-to-everything {
|
|
|
|
|
align-items: unset;
|
|
|
|
|
line-height: 22px;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
.applies-to li > input {
|
|
|
|
|
min-height: 1.4rem;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
.applies-to li:not(.applies-to-everything) > * {
|
|
|
|
|
margin: 0 .2rem .5rem 0;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
.applies-to li .add-applies-to:first-child {
|
|
|
|
|
margin-left: 1rem;
|
|
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
.applies-to li .applies-value-wrapper {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
.applies-to li .applies-value {
|
2018-07-16 16:37:01 +00:00
|
|
|
flex-grow: 1;
|
2017-07-12 18:52:44 +00:00
|
|
|
padding-left: 0.2rem;
|
|
|
|
|
}
|
|
|
|
|
.applies-to img {
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
.add-applies-to,
|
|
|
|
|
.remove-applies-to {
|
|
|
|
|
font-size: 0;
|
|
|
|
|
height: 22px;
|
|
|
|
|
width: 22px;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.add-applies-to .svg-icon,
|
|
|
|
|
.remove-applies-to .svg-icon {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
fill: hsl(0, 0%, 60%);
|
|
|
|
|
height: 12px;
|
|
|
|
|
width: 12px;
|
|
|
|
|
}
|
|
|
|
|
.add-applies-to:hover .svg-icon,
|
|
|
|
|
.remove-applies-to:hover .svg-icon {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
fill: hsl(0, 0%, 0%);
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
.test-regexp {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.has-regexp .test-regexp {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
2017-12-13 04:33:16 +00:00
|
|
|
.regexp-report summary {
|
2017-07-12 18:52:44 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.regexp-report mark {
|
|
|
|
|
background-color: rgba(255, 255, 0, .5);
|
|
|
|
|
}
|
|
|
|
|
.regexp-report details {
|
|
|
|
|
margin-left: 1rem;
|
2017-11-16 23:17:21 +00:00
|
|
|
word-break: break-all;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
.regexp-report details:not(:last-child) {
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.regexp-report summary {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-left: -1rem;
|
|
|
|
|
margin-bottom: .5rem;
|
|
|
|
|
cursor: default;
|
2017-10-02 20:18:19 +00:00
|
|
|
overflow-wrap: break-word;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
.regexp-report details[data-type="full"] {
|
|
|
|
|
color: darkgreen;
|
|
|
|
|
}
|
|
|
|
|
.regexp-report details[data-type="partial"] {
|
|
|
|
|
color: darkgray;
|
|
|
|
|
}
|
|
|
|
|
.regexp-report details[data-type="invalid"] {
|
|
|
|
|
color: maroon;
|
|
|
|
|
}
|
|
|
|
|
.regexp-report details details {
|
|
|
|
|
margin-left: 2rem;
|
|
|
|
|
margin-top: .5rem;
|
|
|
|
|
}
|
|
|
|
|
.regexp-report .svg-icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
margin-top: -1px;
|
|
|
|
|
}
|
2017-12-13 04:33:16 +00:00
|
|
|
.regexp-report details a {
|
|
|
|
|
color: inherit;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
display: block;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.regexp-report details a:hover {
|
2017-07-12 18:52:44 +00:00
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
2017-12-13 04:33:16 +00:00
|
|
|
.regexp-report details a img {
|
2017-07-12 18:52:44 +00:00
|
|
|
width: 16px;
|
|
|
|
|
max-height: 16px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
margin-left: -20px;
|
|
|
|
|
margin-top: -1px;
|
|
|
|
|
}
|
2017-12-05 18:55:01 +00:00
|
|
|
.regexp-report-note {
|
|
|
|
|
color: #999;
|
|
|
|
|
position: absolute;
|
|
|
|
|
margin: 0 0.5rem 0 0;
|
|
|
|
|
hyphens: auto;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
/************ help popup ************/
|
|
|
|
|
#help-popup {
|
|
|
|
|
top: 3rem;
|
|
|
|
|
right: 3rem;
|
|
|
|
|
max-width: 50vw;
|
|
|
|
|
position: fixed;
|
|
|
|
|
display: none;
|
|
|
|
|
background-color: white;
|
|
|
|
|
box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
z-index: 99;
|
|
|
|
|
}
|
2017-12-04 16:14:04 +00:00
|
|
|
#help-popup.big,
|
|
|
|
|
#help-popup.wide {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#help-popup.big {
|
2017-10-12 23:50:41 +00:00
|
|
|
box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 0px 100000px !important;
|
2017-11-28 17:04:28 +00:00
|
|
|
left: calc(280px - 3rem);
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
#help-popup.big .CodeMirror {
|
|
|
|
|
min-height: 2rem;
|
|
|
|
|
height: 70vh;
|
|
|
|
|
}
|
|
|
|
|
#help-popup .title {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
background-color: rgba(0,0,0,0.05);
|
|
|
|
|
margin: -0.5rem -0.5rem 0.5rem;
|
|
|
|
|
padding: .5rem 32px .5rem .5rem;
|
|
|
|
|
}
|
|
|
|
|
#help-popup .contents {
|
|
|
|
|
max-height: calc(100vh - 8rem);
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
2017-08-17 19:08:48 +00:00
|
|
|
#help-popup .settings {
|
|
|
|
|
min-width: 500px;
|
|
|
|
|
min-height: 200px;
|
|
|
|
|
max-width: 48vw;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#help-popup .dismiss {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 4px;
|
|
|
|
|
top: .5em;
|
|
|
|
|
}
|
2020-10-13 23:20:46 +00:00
|
|
|
#help-popup input[type="search"],
|
|
|
|
|
#help-popup .CodeMirror {
|
2020-10-13 18:14:54 +00:00
|
|
|
margin: 3px;
|
|
|
|
|
}
|
2020-11-08 08:12:42 +00:00
|
|
|
#help-popup .keymap-list input[type="search"] {
|
|
|
|
|
margin: 0 0 2px;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
.keymap-list {
|
2017-12-17 19:06:30 +00:00
|
|
|
font-size: 12px;
|
2020-11-08 08:12:42 +00:00
|
|
|
padding: 0 3px 0 0;
|
2017-07-12 18:52:44 +00:00
|
|
|
border-spacing: 0;
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
}
|
|
|
|
|
.keymap-list input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.keymap-list tr:nth-child(odd) {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
|
|
|
}
|
|
|
|
|
.keymap-list td:first-child {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
padding-right: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-22 16:55:27 +00:00
|
|
|
#help-popup .buttons {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.non-windows #help-popup .buttons {
|
|
|
|
|
direction: rtl;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#help-popup button[name^="import"] {
|
|
|
|
|
line-height: 1.5rem;
|
|
|
|
|
padding: 0 0.5rem;
|
|
|
|
|
margin: 0.5rem 0 0 0.5rem;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
#help-popup.ready button[name^="import"] {
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
opacity: 1.0;
|
|
|
|
|
}
|
2017-08-13 02:28:44 +00:00
|
|
|
#help-popup .rules {
|
|
|
|
|
padding: 0 15px;
|
|
|
|
|
}
|
2017-08-26 15:03:28 +00:00
|
|
|
#help-popup button {
|
2017-08-17 19:47:45 +00:00
|
|
|
margin-right: 3px;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
|
|
|
|
|
/************ lint ************/
|
2017-11-27 14:02:23 +00:00
|
|
|
#lint {
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
overflow: hidden;
|
|
|
|
|
margin: .5rem -1rem 0;
|
|
|
|
|
min-height: 30px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
2017-11-29 16:24:40 +00:00
|
|
|
#lint > summary {
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
position: relative;
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
padding-left: 4px;
|
2017-11-29 16:24:40 +00:00
|
|
|
}
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
#lint[open]:not(.hidden-unless-compact) {
|
2020-11-08 08:12:42 +00:00
|
|
|
min-height: 102px;
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
}
|
|
|
|
|
#lint summary h2 {
|
2020-11-08 08:12:42 +00:00
|
|
|
text-indent: -2px;
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
}
|
|
|
|
|
#lint > .lint-scroll-container {
|
2020-11-08 08:12:42 +00:00
|
|
|
margin: 34px 10px 0;
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
overflow-x: hidden;
|
2017-11-29 16:24:40 +00:00
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#lint table {
|
|
|
|
|
font-size: 100%;
|
|
|
|
|
border-spacing: 0;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
line-height: 1.0;
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
#lint tr td:last-child {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
#lint td[role="line"] {
|
|
|
|
|
padding-left: 0.25rem;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
#lint table:last-child {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
2018-10-01 14:03:17 +00:00
|
|
|
#lint table.empty {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#lint caption {
|
|
|
|
|
text-align: left;
|
|
|
|
|
font-weight: bold;
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
padding-bottom: 6px;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
#lint tbody {
|
|
|
|
|
font-size: 85%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
#lint tr:hover {
|
2020-11-08 08:12:42 +00:00
|
|
|
background-color: hsla(180, 50%, 36%, .2);
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2020-11-08 17:28:52 +00:00
|
|
|
#lint td {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#lint td[role="severity"] {
|
|
|
|
|
font-size: 0;
|
|
|
|
|
width: 16px;
|
|
|
|
|
}
|
|
|
|
|
#lint td[role="line"], #lint td[role="sep"] {
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
#lint td[role="col"] {
|
|
|
|
|
text-align: left;
|
|
|
|
|
padding-right: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
#lint td[role="message"] {
|
|
|
|
|
text-align: left;
|
2017-11-27 14:02:23 +00:00
|
|
|
white-space: nowrap;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2017-08-25 20:49:20 +00:00
|
|
|
#message-box.center.lint-config #message-box-contents {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
|
|
|
|
|
/************ CSS beautifier ************/
|
|
|
|
|
.beautify-options {
|
|
|
|
|
white-space: nowrap;
|
2017-12-04 16:14:04 +00:00
|
|
|
}
|
|
|
|
|
.beautify-options div {
|
|
|
|
|
float: left;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.beautify-options div[newline="true"] + div {
|
|
|
|
|
clear: left;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
.beautify-options div[newline="true"] + div span[indent] {
|
|
|
|
|
padding-left: 2rem;
|
|
|
|
|
}
|
2017-12-03 23:40:22 +00:00
|
|
|
.beautify-options > label {
|
2017-12-04 16:14:04 +00:00
|
|
|
top: 1em;
|
|
|
|
|
margin: 1ex 0;
|
2017-12-03 23:40:22 +00:00
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
.beautify-options:after {
|
|
|
|
|
clear: both;
|
|
|
|
|
display: block;
|
2017-12-04 16:14:04 +00:00
|
|
|
content: "";
|
2017-07-12 18:52:44 +00:00
|
|
|
height: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.beautify-options span {
|
|
|
|
|
font-weight: bold;
|
2017-12-04 16:14:04 +00:00
|
|
|
font-family: monospace;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
.beautify-options select {
|
|
|
|
|
border: none;
|
2017-12-04 16:14:04 +00:00
|
|
|
background: linear-gradient(90deg, rgba(0, 0, 0, .05) 18px, rgba(0, 0, 0, .02) 24px);
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
padding-left: 4px;
|
|
|
|
|
margin-left: 4px;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2020-06-22 16:14:41 +00:00
|
|
|
.beautify-hint {
|
|
|
|
|
width: 0;
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
font-size: 90%;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
|
2017-09-11 16:09:25 +00:00
|
|
|
/************ single editor **************/
|
2017-11-23 06:47:58 +00:00
|
|
|
.usercss body {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-items: normal;
|
|
|
|
|
}
|
|
|
|
|
|
2020-10-13 18:14:54 +00:00
|
|
|
.usercss .CodeMirror-focused {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
2017-11-26 13:04:03 +00:00
|
|
|
html:not(.usercss) .usercss-only,
|
2020-11-08 08:12:42 +00:00
|
|
|
.usercss .sectioned-only {
|
2017-11-26 13:04:03 +00:00
|
|
|
display: none !important; /* hide during page init */
|
|
|
|
|
}
|
|
|
|
|
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
body:not(.compact-layout) .hidden-unless-compact,
|
|
|
|
|
body.linter-disabled .hidden-unless-compact {
|
|
|
|
|
display: none !important;
|
2018-07-16 16:37:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#options:not([open]) + #lint {
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
margin-top: 0;
|
2018-07-16 16:37:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#options-wrapper .options-column:nth-child(2) {
|
|
|
|
|
margin-top: .75rem;
|
|
|
|
|
}
|
|
|
|
|
|
2020-10-11 14:13:25 +00:00
|
|
|
.single-editor {
|
2019-06-20 19:36:53 +00:00
|
|
|
height: 100%;
|
2017-09-11 16:09:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.single-editor .CodeMirror {
|
2017-11-23 06:47:58 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
border: none;
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#footer a {
|
|
|
|
|
color: #333;
|
|
|
|
|
transition: color .5s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#footer a:hover {
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.usercss.firefox #sections,
|
|
|
|
|
.usercss.firefox .CodeMirror {
|
2017-09-11 16:09:25 +00:00
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2017-09-13 08:58:03 +00:00
|
|
|
/************ line widget *************/
|
|
|
|
|
.CodeMirror-linewidget .applies-to {
|
|
|
|
|
margin: 1em 0;
|
2018-07-16 16:37:01 +00:00
|
|
|
padding: .75rem .75rem .25rem;
|
2017-09-13 08:58:03 +00:00
|
|
|
padding-right: calc(1em + 20px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.CodeMirror-linewidget .applies-to li {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2017-12-05 18:32:28 +00:00
|
|
|
.CodeMirror-linewidget .applies-to li[data-type="regexp"] .test-regexp {
|
|
|
|
|
display: inline;
|
2017-10-08 14:03:27 +00:00
|
|
|
}
|
|
|
|
|
|
2017-12-03 23:40:22 +00:00
|
|
|
.CodeMirror-linewidget li.applies-to-everything {
|
2019-01-17 12:41:23 +00:00
|
|
|
margin-left: 0.2rem;
|
2017-09-13 08:58:03 +00:00
|
|
|
}
|
|
|
|
|
|
2017-07-12 18:52:44 +00:00
|
|
|
/************ reponsive layouts ************/
|
2017-12-07 02:31:42 +00:00
|
|
|
@media(max-width: 850px) {
|
2018-07-16 16:37:01 +00:00
|
|
|
body {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#header {
|
2018-07-16 16:37:01 +00:00
|
|
|
flex: 0 1 auto;
|
|
|
|
|
height: unset;
|
|
|
|
|
width: unset;
|
2017-07-12 18:52:44 +00:00
|
|
|
position: inherit;
|
|
|
|
|
border-right: none;
|
|
|
|
|
border-bottom: 1px dashed #AAA;
|
2018-07-16 16:37:01 +00:00
|
|
|
padding: 0;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
.fixed-header {
|
2020-11-08 08:12:42 +00:00
|
|
|
padding-top: var(--fixed-padding);
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
}
|
|
|
|
|
.fixed-header #header {
|
|
|
|
|
min-height: 40px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
2020-11-08 08:12:42 +00:00
|
|
|
padding: 0;
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
2020-11-08 08:12:42 +00:00
|
|
|
.fixed-header #header > *:not(#details-wrapper),
|
|
|
|
|
.fixed-header #options {
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
display: none !important;
|
|
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
#actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
padding: 0 1rem;
|
|
|
|
|
margin: 0;
|
|
|
|
|
box-sizing: border-box;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
#header input[type="checkbox"] {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
2017-08-27 11:40:23 +00:00
|
|
|
#heading,
|
2017-07-12 18:52:44 +00:00
|
|
|
h2 {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
#basic-info {
|
2018-07-16 16:37:01 +00:00
|
|
|
padding: .5rem 1rem;
|
|
|
|
|
margin: 0;
|
|
|
|
|
box-sizing: border-box;
|
2017-07-12 18:52:44 +00:00
|
|
|
display: flex;
|
2018-07-16 16:37:01 +00:00
|
|
|
flex-wrap: wrap;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
#basic-info > *:first-child {
|
2018-07-16 16:37:01 +00:00
|
|
|
flex-grow: 1;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
|
|
|
|
#basic-info > *:not(:last-child) {
|
|
|
|
|
margin-right: 0.8rem;
|
|
|
|
|
}
|
|
|
|
|
#basic-info #name {
|
2018-07-16 16:37:01 +00:00
|
|
|
flex-grow: 1;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
#options-wrapper {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
2020-11-08 08:12:42 +00:00
|
|
|
padding: .5rem 1rem 0;
|
2018-07-16 16:37:01 +00:00
|
|
|
box-sizing: border-box;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2020-11-08 08:12:42 +00:00
|
|
|
#toc {
|
|
|
|
|
padding: .5rem 1rem;
|
|
|
|
|
}
|
|
|
|
|
#details-wrapper {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
padding-bottom: .25rem;
|
|
|
|
|
}
|
|
|
|
|
#options {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
#sections-list[open] {
|
|
|
|
|
height: 102px;
|
|
|
|
|
}
|
|
|
|
|
#sections-list[open] #toc {
|
|
|
|
|
max-height: 60px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
#sections-list,
|
|
|
|
|
#lint {
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
.options-column {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
padding-right: .5rem;
|
|
|
|
|
box-sizing: border-box;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
#options-wrapper .options-column:nth-child(2) {
|
|
|
|
|
margin-top: 0;
|
2017-12-07 02:31:42 +00:00
|
|
|
}
|
|
|
|
|
#options:not([open]),
|
|
|
|
|
#lint:not([open]) {
|
|
|
|
|
overflow: initial;
|
|
|
|
|
}
|
|
|
|
|
#options:not([open]) + #lint:not([open]) {
|
2018-07-16 16:37:01 +00:00
|
|
|
margin-top: 0;
|
2017-12-07 02:31:42 +00:00
|
|
|
}
|
|
|
|
|
#lint summary {
|
|
|
|
|
position: static;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
2020-11-08 08:12:42 +00:00
|
|
|
#header summary {
|
2018-07-16 16:37:01 +00:00
|
|
|
margin-left: 0;
|
|
|
|
|
padding-left: 4px;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2017-09-03 15:21:13 +00:00
|
|
|
#options h2 {
|
|
|
|
|
margin: 0 0 .5em;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
.option label {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
#options [type="number"] {
|
|
|
|
|
text-align: left; /* workaround the column flow bug in webkit */
|
|
|
|
|
padding-left: 0.2rem;
|
|
|
|
|
}
|
|
|
|
|
#options #tabSize-label {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 0.2rem;
|
|
|
|
|
}
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
#lint > .lint-scroll-container {
|
2020-11-08 08:12:42 +00:00
|
|
|
margin: 26px 1rem 0;
|
2018-07-16 16:37:01 +00:00
|
|
|
}
|
|
|
|
|
#lint {
|
linter and compact layout improvements (#749)
* linter and compact layout improvements
Closes #748
While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable.
This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref.
It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout.
A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus.
If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly.
* linter and compact layout improvements
* linter and compact layout improvements
* No usercss scroll listener and delay header check
* Some code tweaks
2019-08-04 17:09:50 +00:00
|
|
|
padding: 0;
|
2020-11-08 08:12:42 +00:00
|
|
|
margin: .5rem 0 0;
|
2018-07-16 16:37:01 +00:00
|
|
|
}
|
2017-12-07 02:31:42 +00:00
|
|
|
#lint:not([open]) + #footer {
|
|
|
|
|
margin: .25em 0 -1em .25em;
|
|
|
|
|
}
|
2017-07-12 18:52:44 +00:00
|
|
|
#sections {
|
2018-07-16 16:37:01 +00:00
|
|
|
height: unset !important;
|
2017-07-12 18:52:44 +00:00
|
|
|
padding-left: 0;
|
2018-07-16 16:37:01 +00:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
flex: 1;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2020-10-11 14:13:25 +00:00
|
|
|
#sections > :not(.single-editor) {
|
2019-06-20 19:36:27 +00:00
|
|
|
margin: 0 .5rem;
|
|
|
|
|
padding: .5rem 0;
|
2017-07-12 18:52:44 +00:00
|
|
|
}
|
2017-11-23 06:47:58 +00:00
|
|
|
.usercss .CodeMirror-scroll {
|
|
|
|
|
max-height: calc(100vh - var(--header-narrow-min-height));
|
|
|
|
|
}
|
|
|
|
|
.usercss #options:not([open]) ~ #lint.hidden ~ #footer,
|
|
|
|
|
.usercss #lint:not([open]) + #footer {
|
|
|
|
|
margin-top: -.25em;
|
|
|
|
|
}
|
2018-07-16 16:37:01 +00:00
|
|
|
#help-popup.big[style="display: block;"],
|
|
|
|
|
#help-popup[style="display: block;"] {
|
|
|
|
|
width: max-content;
|
|
|
|
|
height: min-content;
|
|
|
|
|
max-width: 90%;
|
|
|
|
|
max-height: 90vh;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
#help-popup[style*="left:"] {
|
|
|
|
|
left: 1rem !important;
|
|
|
|
|
margin-top: -2.35rem;
|
|
|
|
|
}
|
|
|
|
|
#help-popup:not([style*="display: block;"]),
|
|
|
|
|
#help-popup .CodeMirror-lint-markers,
|
|
|
|
|
#help-popup .CodeMirror-guttermarker-subtle {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
#help-popup .CodeMirror-linenumber {
|
|
|
|
|
padding: 0;
|
2017-12-07 02:31:42 +00:00
|
|
|
}
|
2017-12-09 15:25:44 +00:00
|
|
|
}
|
