- eventually unifying all code editors into a single style spec
- domains: tech.io codingame.com leetcode.com coderpad.io stackblitz.com neetcode.io github.com replit.com, etc.
/* fixes offset cursor in editor */
.monaco-editor .view-lines .view-line, .cm-line {
/* for iosevka: editor font size * 1.10138462 */
font-size: 110.138462% !important;
font-family: Iosevka !important;
font-feature-settings: "liga" 0;
}
code, pre, .tio-markdown_code, [id^="file"], .file-info, .CodeMirror-linenumber, #copilot-button-positioner, .cm-gutterElement {
font-family: Iosevka !important;
font-feature-settings: "liga" 0;
}
/* remove horrendous dots in coderpad */
.monaco-editor .mtkw {
color: #0000 !important
}
/* cursor */
.cursor.monaco-mouse-cursor-text,
.cm-cursor.cm-cursor-primary
{
background-color: #e9b6c5bf !important;
border-color: #e9b6c5bf !important;
}
/* colors */
:root {
--comment-green: #6a9955;
--comment-steel-blue: rgb(97, 124, 149) !important;
--keyword-pink: #c586c0;
--keyword-lilac: rgb(177, 135, 232);
}
/* matching bracket colors */
.view-line .mtk3 {
color: var(--comment-steel-blue);
}
.bracket-highlighting-0, .bracket-highlighting-3, .bracket-highlighting-6, .bracket-highlighting-9, .bracket-highlighting-12, .bracket-highlighting-15, .bracket-highlighting-18 {
color: #ffd700a6 !important
}
.view-line .mtk13, .mtk9.bracket-highlighting-1, .bracket-highlighting-4, .bracket-highlighting-7, .bracket-highlighting-10, .bracket-highlighting-13, .bracket-highlighting-16, .bracket-highlighting-19 {
color: var(--keyword-pink) !important;
}
.bracket-highlighting-2, .bracket-highlighting-5, .bracket-highlighting-8, .bracket-highlighting-11, .bracket-highlighting-14, .bracket-highlighting-17, .bracket-highlighting-20 {
color: cornflowerblue !important;
}
/* colors */
div.CodeMirror span.CodeMirror-matchingbracket {
color: rgb(115, 176, 112);
}
.cm-s-textmate span.cm-property {
color: rgba(219, 210, 198, .89);
}
.cm-s-textmate span.cm-def {
color: rgb(122, 158, 208);
}
.cm-s-textmate span.cm-keyword {
color: #b187e8;
}
.cm-s-textmate span.cm-variable-2 {
color: rgb(140, 190, 198);
}
.cm-s-textmate span.cm-comment {
color: rgb(97, 124, 149);
}
.cm-s-textmate span.cm-operator {
color: rgb(86, 166, 114);
}
.cm-s-textmate span.cm-number {
color: rgb(90, 185, 196);
}- custom monospace font settings
- for Iosevka, the difference in typographic set width is 1.10138462
- for any other typeface, you need to divide the set widths to figure out the correct scaling up/down to match the editor cursor position
.view-line {
/* softer colors */
filter: brightness(.9) contrast(.7) sepia(.2);
}
/* remove middots */
.monaco-editor .mtkw {
color: #0000 !important
}- filter syntax highlighting into soft pastels for dark mode
pre [class^="hljs-"] {
filter: brightness(1.77) contrast(.6);
}- use custom monospace font
:root {
--fontStack-monospace: Iosevka, Sarasa Mono J, monospace;
}
pre { font-family: var(--fontStack-monospace) !important; }- to be used alongside DarkReader extension
/* inverse images */
#qd-content img, #explore-app img {
mix-blend-mode: plus-darker;
}
#qd-content img {
filter: invert(.85) hue-rotate(170deg);
}
#explore-app img {
filter: invert(.894) hue-rotate(177deg);
opacity: .67;
}
/* custom code fonts and syntax highlighting */
.view-lines.monaco-mouse-cursor-text, [style*=Consolas],
.monaco-editor, .monaco-editor.no-user-select .lines-content, .monaco-editor.no-user-select .view-line, .monaco-editor.no-user-select .view-lines {
font-family: "Iosevka", -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", system-ui, "Ubuntu", "Droid Sans", sans-serif;
--monaco-monospace-font: "Iosevka", "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
}
pre,
code,
.CodeMirror, kbd, samp, .cursors-layer, .cursor, .cursor.monaco-mouse-cursor-text, .CodeMirror pre
{
font-family: monospace, Iosevka, "Sarasa Mono J" !important;
}
/* fixes offset cursor in editor */
.view-line {
/* editor font size * 1.10138462 */
/* font-size: 14.318px; if editor font consolas is 13 */
font-size: 13.2166154px; /* if editor font consolas is 12 */
}
/* old colors css classes */
div.CodeMirror span.CodeMirror-matchingbracket {
color: rgb(115, 176, 112);
}
.cm-s-textmate span.cm-property {
color: rgba(219, 210, 198, .89);
}
.cm-s-textmate span.cm-def {
color: rgb(122, 158, 208);
}
.cm-s-textmate span.cm-keyword {
color: rgb(177, 135, 232);
}
.cm-s-textmate span.cm-variable-2 {
color: rgb(140, 190, 198);
}
.cm-s-textmate span.cm-comment {
color: rgb(97, 124, 149);
}
.cm-s-textmate span.cm-operator {
color: rgb(86, 166, 114);
}
.cm-s-textmate span.cm-number {
color: rgb(90, 185, 196);
}[data-purpose^="captions-cue-text"] {
background: none;
color: #fffc;
text-shadow: 1pt 1pt 2pt black, 0 0 1pt black;
} yt-formatted-string, .ShortsLockupViewModelHostOutsideMetadataTitle,
ytd-video-meta-block:not([rich-meta]) #byline-container.ytd-video-meta-block {
text-overflow: ellipsis " [.]";
overflow: visible !important;
-webkit-line-clamp: 6;
max-height: 12em;
max-width: 200%;
}put focus on youtube video player by dimming (lower opacity) for the rest of the page
- when hovered over, the elements transition back into a more opaque setting
- when hovered away, the elements dim
- make the video player container sticky to the top of the page on scroll
#masthead-container: top nav bar containing menu, logo, search, etc.#columns: the content that comes after the video player and its container#full-bleed-container: video player container.app--row--E-WFM.app--body-container--RJZF2: udemy video support- video controls:
.ytp-timed-markers-container: the video scrubber bar (usually red).ytp-chrome-controls: the white video control buttons
tp-yt-paper-dialog: Save video to... modal
:root {
--global-brightness: .86;
--dimness: .3;
}
#masthead-container, #columns, .ytp-chrome-controls, .ytp-timed-markers-container {
opacity: var(--dimness);
transition: opacity .2s ease-in-out;
z-index: 0 !important;
}
#masthead-container:hover, #columns:hover, .ytp-chrome-controls:hover, .ytp-timed-markers-container:hover {
opacity: calc(var(--global-brightness) * var(--global-brightness));
}
#full-bleed-container, .app--row--E-WFM.app--body-container--RJZF2 {
position: sticky !important;
top: 0;
z-index: 999;
background: #0000 !important;
}
.video-stream.html5-main-video, video {
top: 0 !important;
filter: brightness(var(--global-brightness));
}
tp-yt-paper-dialog, tp-yt-iron-dropdown, .video-stream.html5-main-video, video {
z-index: 9999 !important
}style the red youtube scrubber to a rainbow nyan cat
/* rainbow trail */
.html5-play-progress, .ytp-play-progress, .PlayerControlsProgressBarHostProgressBarPlayed,
.YtProgressBarLineProgressBarPlayed {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAIAAAAs6UAAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUNCQzIyREQ0QjdEMTFFMzlEMDM4Qzc3MEY0NzdGMDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUNCQzIyREU0QjdEMTFFMzlEMDM4Qzc3MEY0NzdGMDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQ0JDMjJEQjRCN0QxMUUzOUQwMzhDNzcwRjQ3N0YwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQ0JDMjJEQzRCN0QxMUUzOUQwMzhDNzcwRjQ3N0YwOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PovDFgYAAAAmSURBVHjaYvjPwMAAxjMZmBhA9H8INv4P4TPM/A+m04zBNECAAQBCWQv9SUQpVgAAAABJRU5ErkJggg==") repeat-x !important;
opacity: 0.82;
z-index: 50 !important;
background: linear-gradient(to bottom, #FF0000 0%, #FF0000 16.5%, #FF9900 16.5%, #FF9900 33%, #FFFF00 33%, #FFFF00 50%, #33FF00 50%, #33FF00 66%, #0099FF 66%, #0099FF 83.5%, #6633ff 83.5%, #6633ff 100%) !important;
background: -webkit-linear-gradient(top, #FF0000 0%, #FF0000 16.5%, #FF9900 16.5%, #FF9900 33%, #FFFF00 33%, #FFFF00 50%, #33FF00 50%, #33FF00 66%, #0099FF 66%, #0099FF 83.5%, #6633ff 83.5%, #6633ff 100%) !important;
background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 16.5%, #FF9900 16.5%, #FF9900 33%, #FFFF00 33%, #FFFF00 50%, #33FF00 50%, #33FF00 66%, #0099FF 66%, #0099FF 83.5%, #6633ff 83.5%, #6633ff 100%) !important;
}
.PlayerControlsProgressBarHostProgressBarPlayed,
.YtProgressBarLineProgressBarPlayed {
opacity: .5;
z-index: -120;
position: absolute;
}
.html5-load-progress, .ytp-load-progress {
background-color: #0C4177 !important;
background-attachment: fixed;
object-fit: none;
}
/* nyan cat */
.html5-scrubber-button, .ytp-scrubber-button, .PlayerControlsProgressBarHostProgressBarPlayheadDot, .PlayerControlsProgressBarHostProgressBarPlayheadDotIsHovering,
.YtProgressBarPlayheadProgressBarPlayheadDot {
background: url("data:image/gif;base64,R0lGODlhIgAVAKIHAL3/9/+Zmf8zmf/MmZmZmf+Z/wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDMkJBNjY5RTU1NEJFMzExOUM4QUM2MDAwNDQzRERBQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCREIzOEIzMzRCN0IxMUUzODhEQjgwOTYzMTgyNTE0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCREIzOEIzMjRCN0IxMUUzODhEQjgwOTYzMTgyNTE0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM1QkE2NjlFNTU0QkUzMTE5QzhBQzYwMDA0NDNEREFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMyQkE2NjlFNTU0QkUzMTE5QzhBQzYwMDA0NDNEREFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8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") !important;
width: 34px !important;
height: 21px !important;
border: none !important;
margin-left: -18px !important;
margin-top: 0px !important;
transform: scale(0.8);
z-index: 155 !important;
}
/* shorts scrubber */
.PlayerControlsProgressBarHostProgressBarPlayheadDot,
.YtProgressBarPlayheadProgressBarPlayheadDot {
transform: scale(0.6);
transition: transform .2s ease-in-out;
position: absolute;
z-index: 300;
top: -10px;
left: 14px;
left: 9px;
}
/* preview scrubber */
.YtProgressBarPlayheadProgressBarPlayheadDot {
left: 15px;
}
.PlayerControlsProgressBarHostProgressBarPlayheadDotIsHovering {
transform: scale(0.8);
}
.ytp-progress-bar-container:hover .ytp-scrubber-button,
.ytp-progress-bar-container:hover .ytp-load-progress{
/* image-rendering: pixelated; */
}
.html5-progress-bar-container, .ytp-progress-bar-container {
height: 12px !important;
}
.html5-progress-bar, .ytp-progress-bar {
margin-top: 12px !important;
}
/* sparkles */
.html5-progress-list, .ytp-progress-list, .video-ads .html5-progress-list.html5-ad-progress-list, .video-ads .ytp-progress-list.ytp-ad-progress-list {
height: 12px !important;
/* background: url("data:image/gif;base64,R0lGODlhMAAMAIAAAP///////yH/C05FVFNDQVBFMi4wAwEAAAAh/hFDcmVhdGVkIHdpdGggR0lNUAAh+QQJCgABACwAAAAAMAAMAAACJYyPqcvtD6MCstpLr2459A2GYvJ544mhXQmxoesAlIyCcB3dRgEAIfkECQoAAQAsAQACAC0ACgAAAiGMj6nLDG0enNQdWbPefOHYhSLydVhJoSYHPO04qrAmJwUAIfkECQoAAQAsBQABACkACwAAAiGMj6nLwA9jcC5ViW3evHt1GaE0flxpphn6ANTEqvI8dQUAIfkECQoAAQAsAQABACoACwAAAiGMj6nLwA+jcU5VidPNvPtvad0GfmSJeicEUEGbxnK0RgUAIfkECQoAAQAsAAAAACcADAAAAiCMj6mbwA+ji5QCd6t+c/v2hZzYiVpXmuoKIikLm6hXAAAh+QQJCgABACwAAAAALQAMAAACI4yPqRvAD6NysloDXL480g4uX0iW1Wg21oem7ismLUy/LFwAACH5BAkKAAEALAkAAAAkAAwAAAIgjI8ZoO0Po0yAWTaz3g/z7UXhMX7kYmplmo0rC8cyUgAAIfkECQoAAQAsBQAAACUACgAAAh2Mjxmg7Q+jbIBZNrPeEXPudU74IVa5kSiYqOtRAAAh+QQJCgABACwEAAAAIgAKAAACHIyPAbfpD6OcqTGKs4bWRp+B36YBi0mGaVmtWQEAIfkECQoAAQAsAAABACMACgAAAh2MjwG36Q+jnK8xirOW1kavgd+2AYtJhmnpiGtUAAAh+QQJCgABACwAAAAALgALAAACIYyPqcvtD+MCicqLn82c7e6BIgZQ5jem6oVKbfdqQbzKBQAh+QQJCgABACwCAAIALAAJAAACHUR+hsvtD2OStDplKc68L2CEm0eW5uSN6aqe1lgAADs=") repeat-x !important;
z-index: 32; */
}
.ytp-progress-bar-padding
{ background-image: url("data:image/gif;base64,R0lGODlhMAAMAIAAAP///////yH/C05FVFNDQVBFMi4wAwEAAAAh/hFDcmVhdGVkIHdpdGggR0lNUAAh+QQJCgABACwAAAAAMAAMAAACJYyPqcvtD6MCstpLr2459A2GYvJ544mhXQmxoesAlIyCcB3dRgEAIfkECQoAAQAsAQACAC0ACgAAAiGMj6nLDG0enNQdWbPefOHYhSLydVhJoSYHPO04qrAmJwUAIfkECQoAAQAsBQABACkACwAAAiGMj6nLwA9jcC5ViW3evHt1GaE0flxpphn6ANTEqvI8dQUAIfkECQoAAQAsAQABACoACwAAAiGMj6nLwA+jcU5VidPNvPtvad0GfmSJeicEUEGbxnK0RgUAIfkECQoAAQAsAAAAACcADAAAAiCMj6mbwA+ji5QCd6t+c/v2hZzYiVpXmuoKIikLm6hXAAAh+QQJCgABACwAAAAALQAMAAACI4yPqRvAD6NysloDXL480g4uX0iW1Wg21oem7ismLUy/LFwAACH5BAkKAAEALAkAAAAkAAwAAAIgjI8ZoO0Po0yAWTaz3g/z7UXhMX7kYmplmo0rC8cyUgAAIfkECQoAAQAsBQAAACUACgAAAh2Mjxmg7Q+jbIBZNrPeEXPudU74IVa5kSiYqOtRAAAh+QQJCgABACwEAAAAIgAKAAACHIyPAbfpD6OcqTGKs4bWRp+B36YBi0mGaVmtWQEAIfkECQoAAQAsAAABACMACgAAAh2MjwG36Q+jnK8xirOW1kavgd+2AYtJhmnpiGtUAAAh+QQJCgABACwAAAAALgALAAACIYyPqcvtD+MCicqLn82c7e6BIgZQ5jem6oVKbfdqQbzKBQAh+QQJCgABACwCAAIALAAJAAACHUR+hsvtD2OStDplKc68L2CEm0eW5uSN6aqe1lgAADs=") !important;
background-position: center !important;
background-repeat: repeat-x;
background-blend-mode: multiply !important;
z-index: 40 !important;
opacity: .66;
height: 16px !important;
bottom: -1.5px !important;}
.ytp-progress-bar-container:hover:not([aria-disabled=true]) .ytp-progress-bar-padding
{
height: 16px !important;
bottom: -1.5px !important;
opacity: .9;
}
.ytp-volume-slider-track {
background: #0C4177 !important;
opacity: 0.75;
}
.ytp-hover-progress-light, .PlayerControlsProgressBarHostProgressBarHovered {
background: rgba(100,150,255,.33);
}
ytd-expander[should-use-number-of-lines][collapsed]>#content.ytd-expander, yt-formatted-string, #video-title.ytd-rich-grid-slim-media, #video-title.style-scope.ytd-rich-grid-media, #video-title, #video-title.ytd-compact-video-renderer {
color: var(--yt-spec-text-primary);
display: -webkit-box;
overflow: hidden;
max-height: none;
-webkit-box-orient: vertical;
-webkit-line-clamp: inherit;
}
yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected], yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected] {
background-color: inherit;
color: inherit;
}video, [id="vp-preview"] {
opacity: .82;
filter: invert(.894) hue-rotate(177deg) sepia(.33);
}
.vp-captions-line {
opacity: .8;
color: cornflowerblue;
text-shadow: 1pt 1pt 1pt black;
}
[class^="ControlBar_module_controlBarWrapper"] {
opacity: .6;
z-index: 12;
}- sidebar is hidden in the right side
- slide it out when hovering on the right edge of the viewport
body { overflow-x: hidden }
/* [data-adclicklocation="media"] */
[data-before-content="advertisement"]
,.side
{
/* position: absolute would allow scrolling up/down the side element but also annoying sideways scroll */
position: fixed; right: -295px; z-index: 1002;
padding: 0 .3rem; box-shadow: -.03rem .03rem .3rem #0a01178c; opacity: 0;
transition: right .26s ease-in-out, opacity .36s ease-in-out;
transition-delay: .001s, -.27s;
transition-property: right, opacity;
}
[data-before-content="advertisement"]:hover
, .side:hover {
right: 0; opacity: .97; position: absolute;
}
.content[role="main"] {
margin-right: .3rem;
}