├── assets
└── preview
│ ├── 4chan-old.png
│ └── github-old.png
├── chrome-devtools
├── ext
│ ├── devtools.html
│ ├── manifest.json
│ ├── README.md
│ └── devtools.js
├── network.styl
├── editor.styl
├── menu.styl
├── console.styl
├── elements.styl
├── unsorted.styl
├── styles.styl
├── settings.styl
├── tabs.styl
└── main.styl
├── vivaldi
├── unsorted.styl
├── main.styl
├── properties.styl
├── minimal-ui.styl
├── window.styl
├── global.styl
└── browser.styl
├── discord-normalise-classes.user.js
├── README.md
├── _global-resize-sidebar.user.js
├── file.user.styl
├── plain-text.user.css
├── _global.user.css
├── boorus.user.styl
├── wikis.user.styl
├── stackexchange.user.styl
├── duckduckgo.user.styl
├── unsplash.user.styl
├── searchfox.user.styl
├── nitter.user.styl
├── mdn.user.styl
├── soundcloud.user.styl
└── stylus.user.styl
/assets/preview/4chan-old.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricewind012/userstyles/HEAD/assets/preview/4chan-old.png
--------------------------------------------------------------------------------
/assets/preview/github-old.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricewind012/userstyles/HEAD/assets/preview/github-old.png
--------------------------------------------------------------------------------
/chrome-devtools/ext/devtools.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/chrome-devtools/network.styl:
--------------------------------------------------------------------------------
1 | #network-container {
2 | brd(0);
3 | }
4 | .network-summary-bar {
5 | pad(left);
6 | flex: 0 0 var(--header-h) $i;
7 | }
8 |
--------------------------------------------------------------------------------
/chrome-devtools/ext/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "DevTools custom CSS",
3 | "version": "1.0.0",
4 | "description": "Custom CSS for Chrome DevTools.",
5 | "devtools_page": "devtools.html",
6 | "manifest_version": 3
7 | }
8 |
--------------------------------------------------------------------------------
/chrome-devtools/ext/README.md:
--------------------------------------------------------------------------------
1 | # Usage
2 | 1. Visit DevTools settings > Experiments > Allow extensions to load custom stylesheets
3 | 2. Go to chrome://extensions and check "Developer mode"
4 | 3. Click on "Load unpacked" and choose this folder
5 | 4. Put the contents in custom.css
6 |
--------------------------------------------------------------------------------
/vivaldi/unsorted.styl:
--------------------------------------------------------------------------------
1 | #browser, #browser + div, #browser + div + div {
2 | font-size: medium;
3 | }
4 | .close {
5 | cursor: pointer;
6 | }
7 | .topmenu {
8 | mar(bottom, 0);
9 | }
10 | .manager > .toolbar + .toolbar {
11 | padding-top: 6px;
12 | }
13 | #downloads .download-editor {
14 | pad(0);
15 | }
16 |
--------------------------------------------------------------------------------
/chrome-devtools/ext/devtools.js:
--------------------------------------------------------------------------------
1 | var xhr = new XMLHttpRequest
2 |
3 | xhr.open('GET', './custom.css', true)
4 | xhr.onload = () => {
5 | if (xhr.readyState === 4) {
6 | if (xhr.status === 200)
7 | chrome.devtools.panels.applyStyleSheet(xhr.responseText)
8 | else
9 | console.error(xhr.statusText)
10 | }
11 | }
12 | xhr.send()
13 |
--------------------------------------------------------------------------------
/chrome-devtools/editor.styl:
--------------------------------------------------------------------------------
1 | .cm-content {
2 | tab-size: var(--tab-size) $i;
3 | }
4 | .CodeMirror {
5 | &-matchingbracket {
6 | hl();
7 | brd(bottom, 0);
8 | }
9 |
10 | .equal > span > span {
11 | opacity: 1;
12 | }
13 | }
14 |
15 | #sources-panel-sources-view .sources-toolbar {
16 | bg(2);
17 | brd(top);
18 | flex: 0 0 var(--header-h) $i;
19 | }
20 |
--------------------------------------------------------------------------------
/vivaldi/main.styl:
--------------------------------------------------------------------------------
1 | horizontal-menu-oneline = false;
2 | $focus-class = 'hasfocus';
3 | $tabs-left-width = 32px;
4 |
5 | #browser {
6 | // Openbox limitation(s)(?)
7 | --window-button-size: 16px;
8 | --window-button-icon: var(--icon-size);
9 | }
10 |
11 | @import 'common';
12 |
13 | @import 'global';
14 | @import 'browser';
15 | @import 'window';
16 | @import 'minimal-ui';
17 | @import 'properties';
18 | @import 'unsorted';
19 |
--------------------------------------------------------------------------------
/chrome-devtools/menu.styl:
--------------------------------------------------------------------------------
1 | .soft-context-menu {
2 | pad(0);
3 | brd();
4 | height: max-content $i;
5 |
6 | &-item {
7 | pad();
8 |
9 | &-mouse-over [is=ui-icon].icon-mask {
10 | --override-icon-mask-background-color: var(--hl-fg) $i;
11 | }
12 |
13 | .checkmark {
14 | display: none $i;
15 | }
16 | }
17 |
18 | &-separator {
19 | height: unset $i;
20 | mar(0);
21 |
22 | & > div {
23 | brd(bottom);
24 | height: unset $i;
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/chrome-devtools/console.styl:
--------------------------------------------------------------------------------
1 | .console-message-wrapper {
2 | --override-message-border-color: var(--border);
3 | --override-warning-border-color: var(--color11);
4 | --override-error-border-color: var(--color9);
5 | --override-warning-background-color: color-a(11);
6 | --override-error-background-color: color-a(9);
7 |
8 | &:focus {
9 | --override-focused-message-border-color: var(--hl) $i;
10 | --override-focused-message-background-color: var(--hl) $i;
11 | --override-error-text-color: var(--hl-fg) $i;
12 | --override-warning-text-color: var(--hl-fg) $i;
13 |
14 | * {
15 | color: var(--hl-fg) $i;
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/chrome-devtools/elements.styl:
--------------------------------------------------------------------------------
1 | .elements-disclosure {
2 | // Remove context menu button on elements
3 | .gutter-container {
4 | display: none $i;
5 | }
6 | li {
7 | padding-left: 2px $i;
8 | }
9 |
10 | // No border radius on element hover
11 | li {
12 | padding-left: 4px $i;
13 |
14 | &.hovered:not(.selected) .selection {
15 | left: 0 $i;
16 | right: 0 $i;
17 | border-radius: 0 $i;
18 | }
19 | }
20 |
21 | // Highlight selected
22 | li.selected {
23 | &::before {
24 | background-color: var(--hl-fg) $i;
25 | }
26 | .highlight * {
27 | color: var(--hl-fg) $i;
28 | }
29 | }
30 |
31 | // More compact view
32 | li {
33 | lnh();
34 | pad(top, 0);
35 | }
36 | }
37 |
38 | @keyframes dom-update {
39 | 0% {
40 | hl();
41 | }
42 | }
43 | .dom-update-highlight {
44 | animation: 1s cubic-bezier(0, 0, 0.2, 1) dom-update $i;
45 | }
46 |
--------------------------------------------------------------------------------
/chrome-devtools/unsorted.styl:
--------------------------------------------------------------------------------
1 | // Suggest box
2 | .suggest-box {
3 | box-shadow:
4 | var(--shadow-ins) var(--border),
5 | var(--drop-shadow) $i;
6 |
7 | &-content-item {
8 | //padding: 1px 0 1px 1px
9 | //border: 1px solid transparent
10 |
11 | .query {
12 | //bold font
13 | }
14 | }
15 | }
16 |
17 | // Icons
18 | .tree-outline li.selected .icon {
19 | background-color: var(--hl-fg) $i;
20 | }
21 |
22 | // Toolbar
23 | .search-bar {
24 | bg(2);
25 | }
26 | .toolbar-shadow { // ?
27 | height: var(--header-h) $i;
28 | }
29 | .toolbar {
30 | .panel.network & {
31 | bg();
32 | brd(bottom);
33 | }
34 |
35 | &-search {
36 | margin: calc(var(--pad) / 2) $i;
37 |
38 | &-control {
39 | bg(2);
40 | brd(0);
41 | mar(0);
42 | height: unset $i;
43 | }
44 |
45 | &-navigation {
46 | background-position: center $i;
47 | height: 100% $i;
48 | }
49 |
50 | .search-replace, button {
51 | bg();
52 | }
53 |
54 | & > .replace-toggle-toolbar {
55 | mar(0);
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/vivaldi/properties.styl:
--------------------------------------------------------------------------------
1 | // Remove elements
2 | .selectbox[title="Right"], // tabs
3 | .settings-navigation-header,
4 | .settings-sidebar ::-webkit-scrollbar {
5 | display: none;
6 | }
7 |
8 | // Sidebar
9 | .settings-sidebar {
10 | margin-top: -1px;
11 | }
12 | .button-category:not(.category-selected) {
13 | fill: var(--colorFgFadedMore) i;
14 | color: var(--colorFgFadedMore);
15 |
16 | &:hover {
17 | fill: var(--colorFg) i;
18 | color: var(--colorFg);
19 | }
20 | }
21 |
22 | // Tabs
23 | .TabbedView-List {
24 | gap: 0;
25 | pad(0);
26 | brd(bottom, 0);
27 | margin-left: -1px;
28 | box-shadow: inset 0 -1px var(--colorBorder);
29 |
30 | button {
31 | background-color: transparent;
32 | color: var(--colorFgFadedMore);
33 | shd(0);
34 |
35 | &:not(.active):hover {
36 | background-color: transparent;
37 | color: var(--colorFg);
38 | }
39 |
40 | &.active {
41 | background-color: var(--colorBgLightIntense);
42 | border-left: 1px solid var(--colorBorder);
43 | border-right: 1px solid var(--colorBorder);
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/chrome-devtools/styles.styl:
--------------------------------------------------------------------------------
1 | .styles {
2 | &-section {
3 | & > div {
4 | pad();
5 | }
6 |
7 | .style-properties {
8 | pad(0);
9 | margin: 3px 0 $i;
10 | }
11 | }
12 |
13 | &-name-value-separator {
14 | width: 2ch $i;
15 | }
16 |
17 | &-sidebar-pane {
18 | &-toolbar {
19 | brd(bottom);
20 |
21 | &-container {
22 | bg(2);
23 | }
24 | }
25 |
26 | &-filter-box {
27 | & > input[type="search"] {
28 | bg();
29 | margin: calc(var(--pad) / 2) $i;
30 | }
31 |
32 | & + div {
33 | center();
34 | }
35 | }
36 | }
37 | }
38 |
39 | .tree-outline > li {
40 | padding-left: calc(22px + var(--tab-size) * 1ch) $i;
41 |
42 | &.not-parsed-ok.overloaded { // Invalid property
43 | display: none;
44 | }
45 |
46 | & ~ li {
47 | margin-top: calc(var(--pad) / 2);
48 | }
49 |
50 | // Checkbox
51 | &:not(:hover) .enabled-button {
52 | visibility: hidden $i;
53 | }
54 | .webkit-css-property {
55 | margin-left: calc(-49px + 16px + 1ch) $i;
56 | }
57 | }
58 |
59 | .enabled-button {
60 | left: -34px $i;
61 | top: 0 $i;
62 | }
63 |
64 | // Disable(?) the unit selecting "feature"
65 | select.unit {
66 | pointer-events: none $i;
67 | }
68 |
--------------------------------------------------------------------------------
/chrome-devtools/settings.styl:
--------------------------------------------------------------------------------
1 | .settings {
2 | &-window-main {
3 | pad(0);
4 | }
5 |
6 | &-block {
7 | pad(bottom, 0);
8 | mar(left, 0);
9 | width: unset $i;
10 | }
11 | &-section-title {
12 | normalise-header();
13 | mar(left, 0);
14 | }
15 | &-container {
16 | mar(bottom);
17 |
18 | &::-webkit-scrollbar {
19 | display: none;
20 | }
21 |
22 | &-wrapper {
23 | margin: var(--body-pad);
24 | inset: 0 $i;
25 | }
26 | }
27 | &-tab p {
28 | margin: var(--pad) 0 $i;
29 | }
30 |
31 | // Remove header
32 | &-tab-container > header {
33 | display: none;
34 | }
35 | &-container-wrapper {
36 | pad(left);
37 | pad(top);
38 | brd(top, 0);
39 | }
40 | }
41 | .dialog-close-button {
42 | right: calc(var(--scrollbar-width) + 8px) $i;
43 | }
44 |
45 | .tabbed-pane-shadow.vertical-tab-layout {
46 | div.tabbed-pane { // div to override border !important
47 | &-header {
48 | bg(2);
49 | brd(right);
50 | pad(0);
51 | flex: unset $i;
52 | overflow: unset $i;
53 |
54 | &-tab {
55 | lnh();
56 | pad();
57 | border: none;
58 | height: unset $i;
59 |
60 | &:not(.selected):hover {
61 | fg();
62 | }
63 |
64 | &.selected {
65 | hl();
66 | }
67 | }
68 | }
69 |
70 | &-content {
71 | pad(0);
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/vivaldi/minimal-ui.styl:
--------------------------------------------------------------------------------
1 | #browser.minimal-ui:not(.fullscreen) {
2 | #header {
3 | display: unset $i;
4 | }
5 |
6 | // Hide elements
7 | .vivaldi, // Menu
8 | &.native #pagetitle, // Native window title
9 | #tabs-tabbar-container { // Tabs
10 | display: none $i;
11 | }
12 |
13 | // Restore left/right side URL bar buttons
14 | #main {
15 | position: unset;
16 | }
17 | .mainbar > .toolbar-mainbar {
18 | position: absolute;
19 | left: 0;
20 | top: calc(var(--header-h) / 2);
21 | }
22 | .UrlBar,
23 | .toolbar-droptarget,
24 | .toolbar-droptarget button,
25 | .button-toolbar > button {
26 | height: var(--header-h) $i;
27 | }
28 | .toolbar-mainbar > .button-toolbar {
29 | display: flex $i;
30 | }
31 | .toolbar-tabbar > .button-toolbar > button,
32 | .toolbar-tabbar > .toolbar-group > .button-toolbar > button {
33 | min-height: var(--header-h) $i;
34 | }
35 |
36 | // Non-native window
37 | #tabs-container {
38 | display: flex $i;
39 | }
40 | .toggle-trash > button {
41 | position: fixed;
42 | left: var(--border-width);
43 | top: var(--border-width);
44 | }
45 | &.horizontal-menu .toggle-trash > button {
46 | left: unset;
47 | top: calc(var(--header-h) + var(--border-width) * 2);
48 | right: var(--border-width);
49 | }
50 | &:not(.native).linux {
51 | .window-buttongroup button:not(:hover):not(:active) {
52 | background-color: transparent;
53 | fill: var(--colorFg);
54 | }
55 | }
56 | }
57 |
58 |
--------------------------------------------------------------------------------
/chrome-devtools/tabs.styl:
--------------------------------------------------------------------------------
1 | .tabbed-pane {
2 | &-header {
3 | bg(2);
4 | brd(bottom);
5 | flex-basis: calc(var(--header-h) + var(--border-width)) $i;
6 |
7 | &-tab {
8 | border: var(--border-width) solid transparent $i;
9 | brd(bottom, 0);
10 | padding: 0 var(--pad) $i;
11 | box(unset, var(--header-h));
12 | position: relative;
13 |
14 | &.selected {
15 | background-color: var(--color-background) $i;
16 | border-color: var(--color-details-hairline) $i;
17 |
18 | &::after {
19 | content: '';
20 | position: absolute;
21 | left: 0;
22 | bottom: calc(var(--border-width) * -1);
23 | box(100%, var(--border-width));
24 | bg();
25 | }
26 | }
27 |
28 | &.closeable {
29 | padding-right: .8em $i;
30 | }
31 | }
32 |
33 | // Bottom tabs
34 | &[style*="cursor: ns-resize"] {
35 | brd(top);
36 | brd(bottom, 0);
37 |
38 | .tabbed-pane-header-tab {
39 | brd(top, 0);
40 | border-bottom: var(--border-width) solid transparent $i;
41 |
42 | &.selected {
43 | background-color: var(--color-background) $i;
44 | border-color: var(--color-details-hairline) $i;
45 |
46 | &::after {
47 | top: calc(var(--border-width) * -1);
48 | bottom: unset;
49 | }
50 | }
51 | }
52 | }
53 | }
54 |
55 | &-content {
56 | &.has-no-tabs {
57 | background-color: unset $i;
58 | }
59 | }
60 |
61 | &-tab-slider {
62 | display: none;
63 | }
64 | &-left-toolbar {
65 | mar(right, 0);
66 | min-width: unset $i;
67 | }
68 | }
69 | .shadow-split-widget.vbox > .shadow-split-widget-sidebar:not(.maximized) {
70 | brd(top, 0);
71 | }
72 |
--------------------------------------------------------------------------------
/discord-normalise-classes.user.js:
--------------------------------------------------------------------------------
1 | // ==UserScript==
2 | // @name Discord - Normalise classes
3 | // @description Remove the last 6 (7) characters from all classes
4 | // @version 1.2
5 | // @author me
6 | //
7 | // @namespace https://github.com/ricewind012/userstyles
8 | // @downloadURL https://github.com/ricewind012/userstyles/raw/master/discord-normalise-classes.user.js
9 | // @updateURL https://github.com/ricewind012/userstyles/raw/master/discord-normalise-classes.user.js
10 | //
11 | // @match *://discord.com/*
12 | //
13 | // @run-at document-idle
14 | // @grant none
15 | // ==/UserScript==
16 |
17 | function normalizeElement(el) {
18 | for (const className of el.classList) {
19 | if (!CLASS_REGEX.test(className)) {
20 | continue;
21 | }
22 |
23 | const match = className.match(CLASS_REGEX)[1];
24 | const newClass = match
25 | .split("-")
26 | .map((s, i) => (i ? s[0].toUpperCase() + s.slice(1) : s))
27 | .join("");
28 |
29 | el.classList.add(newClass);
30 | }
31 |
32 | for (const child of el.children) {
33 | normalizeElement(child);
34 | }
35 | }
36 |
37 | const CLASS_REGEX = /^(?!hljs-)(.*?)__?[a-z0-9]{5}[a-z0-9]?$/;
38 | const target = document.getElementById("app-mount");
39 | const observer = new MutationObserver((list) => {
40 | for (const record of list) {
41 | for (const el of record.addedNodes) {
42 | normalizeElement(el);
43 | }
44 | }
45 | });
46 |
47 | setTimeout(() => {
48 | normalizeElement(target);
49 | observer.observe(target, {
50 | attributes: true,
51 | attributeFilter: ["class"],
52 | childList: true,
53 | subtree: true,
54 | });
55 | }, 1000);
56 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # userstyles
2 | Personal userstyles with a specific customizable design that is made specifically with the goal of being simple and maintainable.
3 |
4 | ## Installation
5 | None of them will work out of the box, as they all share variables from a single userstyle. You must first install (and then edit if you wish) [this userstyle](../../raw/master/_global.user.css).
6 |
7 | If you wish to resize the sidebar(s) with a mouse, install [this userscript](../../raw/master/_global-resize-sidebar.user.js).
8 |
9 | ### Requirements
10 | [4chan](../../raw/master/4chan.user.styl): [4chan X](https://www.4chan-x.net)
11 |
12 | [Discord](../../raw/master/discord.user.styl): [class normalisation userscript](../../raw/master/discord-normalise-classes.user.js)
13 |
14 | [GitHub](../../raw/master/github.user.styl), [SoundCloud](../../raw/master/soundcloud.user.styl): being logged in
15 |
16 | [Reddit](../../raw/master/reddit.user.styl): put the following in uBlock Origin's "My filters":
17 | ```adb
18 | ! reddit
19 | !! no subreddit css
20 | ||thumbs.redditmedia.com$stylesheet,domain=old.reddit.com
21 | !! no sticky header
22 | old.reddit.com##+js(set-constant.js, isPinned, true)
23 | ```
24 |
25 | ## Currently broken
26 | - MDN
27 |
28 | Extensive use of shadow DOM after the (as of 2025-08-20) rewrite. May write a userscript, but will be dropped if it doesn't work.
29 |
30 | - Unsplash
31 |
32 | They're starting to use CSS variables for colors, waiting until they finalize them & the new dark theme.
33 |
34 | ## Preview
35 | They all share the same style, and it depends on how you edited the variables from the aforementioned userstyle.
36 | 
37 | 
38 |
--------------------------------------------------------------------------------
/_global-resize-sidebar.user.js:
--------------------------------------------------------------------------------
1 | // ==UserScript==
2 | // @name Global - resize sidebar
3 | // @description Adds the ability to resize sidebars
4 | // @version 1.0
5 | // @author me
6 | //
7 | // @namespace https://github.com/ricewind012/userstyles
8 | // @downloadURL https://github.com/ricewind012/userstyles/raw/master/_global-resize-sidebar.user.js
9 | // @updateURL https://github.com/ricewind012/userstyles/raw/master/_global-resize-sidebar.user.js
10 | //
11 | // @match https://developer.mozilla.org/*
12 | // @match https://boards.4channel.org/*
13 | // @match https://boards.4chan.org/*
14 | // @match https://old.reddit.com/*
15 | // @match https://soundcloud.com/*
16 | // @match https://searchfox.org/*
17 | // @match https://discord.com/*
18 | // @match https://github.com/*
19 | //
20 | // @match https://nitter.poast.org/*
21 | // @match https://nitter.privacydev.net/*
22 | // @match https://xcancel.com/*
23 | //
24 | // @match https://stackexchange.com/*
25 | // @match https://stackoverflow.com/*
26 | // @match https://superuser.com/*
27 | // @match https://askubuntu.com/*
28 | //
29 | // @match https://safebooru.org/*
30 | // @match https://yande.re/*
31 | //
32 | // @match https://wikipedia.org/*
33 | // @include /^https?://wiki\./
34 | //
35 | // @grant GM_addStyle
36 | // @grant GM_getValue
37 | // @grant GM_setValue
38 | // @grant GM_addValueChangeListener
39 | // ==/UserScript==
40 |
41 | function SetSidebarWidth(nWidth) {
42 | document.body.setAttribute(
43 | 'style',
44 | `--sidebar-width: clamp(20vw, ${nWidth}px), 50vw);`
45 | );
46 | }
47 |
48 | const k_strSmallScreen = '768px';
49 |
50 | let elSeparator = document.createElement('div');
51 | elSeparator.id = '-sidebar-separator';
52 | document.body.appendChild(elSeparator);
53 |
54 | GM_addStyle(`
55 | #-sidebar-separator {
56 | position: fixed;
57 | left: calc(var(--sidebar-width) - var(--sidebar-separator-width) / 2);
58 | top: var(--header-h);
59 | right: auto;
60 | bottom: 0;
61 | z-index: 999;
62 |
63 | width: var(--sidebar-separator-width);
64 | cursor: ew-resize;
65 |
66 | @media (max-width: ${k_strSmallScreen}) {
67 | display: none;
68 | }
69 | }
70 | `);
71 |
72 | let nSidebarWidth = GM_getValue('sidebar-width');
73 |
74 | if (nSidebarWidth);
75 | SetSidebarWidth(nSidebarWidth);
76 |
77 | GM_addValueChangeListener(
78 | 'sidebar-width',
79 | (strName, nOldValue, nNewValue, bRemote) => SetSidebarWidth(nNewValue)
80 | );
81 |
82 | elSeparator.addEventListener('pointerdown', () => {
83 | function fnMove(ev) {
84 | GM_setValue('sidebar-width', ev.pageX);
85 | }
86 |
87 | function fnUp() {
88 | removeEventListener('pointermove', fnMove);
89 | removeEventListener('pointerup', fnUp);
90 | }
91 |
92 | addEventListener('pointermove', fnMove, { passive: true });
93 | addEventListener('pointerup', fnUp, { passive: true });
94 | });
95 |
--------------------------------------------------------------------------------
/vivaldi/window.styl:
--------------------------------------------------------------------------------
1 | #browser {
2 | // Non-native window
3 | &:not(.native) {
4 | brd();
5 | header-focus($focus-class);
6 | }
7 |
8 | // Header
9 | /#header {
10 | bgc(2);
11 | brd(bottom);
12 | header-focus($focus-class);
13 | box-sizing: content-box;
14 | shd(0);
15 | }
16 | &:not(.fullscreen) #header {
17 | min-height: var(--header-h) $i;
18 | }
19 |
20 | /.topmenu {
21 | if (!horizontal-menu-oneline) {
22 | flex-direction: column-reverse;
23 | height: calc(var(--header-h) * 2 + var(--border-width));
24 | }
25 |
26 | /.horizontal-menu-pagetitle, & {
27 | mar(0);
28 | }
29 | /.horizontal-menu-pagetitle, button {
30 | height: var(--header-h);
31 | }
32 | button {
33 | padding: 0 var(--pad);
34 | }
35 | }
36 | .horizontal-menu-pagetitle {
37 | margin: 0 calc(var(--window-button-size) * 3 + var(--pad) * 2) 0 var(--pad) $i;
38 |
39 | &:empty::before {
40 | content: 'Vivaldi';
41 | }
42 | }
43 | .menubar.horizontal {
44 | brd(top);
45 | }
46 |
47 | /#pagetitle {
48 | white-space: pre-wrap $i;
49 | pad(0);
50 | margin: 0 calc((var(--window-button-size)) * 3 + var(--pad) * 2) 0 var(--pad) $i;
51 | top: 0 $i;
52 | height: var(--header-h) $i;
53 | display: flex $i;
54 | justify-content: center;
55 |
56 | &::before {
57 | content: 'Vivaldi'var(--delim);
58 | }
59 | }
60 |
61 | // Window buttons
62 | &.isblurred .window-buttongroup svg {
63 | background-color: var(--colorFg) $i;
64 | }
65 | &.linux .window-buttongroup {
66 | top: 0 $i;
67 | right: var(--pad) $i;
68 | height: var(--header-h);
69 | align-items: center;
70 |
71 | path {
72 | display: none;
73 | }
74 | button {
75 | background-color: transparent;
76 | border-radius: var(--border-radius);
77 | margin-left: 2pt $i;
78 | box(var(--window-button-size));
79 |
80 | &:hover, &:active {
81 | background-color: var(--hl) $i;
82 |
83 | svg {
84 | background-color: var(--hl-fg);
85 | }
86 | }
87 | }
88 | svg {
89 | background-color: var(--colorAccentFg);
90 | -webkit-mask-size: var(--window-button-icon);
91 | -webkit-mask-repeat: no-repeat;
92 | box(var(--window-button-icon));
93 | }
94 |
95 | @css { .window-minimize svg {
96 | -webkit-mask-image: url('data:image/svg+xml,');
97 | }
98 | .window-close svg {
99 | -webkit-mask-image: url('data:image/svg+xml,');
100 | }
101 | .window-maximize svg {
102 | -webkit-mask-image: url('data:image/svg+xml,');
103 | }}
104 | }
105 | &.maximized .window-maximize svg {
106 | -webkit-mask-image: url('data:image/svg+xml,');
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/file.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name file://
3 | @namespace github.com/openstyles/stylus
4 | @version 1.0.0
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 | ==/UserStyle== */
10 |
11 | replace-text(content, text-color = var(--fg), pos = after) {
12 | & {
13 | letter-spacing: -9999px;
14 | color: transparent !important;
15 | background-color: transparent !important;
16 |
17 | &::{pos} {
18 | content: content;
19 | letter-spacing: 0;
20 | color: text-color;
21 | }
22 | }
23 | }
24 |
25 | normalise-checkbox(label = true) {
26 | if (label) {
27 | /label {
28 | display: flex;
29 | align-items: center;
30 | gap: 1ch;
31 | }
32 | }
33 |
34 | appearance: none;
35 | background-color:var(--bg2);border:var(--border-width) solid var(--border);
36 | border-radius: calc(var(--border-radius) * .33);
37 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
38 | margin: 0;
39 | position: relative;
40 | width: 16px;
41 | height: 16px;
42 | min-width: 16px;
43 |
44 | &::before, &::after {
45 | content: '';
46 | position: absolute;
47 | left:0;right:0;top:0;bottom:0;
48 | background-color: var(--hl);
49 | transform-origin: 0 0;
50 | }
51 |
52 | &::before {
53 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0);
54 | }
55 | &::after {
56 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0);
57 | }
58 | &:indeterminate::before {
59 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25);
60 | transition-duration: 33.33333333ms;
61 | }
62 |
63 | &:checked {
64 | &::before {
65 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4);
66 | transition-duration: 33.33333333ms;
67 | }
68 | &::after {
69 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2);
70 | transition-delay: 33.33333333ms;
71 | anim();
72 | }
73 | }
74 | }
75 |
76 | @-moz-document regexp("file://.*/"), regexp("https?://.*(jpe?g|png|web[pm])\\.$") {
77 | body {
78 | background-color: var(--bg);
79 | color: var(--fg);
80 | line-height: var(--line-height);
81 | margin: 0;
82 | }
83 |
84 | a {
85 | --icon-size: 16px;
86 | color: var(--fg);
87 | display: block;
88 | padding-left: calc(var(--icon-size) + 1ch) !important;
89 | }
90 |
91 | #header {
92 | display: none;
93 | }
94 |
95 | #parentDirLink {
96 | padding-top: 0;
97 | display: flex;
98 | align-items: center;
99 |
100 | &Box {
101 | background-color: var(--accent);
102 | color: var(--accent-fg) !important;
103 | padding: var(--pad);
104 | border-bottom: var(--border-width) solid var(--accent-border);
105 | margin-bottom: 0;
106 | display: flex !important;
107 | gap: var(--pad);
108 | }
109 |
110 | & > span {
111 | replace-text('Parent directory', var(--accent-fg));
112 | }
113 | }
114 |
115 | table {
116 | display: block;
117 | margin: var(--body-pad);
118 | }
119 |
120 | .icon {
121 | background-position: left !important;
122 | }
123 |
124 | // sort & filter
125 | #theader {
126 | width: unset;
127 | gap: 1ch;
128 | display: inline-flex !important;
129 | align-items: center;
130 | position: absolute;
131 | right: var(--pad);
132 | top: var(--pad);
133 |
134 | &::before {
135 | content: 'Sort by: ' ;
136 | color: var(--accent-fg);
137 | }
138 |
139 | & > th {
140 | display: flex;
141 | color: var(--accent-fg);
142 |
143 | &:hover {
144 | text-decoration: underline;
145 | }
146 | &:not(:last-child)::after {
147 | content: ', ';
148 | display: inline-block;
149 | }
150 | }
151 | }
152 |
153 | input[placeholder] {
154 | padding: 0;
155 | }
156 | input[type="checkbox"] {
157 | normalise-checkbox();
158 | }
159 | }
160 |
161 |
--------------------------------------------------------------------------------
/plain-text.user.css:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name Plain text
3 | @namespace github.com/openstyles/stylus
4 | @version 1.0.0
5 | @description A new userstyle
6 | @author Me
7 | ==/UserStyle== */
8 |
9 | @-moz-document
10 | domain("zsh.org"),
11 | domain("zsh.sourceforge.io"),
12 | domain("www.etalabs.net"),
13 | domain("opengroup.org"),
14 | domain("invisible-island.net")
15 | {
16 | /* Common */
17 | body {
18 | background-color: var(--bg);
19 | color: var(--fg);
20 | line-height: var(--line-height);
21 | margin: var(--body-pad);
22 | }
23 |
24 | hr {
25 | border: none;
26 | border-bottom: var(--border-width) solid var(--border);
27 | margin: var(--pad) 0;
28 | }
29 |
30 | h1, h2, h3, h4, h5, h6,
31 | .nav [href^="#h2"],
32 | center {
33 | background-color: unset;
34 | color: var(--fg);
35 | font-style: normal;
36 | text-align: left;
37 | text-transform: uppercase;
38 | letter-spacing: 1px;
39 | padding-bottom: var(--pad);
40 | border-bottom: var(--border-width) solid var(--border);
41 | margin-top: calc(var(--pad) * 2);
42 | margin-bottom: var(--pad);
43 |
44 | width: 100%;
45 | display: block;
46 |
47 | a {
48 | color: var(--fg) !important;
49 | }
50 | }
51 |
52 | a {
53 | color: var(--fg-link) !important;
54 |
55 | &:not(:hover) {
56 | text-decoration: none;
57 | }
58 | }
59 |
60 | ul,
61 | ol {
62 | padding-left: 3ch;
63 | }
64 |
65 | li::marker {
66 | content: var(--delim);
67 | color: var(--fg2);
68 | font-family: var(--font-code);
69 | }
70 |
71 | pre,
72 | table {
73 | background-color: var(--bg2);
74 | border: var(--border-width) solid var(--border);
75 | border-collapse: collapse;
76 | border-radius: var(--border-radius);
77 | }
78 |
79 | pre {
80 | white-space: pre-wrap;
81 | padding: var(--pad);
82 |
83 | &,
84 | * {
85 | font-family: var(--font-code) !important;
86 | }
87 | }
88 | }
89 |
90 | @-moz-document domain("opengroup.org") {
91 | .navheader,
92 | center + hr,
93 | a[href="#top"] {
94 | display: none;
95 | }
96 |
97 | center,
98 | .box {
99 | color: var(--fg2);
100 | text-align: right;
101 | }
102 |
103 | center {
104 | body > & {
105 | padding: 0;
106 | border-bottom: none;
107 | margin-bottom: var(--body-pad);
108 | }
109 |
110 | dl & {
111 | margin: 0 auto var(--pad) 0;
112 |
113 | width: 85%;
114 | }
115 | }
116 |
117 | .box {
118 | background-color: unset !important;
119 |
120 | & > em {
121 | font-style: normal;
122 | }
123 | }
124 |
125 | ul,
126 | li,
127 | table {
128 | color: var(--fg);
129 | }
130 |
131 | blockquote {
132 | margin: 0;
133 | }
134 | }
135 |
136 | @-moz-document domain("invisible-island.net") {
137 | /* man2html */
138 | :root {
139 | --sidebar-width: 228px;
140 |
141 | background-color: var(--bg);
142 |
143 | @media (max-width: 768px) {
144 | --nav-display: none;
145 | --nav-margin: var(--body-pad);
146 | }
147 | }
148 |
149 | .nav {
150 | --scrollbar-track: var(--bg);
151 | --scrollbar-track-button: var(--bg);
152 |
153 | background-color: var(--bg2);
154 | border-right: var(--border-width) solid var(--border);
155 | margin-left: calc(var(--sidebar-width) * -1 - var(--body-pad));
156 |
157 | width: var(--sidebar-width);
158 | display: var(--nav-display, flex);
159 |
160 | ul {
161 | padding: 0;
162 |
163 | & > li {
164 | &::marker {
165 | content: '';
166 | }
167 |
168 | li::marker {
169 | content: var(--delim);
170 | }
171 | }
172 |
173 | ul {
174 | padding-left: 3ch;
175 | }
176 | }
177 |
178 | & > ul {
179 | margin: var(--pad);
180 | margin-top: calc(var(--pad) * -1);
181 |
182 | & > li:is(:nth-child(1), :nth-child(2)) {
183 | display: none;
184 | }
185 | }
186 | }
187 |
188 | body {
189 | margin-left: var(
190 | --nav-margin,
191 | calc(var(--sidebar-width) + var(--body-pad))
192 | );
193 | }
194 |
195 | h3,
196 | h4 {
197 | width: calc(100% - 30px);
198 | }
199 |
200 | pre {
201 | background-color: unset;
202 | padding: unset;
203 | border: unset;
204 | }
205 | }
206 |
207 |
--------------------------------------------------------------------------------
/vivaldi/global.styl:
--------------------------------------------------------------------------------
1 | // Hide elements
2 | // I. Unsorted
3 | #browser.native:not(.tabs-top):not(.horizontal-menu):not(.minimal-ui) #header, // Non-top tabs header
4 | .webpageview[style^="visibility: hidden"],
5 | .panel input[type="search"] + div, // ..next to search bar
6 | .tab-strip::-webkit-scrollbar, // Tab overflow scrollbar
7 |
8 | // II. URL bar
9 | .toolbar-insideinput, // Adblocker
10 | .SiteInfoButton,
11 | .BookmarkButton {
12 | display: none $i;
13 | }
14 |
15 | // III. Browser menu (accessible with Alt)
16 | .vivaldi-horizontal-icon,
17 | .vivaldi {
18 | display: none $i;
19 | }
20 | #tabs-container.top {
21 | pad(left, 0);
22 | }
23 |
24 | // IV. Popup
25 | #browser.popup {
26 | #tabs-tabbar-container,
27 | #panels-container,
28 | .mainbar {
29 | display: none $i;
30 | }
31 | }
32 |
33 | // IV. Sync and email partnership
34 | /*.settings-navigation .tree-item {
35 | display: contents;
36 | }
37 | .settings-navigation div[data-id="14"],*/
38 | .email-partnership,
39 | .account-create {
40 | display: none $i;
41 | }
42 |
43 | // Colors
44 | #browser {
45 | --colorBg: var(--bg) $i;
46 | --colorBgAlpha: var(--bg-tr) $i;
47 | --colorBgAlphaHeavy: var(--bg-tr2) $i;
48 | --colorBgAlphaHeavier: var(--bg-tr3) $i;
49 | --colorBgAlphaBlur: var(--bg) $i;
50 | --colorBgLight: var(--bg2) $i;
51 | --colorBgLighter: var(--bg3) $i;
52 | --colorBgLightIntense: var(--colorBg) $i;
53 | --colorBgDark: var(--colorBgLight) $i;
54 | --colorBgDarker: var(--colorBgLighter) $i;
55 | --colorBgIntense: var(--colorBgLight) $i;
56 | --colorBgIntenser: var(--colorBgLighter) $i;
57 | --colorBgIntser: @css { hsla(var(--bg-h), var(--bg-s), calc(var(--bg-l) var(--bg-sign) var(--bg-l-mute) * var(--bg-l-mute-start)), .95) } $i;
58 |
59 | --colorBorder: var(--border) $i;
60 | --colorBorderDisabled: var(--border) $i;
61 | --colorBorderSubtle: var(--border) $i;
62 | --colorBorderIntense: var(--border) $i;
63 |
64 | --colorAccentBg: var(--accent) $i;
65 | --colorAccentBgDark: var(--accent) $i;
66 | --colorAccentBgDarker: var(--accent) $i;
67 | //--colorAccentBgAlpha: var(--accent-a40) $i;
68 | //--colorAccentBgAlphaHeavy: var(--accent-a25) $i;
69 | --colorAccentBorder: var(--accent-border) $i;
70 | --colorAccentBorderDark: var(--accent-border) $i;
71 | --colorAccentFg: var(--accent-fg) $i;
72 | --colorAccentFgAlpha: @css { hsla(var(--fg-h), var(--fg-s), var(--fg-l), var(--bg-opacity)) } $i;
73 |
74 | --colorFg: var(--fg) $i;
75 | --colorFgAlpha: @css { hsla(var(--fg-h), var(--fg-s), var(--fg-l), var(--bg-opacity)) } $i;
76 | --colorFgIntense: var(--fg) $i;
77 | --colorFgFadedMore: var(--fg2) $i;
78 | --colorFgFadedMost: var(--fg2) $i;
79 |
80 | --colorSuccessBg: var(--color10) $i;
81 | --colorSuccessBgAlpha: color-a(10) $i;
82 | --colorSuccessFg: var(--hl-fg) $i;
83 |
84 | --colorWarningBg: var(--color11) $i;
85 | --colorWarningBgAlpha: color-a(11) $i;
86 | --colorWarningFg: var(--hl-fg) $i;
87 |
88 | --colorErrorBg: var(--color9) $i;
89 | --colorErorrBgAlpha: color-a(9) $i;
90 | --colorErrorFg: var(--hl-fg) $i;
91 |
92 | --colorWindowBg: var(--bg) $i;
93 | --colorWindowFg: var(--fg) $i;
94 |
95 | --colorHighlightBgFaded: var(--hl) $i;
96 |
97 | --radius: var(--border-radius) $i;
98 | --radiusCap: var(--border-radius) $i;
99 | --radiusHalf: calc(var(--border-radius) / 2) $i;
100 | }
101 |
102 | // Normalise elements
103 | input {
104 | /button,
105 | /select,
106 | /textarea,
107 | &,
108 | &[type="text"],
109 | &[type="search"],
110 | &[type="password"],
111 | &[type="email"],
112 | &[type="url"],
113 | &[type="number"],
114 | &[type="radio"],
115 | &[type="date"],
116 | &[type="time"],
117 | &[type="checkbox"],
118 | &[type="button"],
119 | &[type="submit"] {
120 | border-width: var(--border-width);
121 | }
122 | &[type="tel"],
123 | &[type="text"],
124 | &[type="search"],
125 | &[type="email"],
126 | &[type="url"],
127 | &[type="date"],
128 | &[type="time"],
129 | &[type="password"],
130 | &[type="number"] {
131 | padding: 0 var(--pad);
132 | shd(0);
133 | height: unset;
134 | focus();
135 | }
136 | }
137 |
138 | // etc.
139 | #browser {
140 | &,
141 | & + div,
142 | & + div + div {
143 | lnh();
144 | }
145 | }
146 | ::-webkit-input-placeholder {
147 | input&,
148 | select&,
149 | textarea& {
150 | lnh();
151 | }
152 | }
153 |
--------------------------------------------------------------------------------
/chrome-devtools/main.styl:
--------------------------------------------------------------------------------
1 | @import 'common';
2 |
3 | @import 'tabs';
4 | @import 'menu';
5 | @import 'editor';
6 |
7 | @import 'console';
8 | @import 'elements';
9 | @import 'styles';
10 | @import 'settings';
11 | @import 'unsorted';
12 |
13 | // Variables
14 | :root {
15 | --tab-size: 2;
16 |
17 | // Background & text
18 | --color-primary: var(--hl) $i;
19 | --color-background: var(--bg) $i;
20 | --color-background-inverted: var(--fg) $i;
21 | --color-background-opacity-50: var(--color-background-elevation-0) $i;
22 | --color-background-opacity-80: var(--color-background-elevation-1) $i;
23 | --color-background-elevation-0: var(--bg2) $i;
24 | --color-background-elevation-1: var(--bg3) $i;
25 | --color-background-elevation-2: var(--bg4) $i;
26 | /** Used when the elevation is visible only on dark theme */
27 | --color-background-elevation-dark-only: var(--color-background);
28 | --color-background-highlight: rgb(202 205 209);
29 | /** To draw grid lines behind elements */
30 | --divider-line: var(--border) $i;
31 | /**
32 | * When hovering over an element and the background should be a little
33 | * bit darker. For example, when hovering over a node in the flame chart
34 | * tree in the performance panel. This color is intentionally opague,
35 | * since the color of the underlying element should still be dominant.
36 | */
37 | --color-background-hover-overlay: rgb(56 121 217 / 10%);
38 | /**
39 | * Used when selecting a range of a section, for example when
40 | * selecting a range in the performance panel timeline.
41 | */
42 | --color-selection-highlight: rgb(56 121 217 / 30%);
43 | --color-selection-highlight-border: rgb(16 81 177);
44 | /**
45 | * When showing matching elements of a particular search filter (for example
46 | * when showing all matching css selectors/rules in the elements style
47 | * pane). The highlight is intended to be used on top of the original background
48 | * color and text color.
49 | */
50 | --color-match-highlight: rgb(56 121 217 / 20%);
51 | --color-text-primary: var(--fg) $i;
52 | --color-text-secondary: var(--fg2) $i;
53 | --color-text-secondary-selected: rgb(188 185 182);
54 | --color-text-disabled: var(--fg2) $i;
55 | --color-line-number: var(--fg2) $i;
56 | --color-token-variable: var(--color1) $i;
57 | --color-link: var(--fg-link) $i;
58 | --color-details-hairline: var(--border) $i;
59 |
60 | // Colorscheme
61 | --color-syntax-1: var(--color1) $i;
62 | --color-syntax-2: var(--color2) $i;
63 | --color-syntax-3: var(--color3) $i;
64 | --color-syntax-4: var(--color4) $i;
65 | --color-syntax-5: var(--color5) $i;
66 | --color-syntax-6: var(--color6) $i;
67 | --color-syntax-7: var(--color7) $i;
68 |
69 | --color-token-variable: var(--color9) $i;
70 | --color-token-property: var(--color13) $i;
71 | --color-token-type: var(--color11) $i;
72 | --color-token-definition: var(--color12) $i;
73 | --color-token-variable-special: var(--color10) $i;
74 | --color-token-builtin: var(--color10) $i;
75 | --color-token-keyword: var(--color12) $i;
76 | --color-token-number: var(--color10) $i;
77 | --color-token-string: var(--color13) $i;
78 | --color-token-string-special: var(--color13) $i;
79 | --color-token-atom: var(--color10) $i;
80 | --color-token-tag: var(--color13) $i;
81 | --color-token-attribute: var(--color11) $i;
82 | --color-token-attribute-value: var(--color12) $i;
83 | --color-token-comment: var(--fg2) $i;
84 | --color-token-meta: var(--fg2) $i;
85 | --color-token-deleted: var(--color9) $i;
86 | --color-token-inserted: var(--color10) $i;
87 | --color-token-pseudo-element: var(--color11) $i;
88 | --color-matching-bracket-background: var(--hl) $i;
89 | --color-matching-bracket-underline: var(--hl) $i;
90 | --color-editor-selection: var(--hl) $i;
91 |
92 | // Shadows
93 | --drop-shadow: var(--shadow-big) $i;
94 |
95 | --legacy-accent-color: var(--hl) $i;
96 | --legacy-accent-fg-color: var(--fg) $i;
97 | --legacy-accent-fg-color-hover: var(--fg) $i;
98 | --legacy-focus-bg-color: var(--border) $i;
99 | --legacy-focus-ring-inactive-shadow: none $i;
100 | --legacy-toolbar-hover-bg-color: var(--bg2) $i;
101 | --legacy-selection-bg-color: var(--hl) $i;
102 | --legacy-selection-fg-color: var(--hl-fg) $i;
103 | --legacy-selection-inactive-fg-color: var(--hl-fg) $i;
104 | --legacy-selection-inactive-bg-color: var(--hl) $i;
105 | --legacy-tab-selected-fg-color: var(--fg) $i;
106 | --legacy-item-selection-bg-color: var(--hl) $i;
107 | --legacy-item-selection-inactive-bg-color: var(--hl) $i;
108 |
109 | // months later wtf r u doing
110 | --item-hover-color: var(--bg2) $i;
111 | }
112 |
113 | // Remove elements
114 | // I. Buttons
115 | [title="Show Computed Styles sidebar"],
116 | [aria-label="Toggle device toolbar"],
117 | [title="Toggle CSS Layers view"],
118 | [title^="Open Console to view"],
119 | [title="Toggle Element State"],
120 | [title="Open flexbox editor"],
121 | [title="Element Classes"],
122 | .new-rule-toolbar,
123 | devtools-adorner, // Enable flex mode
124 | issue-counter,
125 |
126 | // II. Tabs
127 | [aria-label="Main toolbar"] #tab-console,
128 | #tab-heap_profiler,
129 | #tab-lighthouse,
130 | //#tab-resources,
131 | #tab-timeline,
132 |
133 | // III. Unsorted
134 | .style-panes-wrapper > :last-child,
135 | [aria-label="Side panel toolbar"],
136 | .console-toolbar-container,
137 | #elements-crumbs,
138 | .toolbar-divider,
139 | .selected-hint // == $0
140 | {
141 | display: none $i;
142 | }
143 |
144 | // IV. Fixes
145 | .style-panes-wrapper > :first-child {
146 | brd(bottom, 0);
147 | }
148 | #console-messages {
149 | brd(top);
150 | }
151 |
152 | // Global styles
153 | :root {
154 | --font-normal: var(--font-code) $i;
155 | }
156 |
157 | input {
158 | &[type="text"],
159 | &[type="number"],
160 | &[type="search"] {
161 | normalise-input();
162 | }
163 | &[type="color"] {
164 | normalise-color();
165 | }
166 | &[type="checkbox"] {
167 | normalise-checkbox(false);
168 | filter: none $i;
169 | }
170 | &[type="radio"] {
171 | normalise-radio();
172 | }
173 | &[type="date"],
174 | /select:not(.unit) {
175 | normalise-select();
176 | }
177 | }
178 | .text-button {
179 | normalise-button();
180 | mar(0);
181 | height: unset $i;
182 |
183 | &:not(:focus):hover {
184 | shd(0);
185 | }
186 | }
187 |
188 | .dt-checkbox-text {
189 | margin-left: 1ch $i;
190 | }
191 |
192 | [is=ui-icon].icon-mask {
193 | --override-icon-mask-background-color: var(--fg2) $i;
194 |
195 | &:hover {
196 | background-color: var(--fg) $i;
197 | }
198 | }
199 |
--------------------------------------------------------------------------------
/vivaldi/browser.styl:
--------------------------------------------------------------------------------
1 | // Tabs
2 | #tabs-tabbar-container {
3 | bg();
4 | pad(0);
5 | top: -1px;
6 | box($tabs-left-width, calc(100% + 1px));
7 |
8 | &.left {
9 | brd(right);
10 |
11 | .tab.active {
12 | hl();
13 | }
14 |
15 | .sync-and-trash-container {
16 | max-width: fit-content $i;
17 | }
18 | .newtab {
19 | left: 0 $i;
20 | }
21 |
22 | &:hover {
23 | position: absolute;
24 | z-index: 1;
25 | width: 260px $i;
26 | anim();
27 |
28 | .newtab > button {
29 | gap: 0;
30 |
31 | &::after {
32 | content: 'New tab';
33 | }
34 | }
35 |
36 | .sync-and-trash-container {
37 | mar(0);
38 | margin-left: 2px $i;
39 |
40 | button:hover {
41 | cursor: pointer;
42 | }
43 |
44 | span {
45 | align-items: center;
46 |
47 | &::after {
48 | content: 'Closed tabs';
49 | margin-left: 1px;
50 | }
51 | }
52 | }
53 | }
54 |
55 | .newtab > button {
56 | &:hover {
57 | cursor: pointer;
58 | }
59 |
60 | svg {
61 | box(30px);
62 | }
63 | }
64 | }
65 |
66 | &.top {
67 | .tab-header {
68 | flex: 0 0 var(--header-h) $i;
69 |
70 | .favicon {
71 | padding: 0 $i;
72 | flex: 0 0 16px $i;
73 | min-width: 16px $i;
74 | min-height: 16px $i;
75 | }
76 | }
77 |
78 | &, & > div {
79 | height: var(--header-h) $i;
80 | }
81 |
82 | .toolbar-tabbar > .button-toolbar > button,
83 | .toolbar-tabbar > .toolbar-group > .button-toolbar > button {
84 | min-height: var(--header-h) $i;
85 | }
86 |
87 | .newtab {
88 | top: 0 $i;
89 | }
90 | }
91 | }
92 | .tab {
93 | background-color: transparent $i;
94 | fg();
95 |
96 | &:hover {
97 | bg(2);
98 | }
99 |
100 | &.isdiscarded {
101 | filter: grayscale(50%) opacity(.5);
102 | }
103 |
104 | .tabs-left &,
105 | .tabs-left &-header,
106 | .tabs-left & .svg-tab-stack {
107 | mar(0);
108 | }
109 | .tabs-left & .svg-tab-stack {
110 | padding-right: 2px $i;
111 | }
112 | .tabs-left &-position &:not(&-in-accordion):not(&-accordion) {
113 | border-radius: var(--radiusHalf) 0 0 var(--radiusHalf) $i;
114 | }
115 | .tabs-right &-position &:not(&-in-accordion):not(&-accordion) {
116 | border-radius: 0 var(--radiusHalf) var(--radiusHalf) 0 $i;
117 | }
118 | }
119 | .inner > [style*="height: auto"] {
120 | width: unset $i;
121 |
122 | &:hover + #webview-container {
123 | margin-left: s('calc(%s + var(--border-width))', $tabs-left-width);
124 | }
125 | }
126 |
127 | // Navigation bar
128 | .button-popup,
129 | .UrlBar-AddressField {
130 | bg();
131 | }
132 | .UrlBar {
133 | --ToolbarItemGap: var(--pad);
134 |
135 | &-AddressField,
136 | &-SearchField {
137 | brd();
138 | pad(0);
139 | mar(0);
140 | focus(focus-within);
141 | }
142 | #app &-UrlField,
143 | /.UrlFragment-Wrapper {
144 | pad(right, 0);
145 | shd(0);
146 | }
147 |
148 | button:hover {
149 | hl();
150 | }
151 | }
152 | .UrlFragment-Wrapper {
153 | pad();
154 |
155 | /.UrlField, & {
156 | height: unset $i;
157 | }
158 | }
159 | .toolbar {
160 | .mainbar > &-mainbar {
161 | bgc(2);
162 | header-focus($focus-class);
163 |
164 | #browser:not(.minimal-ui) & {
165 | brd(bottom);
166 | box-sizing: content-box;
167 | }
168 |
169 | button:hover {
170 | hl();
171 | cursor: pointer;
172 | }
173 | & > .button-toolbar {
174 | ../, & > button {
175 | height: var(--header-h);
176 | }
177 | & > .button-pressed {
178 | background-image: none $i;
179 | }
180 | }
181 | }
182 |
183 | &-droptarget {
184 | button svg {
185 | flex: unset $i;
186 | }
187 | }
188 | &-mainbar,
189 | &-extensions {
190 | &::before {
191 | display: none;
192 | }
193 | }
194 | &-extensions {
195 | fg();
196 |
197 | &, &:hover {
198 | background-color: unset $i;
199 | }
200 |
201 | &, button {
202 | height: 32px $i;
203 | }
204 | }
205 | }
206 | .button-popup-below.button-popup-arrow {
207 | &-light::before, &-dark::before {
208 | border-bottom-color: var(--colorBg);
209 | }
210 | }
211 |
212 | // Panel
213 | #switch {
214 | pad(top, 0);
215 |
216 | .addwebpanel-wrapper > button:hover:not(:focus),
217 | & > button:hover:not(:focus) {
218 | color: unset $i;
219 |
220 | svg .small-icon-fill,
221 | svg .small-icon-outline {
222 | fill: unset $i;
223 | }
224 | }
225 | }
226 | .panel h1 {
227 | normalise-header();
228 |
229 | .close {
230 | box(24px);
231 | }
232 | }
233 | .webpanel-header {
234 | shd(mid);
235 | border-bottom-color: var(--colorBgDarker) $i;
236 | z-index: 1;
237 | }
238 |
239 | // Status info
240 | .StatusInfo {
241 | bottom: 0 $i;
242 | left: 0 $i;
243 | right: var(--scrollbarWidth) $i;
244 | pad(left, 0);
245 |
246 | &-Content {
247 | bg(-tr);
248 | pad();
249 | brd(0);
250 | brd(top, bg-tr3);
251 | brd(left, bg-tr3);
252 | border-radius: 0 var(--radius) 0 0 $i;
253 | }
254 |
255 | #browser.tabs-left & {
256 | padding-left: 32px $i;
257 | }
258 | }
259 |
260 | // Popup
261 | .quick-command-container {
262 | width: unset;
263 | }
264 | .OmniDropdown,
265 | .qc-modal {
266 | bg(-tr);
267 | }
268 | .OmniDropdown {
269 | --fg: var(--colorFg) $i;
270 | --border: var(--colorBorder) $i;
271 | pad(0);
272 | brd();
273 | brd(top, 0);
274 | mar(0);
275 | shd(big);
276 | top: calc(100% + var(--pad) - var(--border-width));
277 |
278 | &:empty {
279 | display: none;
280 | }
281 |
282 | &-Label {
283 | normalise-header();
284 | opacity: 1;
285 | mar();
286 | }
287 | }
288 | .OmniLinkItem {
289 | pad(left);
290 | grid-gap: 1ch;
291 |
292 | &-Url,
293 | &-Details,
294 | &-Favicon,
295 | &-EraseButton {
296 | height: 24px $i;
297 | center();
298 | }
299 | }
300 |
301 | // Shadow
302 | .button-popup,
303 | .extension-popup,
304 | #vivaldi-tooltip .tooltip .tab-group,
305 | .multiinput .multiinput-select,
306 | :not(.topmenu) > .menu > ul,
307 | .menu ul ul,
308 | #modal-bg > div,
309 | .colorpicker,
310 | .HintTooltip__content,
311 | .address-top-off .toolbar-mainbar .addressfield:focus-within,
312 | .address-bottom-off .toolbar-mainbar .addressfield:focus-within,
313 | .HUD,
314 | #vivaldi-tooltip .tooltip .tab-solo .tooltip-item,
315 | p.warning,
316 | .theme-schedule-timeline .theme-schedule-timeslice .timeslice-bubble,
317 | .VivaldiSelector .Inner__menu,
318 | .CalendarNotification,
319 | .CalendarPicker-Submenu,
320 | .CalendarEventBubble-Inner,
321 | .SearchDropdown,
322 | .contact-photo-picker .contact-photo-picker-overlay,
323 | .MailDisabled,
324 | .address-top-off .UrlBar .UrlBar-SearchField:focus-within,
325 | .address-bottom-off .UrlBar .UrlBar-SearchField:focus-within,
326 | .address-top-off .UrlBar .UrlBar-AddressField:focus-within,
327 | .address-bottom-off .UrlBar .UrlBar-AddressField:focus-within,
328 | .StartPage-GameButton .GameButton > button {
329 | box-shadow:
330 | var(--shadow-ins) var(--colorBorder),
331 | var(--shadow-big) $i;
332 | }
333 | #vivaldi-tooltip .tab-group {
334 | filter: none $i;
335 |
336 | .tooltip-item {
337 | box-shadow: inset 0 -1px var(--colorBorder) $i;
338 | }
339 | }
340 |
341 | // Dialog
342 | .dialog {
343 | &-title {
344 | mar(bottom, 0);
345 | }
346 |
347 | &-title,
348 | &-header,
349 | &-content,
350 | &-preview,
351 | &-footer {
352 | pad();
353 | }
354 |
355 | &-content,
356 | &-preview {
357 | pad(top, 0);
358 | }
359 |
360 | &-footer {
361 | bg(2);
362 | brd(top);
363 | justify-content: space-between;
364 | }
365 | }
366 |
367 | // Fix Vivaldi's shit
368 | .import-result {
369 | .import-calendar &,
370 | .import-data &,
371 | .import-masterpassword &,
372 | .open-session & {
373 | display: inline-flex;
374 |
375 | &::before {
376 | display: unset $i;
377 | position: unset $i;
378 | }
379 | }
380 | }
381 |
382 | // Tiled view
383 | #webview-container {
384 | pad(0);
385 | shd(0);
386 | }
387 | .mosaic-tile {
388 | margin: 2px;
389 |
390 | // Horizontal
391 | &[style$="0% 0%;"]:last-child {
392 | margin-top: calc(var(--pad) / 2);
393 | }
394 | &[style^="inset: 0% 0%"]:first-child {
395 | margin-bottom: calc(var(--pad) / 2);
396 | }
397 |
398 | // Vertical
399 | &[style^="inset: 0% 0%"]:last-child {
400 | margin-left: calc(var(--pad) / 2);
401 | }
402 | &[style$="0% 0%;"]:first-child {
403 | margin-right: calc(var(--pad) / 2);
404 | }
405 | }
406 | .mosaic-split {
407 | & &-line {
408 | &,
409 | &::before,
410 | &::after {
411 | bg();
412 | }
413 | }
414 | }
415 |
--------------------------------------------------------------------------------
/_global.user.css:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name Global rules
3 | @namespace github.com/openstyles/stylus
4 | @version 1.0.0
5 | @description A new userstyle
6 | @author Me
7 | ==/UserStyle== */
8 |
9 | /**
10 | *
11 | * I. Other settings
12 | * II. Color settings
13 | * III. Variable declaration
14 | * IV. Scrollbar
15 | *
16 | **/
17 |
18 | :root {
19 | /* Text and icons */
20 | --font-normal: system-ui;
21 | --font-code: monospace;
22 | --font-size: 12pt;
23 | --delim: ' • ';
24 |
25 | /* Shadows */
26 | --shadow-ins: 0 0 0 var(--border-width);
27 | --shadow-low: 0 1px 4px var(--shadow);
28 | --shadow-mid: 0 4px 8px var(--shadow);
29 | --shadow-big: var(--shadow-mid), 0 28px 48px var(--shadow);
30 |
31 | /* Highlighting */
32 | --hl: #1488ff;
33 | --hl-fg: #fff;
34 |
35 | /* Sidebar */
36 | --sidebar-width: 228px;
37 | --sidebar-separator-width: 8px;
38 |
39 | /* etc. */
40 | --pad: 8px;
41 | --body-pad: 24px;
42 | --bg-opacity: .25;
43 | --line-height: 1.25;
44 | --trans-dur: 150ms;
45 | --border-width: 1px;
46 | --border-radius: 0px;
47 | --saturation-factor: 1;
48 | --scrollbar-width: 16px;
49 | --popup-filter: blur(18px);
50 | --shadow: rgba(0,0,0,.25);
51 | }
52 |
53 | @media (prefers-color-scheme: light) { :root {
54 | --bg-h: 0;
55 | --bg-s: 0%;
56 | --bg-l: 100%;
57 | --bg-l-mute: 6%;
58 | --bg-sign: -;
59 |
60 | --fg-h: 0;
61 | --fg-s: 0%;
62 | --fg-l: 15%;
63 | --fg-mute-factor: 3;
64 | --fg-sign: *;
65 |
66 | --accent: var(--fg);
67 | --accent-border: var(--fg);
68 | --accent-fg: var(--bg);
69 |
70 | --colorscheme-s: 11%;
71 | --colorscheme-s-2: 7%;
72 | --colorscheme-l: 43%;
73 | --colorscheme-l-2: 8%;
74 | /* */
75 | --color1-h: 357;
76 | --color2-h: 180;
77 | --color3-h: 55;
78 | --color4-h: 248;
79 | --color5-h: 300;
80 | --color6-h: 180;
81 | }}
82 |
83 | @media (prefers-color-scheme: dark) { :root {
84 | --bg-h: 0;
85 | --bg-s: 0%;
86 | --bg-l: 8%;
87 | --bg-l-mute: 3%;
88 | --bg-sign: +;
89 |
90 | --fg-h: 0;
91 | --fg-s: 0%;
92 | --fg-l: 80%;
93 | --fg-mute-factor: 2;
94 | --fg-sign: /;
95 |
96 | --accent: var(--fg);
97 | --accent-border: var(--fg);
98 | --accent-fg: var(--bg);
99 |
100 | --colorscheme-s: 17%;
101 | --colorscheme-s-2: 7%;
102 | --colorscheme-l: 61%;
103 | --colorscheme-l-2: 8%;
104 | /* */
105 | --color1-h: 357;
106 | --color2-h: 122;
107 | --color3-h: 55;
108 | --color4-h: 248;
109 | --color5-h: 300;
110 | --color6-h: 182;
111 | }}
112 |
113 | :root {
114 | --header-h: calc(var(--font-size) * var(--line-height) + var(--pad) * 2 + var(--border-width));
115 |
116 | --bg: hsl(var(--bg-h), var(--bg-s), var(--bg-l));
117 | --bg2: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) var(--bg-sign) var(--bg-l-mute)));
118 | --bg3: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) var(--bg-sign) var(--bg-l-mute) * 2));
119 | --bg4: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) var(--bg-sign) var(--bg-l-mute) * 3));
120 | --border: hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) var(--bg-sign) var(--bg-l-mute) * 5));
121 |
122 | --bg-tr: hsla(var(--bg-h), var(--bg-s), var(--bg-l), calc(var(--bg-opacity) * 3));
123 | --bg-tr2: hsla(var(--bg-h), var(--bg-s), calc(var(--bg-l) var(--bg-sign) var(--bg-l-mute)), calc(var(--bg-opacity) * 3));
124 | --bg-tr3: hsla(var(--bg-h), var(--bg-s), calc(var(--bg-l) var(--bg-sign) var(--bg-l-mute) * 2), calc(var(--bg-opacity) * 3));
125 |
126 | --fg: hsl(var(--fg-h), var(--fg-s), var(--fg-l));
127 | --fg2: hsl(var(--fg-h), var(--fg-s), calc(var(--fg-l) var(--fg-sign) (var(--fg-mute-factor) * 1.33)));
128 | --fg3: hsl(var(--fg-h), var(--fg-s), calc(var(--fg-l) var(--fg-sign) (var(--fg-mute-factor) * 2)));
129 | --fg-link: #1488ff;
130 |
131 | --color-s: calc(var(--saturation-factor) * var(--colorscheme-s));
132 | --color-s-2: calc(var(--color-s) + var(--colorscheme-s-2));
133 | --color-l: var(--colorscheme-l);
134 | --color-l-2: calc(var(--color-l) + var(--colorscheme-l-2));
135 |
136 | --color1: hsl(var(--color1-h), var(--color-s), var(--color-l));
137 | --color9: hsl(var(--color1-h), var(--color-s-2), var(--color-l-2));
138 | --color2: hsl(var(--color2-h), var(--color-s), var(--color-l));
139 | --color10: hsl(var(--color2-h), var(--color-s-2), var(--color-l-2));
140 | --color3: hsl(var(--color3-h), var(--color-s), var(--color-l));
141 | --color11: hsl(var(--color3-h), var(--color-s-2), var(--color-l-2));
142 | --color4: hsl(var(--color4-h), var(--color-s), var(--color-l));
143 | --color12: hsl(var(--color4-h), var(--color-s-2), var(--color-l-2));
144 | --color5: hsl(var(--color5-h), var(--color-s), var(--color-l));
145 | --color13: hsl(var(--color5-h), var(--color-s-2), var(--color-l-2));
146 | --color6: hsl(var(--color6-h), var(--color-s), var(--color-l));
147 | --color14: hsl(var(--color6-h), var(--color-s-2), var(--color-l-2));
148 |
149 | color-scheme: light dark !important;
150 | }
151 |
152 | ::selection {
153 | background-color: var(--hl) !important;
154 | color: var(--hl-fg) !important;
155 | }
156 |
157 | /* Font */
158 | ::placeholder, * {
159 | font-family: var(--font-normal),
160 | 'Font Awesome 5 Free', 'Font Awesome 5 Brands',
161 | 'Font Awesome 6 Free', 'Font Awesome 6 Brands',
162 | FontAwesome, FontAwesomeExtra
163 | !important;
164 | font-size: var(--font-size) !important;
165 | /* Intended for Cozette font */
166 | font-weight: normal !important;
167 |
168 | scrollbar-color: var(--fg2) transparent !important;
169 | }
170 | code, pre, code *, pre * {
171 | font-family: var(--font-code) !important;
172 | }
173 |
174 | /* Animations */
175 | @keyframes dropfade {
176 | 0% {
177 | opacity: 0;
178 | transform: translateY(-8px);
179 | }
180 |
181 | 100% {
182 | opacity: 1;
183 | transform: translateY(0);
184 | }
185 | }
186 |
187 | /* Scrollbar */
188 | ::-webkit-scrollbar {
189 | width: var(--scrollbar-width);
190 | }
191 |
192 | ::-webkit-scrollbar-button {
193 | display: flex;
194 | width: var(--scrollbar-width);
195 | height: var(--scrollbar-width);
196 |
197 | &:vertical {
198 | border-left: 1px solid transparent;
199 |
200 | &:decrement {
201 | background-image:
202 | linear-gradient(transparent 68%, var(--bg2) 68%),
203 | linear-gradient(135deg, var(--bg2) 45%, transparent 45%),
204 | linear-gradient(45deg, var(--fg) 53%, var(--bg2) 53%);
205 |
206 | &:active {
207 | background-image:
208 | linear-gradient(transparent 68%, var(--fg) 68%),
209 | linear-gradient(135deg, var(--fg) 45%, transparent 45%),
210 | linear-gradient(45deg, var(--bg2) 53%, var(--fg) 53%);
211 | }
212 | }
213 |
214 | &:increment {
215 | background-image:
216 | linear-gradient(45deg, var(--bg2) 45%, transparent 45%),
217 | linear-gradient(-225deg, transparent 53%, var(--bg2) 53%),
218 | linear-gradient(-180deg, var(--bg2) 31%, var(--fg) 31%);
219 |
220 | &:active {
221 | background-image:
222 | linear-gradient(45deg, var(--fg) 45%, transparent 45%),
223 | linear-gradient(-225deg, transparent 53%, var(--fg) 53%),
224 | linear-gradient(-180deg, var(--fg) 31%, var(--bg2) 31%);
225 | }
226 | }
227 | }
228 |
229 | &:horizontal {
230 | border-top: 1px solid transparent;
231 |
232 | &:decrement {
233 | background-image:
234 | linear-gradient(-135deg, transparent 53%, var(--bg2) 53%),
235 | linear-gradient(-45deg, transparent 53%, var(--bg2) 53%),
236 | linear-gradient(90deg, var(--fg) 70%, var(--bg2) 70%);
237 |
238 | &:active {
239 | background-image:
240 | linear-gradient(-135deg, transparent 53%, var(--fg) 53%),
241 | linear-gradient(-45deg, transparent 53%, var(--fg) 53%),
242 | linear-gradient(90deg, var(--bg2) 70%, var(--fg) 70%);
243 | }
244 | }
245 |
246 | &:increment {
247 | background-image:
248 | linear-gradient(135deg, transparent 53%, var(--bg2) 53%),
249 | linear-gradient(45deg, transparent 53%, var(--bg2) 53%),
250 | linear-gradient(-90deg, var(--fg) 70%, var(--bg2) 70%);
251 |
252 | &:active {
253 | background-image:
254 | linear-gradient(135deg, transparent 53%, var(--fg) 53%),
255 | linear-gradient(45deg, transparent 53%, var(--fg) 53%),
256 | linear-gradient(-90deg, var(--bg2) 70%, var(--fg) 70%);
257 | }
258 | }
259 | }
260 | }
261 |
262 | ::-webkit-scrollbar-track {
263 | background-color: var(--bg2) !important;
264 | background-clip: border-box;
265 | border: none !important;
266 | }
267 |
268 | ::-webkit-scrollbar-thumb {
269 | background-color: var(--fg2) !important;
270 | background-clip: padding-box;
271 | border: none !important;
272 | border-radius: 0 !important;
273 |
274 | &:active {
275 | background-color: var(--fg) !important;
276 | }
277 | }
278 |
279 | ::-webkit-scrollbar-corner,
280 | ::-webkit-scrollbar-resize {
281 | background-color: var(--bg2);
282 | }
283 |
--------------------------------------------------------------------------------
/boorus.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name Boorus
3 | @namespace github.com/openstyles/stylus
4 | @version 1.0.0
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 | ==/UserStyle== */
10 |
11 | // Variables
12 | vendors = official;
13 | $small-screen = 768px;
14 | $select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
15 | $select-size = 16px;
16 | $i = !important;
17 |
18 | // Stylus
19 | svar(var) {
20 | s('var(--%s)', var);
21 | }
22 |
23 | cond(n, yes, no) {
24 | (n == 0 ? no : yes) $i;
25 | }
26 |
27 | sel-cond(sel, pos) {
28 | pos ? s('%s-%s', sel, pos) : sel;
29 | }
30 |
31 | color-a(n, bright = true) {
32 | s = bright ? -2 : null;
33 | n = n > 6 ? n - 8 : n;
34 |
35 | s('hsla(var(--color%s-h), var(--color-s%s), var(--color-l%s), var(--bg-opacity))', n, s, s);
36 | }
37 |
38 | // Appearance
39 | bg(n =) {
40 | background-color: s('var(--bg%s)', n) $i;
41 |
42 | if (n == -tr || n == -tr2 || n == -tr3) {
43 | backdrop-filter: var(--popup-filter) $i;
44 | }
45 | }
46 |
47 | fg(n =) {
48 | color: s('var(--fg%s)', n) $i;
49 | }
50 |
51 | bgc(n1 =, n2 =) {
52 | bg(n1);
53 | fg(n2);
54 | }
55 |
56 | hl() {
57 | background-color: var(--hl) $i;
58 | color: var(--hl-fg) $i;
59 | }
60 |
61 | accent() {
62 | background-color: var(--accent) $i;
63 | color: var(--accent-fg) $i;
64 | }
65 |
66 | clr(n) {
67 | color: s('var(--color%s)', n) $i;
68 | }
69 |
70 | lnh() {
71 | line-height: var(--line-height) $i;
72 | }
73 |
74 | pad(pos =, n = 1) {
75 | {sel-cond(padding, pos)}: \
76 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
77 | }
78 |
79 | mar(pos =, n = 1) {
80 | {sel-cond(margin, pos)}: \
81 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
82 | }
83 |
84 | shd(n) {
85 | box-shadow: cond(n, s('var(--shadow-%s)', n), none);
86 | }
87 |
88 | rad(n = 1) {
89 | border-radius: cond(n, var(--border-radius), 0);
90 | }
91 |
92 | brd(pos =, color = border) {
93 | if (color) {
94 | color = svar(color);
95 | }
96 |
97 | {sel-cond(border, pos)}: \
98 | (color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
99 | if (!pos) {
100 | rad(pos);
101 | }
102 | }
103 |
104 | // Position
105 | box(w, h = w) {
106 | width: w $i;
107 | height: h $i;
108 | }
109 |
110 | flex(display = flex, alignment = center, justification =) {
111 | display: display $i;
112 | align-items: alignment $i;
113 | justify-content: justification $i;
114 | }
115 |
116 | // Animation
117 | anim(name =, func = ) {
118 | @media (prefers-reduced-motion: no-preference) {
119 | {name ? animation : transition}: name var(--trans-dur) func $i;
120 | }
121 | }
122 |
123 | dropfade() {
124 | anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
125 | }
126 |
127 | // Focus
128 | focus(p = focus) {
129 | anim();
130 |
131 | &:{p} {
132 | border-color: var(--hl) $i;
133 | box-shadow: var(--shadow-ins) var(--hl) $i;
134 | outline: none $i;
135 | }
136 | }
137 |
138 | header-focus(class = page-focus) {
139 | .{class} & {
140 | --bg2: var(--accent);
141 | --fg: var(--accent-fg);
142 | --border: var(--accent-border);
143 | }
144 |
145 | // Stylus is unable to recognise :where()
146 | :root:not(:-moz-window-inactive) & {
147 | --bg2: var(--accent);
148 | --fg: var(--accent-fg);
149 | --border: var(--accent-border);
150 | }
151 | }
152 |
153 | // Text
154 | replace-text(content =, text-color = fg, pos = after) {
155 | color: transparent $i;
156 | letter-spacing: -9999px $i;
157 |
158 | if (content) { // Replace
159 | &::{pos} {
160 | content: content $i;
161 | letter-spacing: 0 $i;
162 | color: svar(text-color) $i;
163 | }
164 | } else { // Hide
165 | * {
166 | letter-spacing: 0 $i;
167 | color: svar(text-color) $i;
168 | }
169 | }
170 | }
171 |
172 | hide-chars(amount, pos, bg =) {
173 | margin-{pos}: s('-%sch', amount) $i;
174 | position: relative $i;
175 |
176 | element = pos == left ? before : after;
177 | &::{element} {
178 | content: '' $i;
179 | position: absolute $i;
180 | inset: 0;
181 | box(s('%sch', amount), calc(1em * var(--line-height)));
182 | bg(bg);
183 | }
184 | }
185 |
186 | // Normalisation
187 | disabled() {
188 | &:disabled {
189 | opacity: 0.5 $i;
190 | cursor: not-allowed $i;
191 | }
192 | }
193 |
194 | normalise-select() {
195 | appearance: none $i;
196 | bgc(2);
197 | lnh();
198 | background-image:
199 | linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
200 | linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
201 | linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
202 | background-size: 20px 20px $i;
203 | background-repeat: no-repeat $i;
204 | background-position: right 50% $i;
205 | pad();
206 | padding-right: calc(var(--pad) + 20px) $i;
207 | brd();
208 | focus();
209 | disabled();
210 | }
211 |
212 | normalise-input() {
213 | bgc(2);
214 | lnh();
215 | pad();
216 | brd();
217 | focus();
218 | disabled();
219 |
220 | &::placeholder {
221 | fg(2);
222 | }
223 | }
224 |
225 | normalise-button() {
226 | bgc(2);
227 | lnh();
228 | background-image: none $i;
229 | padding: var(--pad) calc(var(--pad) * 2) $i;
230 | brd();
231 | cursor: pointer $i;
232 | focus();
233 | disabled();
234 | }
235 |
236 | normalise-color() {
237 | bg(2);
238 | pad(0);
239 | brd();
240 | box($select-size);
241 | focus();
242 | disabled();
243 |
244 | &::-webkit-color-swatch {
245 | brd(0);
246 | // Prevent from making it look like a radio input
247 | border-radius: calc(var(--border-radius) * 0.33) $i;
248 |
249 | &-wrapper {
250 | pad(0);
251 | }
252 | }
253 | }
254 |
255 | normalise-checkbox(label = true) {
256 | if (label) {
257 | /label {
258 | lnh();
259 | flex();
260 | gap: 1ch $i;
261 | }
262 | }
263 |
264 | appearance: none $i;
265 | bg(2);
266 | brd();
267 | // Prevent from making it look like a radio input
268 | border-radius: calc(var(--border-radius) * 0.33) $i;
269 | box-shadow: $select-shadow $i;
270 | mar(0);
271 | position: relative $i;
272 | box($select-size);
273 | min-width: $select-size $i;
274 | focus();
275 |
276 | &::before,
277 | &::after {
278 | content: '';
279 | position: absolute $i;
280 | inset: 0;
281 | background-color: var(--hl) $i;
282 | transform-origin: 0 0 $i;
283 | }
284 | &:disabled {
285 | &::before,
286 | &::after {
287 | background-color: var(--fg2) $i;
288 | }
289 | }
290 |
291 | &::before {
292 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
293 | }
294 | &:indeterminate::before {
295 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
296 | transition-duration: 33.3ms $i;
297 | }
298 | &::after {
299 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
300 | }
301 |
302 | &:checked {
303 | &::before {
304 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
305 | transition-duration: 33.3ms $i;
306 | }
307 | &::after {
308 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
309 | transition-delay: 33.3ms $i;
310 | anim();
311 | }
312 | }
313 | }
314 |
315 | normalise-radio() {
316 | appearance: none $i;
317 | bg(2);
318 | brd();
319 | border-radius: 50% $i;
320 | box-shadow: $select-shadow $i;
321 | mar(0);
322 | position: relative $i;
323 | box($select-size);
324 | focus();
325 |
326 | &::before {
327 | content: '';
328 | position: absolute $i;
329 | inset: $select-size / 5;
330 | background-color: var(--hl) $i;
331 | border-radius: 50% $i;
332 | transition: transform var(--trans-dur) linear $i;
333 | transform: scale(0) $i;
334 | }
335 | &:disabled::before {
336 | background-color: var(--fg2) $i;
337 | }
338 | &:checked::before {
339 | transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
340 | transform: scale(1) $i;
341 | anim();
342 | }
343 | }
344 |
345 | normalise-header(first = true) {
346 | fg();
347 | lnh();
348 | text-transform: uppercase $i;
349 | letter-spacing: 1px $i;
350 | pad(0);
351 | pad(bottom);
352 | brd(bottom);
353 | mar(0);
354 | mar(bottom);
355 | if (!first) {
356 | margin-top: calc(var(--pad) * 2) $i;
357 | }
358 | }
359 |
360 | @-moz-document domain("safebooru.org"), domain("yande.re") {
361 | /**
362 | * Hide elements
363 | **/
364 | .status-notice {
365 | display: none $i;
366 | }
367 |
368 | /**
369 | * Global
370 | **/
371 | body {
372 | bgc();
373 | lnh();
374 | }
375 | body,
376 | div,
377 | h1,
378 | h2,
379 | h3,
380 | h4,
381 | h5,
382 | h6,
383 | p,
384 | ul,
385 | li,
386 | dd,
387 | dt {
388 | background-color: unset;
389 | color: unset;
390 | }
391 | a {
392 | fg(-link);
393 |
394 | &:hover {
395 | text-decoration: underline;
396 | }
397 | }
398 | input {
399 | &[type="text"] {
400 | normalise-input();
401 | }
402 | &[type="submit"] {
403 | normalise-button();
404 | }
405 | }
406 | h1,
407 | h2,
408 | h3,
409 | h4,
410 | h5 {
411 | normalise-header(false);
412 | }
413 |
414 | /**
415 | * Header
416 | **/
417 | #header {
418 | bg(2);
419 | header-focus();
420 | mar(0);
421 | }
422 |
423 | /**
424 | * Content
425 | **/
426 | #content {
427 | pad(0);
428 | }
429 | #post {
430 | &-view,
431 | &-list {
432 | display: flex;
433 | }
434 | }
435 | .sidebar {
436 | bg(2);
437 | pad();
438 | brd(right);
439 | mar(0);
440 | width: var(--sidebar-width) $i;
441 |
442 | & > .space > h5 {
443 | mar(top, 0);
444 | }
445 |
446 | ul {
447 | mar(0);
448 | }
449 | input {
450 | --bg2: var(--bg);
451 | }
452 | h6 {
453 | margin-top: calc(1ch * var(--line-height));
454 |
455 | &::after {
456 | content: ':';
457 | }
458 | }
459 | }
460 | .tag-type {
461 | &-copyright,
462 | &-character,
463 | &-artist,
464 | &-general,
465 | &-metadata {
466 | & > span {
467 | fg(2);
468 | margin-left: 1ch;
469 | float: right;
470 | }
471 | }
472 |
473 | colors = {
474 | copyright: 12,
475 | character: 11,
476 | artist: 10,
477 | metadata: 9
478 | }
479 | for k, v in colors {
480 | &-{k} > a {
481 | clr(v);
482 | }
483 | }
484 | }
485 | .content {
486 | bg();
487 | padding: var(--body-pad);
488 | width: calc(100% - var(--body-pad) * 2) $i;
489 | }
490 | #image {
491 | mar(0);
492 | }
493 | }
494 |
495 | @-moz-document domain("safebooru.org") {
496 | /**
497 | * Hide elements
498 | **/
499 | #site-title,
500 | #subnavbar,
501 | .image-sublinks {
502 | display: none;
503 | }
504 |
505 | /**
506 | * Header
507 | **/
508 | #navbar {
509 | brd(bottom);
510 | height: var(--header-h);
511 | box-sizing: border-box;
512 |
513 | &,
514 | li {
515 | pad(0);
516 | flex();
517 | }
518 | a {
519 | fg(2);
520 | pad();
521 |
522 | &:hover {
523 | fg();
524 | text-decoration: none;
525 | }
526 | }
527 | .current-page a {
528 | hl();
529 | }
530 | }
531 | }
532 |
533 | @-moz-document domain("yande.re") {
534 | /**
535 | * Hide elements
536 | **/
537 | #title,
538 | #news-ticker {
539 | display: none $i;
540 | }
541 |
542 | /**
543 | * Global
544 | **/
545 | body {
546 | pad(0);
547 | }
548 |
549 | /**
550 | * Header
551 | **/
552 | #main-menu {
553 | bg(2);
554 | header-focus();
555 | brd(bottom);
556 |
557 | ul,
558 | li {
559 | mar(0);
560 | }
561 | ul {
562 | margin-bottom: -16px $i;
563 | }
564 | li {
565 | fg(2);
566 | pad();
567 | }
568 | a {
569 | color: inherit $i;
570 | }
571 | .current-menu {
572 | hl();
573 | }
574 | }
575 | .submenu {
576 | bg();
577 | brd();
578 | shd(big);
579 | dropfade();
580 |
581 | &-button {
582 | opacity: 1 $i;
583 | pad(0);
584 | }
585 |
586 | a {
587 | fg();
588 | pad();
589 |
590 | &:hover {
591 | hl();
592 | text-decoration: none;
593 | }
594 | }
595 | }
596 | }
597 |
598 |
--------------------------------------------------------------------------------
/wikis.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name Wikis
3 | @namespace github.com/openstyles/stylus
4 | @version 1.0.0
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 | ==/UserStyle== */
10 |
11 | // Variables
12 | vendors = official;
13 | $small-screen = 768px;
14 | $select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
15 | $select-size = 16px;
16 | $i = !important;
17 |
18 | // Stylus
19 | svar(var) {
20 | s('var(--%s)', var);
21 | }
22 |
23 | cond(n, yes, no) {
24 | (n == 0 ? no : yes) $i;
25 | }
26 |
27 | sel-cond(sel, pos) {
28 | pos ? s('%s-%s', sel, pos) : sel;
29 | }
30 |
31 | color-a(n, bright = true) {
32 | s = bright ? -2 : null;
33 | n = n > 6 ? n - 8 : n;
34 |
35 | s('hsla(var(--color%s-h), var(--color-s%s), var(--color-l%s), var(--bg-opacity))', n, s, s);
36 | }
37 |
38 | // Appearance
39 | bg(n =) {
40 | background-color: s('var(--bg%s)', n) $i;
41 |
42 | if (n == -tr || n == -tr2 || n == -tr3) {
43 | backdrop-filter: var(--popup-filter) $i;
44 | }
45 | }
46 |
47 | fg(n =) {
48 | color: s('var(--fg%s)', n) $i;
49 | }
50 |
51 | bgc(n1 =, n2 =) {
52 | bg(n1);
53 | fg(n2);
54 | }
55 |
56 | hl() {
57 | background-color: var(--hl) $i;
58 | color: var(--hl-fg) $i;
59 | }
60 |
61 | accent() {
62 | background-color: var(--accent) $i;
63 | color: var(--accent-fg) $i;
64 | }
65 |
66 | clr(n) {
67 | color: s('var(--color%s)', n) $i;
68 | }
69 |
70 | lnh() {
71 | line-height: var(--line-height) $i;
72 | }
73 |
74 | pad(pos =, n = 1) {
75 | {sel-cond(padding, pos)}: \
76 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
77 | }
78 |
79 | mar(pos =, n = 1) {
80 | {sel-cond(margin, pos)}: \
81 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
82 | }
83 |
84 | shd(n) {
85 | box-shadow: cond(n, s('var(--shadow-%s)', n), none);
86 | }
87 |
88 | rad(n = 1) {
89 | border-radius: cond(n, var(--border-radius), 0);
90 | }
91 |
92 | brd(pos =, color = border) {
93 | if (color) {
94 | color = svar(color);
95 | }
96 |
97 | {sel-cond(border, pos)}: \
98 | (color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
99 | if (!pos) {
100 | rad(pos);
101 | }
102 | }
103 |
104 | // Position
105 | box(w, h = w) {
106 | width: w $i;
107 | height: h $i;
108 | }
109 |
110 | flex(display = flex, alignment = center, justification =) {
111 | display: display $i;
112 | align-items: alignment $i;
113 | justify-content: justification $i;
114 | }
115 |
116 | // Animation
117 | anim(name =, func = ) {
118 | @media (prefers-reduced-motion: no-preference) {
119 | {name ? animation : transition}: name var(--trans-dur) func $i;
120 | }
121 | }
122 |
123 | dropfade() {
124 | anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
125 | }
126 |
127 | // Focus
128 | focus(p = focus) {
129 | anim();
130 |
131 | &:{p} {
132 | border-color: var(--hl) $i;
133 | box-shadow: var(--shadow-ins) var(--hl) $i;
134 | outline: none $i;
135 | }
136 | }
137 |
138 | header-focus(class = page-focus) {
139 | .{class} & {
140 | --bg2: var(--accent);
141 | --fg: var(--accent-fg);
142 | --border: var(--accent-border);
143 | }
144 |
145 | // Stylus is unable to recognise :where()
146 | :root:not(:-moz-window-inactive) & {
147 | --bg2: var(--accent);
148 | --fg: var(--accent-fg);
149 | --border: var(--accent-border);
150 | }
151 | }
152 |
153 | // Text
154 | replace-text(content =, text-color = fg, pos = after) {
155 | color: transparent $i;
156 | letter-spacing: -9999px $i;
157 |
158 | if (content) { // Replace
159 | &::{pos} {
160 | content: content $i;
161 | letter-spacing: 0 $i;
162 | color: svar(text-color) $i;
163 | }
164 | } else { // Hide
165 | * {
166 | letter-spacing: 0 $i;
167 | color: svar(text-color) $i;
168 | }
169 | }
170 | }
171 |
172 | hide-chars(amount, pos, bg =) {
173 | margin-{pos}: s('-%sch', amount) $i;
174 | position: relative $i;
175 |
176 | element = pos == left ? before : after;
177 | &::{element} {
178 | content: '' $i;
179 | position: absolute $i;
180 | inset: 0;
181 | box(s('%sch', amount), calc(1em * var(--line-height)));
182 | bg(bg);
183 | }
184 | }
185 |
186 | // Normalisation
187 | disabled() {
188 | &:disabled {
189 | opacity: 0.5 $i;
190 | cursor: not-allowed $i;
191 | }
192 | }
193 |
194 | normalise-select() {
195 | appearance: none $i;
196 | bgc(2);
197 | lnh();
198 | background-image:
199 | linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
200 | linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
201 | linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
202 | background-size: 20px 20px $i;
203 | background-repeat: no-repeat $i;
204 | background-position: right 50% $i;
205 | pad();
206 | padding-right: calc(var(--pad) + 20px) $i;
207 | brd();
208 | focus();
209 | disabled();
210 | }
211 |
212 | normalise-input() {
213 | bgc(2);
214 | lnh();
215 | pad();
216 | brd();
217 | focus();
218 | disabled();
219 |
220 | &::placeholder {
221 | fg(2);
222 | }
223 | }
224 |
225 | normalise-button() {
226 | bgc(2);
227 | lnh();
228 | background-image: none $i;
229 | padding: var(--pad) calc(var(--pad) * 2) $i;
230 | brd();
231 | cursor: pointer $i;
232 | focus();
233 | disabled();
234 | }
235 |
236 | normalise-color() {
237 | bg(2);
238 | pad(0);
239 | brd();
240 | box($select-size);
241 | focus();
242 | disabled();
243 |
244 | &::-webkit-color-swatch {
245 | brd(0);
246 | // Prevent from making it look like a radio input
247 | border-radius: calc(var(--border-radius) * 0.33) $i;
248 |
249 | &-wrapper {
250 | pad(0);
251 | }
252 | }
253 | }
254 |
255 | normalise-checkbox(label = true) {
256 | if (label) {
257 | /label {
258 | lnh();
259 | flex();
260 | gap: 1ch $i;
261 | }
262 | }
263 |
264 | appearance: none $i;
265 | bg(2);
266 | brd();
267 | // Prevent from making it look like a radio input
268 | border-radius: calc(var(--border-radius) * 0.33) $i;
269 | box-shadow: $select-shadow $i;
270 | mar(0);
271 | position: relative $i;
272 | box($select-size);
273 | min-width: $select-size $i;
274 | focus();
275 |
276 | &::before,
277 | &::after {
278 | content: '';
279 | position: absolute $i;
280 | inset: 0;
281 | background-color: var(--hl) $i;
282 | transform-origin: 0 0 $i;
283 | }
284 | &:disabled {
285 | &::before,
286 | &::after {
287 | background-color: var(--fg2) $i;
288 | }
289 | }
290 |
291 | &::before {
292 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
293 | }
294 | &:indeterminate::before {
295 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
296 | transition-duration: 33.3ms $i;
297 | }
298 | &::after {
299 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
300 | }
301 |
302 | &:checked {
303 | &::before {
304 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
305 | transition-duration: 33.3ms $i;
306 | }
307 | &::after {
308 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
309 | transition-delay: 33.3ms $i;
310 | anim();
311 | }
312 | }
313 | }
314 |
315 | normalise-radio() {
316 | appearance: none $i;
317 | bg(2);
318 | brd();
319 | border-radius: 50% $i;
320 | box-shadow: $select-shadow $i;
321 | mar(0);
322 | position: relative $i;
323 | box($select-size);
324 | focus();
325 |
326 | &::before {
327 | content: '';
328 | position: absolute $i;
329 | inset: $select-size / 5;
330 | background-color: var(--hl) $i;
331 | border-radius: 50% $i;
332 | transition: transform var(--trans-dur) linear $i;
333 | transform: scale(0) $i;
334 | }
335 | &:disabled::before {
336 | background-color: var(--fg2) $i;
337 | }
338 | &:checked::before {
339 | transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
340 | transform: scale(1) $i;
341 | anim();
342 | }
343 | }
344 |
345 | normalise-header(first = true) {
346 | fg();
347 | lnh();
348 | text-transform: uppercase $i;
349 | letter-spacing: 1px $i;
350 | pad(0);
351 | pad(bottom);
352 | brd(bottom);
353 | mar(0);
354 | mar(bottom);
355 | if (!first) {
356 | margin-top: calc(var(--pad) * 2) $i;
357 | }
358 | }
359 |
360 | @-moz-document \
361 | regexp("^https?://wiki\..*"),
362 | regexp("^https?://\w+\.wikipedia.org/wiki/.*\?useskin=vector$")
363 | {
364 | /**
365 | * Global
366 | **/
367 | * {
368 | box-sizing: border-box $i;
369 | }
370 | body {
371 | bg();
372 | }
373 | a {
374 | fg(-link);
375 | }
376 | #mw {
377 | &-page-base {
378 | background: var(--bg) none;
379 | }
380 | }
381 | .mw {
382 | &-body {
383 | bgc();
384 | padding: var(--body-pad) $i;
385 | brd(0);
386 | margin-left: var(--sidebar-width) $i;
387 | }
388 | &-content-container {
389 | max-width: unset $i;
390 | }
391 | &-header {
392 | margin-left: var(--sidebar-width);
393 | }
394 | &-list-item {
395 | lnh();
396 | pad(0);
397 | }
398 | &-page-container {
399 | pad(0);
400 | max-width: unset $i;
401 |
402 | &-inner {
403 | display: block $i;
404 | }
405 | }
406 | }
407 | .vector {
408 | &-body {
409 | lnh();
410 | }
411 | &-menu {
412 | pad(0);
413 | mar(0);
414 |
415 | &-heading {
416 | normalise-header(false);
417 | background: none $i;
418 | display: block $i;
419 | }
420 | &-content {
421 | mar(0);
422 |
423 | &-list {
424 | pad(0);
425 | }
426 | }
427 | }
428 | &-sticky-toc-container {
429 | pad(0);
430 | mar(0);
431 | }
432 | }
433 | .rt-tooltip {
434 | bgc(2);
435 | lnh();
436 | brd();
437 | shd(big);
438 | dropfade();
439 |
440 | &Content {
441 | mar(0);
442 | pad();
443 | }
444 | &Tail {
445 | background-image: linear-gradient(
446 | to top right,
447 | var(--border) 50%,
448 | transparent 50%
449 | )
450 |
451 | &::after {
452 | bg(2);
453 | }
454 | }
455 | }
456 | h2 {
457 | normalise-header();
458 | }
459 | li {
460 | mar(0);
461 | }
462 | #p-logo {
463 | margin: auto;
464 | display: none;
465 | }
466 | #left-navigation {
467 | margin-left: calc(var(--sidebar-width) + var(--body-pad));
468 | }
469 |
470 | /**
471 | * Hide elements
472 | **/
473 | #p-logo,
474 | #p-personal,
475 | #p-lang > .uls-settings-trigger,
476 |
477 | #vector-toc-collapsed-button, .toctoggle, .toctogglespan,
478 | #firstHeading, #siteSub, #contentSub, #contentSub2,
479 | .mw-editsection,
480 | .rt-settingsLink,
481 | #footer,
482 | {
483 | display: none;
484 | }
485 |
486 | /**
487 | * Sidebar
488 | **/
489 | #mw-panel {
490 | top: calc(50% + var(--header-h) / 2) $i;
491 |
492 | &::-webkit-scrollbar {
493 | display: none;
494 | }
495 |
496 | &,
497 | &-toc {
498 | bg(2);
499 | pad();
500 | brd(0);
501 | brd(right);
502 | mar(0);
503 | overflow: hidden scroll $i;
504 | display: block $i;
505 | position: fixed $i;
506 | left: 0 $i;
507 | box(var(--sidebar-width), calc(50% - var(--header-h) / 2));
508 | }
509 | &-toc {
510 | brd(bottom);
511 | top: var(--header-h) $i;
512 |
513 | &::after {
514 | display: none $i;
515 | }
516 | }
517 | }
518 | #toc {
519 | @extend #mw-panel
520 | @extend #mw-panel-toc
521 |
522 | &title {
523 | text-align: left $i;
524 | }
525 | &toggle {
526 | &,
527 | &span {
528 | display: one
529 | }
530 | }
531 |
532 | h2 {
533 | display: block;
534 | }
535 | }
536 | .toc {
537 | &title {
538 | text-align: left $i;
539 | }
540 | &number {
541 | fg();
542 |
543 | &::after {
544 | content: '.';
545 | }
546 | }
547 |
548 | ul ul {
549 | margin-left: 1.5em $i;
550 | }
551 | }
552 | #p-navigation-label {
553 | mar(top, 0);
554 | }
555 | .sidebar-toc {
556 | &-header {
557 | normalise-header();
558 | }
559 | &-title {
560 | fg();
561 | }
562 | &-list,
563 | &-contents {
564 | lnh();
565 | }
566 | &-text {
567 | pad(0);
568 | }
569 | &-numb::after {
570 | content: '.';
571 | }
572 | &-list-item:not(&-level-1) {
573 | padding-left: 1.5em $i;
574 | }
575 | }
576 | }
577 |
578 | @-moz-document domain("wiki.archlinux.org") {
579 | // Global
580 | a:not(.new) {
581 | #content &,
582 | #footer &,
583 | header.mw-header li:not(.new) &,
584 | #mw-navigation li:not(.new) &,
585 | #mw-panel li:not(.new) &,
586 | #column-one li:not(.new) & {
587 | &,
588 | &:hover,
589 | &:active:hover {
590 | fg(-link);
591 | }
592 | }
593 | }
594 | #mw {
595 | // Sidebar
596 | &-sidebar-button {
597 | display: none;
598 | }
599 | }
600 | }
601 |
--------------------------------------------------------------------------------
/stackexchange.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name StackExchange
3 | @namespace github.com/openstyles/stylus
4 | @version 1.0.0
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 | ==/UserStyle== */
10 |
11 | // Variables
12 | vendors = official;
13 | $small-screen = 768px;
14 | $select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
15 | $select-size = 16px;
16 | $i = !important;
17 |
18 | // Stylus
19 | svar(var) {
20 | s('var(--%s)', var);
21 | }
22 |
23 | cond(n, yes, no) {
24 | (n == 0 ? no : yes) $i;
25 | }
26 |
27 | sel-cond(sel, pos) {
28 | pos ? s('%s-%s', sel, pos) : sel;
29 | }
30 |
31 | color-a(n, bright = true) {
32 | s = bright ? -2 : null;
33 | n = n > 6 ? n - 8 : n;
34 |
35 | s('hsla(var(--color%s-h), var(--color-s%s), var(--color-l%s), var(--bg-opacity))', n, s, s);
36 | }
37 |
38 | // Appearance
39 | bg(n =) {
40 | background-color: s('var(--bg%s)', n) $i;
41 |
42 | if (n == -tr || n == -tr2 || n == -tr3) {
43 | backdrop-filter: var(--popup-filter) $i;
44 | }
45 | }
46 |
47 | fg(n =) {
48 | color: s('var(--fg%s)', n) $i;
49 | }
50 |
51 | bgc(n1 =, n2 =) {
52 | bg(n1);
53 | fg(n2);
54 | }
55 |
56 | hl() {
57 | background-color: var(--hl) $i;
58 | color: var(--hl-fg) $i;
59 | }
60 |
61 | accent() {
62 | background-color: var(--accent) $i;
63 | color: var(--accent-fg) $i;
64 | }
65 |
66 | clr(n) {
67 | color: s('var(--color%s)', n) $i;
68 | }
69 |
70 | lnh() {
71 | line-height: var(--line-height) $i;
72 | }
73 |
74 | pad(pos =, n = 1) {
75 | {sel-cond(padding, pos)}: \
76 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
77 | }
78 |
79 | mar(pos =, n = 1) {
80 | {sel-cond(margin, pos)}: \
81 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
82 | }
83 |
84 | shd(n) {
85 | box-shadow: cond(n, s('var(--shadow-%s)', n), none);
86 | }
87 |
88 | rad(n = 1) {
89 | border-radius: cond(n, var(--border-radius), 0);
90 | }
91 |
92 | brd(pos =, color = border) {
93 | if (color) {
94 | color = svar(color);
95 | }
96 |
97 | {sel-cond(border, pos)}: \
98 | (color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
99 | if (!pos) {
100 | rad(pos);
101 | }
102 | }
103 |
104 | // Position
105 | box(w, h = w) {
106 | width: w $i;
107 | height: h $i;
108 | }
109 |
110 | flex(display = flex, alignment = center, justification =) {
111 | display: display $i;
112 | align-items: alignment $i;
113 | justify-content: justification $i;
114 | }
115 |
116 | // Animation
117 | anim(name =, func = ) {
118 | @media (prefers-reduced-motion: no-preference) {
119 | {name ? animation : transition}: name var(--trans-dur) func $i;
120 | }
121 | }
122 |
123 | dropfade() {
124 | anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
125 | }
126 |
127 | // Focus
128 | focus(p = focus) {
129 | anim();
130 |
131 | &:{p} {
132 | border-color: var(--hl) $i;
133 | box-shadow: var(--shadow-ins) var(--hl) $i;
134 | outline: none $i;
135 | }
136 | }
137 |
138 | header-focus(class = page-focus) {
139 | .{class} & {
140 | --bg2: var(--accent);
141 | --fg: var(--accent-fg);
142 | --border: var(--accent-border);
143 | }
144 |
145 | // Stylus is unable to recognise :where()
146 | :root:not(:-moz-window-inactive) & {
147 | --bg2: var(--accent);
148 | --fg: var(--accent-fg);
149 | --border: var(--accent-border);
150 | }
151 | }
152 |
153 | // Text
154 | replace-text(content =, text-color = fg, pos = after) {
155 | color: transparent $i;
156 | letter-spacing: -9999px $i;
157 |
158 | if (content) { // Replace
159 | &::{pos} {
160 | content: content $i;
161 | letter-spacing: 0 $i;
162 | color: svar(text-color) $i;
163 | }
164 | } else { // Hide
165 | * {
166 | letter-spacing: 0 $i;
167 | color: svar(text-color) $i;
168 | }
169 | }
170 | }
171 |
172 | hide-chars(amount, pos, bg =) {
173 | margin-{pos}: s('-%sch', amount) $i;
174 | position: relative $i;
175 |
176 | element = pos == left ? before : after;
177 | &::{element} {
178 | content: '' $i;
179 | position: absolute $i;
180 | inset: 0;
181 | box(s('%sch', amount), calc(1em * var(--line-height)));
182 | bg(bg);
183 | }
184 | }
185 |
186 | // Normalisation
187 | disabled() {
188 | &:disabled {
189 | opacity: 0.5 $i;
190 | cursor: not-allowed $i;
191 | }
192 | }
193 |
194 | normalise-select() {
195 | appearance: none $i;
196 | bgc(2);
197 | lnh();
198 | background-image:
199 | linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
200 | linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
201 | linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
202 | background-size: 20px 20px $i;
203 | background-repeat: no-repeat $i;
204 | background-position: right 50% $i;
205 | pad();
206 | padding-right: calc(var(--pad) + 20px) $i;
207 | brd();
208 | focus();
209 | disabled();
210 | }
211 |
212 | normalise-input() {
213 | bgc(2);
214 | lnh();
215 | pad();
216 | brd();
217 | focus();
218 | disabled();
219 |
220 | &::placeholder {
221 | fg(2);
222 | }
223 | }
224 |
225 | normalise-button() {
226 | bgc(2);
227 | lnh();
228 | background-image: none $i;
229 | padding: var(--pad) calc(var(--pad) * 2) $i;
230 | brd();
231 | cursor: pointer $i;
232 | focus();
233 | disabled();
234 | }
235 |
236 | normalise-color() {
237 | bg(2);
238 | pad(0);
239 | brd();
240 | box($select-size);
241 | focus();
242 | disabled();
243 |
244 | &::-webkit-color-swatch {
245 | brd(0);
246 | // Prevent from making it look like a radio input
247 | border-radius: calc(var(--border-radius) * 0.33) $i;
248 |
249 | &-wrapper {
250 | pad(0);
251 | }
252 | }
253 | }
254 |
255 | normalise-checkbox(label = true) {
256 | if (label) {
257 | /label {
258 | lnh();
259 | flex();
260 | gap: 1ch $i;
261 | }
262 | }
263 |
264 | appearance: none $i;
265 | bg(2);
266 | brd();
267 | // Prevent from making it look like a radio input
268 | border-radius: calc(var(--border-radius) * 0.33) $i;
269 | box-shadow: $select-shadow $i;
270 | mar(0);
271 | position: relative $i;
272 | box($select-size);
273 | min-width: $select-size $i;
274 | focus();
275 |
276 | &::before, &::after {
277 | content: '';
278 | position: absolute $i;
279 | inset: 0;
280 | background-color: var(--hl) $i;
281 | transform-origin: 0 0 $i;
282 | }
283 | &:disabled {
284 | &::before, &::after {
285 | background-color: var(--fg2) $i;
286 | }
287 | }
288 |
289 | &::before {
290 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
291 | }
292 | &:indeterminate::before {
293 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
294 | transition-duration: 33.3ms $i;
295 | }
296 | &::after {
297 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
298 | }
299 |
300 | &:checked {
301 | &::before {
302 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
303 | transition-duration: 33.3ms $i;
304 | }
305 | &::after {
306 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
307 | transition-delay: 33.3ms $i;
308 | anim();
309 | }
310 | }
311 | }
312 |
313 | normalise-radio() {
314 | appearance: none $i;
315 | bg(2);
316 | brd();
317 | border-radius: 50% $i;
318 | box-shadow: $select-shadow $i;
319 | mar(0);
320 | position: relative $i;
321 | box($select-size);
322 | focus();
323 |
324 | &::before {
325 | content: '';
326 | position: absolute $i;
327 | inset: $select-size / 5;
328 | background-color: var(--hl) $i;
329 | border-radius: 50% $i;
330 | transition: transform var(--trans-dur) linear $i;
331 | transform: scale(0) $i;
332 | }
333 | &:disabled::before {
334 | background-color: var(--fg2) $i;
335 | }
336 | &:checked::before {
337 | transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
338 | transform: scale(1) $i;
339 | anim();
340 | }
341 | }
342 |
343 | normalise-header(first = true) {
344 | fg();
345 | lnh();
346 | text-transform: uppercase $i;
347 | letter-spacing: 1px $i;
348 | pad(0);
349 | pad(bottom);
350 | brd(bottom);
351 | mar(0);
352 | mar(bottom);
353 | if (!first) {
354 | margin-top: calc(var(--pad) * 2) $i;
355 | }
356 | }
357 |
358 | @-moz-document \
359 | domain("stackexchange.com"),
360 | domain("stackoverflow.com"),
361 | domain("superuser.com"),
362 | domain("askubuntu.com")
363 | {
364 | /**
365 | * Global
366 | **/
367 | // Variables
368 | body {
369 | // Colors
370 | --theme-background-color: var(--bg) $i;
371 | --theme-content-background-color: var(--bg) $i;
372 | --theme-content-border-color: transparent $i;
373 | --theme-body-font-color: var(--fg) $i;
374 | --theme-link-color: var(--fg-link) $i;
375 |
376 | --theme-topbar-accent-border: none $i;
377 |
378 | // Syntax highlighting
379 | --highlight-bg: var(--bg2) $i;
380 | --highlight-color: var(--fg) $i;
381 | --highlight-comment: var(--fg2) $i;
382 | --highlight-punctuation: var(--fg2) $i;
383 | --highlight-attribute: var(--color9) $i;
384 | --highlight-literal: var(--color10) $i;
385 | --highlight-symbol: var(--color11) $i;
386 | --highlight-keyword: var(--color12) $i;
387 | --highlight-variable: var(--color13) $i;
388 | --highlight-addition: var(--color2) $i;
389 | --highlight-deletion: var(--color1) $i;
390 |
391 | // Fonts
392 | --ff-sans: var(--font-normal) $i;
393 | --ff-serif: var(--font-normal) $i;
394 | --ff-mono: var(--font-code) $i;
395 |
396 | for i in fine caption {
397 | --fs-{i}: var(--font-size) $i;
398 | }
399 |
400 | // Spacing
401 | for i in 1 2 4 6 8 12 16 24 32 48 64 96 128 {
402 | --su{i}: var(--pad) $i;
403 | }
404 |
405 | // etc.
406 | for i in sm md lg xl {
407 | // Shadows
408 | --bs-{i}: var(--shadow-low) $i;
409 | --bs-{i}: var(--shadow-big) $i;
410 | --bs-{i}: var(--shadow-big) $i;
411 |
412 | // Border radius
413 | --br-{i}: var(--border-radius) $i;
414 | --br-{i}: var(--border-radius) $i;
415 | --br-{i}: var(--border-radius) $i;
416 |
417 | // Line height
418 | --lh-{i}: var(--line-height) $i;
419 | --lh-{i}: var(--line-height) $i;
420 | --lh-{i}: var(--line-height) $i;
421 | }
422 |
423 | for i in xs xxl base 6 {
424 | --lh-{i}: var(--line-height) $i;
425 | }
426 |
427 | --default-transition-duration: var(--trans-dur) $i;
428 |
429 | --reserve-bg2: var(--bg2);
430 | --reserve-fg: var(--fg);
431 | --reserve-border: var(--border);
432 | --reserve-pad: var(--pad);
433 |
434 | background-image: none;
435 | padding-top: var(--header-h);
436 | }
437 |
438 | /**
439 | * Global
440 | **/
441 | h1,
442 | h2,
443 | h3,
444 | h4,
445 | h5,
446 | h6 {
447 | lnh();
448 | font-weight: normal $i;
449 | }
450 |
451 | /**
452 | * Hide elements
453 | **/
454 | // I. Header
455 | .site-header,
456 | .s-navigation,
457 | .s-topbar--content,
458 | .s-topbar--container > nav,
459 | #announcement-banner,
460 |
461 | // II. Content
462 | #post-form,
463 | #left-sidebar,
464 | #sidebar,
465 | #footer,
466 | [href="/questions/ask"],
467 | .s-notice,
468 | .js-bookmark-btn,
469 | .js-search-hints > .bt,
470 | .js-post-comments-component,
471 | .js-post-menu
472 | {
473 | display: none $i;
474 | }
475 |
476 | /**
477 | * Content
478 | **/
479 | #content {
480 | padding: var(--body-pad);
481 | brd(0);
482 | }
483 | #mainbar {
484 | width: 100%;
485 | }
486 | .s {
487 | &-input {
488 | --pad: calc(var(--reserve-pad) / 2);
489 | // Don't get me affected by header-focus()
490 | --bg2: var(--reserve-bg2);
491 | --fg: var(--reserve-fg);
492 | --border: var(--reserve-border);
493 | normalise-input();
494 | bg();
495 |
496 | &-icon {
497 | display: none;
498 | }
499 | }
500 | &-select {
501 | &::before,
502 | &::after {
503 | display: none $i;
504 | }
505 |
506 | & > select {
507 | normalise-select();
508 | }
509 | }
510 | &-topbar {
511 | bg(2);
512 | header-focus();
513 | brd(bottom);
514 | shd(0);
515 | height: var(--header-h);
516 |
517 | &--searchbar {
518 | pad(0);
519 | }
520 | }
521 | &-popover {
522 | // Don't get me affected by header-focus()
523 | --bg2: var(--reserve-bg2);
524 | --fg: var(--reserve-fg);
525 | --border: var(--reserve-border);
526 | bg();
527 | brd();
528 |
529 | &--arrow::after {
530 | display: none $i;
531 | }
532 |
533 | .fc-dark {
534 | fg();
535 | }
536 | }
537 | &-prose {
538 | --s-prose-line-height: var(--line-height);
539 | --s-prose-spacing: var(--pad);
540 |
541 | pre:not(.s-code-block) {
542 | pad();
543 | brd();
544 |
545 | & > code {
546 | fg();
547 | }
548 | }
549 | }
550 | }
551 | #question-header {
552 | & + div {
553 | display: none $i;
554 | }
555 | & > h1 {
556 | normalise-header();
557 |
558 | & > a {
559 | fg();
560 | lnh();
561 | }
562 | }
563 | }
564 | #answers-header {
565 | mar(0);
566 | }
567 | .answers-subheader {
568 | normalise-header();
569 |
570 | & > :last-child > div {
571 | gap: 1ch;
572 | }
573 | }
574 | .bc-black-2,
575 | .bc-black-075 {
576 | border-color: var(--border) $i;
577 | }
578 | ul.comments-list .comment > *,
579 | .answer {
580 | brd(bottom);
581 | }
582 | .comment-date {
583 | &,
584 | & > a,
585 | & > a:hover {
586 | fg(2);
587 | }
588 | }
589 | .relativetime-clean {
590 | &::before {
591 | content: '(';
592 | }
593 | &::after {
594 | content: ')';
595 | }
596 | }
597 | }
598 |
599 |
--------------------------------------------------------------------------------
/duckduckgo.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name DuckDuckGo
3 | @namespace github.com/openstyles/stylus
4 | @version 2.0.1
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 |
10 | @var text content-width "Content width" 480px
11 |
12 | @var number grid-items "Grid items" 1
13 | @var checkbox grid-fixed "Fixed width for results" 0
14 | @var text grid-width "Grid width" 300px
15 |
16 | @var checkbox result-icon "Links -> favicons" 1
17 | @var checkbox result-hl "Highlight word matches" 1
18 | ==/UserStyle== */
19 |
20 | // Variables
21 | vendors = official;
22 | $small-screen = 768px;
23 | $select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
24 | $select-size = 16px;
25 | $i = !important;
26 |
27 | // Stylus
28 | svar(var) {
29 | s('var(--%s)', var);
30 | }
31 |
32 | cond(n, yes, no) {
33 | (n == 0 ? no : yes) $i;
34 | }
35 |
36 | sel-cond(sel, pos) {
37 | pos ? s('%s-%s', sel, pos) : sel;
38 | }
39 |
40 | color-a(n, bright = true) {
41 | s = bright ? -2 : null;
42 | n = n > 6 ? n - 8 : n;
43 |
44 | s('hsla(var(--color%s-h), var(--color-s%s), var(--color-l%s), var(--bg-opacity))', n, s, s);
45 | }
46 |
47 | // Appearance
48 | bg(n =) {
49 | background-color: s('var(--bg%s)', n) $i;
50 |
51 | if (n == -tr || n == -tr2 || n == -tr3) {
52 | backdrop-filter: var(--popup-filter) $i;
53 | }
54 | }
55 |
56 | fg(n =) {
57 | color: s('var(--fg%s)', n) $i;
58 | }
59 |
60 | bgc(n1 =, n2 =) {
61 | bg(n1);
62 | fg(n2);
63 | }
64 |
65 | hl() {
66 | background-color: var(--hl) $i;
67 | color: var(--hl-fg) $i;
68 | }
69 |
70 | accent() {
71 | background-color: var(--accent) $i;
72 | color: var(--accent-fg) $i;
73 | }
74 |
75 | clr(n) {
76 | color: s('var(--color%s)', n) $i;
77 | }
78 |
79 | lnh() {
80 | line-height: var(--line-height) $i;
81 | }
82 |
83 | pad(pos =, n = 1) {
84 | {sel-cond(padding, pos)}: \
85 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
86 | }
87 |
88 | mar(pos =, n = 1) {
89 | {sel-cond(margin, pos)}: \
90 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
91 | }
92 |
93 | shd(n) {
94 | box-shadow: cond(n, s('var(--shadow-%s)', n), none);
95 | }
96 |
97 | rad(n = 1) {
98 | border-radius: cond(n, var(--border-radius), 0);
99 | }
100 |
101 | brd(pos =, color = border) {
102 | if (color) {
103 | color = svar(color);
104 | }
105 |
106 | {sel-cond(border, pos)}: \
107 | (color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
108 | if (!pos) {
109 | rad(pos);
110 | }
111 | }
112 |
113 | // Position
114 | box(w, h = w) {
115 | width: w $i;
116 | height: h $i;
117 | }
118 |
119 | flex(display = flex, alignment = center, justification =) {
120 | display: display $i;
121 | align-items: alignment $i;
122 | justify-content: justification $i;
123 | }
124 |
125 | // Animation
126 | anim(name =, func = ) {
127 | @media (prefers-reduced-motion: no-preference) {
128 | {name ? animation : transition}: name var(--trans-dur) func $i;
129 | }
130 | }
131 |
132 | dropfade() {
133 | anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
134 | }
135 |
136 | // Focus
137 | focus(p = focus) {
138 | anim();
139 |
140 | &:{p} {
141 | border-color: var(--hl) $i;
142 | box-shadow: var(--shadow-ins) var(--hl) $i;
143 | outline: none $i;
144 | }
145 | }
146 |
147 | header-focus(class = page-focus) {
148 | .{class} & {
149 | --bg2: var(--accent);
150 | --fg: var(--accent-fg);
151 | --border: var(--accent-border);
152 | }
153 |
154 | // Stylus is unable to recognise :where()
155 | :root:not(:-moz-window-inactive) & {
156 | --bg2: var(--accent);
157 | --fg: var(--accent-fg);
158 | --border: var(--accent-border);
159 | }
160 | }
161 |
162 | // Text
163 | replace-text(content =, text-color = fg, pos = after) {
164 | color: transparent $i;
165 | letter-spacing: -9999px $i;
166 |
167 | if (content) { // Replace
168 | &::{pos} {
169 | content: content $i;
170 | letter-spacing: 0 $i;
171 | color: svar(text-color) $i;
172 | }
173 | } else { // Hide
174 | * {
175 | letter-spacing: 0 $i;
176 | color: svar(text-color) $i;
177 | }
178 | }
179 | }
180 |
181 | hide-chars(amount, pos, bg =) {
182 | margin-{pos}: s('-%sch', amount) $i;
183 | position: relative $i;
184 |
185 | element = pos == left ? before : after;
186 | &::{element} {
187 | content: '' $i;
188 | position: absolute $i;
189 | inset: 0;
190 | box(s('%sch', amount), calc(1em * var(--line-height)));
191 | bg(bg);
192 | }
193 | }
194 |
195 | // Normalisation
196 | disabled() {
197 | &:disabled {
198 | opacity: 0.5 $i;
199 | cursor: not-allowed $i;
200 | }
201 | }
202 |
203 | normalise-select() {
204 | appearance: none $i;
205 | bgc(2);
206 | lnh();
207 | background-image:
208 | linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
209 | linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
210 | linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
211 | background-size: 20px 20px $i;
212 | background-repeat: no-repeat $i;
213 | background-position: right 50% $i;
214 | pad();
215 | padding-right: calc(var(--pad) + 20px) $i;
216 | brd();
217 | focus();
218 | disabled();
219 | }
220 |
221 | normalise-input() {
222 | bgc(2);
223 | lnh();
224 | pad();
225 | brd();
226 | focus();
227 | disabled();
228 |
229 | &::placeholder {
230 | fg(2);
231 | }
232 | }
233 |
234 | normalise-button() {
235 | bgc(2);
236 | lnh();
237 | background-image: none $i;
238 | padding: var(--pad) calc(var(--pad) * 2) $i;
239 | brd();
240 | cursor: pointer $i;
241 | focus();
242 | disabled();
243 | }
244 |
245 | normalise-color() {
246 | bg(2);
247 | pad(0);
248 | brd();
249 | box($select-size);
250 | focus();
251 | disabled();
252 |
253 | &::-webkit-color-swatch {
254 | brd(0);
255 | // Prevent from making it look like a radio input
256 | border-radius: calc(var(--border-radius) * 0.33) $i;
257 |
258 | &-wrapper {
259 | pad(0);
260 | }
261 | }
262 | }
263 |
264 | normalise-checkbox(label = true) {
265 | if (label) {
266 | /label {
267 | lnh();
268 | flex();
269 | gap: 1ch $i;
270 | }
271 | }
272 |
273 | appearance: none $i;
274 | bg(2);
275 | brd();
276 | // Prevent from making it look like a radio input
277 | border-radius: calc(var(--border-radius) * 0.33) $i;
278 | box-shadow: $select-shadow $i;
279 | mar(0);
280 | position: relative $i;
281 | box($select-size);
282 | min-width: $select-size $i;
283 | focus();
284 |
285 | &::before,
286 | &::after {
287 | content: '';
288 | position: absolute $i;
289 | inset: 0;
290 | background-color: var(--hl) $i;
291 | transform-origin: 0 0 $i;
292 | }
293 | &:disabled {
294 | &::before,
295 | &::after {
296 | background-color: var(--fg2) $i;
297 | }
298 | }
299 |
300 | &::before {
301 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
302 | }
303 | &:indeterminate::before {
304 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
305 | transition-duration: 33.3ms $i;
306 | }
307 | &::after {
308 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
309 | }
310 |
311 | &:checked {
312 | &::before {
313 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
314 | transition-duration: 33.3ms $i;
315 | }
316 | &::after {
317 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
318 | transition-delay: 33.3ms $i;
319 | anim();
320 | }
321 | }
322 | }
323 |
324 | normalise-radio() {
325 | appearance: none $i;
326 | bg(2);
327 | brd();
328 | border-radius: 50% $i;
329 | box-shadow: $select-shadow $i;
330 | mar(0);
331 | position: relative $i;
332 | box($select-size);
333 | focus();
334 |
335 | &::before {
336 | content: '';
337 | position: absolute $i;
338 | inset: $select-size / 5;
339 | background-color: var(--hl) $i;
340 | border-radius: 50% $i;
341 | transition: transform var(--trans-dur) linear $i;
342 | transform: scale(0) $i;
343 | }
344 | &:disabled::before {
345 | background-color: var(--fg2) $i;
346 | }
347 | &:checked::before {
348 | transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
349 | transform: scale(1) $i;
350 | anim();
351 | }
352 | }
353 |
354 | normalise-header(first = true) {
355 | fg();
356 | lnh();
357 | text-transform: uppercase $i;
358 | letter-spacing: 1px $i;
359 | pad(0);
360 | pad(bottom);
361 | brd(bottom);
362 | mar(0);
363 | mar(bottom);
364 | if (!first) {
365 | margin-top: calc(var(--pad) * 2) $i;
366 | }
367 | }
368 |
369 | @-moz-document domain("html.duckduckgo.com") {
370 | /**
371 | * Variables
372 | **/
373 | :root {
374 | --reserve-bg: var(--bg);
375 | --reserve-fg: var(--fg);
376 | --reserve-fg2: var(--fg2);
377 | --reserve-border: var(--border);
378 | --pad-save: var(--pad);
379 | }
380 |
381 | // Settings
382 | body {
383 | --max-content-width: content-width;
384 | --grid-items: 100% / grid-items;
385 | --grid-width: grid-width;
386 | }
387 |
388 | /**
389 | * Global
390 | **/
391 | .body--html {
392 | bgc();
393 | lnh();
394 | }
395 | a {
396 | color: var(--fg-link) $i;
397 |
398 | &:not(:hover) {
399 | text-decoration: none;
400 | }
401 | }
402 | input,
403 | select,
404 | textarea {
405 | fg();
406 | }
407 |
408 | /**
409 | * Hide elements
410 | **/
411 | .header__logo-wrap,
412 | .search__button,
413 | .feedback-btn,
414 | .result--ad {
415 | display: none $i;
416 | }
417 |
418 | /**
419 | * Header
420 | **/
421 | #header {
422 | --pad: calc(var(--pad-save) / 2);
423 | bg(2);
424 | header-focus();
425 | pad();
426 | brd(bottom);
427 | height: var(--header-h);
428 | display: flex;
429 | position: fixed;
430 | z-index: 1;
431 | }
432 | .header__form {
433 | // Don't get me affected by header-focus()
434 | --bg: var(--reserve-bg);
435 | --fg: var(--reserve-fg);
436 | --border: var(--reserve-border);
437 | text-align: center;
438 | pad(left, 0);
439 | margin: unset;
440 | width: 100%;
441 | display: flex;
442 | gap: var(--pad);
443 | }
444 | .search {
445 | background-color: transparent $i;
446 | pad(0);
447 | brd(0);
448 | shd(0);
449 |
450 | &--header {
451 | mar(bottom);
452 | box(unset);
453 | flex-grow: 1;
454 | }
455 | &__input {
456 | normalise-input();
457 | top: 0;
458 | box(
459 | calc(100% - var(--pad) * 2 - var(--border-width) * 2),
460 | calc(var(--font-size) * var(--line-height) - var(--border-width) * 2)
461 | );
462 |
463 | .header & {
464 | --bg2: var(--bg);
465 | }
466 | }
467 | }
468 | .frm__select {
469 | all: unset;
470 | display: inline-flex;
471 | width: auto;
472 |
473 | &::after {
474 | display: none;
475 | }
476 |
477 | &:hover {
478 | bg(2);
479 | }
480 |
481 | select {
482 | normalise-select();
483 | --bg2: var(--bg);
484 | }
485 | }
486 |
487 | /**
488 | * Content
489 | **/
490 | .serp__results {
491 | padding: var(--body-pad) $i;
492 | padding-top: calc(var(--header-h) + var(--body-pad)) $i;
493 | margin: auto;
494 | max-width: var(--max-content-width);
495 | }
496 | .msg {
497 | fg();
498 | text-align: center;
499 | pad(0);
500 | mar(0);
501 | margin-bottom: calc(var(--body-pad) - var(--pad)) $i;
502 | width: 100%;
503 |
504 | b {
505 | &::before,
506 | &::after {
507 | content: '"';
508 | }
509 | }
510 | a {
511 | color: var(--fg-link);
512 | }
513 | }
514 | .zci {
515 | pad(0);
516 | margin: auto;
517 | width: var(--max-content-width);
518 |
519 | &-wrapper {
520 | bg(2);
521 | lnh();
522 | padding: var(--pad) 0;
523 | brd(bottom);
524 | }
525 | &__heading {
526 | fg();
527 | text-align: center;
528 | pad(bottom);
529 | }
530 | &__image {
531 | padding-left: calc(var(--pad) * 2);
532 | pad(bottom);
533 | }
534 | }
535 | .result {
536 | brd();
537 | mar(bottom, 0);
538 |
539 | &,
540 | &:hover {
541 | bg(2);
542 | }
543 |
544 | &s {
545 | pad(0);
546 | mar(0);
547 | display: flex;
548 | flex-direction: grid-items > 1 ? row : column;
549 | gap: var(--pad);
550 | }
551 | &__body {
552 | pad();
553 | }
554 | &__a,
555 | &__extras,
556 | &__icon,
557 | &__snippet {
558 | mar(0);
559 | }
560 | &__title {
561 | normalise-header();
562 | }
563 | &__a {
564 | fg();
565 | lnh();
566 |
567 | &::before {
568 | content: '';
569 | position: absolute;
570 | inset: 0;
571 | z-index: 1;
572 | }
573 | }
574 | &__icon,
575 | &__icon__img {
576 | vertical-align: unset;
577 | box(var(--font-size));
578 | max-width: unset $i;
579 | }
580 | &__type {
581 | bgc(2, 2);
582 | lnh();
583 | pad(0);
584 | mar(0);
585 | position: absolute;
586 | top: var(--pad);
587 | right: var(--pad);
588 | vertical-align: unset;
589 | }
590 | &__snippet {
591 | lnh();
592 | display: block;
593 |
594 | &,
595 | &:hover,
596 | & > b,
597 | & > strong {
598 | fg();
599 | }
600 |
601 | if (result-hl) {
602 | b,
603 | strong {
604 | hl();
605 | }
606 | }
607 | }
608 | &__extras + .clear::before {
609 | content: 'No description';
610 | }
611 |
612 | // Breaks if line height > 1.25
613 | if (result-icon) {
614 | &__a {
615 | width: calc(100% - var(--font-size) - 1ch);
616 |
617 | &[href*=".pdf"] {
618 | width: calc(100% - var(--font-size) - 5ch - 3px);
619 | }
620 | }
621 | &__type {
622 | right: calc(var(--pad) + var(--font-size) + 1ch);
623 | }
624 | &__icon {
625 | position: absolute;
626 | top: calc(
627 | var(--pad) * -2 - var(--font-size) * var(--line-height) \
628 | + var(--border-width)
629 | );
630 | right: 0;
631 | }
632 | &__url {
633 | display: none;
634 | }
635 | } else {
636 | &__snippet {
637 | mar(top);
638 | }
639 | &__a:has(> &__type) {
640 | width: calc(100% - 4ch - 3px);
641 | }
642 | }
643 | }
644 | .nav-link {
645 | pad(left, 0);
646 | width: 100%;
647 | }
648 | .btn {
649 | normalise-button();
650 |
651 | &:hover,
652 | &:focus {
653 | bgc(2);
654 | }
655 | }
656 |
657 | if (grid-items > 1) {
658 | .serp__results {
659 | margin: unset;
660 | max-width: unset;
661 | }
662 | .nav-link {
663 | text-align: center;
664 | }
665 | .result {
666 | width: grid-fixed \
667 | ? var(--grid-width) \
668 | : calc(var(--grid-items) - var(--pad));
669 |
670 | &s {
671 | justify-content: center;
672 | flex-wrap: wrap;
673 | }
674 | }
675 | }
676 | }
677 |
678 |
--------------------------------------------------------------------------------
/unsplash.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name Unsplash
3 | @namespace github.com/openstyles/stylus
4 | @version 1.0.2
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 | ==/UserStyle== */
10 |
11 | // Variables
12 | vendors = official;
13 | $small-screen = 768px;
14 | $select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
15 | $select-size = 16px;
16 | $i = !important;
17 |
18 | // Stylus
19 | svar(var) {
20 | s('var(--%s)', var);
21 | }
22 |
23 | cond(n, yes, no) {
24 | (n == 0 ? no : yes) $i;
25 | }
26 |
27 | sel-cond(sel, pos) {
28 | pos ? s('%s-%s', sel, pos) : sel;
29 | }
30 |
31 | color-a(n, bright = true) {
32 | s = bright ? -2 : null;
33 | n = n > 6 ? n - 8 : n;
34 |
35 | s('hsla(var(--color%s-h), var(--color-s%s), var(--color-l%s), var(--bg-opacity))', n, s, s);
36 | }
37 |
38 | // Appearance
39 | bg(n =) {
40 | background-color: s('var(--bg%s)', n) $i;
41 |
42 | if (n == -tr || n == -tr2 || n == -tr3) {
43 | backdrop-filter: var(--popup-filter) $i;
44 | }
45 | }
46 |
47 | fg(n =) {
48 | color: s('var(--fg%s)', n) $i;
49 | }
50 |
51 | bgc(n1 =, n2 =) {
52 | bg(n1);
53 | fg(n2);
54 | }
55 |
56 | hl() {
57 | background-color: var(--hl) $i;
58 | color: var(--hl-fg) $i;
59 | }
60 |
61 | accent() {
62 | background-color: var(--accent) $i;
63 | color: var(--accent-fg) $i;
64 | }
65 |
66 | clr(n) {
67 | color: s('var(--color%s)', n) $i;
68 | }
69 |
70 | lnh() {
71 | line-height: var(--line-height) $i;
72 | }
73 |
74 | pad(pos =, n = 1) {
75 | {sel-cond(padding, pos)}: \
76 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
77 | }
78 |
79 | mar(pos =, n = 1) {
80 | {sel-cond(margin, pos)}: \
81 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
82 | }
83 |
84 | shd(n) {
85 | box-shadow: cond(n, s('var(--shadow-%s)', n), none);
86 | }
87 |
88 | rad(n = 1) {
89 | border-radius: cond(n, var(--border-radius), 0);
90 | }
91 |
92 | brd(pos =, color = border) {
93 | if (color) {
94 | color = svar(color);
95 | }
96 |
97 | {sel-cond(border, pos)}: \
98 | (color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
99 | if (!pos) {
100 | rad(pos);
101 | }
102 | }
103 |
104 | // Position
105 | box(w, h = w) {
106 | width: w $i;
107 | height: h $i;
108 | }
109 |
110 | flex(display = flex, alignment = center, justification =) {
111 | display: display $i;
112 | align-items: alignment $i;
113 | justify-content: justification $i;
114 | }
115 |
116 | // Animation
117 | anim(name =, func = ) {
118 | @media (prefers-reduced-motion: no-preference) {
119 | {name ? animation : transition}: name var(--trans-dur) func $i;
120 | }
121 | }
122 |
123 | dropfade() {
124 | anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
125 | }
126 |
127 | // Focus
128 | focus(p = focus) {
129 | anim();
130 |
131 | &:{p} {
132 | border-color: var(--hl) $i;
133 | box-shadow: var(--shadow-ins) var(--hl) $i;
134 | outline: none $i;
135 | }
136 | }
137 |
138 | header-focus(class = page-focus) {
139 | .{class} & {
140 | --bg2: var(--accent);
141 | --fg: var(--accent-fg);
142 | --border: var(--accent-border);
143 | }
144 |
145 | // Stylus is unable to recognise :where()
146 | :root:not(:-moz-window-inactive) & {
147 | --bg2: var(--accent);
148 | --fg: var(--accent-fg);
149 | --border: var(--accent-border);
150 | }
151 | }
152 |
153 | // Text
154 | replace-text(content =, text-color = fg, pos = after) {
155 | color: transparent $i;
156 | letter-spacing: -9999px $i;
157 |
158 | if (content) { // Replace
159 | &::{pos} {
160 | content: content $i;
161 | letter-spacing: 0 $i;
162 | color: svar(text-color) $i;
163 | }
164 | } else { // Hide
165 | * {
166 | letter-spacing: 0 $i;
167 | color: svar(text-color) $i;
168 | }
169 | }
170 | }
171 |
172 | hide-chars(amount, pos, bg =) {
173 | margin-{pos}: s('-%sch', amount) $i;
174 | position: relative $i;
175 |
176 | element = pos == left ? before : after;
177 | &::{element} {
178 | content: '' $i;
179 | position: absolute $i;
180 | inset: 0;
181 | box(s('%sch', amount), calc(1em * var(--line-height)));
182 | bg(bg);
183 | }
184 | }
185 |
186 | // Normalisation
187 | disabled() {
188 | &:disabled {
189 | opacity: 0.5 $i;
190 | cursor: not-allowed $i;
191 | }
192 | }
193 |
194 | normalise-select() {
195 | appearance: none $i;
196 | bgc(2);
197 | lnh();
198 | background-image:
199 | linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
200 | linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
201 | linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
202 | background-size: 20px 20px $i;
203 | background-repeat: no-repeat $i;
204 | background-position: right 50% $i;
205 | pad();
206 | padding-right: calc(var(--pad) + 20px) $i;
207 | brd();
208 | focus();
209 | disabled();
210 | }
211 |
212 | normalise-input() {
213 | bgc(2);
214 | lnh();
215 | pad();
216 | brd();
217 | focus();
218 | disabled();
219 |
220 | &::placeholder {
221 | fg(2);
222 | }
223 | }
224 |
225 | normalise-button() {
226 | bgc(2);
227 | lnh();
228 | background-image: none $i;
229 | padding: var(--pad) calc(var(--pad) * 2) $i;
230 | brd();
231 | cursor: pointer $i;
232 | focus();
233 | disabled();
234 | }
235 |
236 | normalise-color() {
237 | bg(2);
238 | pad(0);
239 | brd();
240 | box($select-size);
241 | focus();
242 | disabled();
243 |
244 | &::-webkit-color-swatch {
245 | brd(0);
246 | // Prevent from making it look like a radio input
247 | border-radius: calc(var(--border-radius) * 0.33) $i;
248 |
249 | &-wrapper {
250 | pad(0);
251 | }
252 | }
253 | }
254 |
255 | normalise-checkbox(label = true) {
256 | if (label) {
257 | /label {
258 | lnh();
259 | flex();
260 | gap: 1ch $i;
261 | }
262 | }
263 |
264 | appearance: none $i;
265 | bg(2);
266 | brd();
267 | // Prevent from making it look like a radio input
268 | border-radius: calc(var(--border-radius) * 0.33) $i;
269 | box-shadow: $select-shadow $i;
270 | mar(0);
271 | position: relative $i;
272 | box($select-size);
273 | min-width: $select-size $i;
274 | focus();
275 |
276 | &::before,
277 | &::after {
278 | content: '';
279 | position: absolute $i;
280 | inset: 0;
281 | background-color: var(--hl) $i;
282 | transform-origin: 0 0 $i;
283 | }
284 | &:disabled {
285 | &::before,
286 | &::after {
287 | background-color: var(--fg2) $i;
288 | }
289 | }
290 |
291 | &::before {
292 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
293 | }
294 | &:indeterminate::before {
295 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
296 | transition-duration: 33.3ms $i;
297 | }
298 | &::after {
299 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
300 | }
301 |
302 | &:checked {
303 | &::before {
304 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
305 | transition-duration: 33.3ms $i;
306 | }
307 | &::after {
308 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
309 | transition-delay: 33.3ms $i;
310 | anim();
311 | }
312 | }
313 | }
314 |
315 | normalise-radio() {
316 | appearance: none $i;
317 | bg(2);
318 | brd();
319 | border-radius: 50% $i;
320 | box-shadow: $select-shadow $i;
321 | mar(0);
322 | position: relative $i;
323 | box($select-size);
324 | focus();
325 |
326 | &::before {
327 | content: '';
328 | position: absolute $i;
329 | inset: $select-size / 5;
330 | background-color: var(--hl) $i;
331 | border-radius: 50% $i;
332 | transition: transform var(--trans-dur) linear $i;
333 | transform: scale(0) $i;
334 | }
335 | &:disabled::before {
336 | background-color: var(--fg2) $i;
337 | }
338 | &:checked::before {
339 | transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
340 | transform: scale(1) $i;
341 | anim();
342 | }
343 | }
344 |
345 | normalise-header(first = true) {
346 | fg();
347 | lnh();
348 | text-transform: uppercase $i;
349 | letter-spacing: 1px $i;
350 | pad(0);
351 | pad(bottom);
352 | brd(bottom);
353 | mar(0);
354 | mar(bottom);
355 | if (!first) {
356 | margin-top: calc(var(--pad) * 2) $i;
357 | }
358 | }
359 |
360 | @-moz-document domain("unsplash.com") {
361 | /**
362 | * Global
363 | **/
364 | body {
365 | bgc();
366 | lnh();
367 | }
368 | .M5vdR {
369 | padding: var(--body-pad);
370 | }
371 |
372 | /**
373 | * Hide elements
374 | **/
375 | [data-test="client-side-hydration-complete"] > header + div:not([data-test]), // Sticky header
376 | header > nav > :not(:first-child):not(.hzGh7), // Everything but the logo/search
377 |
378 | a[rel="sponsored"],
379 | span._1jzuO.Gehj1, // Featured
380 | figure:has(a[href^="/plus"]), // Unsplash+
381 | div[style^="--row-gutter"] > div, // Related collections
382 |
383 | [data-test="search-photos-route"] h2, // "Results for..."
384 | [data-test="page-header-title"], // Page title
385 |
386 | button[title="Clear"], // Clear input
387 | button[title="Clear"] + div, // ^
388 | button[title="Add to collection"],
389 | button[title="Like"],
390 |
391 | [data-test="editorial-route"] > :first-child, // Photo of the day
392 | #app > div[data-test] > footer, // Footer
393 | #app > div[data-test] > footer + div, // ^
394 | [data-test="search-photos-route"] + div // ^
395 | {
396 | display: none $i;
397 | }
398 |
399 | /**
400 | * Header
401 | **/
402 | #app > div > header {
403 | header-focus();
404 | brd(bottom);
405 |
406 | & > nav {
407 | /[data-test="search-route"] > div:first-child,
408 | & {
409 | bg(2);
410 | pad(left);
411 | pad(right);
412 | }
413 |
414 | & > :first-child {
415 | margin-right: 20px;
416 | }
417 | & > a > svg {
418 | fill: var(--fg);
419 | }
420 | }
421 | form {
422 | bg();
423 | brd();
424 | }
425 | /#react-autowhatever-1 {
426 | bg(-tr);
427 | pad(0);
428 | row-gap: 0;
429 | brd();
430 | shd(big);
431 |
432 | & > div {
433 | pad();
434 | }
435 | li > div > div {
436 | normalise-button();
437 |
438 | div[style="width: 8px;"], svg {
439 | display: none;
440 | }
441 | }
442 | }
443 | [aria-labelledby="unsplash-home"] + div > span:last-child,
444 | input::placeholder {
445 | fg(2);
446 | }
447 | }
448 |
449 | /**
450 | * Popups
451 | **/
452 | button + [role="menu"] > div > div > div {
453 | bg(-tr);
454 | brd();
455 | shd(big);
456 |
457 | div[style="height: 8px;"] {
458 | display: none;
459 | }
460 | [aria-label="Visual search form"] {
461 | & > div > div > div {
462 | border-color: var(--fg);
463 | border-radius: var(--border-radius);
464 |
465 | & > div > div[class] {
466 | brd(0);
467 | height: unset;
468 |
469 | & > label {
470 | display: none;
471 | }
472 | input {
473 | normalise-input();
474 | }
475 | }
476 | }
477 | button > div > div:first-child {
478 | display: none;
479 | }
480 | }
481 | h4 {
482 | margin: auto;
483 |
484 | & + div {
485 | display: none;
486 | }
487 | }
488 |
489 | // IDK what is below
490 | [download] {
491 | fg();
492 |
493 | &,
494 | &:hover {
495 | transition: none $i;
496 | }
497 |
498 | &:hover {
499 | hl();
500 |
501 | span {
502 | color: var(--hl-fg) $i;
503 | }
504 | }
505 |
506 | span {
507 | fg(2);
508 | }
509 | }
510 | [style^="border-bottom-color"] {
511 | border-bottom-color: var(--border) $i;
512 | }
513 | hr {
514 | background-color: var(--border) $i;
515 | mar(0);
516 | }
517 | }
518 | [id^="popover-search"] > div > div > div > div {
519 | pad(0);
520 |
521 | li > a[href] {
522 | padding: var(--pad) 0;
523 | height: unset;
524 | transition: none;
525 |
526 | &:hover:not([aria-disabled="true"]) {
527 | hl();
528 | }
529 |
530 | & > div {
531 | margin: 0 calc(var(--pad) * 2);
532 | }
533 | }
534 | }
535 | [data-test="search-route"] > div:first-child {
536 | position: unset $i;
537 |
538 | & > div {
539 | box-shadow: inset 0 -1px var(--accent-border);
540 | }
541 | li > a {
542 | fg();
543 | padding: 0 var(--pad);
544 | height: 32px;
545 |
546 | &[aria-current] {
547 | bg();
548 | shd(0);
549 | brd(,accent-border);
550 | brd(bottom, 0);
551 | }
552 | &:hover:not([aria-current]) {
553 | background-color: var(--accent-border);
554 | }
555 |
556 | svg {
557 | fill: var(--fg);
558 | }
559 | }
560 | button[aria-haspopup="true"] span {
561 | fg();
562 | }
563 | }
564 |
565 | // Title
566 | [data-test="search-route"] > div:nth-child(2) {
567 | pad(top, 0);
568 | padding-bottom: calc(var(--pad) * 2) $i;
569 |
570 | & > div {
571 | margin-top: calc(var(--pad) * 2) $i;
572 | }
573 | }
574 | .FBggh { // top
575 | brd(0);
576 |
577 | & > a {
578 | normalise-button();
579 | flex();
580 | }
581 | }
582 |
583 | // Tags
584 | [data-test="page-header-title"] + div > div::after {
585 | background-image: linear-gradient(
586 | 90deg,
587 | transparent 0,
588 | var(--bg) 90%
589 | );
590 | }
591 | [title="scroll list to the right"]:hover svg {
592 | fill: var(--fg);
593 | }
594 | .mkUrf > div {
595 | bg(2);
596 | brd();
597 |
598 | &:hover {
599 | border-color: var(--hl);
600 |
601 | ~/ a,
602 | & a {
603 | color: var(--fg);
604 | }
605 | }
606 | }
607 |
608 | // Image
609 | [style="--column-gutter:24px;--columns:3"] {
610 | --column-gutter: var(--pad) $i;
611 | }
612 | [style="--row-gutter:24px"] {
613 | --row-gutter: var(--pad) $i;
614 | }
615 | #app figure {
616 | // Tags
617 | & > div > div + div a {
618 | normalise-button();
619 | margin-top: 1px;
620 | }
621 |
622 | // Buttons
623 | [itemprop="contentUrl"] + div button,
624 | [title="Download photo"] {
625 | normalise-button();
626 | height: unset $i;
627 | }
628 | }
629 |
630 | // Photo page
631 | [data-test="photos-route"] {
632 | & > :first-child > div > div {
633 | position: unset;
634 | }
635 |
636 | header {
637 | bgc(2);
638 | header-focus();
639 | brd(bottom);
640 |
641 | div:last-child {
642 | & > div:not(:last-child) button { // Like photo, add to collections
643 | display: none;
644 | }
645 | & > div:last-child { // Download
646 | & > div > a[download] {
647 | background-color: var(--color10);
648 | border-radius: var(--border-radius) 0 0 var(--border-radius);
649 |
650 | & + div { // Divider
651 | display: none;
652 | }
653 | }
654 | /#popover-download-button {
655 | margin-left: -1px;
656 | height: unset $i;
657 |
658 | button {
659 | background-color: var(--color10);
660 | border-radius: 0 var(--border-radius) var(--border-radius) 0;
661 | }
662 | }
663 | & > div > a[download],
664 | /#popover-download-button button {
665 | border-color: var(--color2);
666 |
667 | &,
668 | &:hover {
669 | anim();
670 | }
671 |
672 | &:hover {
673 | background-color: var(--color2);
674 | }
675 | }
676 | }
677 | }
678 | }
679 | }
680 | }
681 |
682 |
--------------------------------------------------------------------------------
/searchfox.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name Searchfox
3 | @namespace github.com/openstyles/stylus
4 | @version 2.0.0
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 | ==/UserStyle== */
10 |
11 | // Variables
12 | vendors = official;
13 | $small-screen = 768px;
14 | $select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
15 | $select-size = 16px;
16 | $i = !important;
17 |
18 | // Stylus
19 | svar(var) {
20 | s('var(--%s)', var);
21 | }
22 |
23 | cond(n, yes, no) {
24 | (n == 0 ? no : yes) $i;
25 | }
26 |
27 | sel-cond(sel, pos) {
28 | pos ? s('%s-%s', sel, pos) : sel;
29 | }
30 |
31 | color-a(n, bright = true) {
32 | s = bright ? -2 : null;
33 | n = n > 6 ? n - 8 : n;
34 |
35 | s('hsla(var(--color%s-h), var(--color-s%s), var(--color-l%s), var(--bg-opacity))', n, s, s);
36 | }
37 |
38 | // Appearance
39 | bg(n =) {
40 | background-color: s('var(--bg%s)', n) $i;
41 |
42 | if (n == -tr || n == -tr2 || n == -tr3) {
43 | backdrop-filter: var(--popup-filter) $i;
44 | }
45 | }
46 |
47 | fg(n =) {
48 | color: s('var(--fg%s)', n) $i;
49 | }
50 |
51 | bgc(n1 =, n2 =) {
52 | bg(n1);
53 | fg(n2);
54 | }
55 |
56 | hl() {
57 | background-color: var(--hl) $i;
58 | color: var(--hl-fg) $i;
59 | }
60 |
61 | accent() {
62 | background-color: var(--accent) $i;
63 | color: var(--accent-fg) $i;
64 | }
65 |
66 | clr(n) {
67 | color: s('var(--color%s)', n) $i;
68 | }
69 |
70 | lnh() {
71 | line-height: var(--line-height) $i;
72 | }
73 |
74 | pad(pos =, n = 1) {
75 | {sel-cond(padding, pos)}: \
76 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
77 | }
78 |
79 | mar(pos =, n = 1) {
80 | {sel-cond(margin, pos)}: \
81 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
82 | }
83 |
84 | shd(n) {
85 | box-shadow: cond(n, s('var(--shadow-%s)', n), none);
86 | }
87 |
88 | rad(n = 1) {
89 | border-radius: cond(n, var(--border-radius), 0);
90 | }
91 |
92 | brd(pos =, color = border) {
93 | if (color) {
94 | color = svar(color);
95 | }
96 |
97 | {sel-cond(border, pos)}: \
98 | (color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
99 | if (!pos) {
100 | rad(pos);
101 | }
102 | }
103 |
104 | // Position
105 | box(w, h = w) {
106 | width: w $i;
107 | height: h $i;
108 | }
109 |
110 | flex(display = flex, alignment = center, justification =) {
111 | display: display $i;
112 | align-items: alignment $i;
113 | justify-content: justification $i;
114 | }
115 |
116 | // Animation
117 | anim(name =, func = ) {
118 | @media (prefers-reduced-motion: no-preference) {
119 | {name ? animation : transition}: name var(--trans-dur) func $i;
120 | }
121 | }
122 |
123 | dropfade() {
124 | anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
125 | }
126 |
127 | // Focus
128 | focus(p = focus) {
129 | anim();
130 |
131 | &:{p} {
132 | border-color: var(--hl) $i;
133 | box-shadow: var(--shadow-ins) var(--hl) $i;
134 | outline: none $i;
135 | }
136 | }
137 |
138 | header-focus(class = page-focus) {
139 | .{class} & {
140 | --bg2: var(--accent);
141 | --fg: var(--accent-fg);
142 | --border: var(--accent-border);
143 | }
144 |
145 | // Stylus is unable to recognise :where()
146 | :root:not(:-moz-window-inactive) & {
147 | --bg2: var(--accent);
148 | --fg: var(--accent-fg);
149 | --border: var(--accent-border);
150 | }
151 | }
152 |
153 | // Text
154 | // TODO: replace this
155 | replace-text(content =, text-color = fg, pos = after) {
156 | color: transparent $i;
157 | font-size: 0 $i;
158 |
159 | if (content) { // Replace
160 | &::{pos} {
161 | content: content $i;
162 | font-size: var(--font-size) $i;
163 | color: svar(text-color) $i;
164 | }
165 | } else { // Hide
166 | * {
167 | font-size: var(--font-size) $i;
168 | color: svar(text-color) $i;
169 | }
170 | }
171 | }
172 |
173 | hide-chars(amount, pos, bg =) {
174 | margin-{pos}: s('-%sch', amount) $i;
175 | position: relative $i;
176 |
177 | element = pos == left ? before : after;
178 | &::{element} {
179 | content: '' $i;
180 | position: absolute $i;
181 | inset: 0;
182 | box(s('%sch', amount), calc(1em * var(--line-height)));
183 | bg(bg);
184 | }
185 | }
186 |
187 | // Normalisation
188 | disabled() {
189 | &:disabled {
190 | opacity: 0.5 $i;
191 | cursor: not-allowed $i;
192 | }
193 | }
194 |
195 | normalise-select() {
196 | appearance: none $i;
197 | bgc(2);
198 | lnh();
199 | background-image:
200 | linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
201 | linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
202 | linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
203 | background-size: 20px 20px $i;
204 | background-repeat: no-repeat $i;
205 | background-position: right 50% $i;
206 | pad();
207 | padding-right: calc(var(--pad) + 20px) $i;
208 | brd();
209 | focus();
210 | disabled();
211 | }
212 |
213 | normalise-input() {
214 | bgc(2);
215 | lnh();
216 | pad();
217 | brd();
218 | focus();
219 | disabled();
220 |
221 | &::placeholder {
222 | fg(2);
223 | }
224 | }
225 |
226 | normalise-button() {
227 | bgc(2);
228 | lnh();
229 | background-image: none $i;
230 | padding: var(--pad) calc(var(--pad) * 2) $i;
231 | brd();
232 | cursor: pointer $i;
233 | focus();
234 | disabled();
235 | }
236 |
237 | normalise-color() {
238 | bg(2);
239 | pad(0);
240 | brd();
241 | box($select-size);
242 | focus();
243 | disabled();
244 |
245 | &::-webkit-color-swatch {
246 | brd(0);
247 | // Prevent from making it look like a radio input
248 | border-radius: calc(var(--border-radius) * 0.33) $i;
249 |
250 | &-wrapper {
251 | pad(0);
252 | }
253 | }
254 | }
255 |
256 | normalise-checkbox(label = true) {
257 | if (label) {
258 | /label {
259 | lnh();
260 | flex();
261 | gap: 1ch $i;
262 | }
263 | }
264 |
265 | appearance: none $i;
266 | bg(2);
267 | brd();
268 | // Prevent from making it look like a radio input
269 | border-radius: calc(var(--border-radius) * 0.33) $i;
270 | box-shadow: $select-shadow $i;
271 | mar(0);
272 | position: relative $i;
273 | box($select-size);
274 | min-width: $select-size $i;
275 | focus();
276 |
277 | &::before,
278 | &::after {
279 | content: '';
280 | position: absolute $i;
281 | inset: 0;
282 | background-color: var(--hl) $i;
283 | transform-origin: 0 0 $i;
284 | }
285 | &:disabled {
286 | &::before,
287 | &::after {
288 | background-color: var(--fg2) $i;
289 | }
290 | }
291 |
292 | &::before {
293 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
294 | }
295 | &:indeterminate::before {
296 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
297 | transition-duration: 33.3ms $i;
298 | }
299 | &::after {
300 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
301 | }
302 |
303 | &:checked {
304 | &::before {
305 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
306 | transition-duration: 33.3ms $i;
307 | }
308 | &::after {
309 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
310 | transition-delay: 33.3ms $i;
311 | anim();
312 | }
313 | }
314 | }
315 |
316 | normalise-radio() {
317 | appearance: none $i;
318 | bg(2);
319 | brd();
320 | border-radius: 50% $i;
321 | box-shadow: $select-shadow $i;
322 | mar(0);
323 | position: relative $i;
324 | box($select-size);
325 | focus();
326 |
327 | &::before {
328 | content: '';
329 | position: absolute $i;
330 | inset: $select-size / 5;
331 | background-color: var(--hl) $i;
332 | border-radius: 50% $i;
333 | transition: transform var(--trans-dur) linear $i;
334 | transform: scale(0) $i;
335 | }
336 | &:disabled::before {
337 | background-color: var(--fg2) $i;
338 | }
339 | &:checked::before {
340 | transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
341 | transform: scale(1) $i;
342 | anim();
343 | }
344 | }
345 |
346 | normalise-header(first = true) {
347 | fg();
348 | lnh();
349 | text-transform: uppercase $i;
350 | letter-spacing: 1px $i;
351 | pad(0);
352 | pad(bottom);
353 | brd(bottom);
354 | mar(0);
355 | mar(bottom);
356 | if (!first) {
357 | margin-top: calc(var(--pad) * 2) $i;
358 | }
359 | }
360 |
361 | @-moz-document domain("searchfox.org") {
362 | /**
363 | * Variables
364 | **/
365 | :root {
366 | --page-background: var(--bg) $i;
367 | --page-foreground: var(--fg) $i;
368 | --page-border-color: var(--border) $i;
369 |
370 | --revision-text-color: var(--fg) $i;
371 | --link-color: var(--fg-link) $i;
372 | --link-hover-color: var(--fg-link) $i;
373 |
374 | colors = {
375 | type: 11
376 | reserved: 12,
377 | string: 13,
378 | regex: 14,
379 | }
380 | for k, v in colors {
381 | --syntax-{k}-color: s('var(--color%s)', v) $i;
382 | }
383 | --syntax-comment-color: var(--fg2) $i;
384 | --syntax-symbol-highlight: var(--hl) $i;
385 |
386 | --diff-minus-line-background: color-a(1) $i;
387 | --diff-plus-line-background: color-a(2) $i;
388 |
389 | --blame-popup-background: var(--bg) $i;
390 | --blame-popup-color: var(--fg) $i;
391 |
392 | --search-box-background-image: none $i;
393 |
394 | --reserve-fg: var(--fg);
395 | --reserve-pad: var(--pad);
396 |
397 | lnh();
398 | }
399 |
400 | /**
401 | * Global
402 | **/
403 | a {
404 | fg(-link);
405 |
406 | &:not(:hover) {
407 | text-decoration: none $i;
408 | }
409 | }
410 | h1,
411 | h2,
412 | h3,
413 | h4 {
414 | normalise-header(false);
415 | }
416 | input {
417 | &:not([type]),
418 | &[type="text"],
419 | &[type="number"],
420 | &[type="search"],
421 | /.field,
422 | /textarea {
423 | normalise-input();
424 |
425 | @media (prefers-reduced-motion: no-preference) {
426 | transition-property: border-color $i;
427 | }
428 | }
429 | &[type="submit"],
430 | &[type="button"],
431 | /button:not(.copy) {
432 | normalise-button();
433 | }
434 | &[type="checkbox"] {
435 | normalise-checkbox(false);
436 | margin-right: 1ch $i;
437 | }
438 | &[type="range"] {
439 | normalise-range();
440 | shd(0);
441 | }
442 | }
443 | input,
444 | button {
445 | height: unset $i;
446 | }
447 | select {
448 | normalise-select();
449 | }
450 | label {
451 | flex();
452 | }
453 | .navpanel-icon,
454 | [class*="icon-"]::before {
455 | fg();
456 | lnh();
457 | mar(0);
458 | box(var(--font-size));
459 | }
460 | .icon-cog:not(:hover)::before {
461 | fg(2);
462 | }
463 | .copy {
464 | background-color: transparent $i;
465 | brd(0);
466 | box(unset);
467 | vertical-align: unset $i;
468 |
469 | &:not(:hover) > span::before {
470 | fg(2);
471 | }
472 | }
473 |
474 | /**
475 | * Hide elements
476 | **/
477 | .navpanel-icon.icon-down-dir,
478 | #tree-switcher,
479 | #foot, .footer {
480 | display: none;
481 | }
482 |
483 | /**
484 | * Content
485 | **/
486 | // Global
487 | .content {
488 | pad(0);
489 |
490 | &:has(> #panel) {
491 | margin-left: var(--sidebar-width);
492 | }
493 | }
494 | .breadcrumbs {
495 | bg(2);
496 | pad();
497 | brd(bottom);
498 | width: 100%;
499 | }
500 | .path-separator {
501 | fg(2);
502 | mar(0);
503 | }
504 | table.folder-content {
505 | mar(0);
506 |
507 | a,
508 | th {
509 | padding: var(--pad);
510 | }
511 | a:not(.mimetype-fixed-container) {
512 | fg(2);
513 | }
514 | .description {
515 | pad(0);
516 | }
517 | tbody tr:hover {
518 | hl();
519 | --fg: var(--hl-fg);
520 | --fg2: var(--hl-fg);
521 | }
522 | }
523 | .mimetype-fixed-container {
524 | fg();
525 | pad();
526 | padding-left: calc(16px + var(--pad) * 2) $i;
527 | }
528 |
529 | // Header
530 | #search-box {
531 | bg(2);
532 | fg();
533 | pad();
534 | brd(bottom);
535 | header-focus();
536 |
537 | fieldset {
538 | gap: var(--pad);
539 | min-height: unset $i;
540 | }
541 | input {
542 | --bg2: var(--bg);
543 | --fg: var(--reserve-fg);
544 | --pad: calc(var(--reserve-pad) / 2);
545 | }
546 | }
547 | #option-section {
548 | pad(0);
549 | flex-direction: row;
550 | gap: var(--pad);
551 | }
552 | #revision {
553 | fg();
554 | pad(top);
555 | }
556 |
557 | // Settings
558 | .intro,
559 | .settings-page {
560 | margin: var(--body-pad);
561 | padding-left: var(--body-pad) $i;
562 | }
563 |
564 | // Search
565 | .results,
566 | .file {
567 | tr {
568 | lnh();
569 | }
570 | a {
571 | fg();
572 | }
573 | }
574 | .results {
575 | mar(0);
576 |
577 | td {
578 | padding: 0 var(--pad);
579 |
580 | &:first-child {
581 | bg(2);
582 | brd(right);
583 |
584 | &,
585 | a {
586 | fg(2);
587 | font-family: var(--font-code) $i;
588 |
589 | &:hover {
590 | fg();
591 | text-decoration: none $i;
592 | }
593 | }
594 | }
595 | }
596 | }
597 | .result-head > td {
598 | pad(top);
599 | }
600 |
601 | // Code
602 | .info-box {
603 | pad();
604 | brd(0);
605 | brd(bottom);
606 | mar(0);
607 |
608 | colors = {
609 | error: 9,
610 | warning: 10,
611 | info: 11,
612 | }
613 | for k, v in colors {
614 | &-{k} {
615 | background-color: color-a(v) $i;
616 | border-color: s('var(--color%s)', v) $i;
617 | }
618 | }
619 |
620 | h4 {
621 | mar(top, 0);
622 | }
623 | }
624 | .source-line-with-number {
625 | lnh();
626 | pad(0);
627 |
628 | &.stuck {
629 | bg();
630 | }
631 | &.last-stuck {
632 | brd(bottom);
633 | shd(0);
634 | }
635 | }
636 | .line-number {
637 | @extend .results td:first-child;
638 | padding: 0 var(--pad);
639 | }
640 | .hovered {
641 | hl();
642 | }
643 |
644 | /**
645 | * Popups
646 | **/
647 | #context-menu {
648 | brd();
649 | shd(big);
650 | }
651 | .contextmenu {
652 | &-same-section {
653 | brd(0);
654 | }
655 | &-new-section {
656 | brd(top);
657 | }
658 | &-link {
659 | fg();
660 | pad();
661 |
662 | &:hover {
663 | hl();
664 | }
665 |
666 | strong {
667 | &::before,
668 | &::after {
669 | content: '"';
670 | }
671 | }
672 | }
673 | }
674 |
675 | /**
676 | * Sidebar
677 | **/
678 | #panel {
679 | --big-header-height: calc(
680 | var(--header-h) + (
681 | var(--font-size) * var(--line-height) + var(--pad) * 2 + var(--border-width) * 2
682 | )
683 | );
684 | bg(2);
685 | brd(0);
686 | brd(right);
687 | left: 0;
688 | top: var(--big-header-height);
689 | box(var(--sidebar-width), calc(100vh - var(--big-header-height)));
690 | max-height: unset;
691 |
692 | &-toggle {
693 | background-color: transparent $i;
694 | brd(0);
695 | normalise-header();
696 | mar();
697 | display: flex;
698 | width: calc(100% - var(--pad) * 2);
699 | pointer-events: none;
700 | }
701 |
702 | input,
703 | button {
704 | --bg2: var(--bg);
705 | }
706 | h4 {
707 | mar(left);
708 | mar(right);
709 | }
710 | .item {
711 | pad();
712 |
713 | &:hover {
714 | background-color: transparent $i;
715 | text-decoration: underline $i;
716 | }
717 | }
718 | button.item {
719 | background-color: transparent $i;
720 | brd(0);
721 | shd(0);
722 | }
723 | }
724 | #show-settings {
725 | margin-left: auto;
726 | pointer-events: all;
727 | }
728 | .panel-accel {
729 | pad();
730 | }
731 | .blame-popup {
732 | pad();
733 | brd();
734 | shd(big);
735 | }
736 | }
737 |
--------------------------------------------------------------------------------
/nitter.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name Nitter
3 | @namespace github.com/openstyles/stylus
4 | @version 1.2.0
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 | ==/UserStyle== */
10 |
11 | // Variables
12 | vendors = official;
13 | $small-screen = 768px;
14 | $select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
15 | $select-size = 16px;
16 | $i = !important;
17 |
18 | // Stylus
19 | svar(var) {
20 | s('var(--%s)', var);
21 | }
22 |
23 | cond(n, yes, no) {
24 | (n == 0 ? no : yes) $i;
25 | }
26 |
27 | sel-cond(sel, pos) {
28 | pos ? s('%s-%s', sel, pos) : sel;
29 | }
30 |
31 | color-a(n, bright = true) {
32 | s = bright ? -2 : null;
33 | n = n > 6 ? n - 8 : n;
34 |
35 | s('hsla(var(--color%s-h), var(--color-s%s), var(--color-l%s), var(--bg-opacity))', n, s, s);
36 | }
37 |
38 | // Appearance
39 | bg(n =) {
40 | background-color: s('var(--bg%s)', n) $i;
41 |
42 | if (n == -tr || n == -tr2 || n == -tr3) {
43 | backdrop-filter: var(--popup-filter) $i;
44 | }
45 | }
46 |
47 | fg(n =) {
48 | color: s('var(--fg%s)', n) $i;
49 | }
50 |
51 | bgc(n1 =, n2 =) {
52 | bg(n1);
53 | fg(n2);
54 | }
55 |
56 | hl() {
57 | background-color: var(--hl) $i;
58 | color: var(--hl-fg) $i;
59 | }
60 |
61 | accent() {
62 | background-color: var(--accent) $i;
63 | color: var(--accent-fg) $i;
64 | }
65 |
66 | clr(n) {
67 | color: s('var(--color%s)', n) $i;
68 | }
69 |
70 | lnh() {
71 | line-height: var(--line-height) $i;
72 | }
73 |
74 | pad(pos =, n = 1) {
75 | {sel-cond(padding, pos)}: \
76 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
77 | }
78 |
79 | mar(pos =, n = 1) {
80 | {sel-cond(margin, pos)}: \
81 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
82 | }
83 |
84 | shd(n) {
85 | box-shadow: cond(n, s('var(--shadow-%s)', n), none);
86 | }
87 |
88 | rad(n = 1) {
89 | border-radius: cond(n, var(--border-radius), 0);
90 | }
91 |
92 | brd(pos =, color = border) {
93 | if (color) {
94 | color = svar(color);
95 | }
96 |
97 | {sel-cond(border, pos)}: \
98 | (color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
99 | if (!pos) {
100 | rad(pos);
101 | }
102 | }
103 |
104 | // Position
105 | box(w, h = w) {
106 | width: w $i;
107 | height: h $i;
108 | }
109 |
110 | flex(display = flex, alignment = center, justification =) {
111 | display: display $i;
112 | align-items: alignment $i;
113 | justify-content: justification $i;
114 | }
115 |
116 | // Animation
117 | anim(name =, func = ) {
118 | @media (prefers-reduced-motion: no-preference) {
119 | {name ? animation : transition}: name var(--trans-dur) func $i;
120 | }
121 | }
122 |
123 | dropfade() {
124 | anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
125 | }
126 |
127 | // Focus
128 | focus(p = focus) {
129 | anim();
130 |
131 | &:{p} {
132 | border-color: var(--hl) $i;
133 | box-shadow: var(--shadow-ins) var(--hl) $i;
134 | outline: none $i;
135 | }
136 | }
137 |
138 | header-focus(class = page-focus) {
139 | .{class} & {
140 | --bg2: var(--accent);
141 | --fg: var(--accent-fg);
142 | --border: var(--accent-border);
143 | }
144 |
145 | // Stylus is unable to recognise :where()
146 | :root:not(:-moz-window-inactive) & {
147 | --bg2: var(--accent);
148 | --fg: var(--accent-fg);
149 | --border: var(--accent-border);
150 | }
151 | }
152 |
153 | // Text
154 | replace-text(content =, text-color = fg, pos = after) {
155 | color: transparent $i;
156 | letter-spacing: -9999px $i;
157 |
158 | if (content) { // Replace
159 | &::{pos} {
160 | content: content $i;
161 | letter-spacing: 0 $i;
162 | color: svar(text-color) $i;
163 | }
164 | } else { // Hide
165 | * {
166 | letter-spacing: 0 $i;
167 | color: svar(text-color) $i;
168 | }
169 | }
170 | }
171 |
172 | hide-chars(amount, pos, bg =) {
173 | margin-{pos}: s('-%sch', amount) $i;
174 | position: relative $i;
175 |
176 | element = pos == left ? before : after;
177 | &::{element} {
178 | content: '' $i;
179 | position: absolute $i;
180 | inset: 0;
181 | box(s('%sch', amount), calc(1em * var(--line-height)));
182 | bg(bg);
183 | }
184 | }
185 |
186 | // Normalisation
187 | disabled() {
188 | &:disabled {
189 | opacity: 0.5 $i;
190 | cursor: not-allowed $i;
191 | }
192 | }
193 |
194 | normalise-select() {
195 | appearance: none $i;
196 | bgc(2);
197 | lnh();
198 | background-image:
199 | linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
200 | linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
201 | linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
202 | background-size: 20px 20px $i;
203 | background-repeat: no-repeat $i;
204 | background-position: right 50% $i;
205 | pad();
206 | padding-right: calc(var(--pad) + 20px) $i;
207 | brd();
208 | focus();
209 | disabled();
210 | }
211 |
212 | normalise-input() {
213 | bgc(2);
214 | lnh();
215 | pad();
216 | brd();
217 | focus();
218 | disabled();
219 |
220 | &::placeholder {
221 | fg(2);
222 | }
223 | }
224 |
225 | normalise-button() {
226 | bgc(2);
227 | lnh();
228 | background-image: none $i;
229 | padding: var(--pad) calc(var(--pad) * 2) $i;
230 | brd();
231 | cursor: pointer $i;
232 | focus();
233 | disabled();
234 | }
235 |
236 | normalise-color() {
237 | bg(2);
238 | pad(0);
239 | brd();
240 | box($select-size);
241 | focus();
242 | disabled();
243 |
244 | &::-webkit-color-swatch {
245 | brd(0);
246 | // Prevent from making it look like a radio input
247 | border-radius: calc(var(--border-radius) * 0.33) $i;
248 |
249 | &-wrapper {
250 | pad(0);
251 | }
252 | }
253 | }
254 |
255 | normalise-checkbox(label = true) {
256 | if (label) {
257 | /label {
258 | lnh();
259 | flex();
260 | gap: 1ch $i;
261 | }
262 | }
263 |
264 | appearance: none $i;
265 | bg(2);
266 | brd();
267 | // Prevent from making it look like a radio input
268 | border-radius: calc(var(--border-radius) * 0.33) $i;
269 | box-shadow: $select-shadow $i;
270 | mar(0);
271 | position: relative $i;
272 | box($select-size);
273 | min-width: $select-size $i;
274 | focus();
275 |
276 | &::before,
277 | &::after {
278 | content: '';
279 | position: absolute $i;
280 | inset: 0;
281 | background-color: var(--hl) $i;
282 | transform-origin: 0 0 $i;
283 | }
284 | &:disabled {
285 | &::before,
286 | &::after {
287 | background-color: var(--fg2) $i;
288 | }
289 | }
290 |
291 | &::before {
292 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
293 | }
294 | &:indeterminate::before {
295 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
296 | transition-duration: 33.3ms $i;
297 | }
298 | &::after {
299 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
300 | }
301 |
302 | &:checked {
303 | &::before {
304 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
305 | transition-duration: 33.3ms $i;
306 | }
307 | &::after {
308 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
309 | transition-delay: 33.3ms $i;
310 | anim();
311 | }
312 | }
313 | }
314 |
315 | normalise-radio() {
316 | appearance: none $i;
317 | bg(2);
318 | brd();
319 | border-radius: 50% $i;
320 | box-shadow: $select-shadow $i;
321 | mar(0);
322 | position: relative $i;
323 | box($select-size);
324 | focus();
325 |
326 | &::before {
327 | content: '';
328 | position: absolute $i;
329 | inset: $select-size / 5;
330 | background-color: var(--hl) $i;
331 | border-radius: 50% $i;
332 | transition: transform var(--trans-dur) linear $i;
333 | transform: scale(0) $i;
334 | }
335 | &:disabled::before {
336 | background-color: var(--fg2) $i;
337 | }
338 | &:checked::before {
339 | transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
340 | transform: scale(1) $i;
341 | anim();
342 | }
343 | }
344 |
345 | normalise-header(first = true) {
346 | fg();
347 | lnh();
348 | text-transform: uppercase $i;
349 | letter-spacing: 1px $i;
350 | pad(0);
351 | pad(bottom);
352 | brd(bottom);
353 | mar(0);
354 | mar(bottom);
355 | if (!first) {
356 | margin-top: calc(var(--pad) * 2) $i;
357 | }
358 | }
359 |
360 | @-moz-document \
361 | domain("nitter.poast.org"),
362 | domain("nitter.privacydev.net"),
363 | domain("xcancel.com")
364 | {
365 | /**
366 | * Variables
367 | **/
368 | :root {
369 | --accent_bg: var(--accent);
370 | }
371 | body {
372 | --bg_color: var(--bg);
373 | --bg_panel: var(--bg2);
374 | --bg_elements: var(--bg2);
375 | --bg_overlays: var(--bg2);
376 | --bg_hover: var(--bg2);
377 |
378 | --accent: var(--accent_bg);
379 | --accent_light: var(--accent);
380 | --accent_dark: var(--accent);
381 | --accent_border: var(--accent-border);
382 |
383 | --fg_color: var(--fg);
384 | --fg_faded: var(--fg2);
385 | --fg_dark: var(--fg2);
386 | --fg_nav: var(--fg2);
387 | --more_replies_dots: var(--fg2);
388 | --error_red: var(--color9);
389 | --verified_blue: var(--color12);
390 | --icon_text: var(--fg);
391 | --tab: var(--fg2);
392 | --tab_selected: var(--accent);
393 | --profile_stat: var(--fg);
394 |
395 | --grey: var(--fg2);
396 | --dark_grey: var(--bg);
397 | --border_grey: var(--border);
398 | --play_button: var(--fg2);
399 | --play_button_hover: var(--fg);
400 |
401 | --reserve-fg: var(--fg);
402 |
403 | lnh();
404 | }
405 |
406 | /**
407 | * Global
408 | **/
409 | * {
410 | box-sizing: border-box $i;
411 | }
412 | a {
413 | color: var(--fg-link);
414 | }
415 | input,
416 | select {
417 | position: unset $i;
418 | height: unset $i;
419 | }
420 | input {
421 | &[type="text"],
422 | &[type="date"] {
423 | normalise-input();
424 | box(unset);
425 | }
426 | }
427 | .pref {
428 | &-group {
429 | mar(0);
430 | margin-bottom: calc(var(--pad) / 2) $i;
431 | flex(,,space-between);
432 | }
433 | &-input {
434 | height: unset $i;
435 | }
436 | }
437 | .checkbox {
438 | display: none;
439 |
440 | &-container {
441 | flex-direction: row-reverse;
442 | justify-content: start $i;
443 |
444 | input {
445 | normalise-checkbox();
446 | opacity: 1;
447 | }
448 | }
449 | }
450 | button {
451 | normalise-button();
452 | }
453 | select {
454 | normalise-select();
455 | }
456 |
457 | /**
458 | * Hide elements
459 | **/
460 | [href="https://liberapay.com/zedeus"],
461 | .date-range .icon-container,
462 | .inner-nav > a,
463 | .top-ref
464 | {
465 | display: none;
466 | }
467 |
468 | /**
469 | * Header
470 | **/
471 | nav {
472 | bg(2);
473 | brd(bottom);
474 | header-focus();
475 | shd(0);
476 | height: unset $i;
477 | }
478 | .inner-nav {
479 | pad();
480 | height: unset $i;
481 | flex-grow: 1 $i;
482 | flex-basis: unset $i;
483 | }
484 | .nav-item {
485 | lnh();
486 | height: unset $i;
487 |
488 | &.right a {
489 | pad(0);
490 | margin-left: 1ch $i;
491 | }
492 | a {
493 | fg(2);
494 |
495 | &:hover {
496 | --fg2: var(--accent-fg);
497 | }
498 | }
499 | }
500 |
501 | /**
502 | * Content
503 | **/
504 | // Global
505 | .container {
506 | padding-top: var(--header-h);
507 | }
508 | .conversation,
509 | .overlay-panel {
510 | margin: var(--body-pad) $i;
511 | max-width: unset $i;
512 | }
513 | .tab {
514 | brd(bottom);
515 | mar(0);
516 |
517 | &-item {
518 | &.active a {
519 | hl();
520 | border-color: transparent;
521 | }
522 | &:not(.active) a:hover {
523 | fg();
524 | }
525 | a {
526 | pad();
527 | }
528 | }
529 | }
530 |
531 | // Profile
532 | .timeline {
533 | background-color: transparent $i;
534 | margin: var(--body-pad);
535 |
536 | &-container {
537 | max-width: unset;
538 | }
539 | &-header {
540 | pad();
541 | brd(bottom);
542 | mar(0);
543 | }
544 | &-item {
545 | bg(2);
546 | pad();
547 | brd();
548 | mar(bottom);
549 | }
550 | /.profile-tabs &-container {
551 | width: calc(100% - var(--sidebar-width)) $i;
552 | }
553 | }
554 | .quote {
555 | bg();
556 | brd();
557 | mar(top);
558 |
559 | &-text {
560 | pad(0);
561 | pad(left);
562 | pad(right);
563 | }
564 |
565 | .tweet-name-row {
566 | pad();
567 | }
568 | .card-container {
569 | brd(0);
570 | brd(top);
571 | }
572 | }
573 | .show-more {
574 | background-color: transparent $i;
575 | pad(0);
576 | brd(0);
577 |
578 | a {
579 | normalise-button();
580 | text-decoration: none $i;
581 | box(unset);
582 | }
583 | }
584 | .pinned,
585 | .retweet-header {
586 | lnh();
587 | mar(0);
588 | mar(bottom);
589 | }
590 | .username {
591 | margin-left: 1ch;
592 | }
593 | .attachments {
594 | border-radius: var(--border-radius);
595 | mar(top);
596 | }
597 | .profile {
598 | &-banner {
599 | brd(bottom);
600 | margin-left: var(--sidebar-width);
601 | mar(bottom, 0);
602 | }
603 | &-tab {
604 | pad(0);
605 | brd(right);
606 | width: var(--sidebar-width);
607 | max-width: unset;
608 | overflow: scroll;
609 | position: fixed $i;
610 | top: var(--header-h);
611 | bottom: 0;
612 |
613 | &s {
614 | width: 100%;
615 | max-width: unset;
616 | }
617 | }
618 | &-card {
619 | white-space: nowrap $i;
620 | pad();
621 | display: block $i;
622 | height: 100%;
623 |
624 | &-avatar {
625 | mar(0);
626 | }
627 | &-extra {
628 | &,
629 | &-links {
630 | mar(top);
631 | }
632 | }
633 | }
634 | &-bio {
635 | margin: var(--pad) 0 $i;
636 | }
637 | &-joindate {
638 | mar(0);
639 | }
640 | }
641 | .photo-rail {
642 | &-card {
643 | pad();
644 | brd(0);
645 | mar(0);
646 | }
647 | &-header {
648 | normalise-header();
649 |
650 | & > a {
651 | fg();
652 | }
653 | }
654 | &-grid {
655 | grid-gap: calc(var(--pad) / 2);
656 | pad(0);
657 |
658 | & > a,
659 | img {
660 | border-radius: var(--border-radius);
661 | }
662 | }
663 | }
664 | .tweet {
665 | /.more-replies-text,
666 | /.unavailable-box,
667 | &-body {
668 | margin-left: calc(48px + var(--pad));
669 | }
670 | /.replying-to,
671 | &-header {
672 | mar(0);
673 | mar(bottom);
674 | }
675 | &-avatar img {
676 | margin-left: calc(-48px - var(--pad));
677 | margin-top: calc(1px * var(--line-height));
678 | }
679 | &-date {
680 | margin-left: 1ch;
681 | }
682 | &-content {
683 | lnh();
684 | }
685 | &-published {
686 | mar(top);
687 | }
688 | &-stat {
689 | pad(0);
690 | mar(top);
691 | margin-right: 1ch $i;
692 |
693 | &s {
694 | lnh();
695 | mar(0);
696 | }
697 | }
698 | }
699 | .card {
700 | margin: var(--pad) 0;
701 |
702 | &-container {
703 | bg();
704 | brd();
705 | }
706 | &-title {
707 | normalise-header();
708 | }
709 | &-content {
710 | pad();
711 | }
712 | &-description {
713 | mar(0);
714 | }
715 | }
716 |
717 | // Search
718 | .search {
719 | &-field {
720 | & > .pref-input {
721 | mar(0);
722 | mar(right);
723 | }
724 | & > label {
725 | @extend button;
726 | --bg2: var(--bg);
727 | mar(0);
728 | }
729 | input {
730 | --bg2: var(--bg);
731 |
732 | &[type="text"] {
733 | flex-grow: 1 $i;
734 | }
735 | }
736 | button {
737 | --bg2: var(--bg);
738 | mar(right);
739 | height: unset $i;
740 | }
741 | }
742 | &-title {
743 | normalise-header(false);
744 | width: 100% $i;
745 | max-height: unset $i;
746 | }
747 | &-row {
748 | .pref-input {
749 | pad(0);
750 | }
751 | }
752 | &-panel {
753 | & > div {
754 | lnh();
755 | }
756 | }
757 | &-field #search-panel-toggle:checked ~ &-panel {
758 | max-height: unset $i;
759 | }
760 | &-toggles {
761 | column-gap: var(--pad) $i;
762 | }
763 | }
764 |
765 | // Tweet
766 | .thread-line {
767 | .timeline-item,
768 | .more-replies {
769 | &::before {
770 | mar(left, 0);
771 | width: 3px;
772 | left: 24px;
773 | }
774 | }
775 | }
776 | .reply,
777 | .main-thread {
778 | background-color: transparent;
779 | mar(0);
780 | }
781 | .unavailable-box {
782 | bg(2);
783 | pad(0);
784 | brd(0);
785 |
786 | /.more-replies-text,
787 | & {
788 | pad(top);
789 | pad(bottom);
790 | }
791 | }
792 |
793 | // Settings / about
794 | .overlay-panel {
795 | background-color: transparent $i;
796 | pad(0);
797 | margin-top: calc(var(--body-pad) - var(--pad) * 2) $i;
798 |
799 | h1,
800 | h2 {
801 | normalise-header(false);
802 | display: block $i;
803 | }
804 | }
805 | fieldset {
806 | mar(0);
807 | }
808 | legend {
809 | normalise-header(false);
810 | }
811 | .note {
812 | padding: var(--pad) 0 $i;
813 | brd(top);
814 | brd(bottom);
815 | margin: var(--pad) 0 $i;
816 |
817 | &::before {
818 | content: 'NOTE: ';
819 | }
820 | }
821 | .preferences {
822 | label {
823 | pad(0);
824 | }
825 | button {
826 | mar(0);
827 | }
828 | }
829 | }
830 |
831 |
--------------------------------------------------------------------------------
/mdn.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name MDN
3 | @namespace github.com/openstyles/stylus
4 | @version 1.1.0
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 | ==/UserStyle== */
10 |
11 | // Variables
12 | vendors = official;
13 | $small-screen = 768px;
14 | $select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
15 | $select-size = 16px;
16 | $i = !important;
17 |
18 | // Stylus
19 | svar(var) {
20 | s('var(--%s)', var);
21 | }
22 |
23 | cond(n, yes, no) {
24 | (n == 0 ? no : yes) $i;
25 | }
26 |
27 | sel-cond(sel, pos) {
28 | pos ? s('%s-%s', sel, pos) : sel;
29 | }
30 |
31 | color-a(n, bright = true) {
32 | s = bright ? -2 : null;
33 | n = n > 6 ? n - 8 : n;
34 |
35 | s('hsla(var(--color%s-h), var(--color-s%s), var(--color-l%s), var(--bg-opacity))', n, s, s);
36 | }
37 |
38 | // Appearance
39 | bg(n =) {
40 | background-color: s('var(--bg%s)', n) $i;
41 |
42 | if (n == -tr || n == -tr2 || n == -tr3) {
43 | backdrop-filter: var(--popup-filter) $i;
44 | }
45 | }
46 |
47 | fg(n =) {
48 | color: s('var(--fg%s)', n) $i;
49 | }
50 |
51 | bgc(n1 =, n2 =) {
52 | bg(n1);
53 | fg(n2);
54 | }
55 |
56 | hl() {
57 | background-color: var(--hl) $i;
58 | color: var(--hl-fg) $i;
59 | }
60 |
61 | accent() {
62 | background-color: var(--accent) $i;
63 | color: var(--accent-fg) $i;
64 | }
65 |
66 | clr(n) {
67 | color: s('var(--color%s)', n) $i;
68 | }
69 |
70 | lnh() {
71 | line-height: var(--line-height) $i;
72 | }
73 |
74 | pad(pos =, n = 1) {
75 | {sel-cond(padding, pos)}: \
76 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
77 | }
78 |
79 | mar(pos =, n = 1) {
80 | {sel-cond(margin, pos)}: \
81 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
82 | }
83 |
84 | shd(n) {
85 | box-shadow: cond(n, s('var(--shadow-%s)', n), none);
86 | }
87 |
88 | rad(n = 1) {
89 | border-radius: cond(n, var(--border-radius), 0);
90 | }
91 |
92 | brd(pos =, color = border) {
93 | if (color) {
94 | color = svar(color);
95 | }
96 |
97 | {sel-cond(border, pos)}: \
98 | (color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
99 | if (!pos) {
100 | rad(pos);
101 | }
102 | }
103 |
104 | // Position
105 | box(w, h = w) {
106 | width: w $i;
107 | height: h $i;
108 | }
109 |
110 | flex(display = flex, alignment = center, justification =) {
111 | display: display $i;
112 | align-items: alignment $i;
113 | justify-content: justification $i;
114 | }
115 |
116 | // Animation
117 | anim(name =, func = ) {
118 | @media (prefers-reduced-motion: no-preference) {
119 | {name ? animation : transition}: name var(--trans-dur) func $i;
120 | }
121 | }
122 |
123 | dropfade() {
124 | anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
125 | }
126 |
127 | // Focus
128 | focus(p = focus) {
129 | anim();
130 |
131 | &:{p} {
132 | border-color: var(--hl) $i;
133 | box-shadow: var(--shadow-ins) var(--hl) $i;
134 | outline: none $i;
135 | }
136 | }
137 |
138 | header-focus(class = page-focus) {
139 | .{class} & {
140 | --bg2: var(--accent);
141 | --fg: var(--accent-fg);
142 | --border: var(--accent-border);
143 | }
144 |
145 | // Stylus is unable to recognise :where()
146 | :root:not(:-moz-window-inactive) & {
147 | --bg2: var(--accent);
148 | --fg: var(--accent-fg);
149 | --border: var(--accent-border);
150 | }
151 | }
152 |
153 | normal-colors() {
154 | // Don't get me affected by header-focus()
155 | --bg2: var(--reserve-bg2) $i;
156 | --fg: var(--reserve-fg) $i;
157 | --fg2: var(--reserve-fg2) $i;
158 | --border: var(--reserve-border) $i;
159 | }
160 |
161 | // Text
162 | replace-text(content =, text-color = fg, pos = after) {
163 | color: transparent $i;
164 | letter-spacing: -9999px $i;
165 |
166 | if (content) { // Replace
167 | &::{pos} {
168 | content: content $i;
169 | letter-spacing: 0 $i;
170 | color: svar(text-color) $i;
171 | }
172 | } else { // Hide
173 | * {
174 | letter-spacing: 0 $i;
175 | color: svar(text-color) $i;
176 | }
177 | }
178 | }
179 |
180 | hide-chars(amount, pos, bg =) {
181 | margin-{pos}: s('-%sch', amount) $i;
182 | position: relative $i;
183 |
184 | element = pos == left ? before : after;
185 | &::{element} {
186 | content: '' $i;
187 | position: absolute $i;
188 | inset: 0;
189 | box(s('%sch', amount), calc(1em * var(--line-height)));
190 | bg(bg);
191 | }
192 | }
193 |
194 | // Normalisation
195 | disabled() {
196 | &:disabled {
197 | opacity: 0.5 $i;
198 | cursor: not-allowed $i;
199 | }
200 | }
201 |
202 | normalise-select() {
203 | appearance: none $i;
204 | bgc(2);
205 | lnh();
206 | background-image:
207 | linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
208 | linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
209 | linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
210 | background-size: 20px 20px $i;
211 | background-repeat: no-repeat $i;
212 | background-position: right 50% $i;
213 | pad();
214 | padding-right: calc(var(--pad) + 20px) $i;
215 | brd();
216 | focus();
217 | disabled();
218 | }
219 |
220 | normalise-input() {
221 | bgc(2);
222 | lnh();
223 | pad();
224 | brd();
225 | focus();
226 | disabled();
227 |
228 | &::placeholder {
229 | fg(2);
230 | }
231 | }
232 |
233 | normalise-button() {
234 | bgc(2);
235 | lnh();
236 | background-image: none $i;
237 | padding: var(--pad) calc(var(--pad) * 2) $i;
238 | brd();
239 | cursor: pointer $i;
240 | focus();
241 | disabled();
242 | }
243 |
244 | normalise-color() {
245 | bg(2);
246 | pad(0);
247 | brd();
248 | box($select-size);
249 | focus();
250 | disabled();
251 |
252 | &::-webkit-color-swatch {
253 | brd(0);
254 | // Prevent from making it look like a radio input
255 | border-radius: calc(var(--border-radius) * 0.33) $i;
256 |
257 | &-wrapper {
258 | pad(0);
259 | }
260 | }
261 | }
262 |
263 | normalise-checkbox(label = true) {
264 | if (label) {
265 | /label {
266 | lnh();
267 | flex();
268 | gap: 1ch $i;
269 | }
270 | }
271 |
272 | appearance: none $i;
273 | bg(2);
274 | brd();
275 | // Prevent from making it look like a radio input
276 | border-radius: calc(var(--border-radius) * 0.33) $i;
277 | box-shadow: $select-shadow $i;
278 | mar(0);
279 | position: relative $i;
280 | box($select-size);
281 | min-width: $select-size $i;
282 | focus();
283 |
284 | &::before,
285 | &::after {
286 | content: '';
287 | position: absolute $i;
288 | inset: 0;
289 | background-color: var(--hl) $i;
290 | transform-origin: 0 0 $i;
291 | }
292 | &:disabled {
293 | &::before,
294 | &::after {
295 | background-color: var(--fg2) $i;
296 | }
297 | }
298 |
299 | &::before {
300 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
301 | }
302 | &:indeterminate::before {
303 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
304 | transition-duration: 33.3ms $i;
305 | }
306 | &::after {
307 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
308 | }
309 |
310 | &:checked {
311 | &::before {
312 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
313 | transition-duration: 33.3ms $i;
314 | }
315 | &::after {
316 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
317 | transition-delay: 33.3ms $i;
318 | anim();
319 | }
320 | }
321 | }
322 |
323 | normalise-radio() {
324 | appearance: none $i;
325 | bg(2);
326 | brd();
327 | border-radius: 50% $i;
328 | box-shadow: $select-shadow $i;
329 | mar(0);
330 | position: relative $i;
331 | box($select-size);
332 | focus();
333 |
334 | &::before {
335 | content: '';
336 | position: absolute $i;
337 | inset: $select-size / 5;
338 | background-color: var(--hl) $i;
339 | border-radius: 50% $i;
340 | transition: transform var(--trans-dur) linear $i;
341 | transform: scale(0) $i;
342 | }
343 | &:disabled::before {
344 | background-color: var(--fg2) $i;
345 | }
346 | &:checked::before {
347 | transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
348 | transform: scale(1) $i;
349 | anim();
350 | }
351 | }
352 |
353 | normalise-header(first = true) {
354 | fg();
355 | lnh();
356 | text-transform: uppercase $i;
357 | letter-spacing: 1px $i;
358 | pad(0);
359 | pad(bottom);
360 | brd(bottom);
361 | mar(0);
362 | mar(bottom);
363 | if (!first) {
364 | margin-top: calc(var(--pad) * 2) $i;
365 | }
366 | }
367 |
368 | @-moz-document domain("developer.mozilla.org") {
369 | /**
370 | * Global
371 | **/
372 | :root {
373 | // Background
374 | --background-primary: var(--bg) $i;
375 | --background-secondary: var(--bg2) $i;
376 | --background-tertiary: var(--bg3) $i;
377 | --background-toc-active: var(--background-secondary) $i;
378 |
379 | --background-mark-green: color-a(10) $i;
380 | --background-mark-yellow: color-a(11) $i;
381 | --background-information: color-a(12) $i;
382 | --background-critical: color-a(9) $i;
383 | --background-success: color-a(10) $i;
384 | --background-warning: color-a(11) $i;
385 |
386 | --code-background-inline: var(--bg2) $i;
387 | --code-background-block: var(--bg2) $i;
388 |
389 | // Text
390 | --text-primary: var(--fg) $i;
391 | --text-secondary: var(--fg2) $i;
392 | --text-link: var(--fg-link) $i;
393 | --text-invert: var(--bg) $i;
394 |
395 | --text-primary-red: var(--color9) $i;
396 | --text-primary-green: var(--color10) $i;
397 | --text-primary-blue: var(--color12) $i;
398 | --text-primary-yellow: var(--color11) $i;
399 |
400 | --code-token-punctuation: var(--fg) $i;
401 | --code-token-default: var(--fg) $i;
402 | --code-token-comment: var(--fg2) $i;
403 | --code-token-attribute-value: var(--color10) $i;
404 | --code-token-selector: var(--color11) $i;
405 | --code-token-tag: var(--color12) $i;
406 | --code-token-attribute-name: var(--color13) $i;
407 |
408 | // Icons
409 | --icon-primary: var(--fg) $i;
410 | --icon-secondary: var(--fg2) $i;
411 | --icon-information: var(--color12) $i;
412 | --icon-warning: var(--color11) $i;
413 | --icon-critical: var(--color9) $i;
414 | --icon-success: var(--color10) $i;
415 |
416 | // etc.
417 | --max-width: 1280px $i;
418 | --top-nav-height: unset $i;
419 | --base-line-height: var(--line-height) $i;
420 | --intermediate-line-height: var(--line-height) $i;
421 | --font-content-line-height: var(--line-height) $i;
422 | --border-primary: var(--border) $i;
423 | --border-secondary: var(--border) $i;
424 | --elem-radius: var(--border-radius) $i;
425 | --shadow-01: none $i;
426 | --shadow-02: var(--shadow-big) $i;
427 |
428 | overflow-x: hidden;
429 | }
430 |
431 | body {
432 | --reserve-bg2: var(--bg2);
433 | --reserve-fg: var(--fg);
434 | --reserve-border: var(--border);
435 | --reserve-pad: var(--pad);
436 | }
437 |
438 | a {
439 | &:not(:hover) {
440 | text-decoration: none $i;
441 | }
442 | &:hover {
443 | text-decoration: underline $i;
444 | }
445 | }
446 |
447 | /**
448 | * Hide elements
449 | **/
450 | // I. Homepage
451 | .latest-news,
452 | .recent-contributions,
453 | .contributor-spotlight,
454 | .homepage-hero section > :is(h1, p),
455 |
456 | // II. etc.
457 | .theme-switcher-menu,
458 | .main-nav,
459 | .article-footer, // "Help improve MDN"
460 | .auth-container,
461 | #nav-footer
462 | {
463 | display: none $i;
464 | }
465 |
466 | /**
467 | * Header
468 | **/
469 | .top-navigation {
470 | --pad: calc(var(--reserve-pad) / 2);
471 | bg(2);
472 | header-focus();
473 | brd(bottom);
474 |
475 | .logo-text {
476 | fill: var(--fg) $i;
477 | }
478 | .container {
479 | pad();
480 | justify-content: space-between $i;
481 | }
482 | }
483 | .top-navigation-main {
484 | flex-grow: 0 $i;
485 |
486 | .search-input-field {
487 | normal-colors();
488 | --bg2: var(--bg) $i;
489 | width: unset $i;
490 | }
491 | .search-widget {
492 | gap: 0 $i;
493 | }
494 | }
495 | .article-actions-container {
496 | header-focus();
497 | background-color: transparent $i;
498 | brd(0);
499 | margin-left: calc(var(--sidebar-width) + var(--body-pad)) $i;
500 | min-height: var(--header-h) $i;
501 | position: fixed;
502 | top: 0;
503 |
504 | a:hover {
505 | fg();
506 | text-decoration: none $i;
507 | }
508 | .container {
509 | pad(0);
510 | }
511 | }
512 | // Language
513 | .article-actions {
514 | display: none $i;
515 | }
516 |
517 | /**
518 | * Content
519 | **/
520 | // Homepage
521 | .mandala-container {
522 | bg();
523 | }
524 | .featured-articles {
525 | gap: 0 $i;
526 | mar(0);
527 |
528 | h2 {
529 | width: 100% $i;
530 | }
531 | }
532 | .tile-container {
533 | gap: var(--pad) $i;
534 | }
535 | .article-tile {
536 | // gradient
537 | --background-primary: var(--bg2);
538 | bg(2);
539 | pad();
540 | brd();
541 | shd(0);
542 |
543 | .tile-tag {
544 | display: none $i;
545 | }
546 | h3 {
547 | mar(top, 0);
548 | }
549 | }
550 |
551 | .clear-search-button,
552 | .search-button {
553 | display: none $i;
554 | }
555 | .search {
556 | &-input-field {
557 | normalise-input();
558 | caret-color: var(--fg) $i;
559 | height: unset $i;
560 |
561 | // The placeholder is " ", but it's used for
562 | // the "___" look. Honestly, pretty clever.
563 | &::placeholder {
564 | text-decoration: none $i;
565 | }
566 | }
567 | &-results {
568 | normal-colors();
569 | brd();
570 | shd(big);
571 | top: calc(var(--header-h) + var(--pad)) $i;
572 |
573 | .result-item {
574 | bg();
575 | brd(0);
576 |
577 | &.highlight {
578 | --fg: var(--hl-fg);
579 | hl();
580 | }
581 | &.nothing-found:not(:only-child) {
582 | display: none $i;
583 | }
584 |
585 | & > a {
586 | text-decoration: none $i;
587 | pad();
588 | }
589 | mark {
590 | hl();
591 | }
592 | b {
593 | letter-spacing: 0 $i;
594 |
595 | & > span {
596 | fg();
597 | }
598 | }
599 | small {
600 | display: none $i;
601 | }
602 | }
603 | }
604 | }
605 |
606 | // Sidebar
607 | .sidebar {
608 | pad(0);
609 | brd(top);
610 | mask-image: none $i;
611 | order: 1;
612 |
613 | &-container {
614 | bg(2);
615 | brd(right);
616 | display: flex $i;
617 | position: fixed;
618 | top: var(--header-h);
619 | bottom: 0;
620 | width: var(--sidebar-width);
621 | max-height: unset;
622 |
623 | .place {
624 | display: none;
625 | }
626 | }
627 | &-actions {
628 | pad(0);
629 | height: unset $i;
630 | }
631 | &-filter {
632 | mar(0);
633 |
634 | &-container {
635 | background: none var(--bg2);
636 | pad();
637 | brd(bottom);
638 | }
639 | &-label {
640 | display: none;
641 | }
642 | &-input-field {
643 | --bg2: var(--bg);
644 | normalise-input();
645 | box(unset);
646 | flex-grow: 1;
647 |
648 | & + button {
649 | right: calc(var(--pad) * 2) $i;
650 |
651 | &:hover > .button-wrap {
652 | --icon-secondary: var(--fg);
653 | background-color: transparent $i;
654 | }
655 | }
656 | }
657 | }
658 | &-inner-nav {
659 | mar();
660 | overflow: scroll;
661 | }
662 |
663 | li,
664 | summary {
665 | letter-spacing: 0 $i;
666 | mar(bottom);
667 | }
668 | li:first-of-type strong {
669 | mar(top, 0);
670 | }
671 | ol {
672 | ol,
673 | ul {
674 | pad(left);
675 | }
676 | }
677 | details {
678 | mar(0);
679 |
680 | ol {
681 | padding-left: 1rem $i;
682 | }
683 | }
684 | strong {
685 | normalise-header(false);
686 | }
687 | a {
688 | pad(0);
689 | width: 100%;
690 | display: unset;
691 | }
692 | }
693 | .toc {
694 | pad(0);
695 | display: block $i;
696 |
697 | &-container {
698 | height: unset $i;
699 | overflow: unset $i;
700 | mask-image: none $i;
701 | }
702 | }
703 | .in-nav-toc {
704 | display: none;
705 | }
706 | .document-toc {
707 | mar(0);
708 | width: 100%;
709 |
710 | &-heading {
711 | mar();
712 | }
713 | &-link {
714 | pad();
715 | brd(0);
716 | width: 100% $i;
717 |
718 | &[aria-current="true"] {
719 | hl();
720 | }
721 | &:hover {
722 | text-decoration: none $i;
723 |
724 | &:not([aria-current="true"]) {
725 | fg();
726 | }
727 | }
728 | }
729 | }
730 | .sidebar em {
731 | @extend .document-toc-link;
732 | @extend .document-toc-link[aria-current="true"];
733 |
734 | &:hover,
735 | & > a {
736 | color: var(--hl-fg) $i;
737 | }
738 | }
739 |
740 | // Page
741 | .main {
742 | &-wrapper {
743 | pad(0);
744 | max-width: unset;
745 | gap: 0 $i;
746 | grid-template-columns: var(--sidebar-width) 1fr $i;
747 | }
748 | &-content {
749 | padding: var(--body-pad) $i;
750 | }
751 | }
752 | h1,
753 | h2,
754 | h3 {
755 | normalise-header(false);
756 | }
757 | pre {
758 | brd();
759 | pad();
760 | margin: var(--pad) 0 $i;
761 | }
762 | .table-container {
763 | mar(0);
764 | width: 100% $i;
765 | }
766 | .notecard {
767 | brd(,note-theme);
768 | border-left: 4px solid var(--note-theme) $i;
769 |
770 | p {
771 | fg();
772 | }
773 | strong {
774 | text-transform: uppercase;
775 | }
776 | }
777 | .example {
778 | colors = {
779 | bad: 9,
780 | good: 10
781 | }
782 | for k, v in colors {
783 | &-{k} {
784 | border-color: s('var(--color%s)', v) $i;
785 | }
786 | }
787 |
788 | &-bad,
789 | &-good {
790 | .token.comment {
791 | fg(); // improve readability
792 | }
793 |
794 | &::after {
795 | top: var(--pad);
796 | right: var(--pad);
797 | }
798 | }
799 | }
800 | .code-example .copy-icon {
801 | top: var(--pad);
802 | right: var(--pad);
803 | }
804 | }
805 |
806 |
--------------------------------------------------------------------------------
/soundcloud.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name Soundcloud
3 | @namespace github.com/openstyles/stylus
4 | @version 2.0.0
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 | ==/UserStyle== */
10 |
11 | // Variables
12 | vendors = official;
13 | $small-screen = 768px;
14 | $select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
15 | $select-size = 16px;
16 | $i = !important;
17 |
18 | // Stylus
19 | svar(var) {
20 | s('var(--%s)', var);
21 | }
22 |
23 | cond(n, yes, no) {
24 | (n == 0 ? no : yes) $i;
25 | }
26 |
27 | sel-cond(sel, pos) {
28 | pos ? s('%s-%s', sel, pos) : sel;
29 | }
30 |
31 | color-a(n, bright = true) {
32 | s = bright ? -2 : null;
33 | n = n > 6 ? n - 8 : n;
34 |
35 | s('hsla(var(--color%s-h), var(--color-s%s), var(--color-l%s), var(--bg-opacity))', n, s, s);
36 | }
37 |
38 | // Appearance
39 | bg(n =) {
40 | background-color: s('var(--bg%s)', n) $i;
41 |
42 | if (n == -tr || n == -tr2 || n == -tr3) {
43 | backdrop-filter: var(--popup-filter) $i;
44 | }
45 | }
46 |
47 | fg(n =) {
48 | color: s('var(--fg%s)', n) $i;
49 | }
50 |
51 | bgc(n1 =, n2 =) {
52 | bg(n1);
53 | fg(n2);
54 | }
55 |
56 | hl() {
57 | background-color: var(--hl) $i;
58 | color: var(--hl-fg) $i;
59 | }
60 |
61 | accent() {
62 | background-color: var(--accent) $i;
63 | color: var(--accent-fg) $i;
64 | }
65 |
66 | clr(n) {
67 | color: s('var(--color%s)', n) $i;
68 | }
69 |
70 | lnh() {
71 | line-height: var(--line-height) $i;
72 | }
73 |
74 | pad(pos =, n = 1) {
75 | {sel-cond(padding, pos)}: \
76 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
77 | }
78 |
79 | mar(pos =, n = 1) {
80 | {sel-cond(margin, pos)}: \
81 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
82 | }
83 |
84 | shd(n) {
85 | box-shadow: cond(n, s('var(--shadow-%s)', n), none);
86 | }
87 |
88 | rad(n = 1) {
89 | border-radius: cond(n, var(--border-radius), 0);
90 | }
91 |
92 | brd(pos =, color = border) {
93 | if (color) {
94 | color = svar(color);
95 | }
96 |
97 | {sel-cond(border, pos)}: \
98 | (color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
99 | if (!pos) {
100 | rad(pos);
101 | }
102 | }
103 |
104 | // Position
105 | box(w, h = w) {
106 | width: w $i;
107 | height: h $i;
108 | }
109 |
110 | flex(display = flex, alignment = center, justification =) {
111 | display: display $i;
112 | align-items: alignment $i;
113 | justify-content: justification $i;
114 | }
115 |
116 | // Animation
117 | anim(name =, func = ) {
118 | @media (prefers-reduced-motion: no-preference) {
119 | {name ? animation : transition}: name var(--trans-dur) func $i;
120 | }
121 | }
122 |
123 | dropfade() {
124 | anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
125 | }
126 |
127 | // Focus
128 | focus(p = focus) {
129 | anim();
130 |
131 | &:{p} {
132 | border-color: var(--hl) $i;
133 | box-shadow: var(--shadow-ins) var(--hl) $i;
134 | outline: none $i;
135 | }
136 | }
137 |
138 | header-focus(class = page-focus) {
139 | .{class} & {
140 | --bg2: var(--accent);
141 | --fg: var(--accent-fg);
142 | --border: var(--accent-border);
143 | }
144 |
145 | // Stylus is unable to recognise :where()
146 | :root:not(:-moz-window-inactive) & {
147 | --bg2: var(--accent);
148 | --fg: var(--accent-fg);
149 | --border: var(--accent-border);
150 | }
151 | }
152 |
153 | normal-colors() {
154 | // Don't get me affected by header-focus()
155 | --bg2: var(--reserve-bg2) $i;
156 | --fg: var(--reserve-fg) $i;
157 | --fg2: var(--reserve-fg2) $i;
158 | --border: var(--reserve-border) $i;
159 | }
160 |
161 | // Text
162 | replace-text(content =, text-color = fg, pos = after) {
163 | color: transparent $i;
164 | letter-spacing: -9999px $i;
165 |
166 | if (content) { // Replace
167 | &::{pos} {
168 | content: content $i;
169 | letter-spacing: 0 $i;
170 | color: svar(text-color) $i;
171 | }
172 | } else { // Hide
173 | * {
174 | letter-spacing: 0 $i;
175 | color: svar(text-color) $i;
176 | }
177 | }
178 | }
179 |
180 | hide-chars(amount, pos, bg =) {
181 | margin-{pos}: s('-%sch', amount) $i;
182 | position: relative $i;
183 |
184 | element = pos == left ? before : after;
185 | &::{element} {
186 | content: '' $i;
187 | position: absolute $i;
188 | inset: 0;
189 | box(s('%sch', amount), calc(1em * var(--line-height)));
190 | bg(bg);
191 | }
192 | }
193 |
194 | // Normalisation
195 | disabled() {
196 | &:disabled {
197 | opacity: 0.5 $i;
198 | cursor: not-allowed $i;
199 | }
200 | }
201 |
202 | normalise-select() {
203 | appearance: none $i;
204 | bgc(2);
205 | lnh();
206 | background-image:
207 | linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
208 | linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
209 | linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
210 | background-size: 20px 20px $i;
211 | background-repeat: no-repeat $i;
212 | background-position: right 50% $i;
213 | pad();
214 | padding-right: calc(var(--pad) + 20px) $i;
215 | brd();
216 | focus();
217 | disabled();
218 | }
219 |
220 | normalise-input() {
221 | bgc(2);
222 | lnh();
223 | pad();
224 | brd();
225 | focus();
226 | disabled();
227 |
228 | &::placeholder {
229 | fg(2);
230 | }
231 | }
232 |
233 | normalise-button() {
234 | bgc(2);
235 | lnh();
236 | background-image: none $i;
237 | padding: var(--pad) calc(var(--pad) * 2) $i;
238 | brd();
239 | cursor: pointer $i;
240 | focus();
241 | disabled();
242 | }
243 |
244 | normalise-color() {
245 | bg(2);
246 | pad(0);
247 | brd();
248 | box($select-size);
249 | focus();
250 | disabled();
251 |
252 | &::-webkit-color-swatch {
253 | brd(0);
254 | // Prevent from making it look like a radio input
255 | border-radius: calc(var(--border-radius) * 0.33) $i;
256 |
257 | &-wrapper {
258 | pad(0);
259 | }
260 | }
261 | }
262 |
263 | normalise-checkbox(label = true) {
264 | if (label) {
265 | /label {
266 | lnh();
267 | flex();
268 | gap: 1ch $i;
269 | }
270 | }
271 |
272 | appearance: none $i;
273 | bg(2);
274 | brd();
275 | // Prevent from making it look like a radio input
276 | border-radius: calc(var(--border-radius) * 0.33) $i;
277 | box-shadow: $select-shadow $i;
278 | mar(0);
279 | position: relative $i;
280 | box($select-size);
281 | min-width: $select-size $i;
282 | focus();
283 |
284 | &::before,
285 | &::after {
286 | content: '';
287 | position: absolute $i;
288 | inset: 0;
289 | background-color: var(--hl) $i;
290 | transform-origin: 0 0 $i;
291 | }
292 | &:disabled {
293 | &::before,
294 | &::after {
295 | background-color: var(--fg2) $i;
296 | }
297 | }
298 |
299 | &::before {
300 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
301 | }
302 | &:indeterminate::before {
303 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
304 | transition-duration: 33.3ms $i;
305 | }
306 | &::after {
307 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
308 | }
309 |
310 | &:checked {
311 | &::before {
312 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
313 | transition-duration: 33.3ms $i;
314 | }
315 | &::after {
316 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
317 | transition-delay: 33.3ms $i;
318 | anim();
319 | }
320 | }
321 | }
322 |
323 | normalise-radio() {
324 | appearance: none $i;
325 | bg(2);
326 | brd();
327 | border-radius: 50% $i;
328 | box-shadow: $select-shadow $i;
329 | mar(0);
330 | position: relative $i;
331 | box($select-size);
332 | focus();
333 |
334 | &::before {
335 | content: '';
336 | position: absolute $i;
337 | inset: $select-size / 5;
338 | background-color: var(--hl) $i;
339 | border-radius: 50% $i;
340 | transition: transform var(--trans-dur) linear $i;
341 | transform: scale(0) $i;
342 | }
343 | &:disabled::before {
344 | background-color: var(--fg2) $i;
345 | }
346 | &:checked::before {
347 | transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
348 | transform: scale(1) $i;
349 | anim();
350 | }
351 | }
352 |
353 | normalise-header(first = true) {
354 | fg();
355 | lnh();
356 | text-transform: uppercase $i;
357 | letter-spacing: 1px $i;
358 | pad(0);
359 | pad(bottom);
360 | brd(bottom);
361 | mar(0);
362 | mar(bottom);
363 | if (!first) {
364 | margin-top: calc(var(--pad) * 2) $i;
365 | }
366 | }
367 |
368 | @-moz-document domain("soundcloud.com") {
369 | /**
370 | * Variables
371 | *
372 | * Do NOT use .theme-{dark,light} as some parts use
373 | * dark theme only and vice versa.
374 | **/
375 | body {
376 | --background-surface-color: var(--bg) $i;
377 | --font-primary-color: var(--fg) $i;
378 | --font-secondary-color: var(--fg2) $i;
379 | --link-primary-color: var(--fg) $i;
380 | --link-secondary-color: var(--fg2) $i;
381 | --primary-color: var(--fg) $i;
382 | --secondary-color: var(--fg2) $i;
383 | --surface-color: var(--bg) $i;
384 | --highlight-color: var(--bg2) $i;
385 |
386 | --button-secondary-hover-font-color: var(--fg) $i;
387 |
388 | for i in 1 2 3 4 5 6 7 8 {
389 | --spacing-{i}x: var(--pad) $i;
390 | }
391 | --spacing-0_25x: var(--pad) $i;
392 | --spacing-0_5x: var(--pad) $i;
393 | --spacing-0_75x: var(--pad) $i;
394 | --spacing-1_25x: var(--pad) $i;
395 | --spacing-1_5x: var(--pad) $i;
396 | --spacing-1_75x: var(--pad) $i;
397 | --spacing-2_5x: var(--pad) $i;
398 | --spacing-3_5x: var(--pad) $i;
399 |
400 | for i in 4 8 10 16 20 50 100 {
401 | --borderRadiuses-{i}: var(--border-radius) $i;
402 | }
403 | }
404 | body {
405 | --big-pad: calc(var(--pad) * 4);
406 |
407 | --reserve-bg: var(--bg);
408 | --reserve-border: var(--border);
409 | --reserve-fg: var(--fg);
410 | --reserve-fg2: var(--fg2);
411 | --reserve-pad: var(--pad);
412 | }
413 |
414 | /**
415 | * Global
416 | **/
417 | * {
418 | box-sizing: border-box $i;
419 | line-height: var(--line-height) $i;
420 | }
421 | .l-container {
422 | width: unset $i;
423 | }
424 | .sc-artwork:not(.image__rounded) {
425 | border-radius: var(--border-radius) $i;
426 | }
427 | // Don't actually normalise-button() here, everything else will look
428 | // like total shit
429 | .sc-button {
430 | opacity: 1 $i;
431 |
432 | .sc-button-group > &,
433 | .sc-button-toolbar > & {
434 | mar(right);
435 | }
436 |
437 | &:not(&-play) svg {
438 | box(1lh);
439 | }
440 | }
441 | .sc-button-dropdown {
442 | normalise-select();
443 |
444 | svg {
445 | display: none $i;
446 | }
447 | }
448 | .sc-ir {
449 | font-size: 0 $i;
450 | }
451 | .sc-link-secondary:hover {
452 | fg();
453 | }
454 | .sc-ministats {
455 | & > div {
456 | margin-right: 2px $i;
457 | box(1lh);
458 | }
459 | svg {
460 | box(1lh);
461 | }
462 | }
463 | .sc-ministats-comments {
464 | display: none $i;
465 | }
466 |
467 | .sc-input {
468 | normalise-input();
469 | caret-color: var(--fg) $i;
470 | height: unset $i;
471 | }
472 |
473 | .g-tabs-item {
474 | mar(0);
475 | }
476 | .g-tabs-link {
477 | pad();
478 | brd(0);
479 |
480 | &.active {
481 | hl();
482 | }
483 | }
484 |
485 | /**
486 | * Hide elements
487 | **/
488 | .banner,
489 | .directSupport,
490 | .dropbar,
491 | .header__forArtistsButton,
492 | .header__upsellWrapper,
493 | .l-footer,
494 | .listenArtistInfo__report,
495 | .mobileApps,
496 | .playbackSoundBadge__follow,
497 | .playbackSoundBadge__showQueue,
498 | .sc-button-copylink,
499 | .sc-button-share,
500 | .userBadge__actions,
501 | {
502 | display: none $i;
503 | }
504 |
505 | /**
506 | * Header
507 | **/
508 | .header {
509 | --fg: var(--reserve-fg);
510 | --pad: calc(var(--reserve-pad) / 2);
511 | --primary-color: var(--fg);
512 | header-focus();
513 | bg(2);
514 | brd(bottom);
515 | height: unset $i;
516 |
517 | &__inner,
518 | &__left,
519 | &__right {
520 | display: flex;
521 | align-items: center $i;
522 | }
523 | &__inner {
524 | gap: var(--pad) $i;
525 | }
526 | &__link {
527 | normal-colors();
528 | --bg2: var(--bg) $i;
529 | normalise-button();
530 | mar(right);
531 | }
532 | &__logoLink {
533 | height: 22px $i;
534 |
535 | &:not(:hover) svg {
536 | fg(2);
537 | }
538 | }
539 | &__moreButton {
540 | pad(0);
541 | height: unset $i;
542 | }
543 | &__moreButtonIcon {
544 | box(var(--font-size));
545 | }
546 | &__navMenuItem {
547 | --pad: var(--reserve-pad);
548 | pad();
549 | mar(0);
550 |
551 | &.selected {
552 | hl();
553 | brd(0);
554 | }
555 | }
556 | &__userNav {
557 | gap: 1ch $i;
558 | margin-right: 1ch $i;
559 | align-items: center $i;
560 |
561 | .notificationIcon {
562 | box(var(--font-size));
563 | }
564 | }
565 | &__userNavAvatar {
566 | mar(0);
567 | box(1lh);
568 |
569 | & > span {
570 | box(inherit);
571 | }
572 | }
573 | &__userNavButton {
574 | pad(0);
575 | mar(0);
576 | height: unset $i;
577 | }
578 | &__userNavUsernameButton {
579 | normal-colors();
580 | --bg2: var(--bg) $i;
581 | normalise-select();
582 | }
583 | &__userNavUsernameButtonIcon {
584 | display: none $i;
585 | }
586 | }
587 | .headerSearch {
588 | --pad: calc(var(--reserve-pad) / 2);
589 | pad(0);
590 | mar(0);
591 |
592 | &__input {
593 | --bg2: var(--bg);
594 | }
595 | &__submit {
596 | display: none $i;
597 | }
598 | }
599 |
600 | /**
601 | * Play controls
602 | **/
603 | .playControls {
604 | --button-secondary-background-color: transparent;
605 |
606 | &__inner {
607 | brd(top);
608 | height: calc(48px - var(--border-width)) $i;
609 | }
610 | &__repeat > button > div {
611 | font-size: 0 $i;
612 | }
613 | }
614 |
615 | /**
616 | * Context menu
617 | **/
618 | .dropdownMenu > div {
619 | bg();
620 | brd();
621 | pad(0);
622 | shd(big);
623 | }
624 | .headerMenu {
625 | &__link {
626 | brd(0);
627 |
628 | &:hover {
629 | hl();
630 | }
631 | }
632 | &__list {
633 | pad(0);
634 | brd(bottom);
635 | }
636 | }
637 | .linkMenu {
638 | @extend .dropdownMenu > div;
639 |
640 | &__item {
641 | mar(0);
642 | }
643 | &__link {
644 | @extend .headerMenu__link;
645 |
646 | letter-spacing: 0 $i;
647 | text-transform: none $i;
648 | pad();
649 | }
650 | &__list {
651 | pad(0);
652 | }
653 | }
654 |
655 | /**
656 | * Content
657 | **/
658 | .l-content {
659 | padding-top: var(--header-h) $i;
660 | }
661 | .l-sidebar-right {
662 | left: 0 $i;
663 | width: var(--sidebar-width) $i;
664 | }
665 | .l-fluid-fixed .l-main {
666 | padding: var(--body-pad) $i;
667 | margin-inline: var(--sidebar-width) 0 $i;
668 | }
669 | .l-listen-wrapper {
670 | .l-about-main {
671 | @extend .l-fluid-fixed .l-main;
672 | }
673 | .l-about-rows {
674 | pad(0);
675 | }
676 | .l-sidebar-right {
677 | bg(2);
678 | pad();
679 | brd(right);
680 | top: 0 $i;
681 | }
682 | }
683 | .l-three-column {
684 | .l-main {
685 | @extend .l-listen-wrapper .l-about-main;
686 | }
687 | // Release info
688 | .l-sidebar-left {
689 | display: none $i;
690 | }
691 | .l-sidebar-right {
692 | @extend .l-listen-wrapper .l-sidebar-right;
693 | // TODO: inaccurate
694 | top: calc(
695 | var(--pad) * -6 \
696 | - var(--border-width) * 7 \
697 | - 2lh \
698 | - var(--body-pad)
699 | ) $i;
700 | }
701 | }
702 | .sound {
703 | &__body {
704 | pad(0);
705 |
706 | // Actually I never used this lol
707 | .commentForm {
708 | display: none $i;
709 | }
710 | }
711 | &__content {
712 | display: flex;
713 | flex-direction: column;
714 | justify-content: space-between;
715 | }
716 | &__coverArt {
717 | box(var(--artwork-20x-size));
718 | }
719 | }
720 | .soundActions {
721 | &__medium .sc-button {
722 | --pad: calc(var(--reserve-pad) / 2);
723 | normalise-button();
724 |
725 | &.sc-button-selected {
726 | hl();
727 | }
728 | }
729 | }
730 | .soundList {
731 | &__item {
732 | margin-bottom: var(--big-pad) $i;
733 | }
734 | }
735 | .soundTitle {
736 | &__uploadTime {
737 | mar(0);
738 | }
739 |
740 | .actorUser__username {
741 | display: flex $i;
742 | }
743 | }
744 | // ty soundcloud
745 | .spotlightTitle,
746 | .userstream__header {
747 | normalise-header();
748 | }
749 |
750 | // Common components
751 | .commentForm {
752 | // Avatar size
753 | --artwork-4x-size: calc(
754 | var(--pad) * 2 + var(--border-width) * 2 + 1lh
755 | );
756 |
757 | &__avatar {
758 | mar(0);
759 | }
760 | &__submitButton {
761 | normalise-button();
762 | }
763 | &__wrapper {
764 | pad(0);
765 | pad(bottom);
766 | brd(bottom);
767 | mar(bottom);
768 | }
769 | }
770 |
771 | // Sidebar
772 | .sidebarHeader {
773 | normalise-header();
774 |
775 | &__more {
776 | fg(2);
777 |
778 | &:hover {
779 | fg();
780 | text-decoration: none;
781 | }
782 | }
783 | }
784 | .sidebarModule {
785 | margin-bottom: calc(var(--pad) * 2) $i;
786 |
787 | &__webiEmbeddedModule {
788 | mar(0);
789 | margin-bottom: calc(var(--pad) * 2) $i;
790 | }
791 | }
792 | .userSidebar {
793 | bg(2);
794 | pad();
795 | brd(right);
796 |
797 | &.l-fixed {
798 | overflow-y: scroll $i;
799 | width: inherit $i;
800 | height: calc(
801 | 100vh - var(--header-h) - 48px + var(--border-width)
802 | ) $i;
803 | top: var(--header-h) $i;
804 | bottom: 48px $i;
805 | }
806 | }
807 | .l-sidebar-right {
808 | .sc-button {
809 | --bg2: var(--bg);
810 | normalise-button();
811 | }
812 |
813 | .commentBadgeList__item {
814 | pad(0);
815 |
816 | &:not(:last-child) {
817 | margin-bottom: calc(var(--pad) * 2) $i;
818 | }
819 | }
820 | .infoStats {
821 | mar(0);
822 | margin-bottom: calc(var(--pad) * 2) $i;
823 | }
824 | .soundBadge {
825 | pad(0);
826 |
827 | &List__item:not(:last-child) {
828 | mar(bottom);
829 | }
830 | }
831 | .truncatedUserDescription__wrapper {
832 | &::after {
833 | background-image: linear-gradient(
834 | transparent,
835 | var(--bg2)
836 | ) $i;
837 | }
838 | }
839 | .usersList.floating.user-avatar-badge-hover {
840 | pad(0);
841 | }
842 | .usersList__item {
843 | pad(0);
844 |
845 | &:not(:last-child) {
846 | mar(bottom);
847 | }
848 | }
849 | }
850 |
851 | /**
852 | * Album/track
853 | **/
854 | .commentItem {
855 | pad(0);
856 |
857 | &__createdAt,
858 | &__timestamp {
859 | fg(2);
860 | }
861 | &__content {
862 | .commentsList__item:not(:last-child) & {
863 | brd(bottom);
864 | }
865 | }
866 | &__controls {
867 | height: unset $i;
868 | }
869 | }
870 | .commentsList {
871 | &__header {
872 | normalise-header();
873 | align-items: end $i;
874 |
875 | .sc-button-dropdown {
876 | mar(0);
877 | }
878 | }
879 | &__title {
880 | pad(0);
881 | }
882 | }
883 | .fullHero {
884 | --hero-height: calc(var(--sidebar-width) - var(--pad) * 2);
885 | --artwork-40x-size: var(--hero-height);
886 | --artwork-spacing: calc(var(--artwork-40x-size) + var(--big-pad));
887 | mar(0);
888 | height: calc(var(--hero-height) + var(--pad) * 2);
889 |
890 | &__artwork {
891 | left: var(--pad) $i;
892 | right: unset $i;
893 | }
894 | &__foreground {
895 | pad(right);
896 | padding-left: var(--artwork-spacing) $i;
897 | }
898 | &__info {
899 | left: unset $i;
900 | right: var(--pad) $i;
901 | }
902 | &__playerArea {
903 | left: var(--artwork-spacing) $i;
904 | right: var(--pad) $i;
905 | }
906 | }
907 | .listenContent {
908 | &__inner {
909 | mar(0);
910 | }
911 | }
912 | .listenDetails {
913 | &__partialInfo {
914 | pad(0);
915 |
916 | p {
917 | mar(0);
918 | }
919 | }
920 | }
921 | .listenEngagement {
922 | &__footer {
923 | pad(0);
924 | min-height: unset $i;
925 | }
926 | }
927 | .l-listen-hero .soundTitle {
928 | &__title {
929 | top: 0 $i;
930 | }
931 | &__usernameTitleContainer {
932 | bottom: 0 $i;
933 | }
934 | }
935 | .l-listen__mainContent {
936 | --second-sidebar-width: 120px;
937 |
938 | & > .l-about-left {
939 | pad(0);
940 | width: var(--second-sidebar-width) $i;
941 | }
942 | & > .l-about-right {
943 | padding-left: calc(
944 | var(--second-sidebar-width) + var(--big-pad)
945 | ) $i;
946 | }
947 | }
948 | .purchaseSection {
949 | pad();
950 | brd();
951 | mar(0);
952 | mar(bottom);
953 | align-items: start $i;
954 |
955 | &__content {
956 | gap: 0 $i;
957 |
958 | h3 {
959 | normalise-header();
960 | }
961 | }
962 | &__creatorAvatar {
963 | display: none $i;
964 | }
965 | &__link {
966 | background-color: transparent $i;
967 | fg(-link);
968 | pad(0);
969 | min-height: unset $i;
970 |
971 | &:hover {
972 | text-decoration: underline $i;
973 | }
974 |
975 | svg {
976 | display: none $i;
977 | }
978 | }
979 | }
980 | .listenContent .visualSound__wrapper {
981 | --offset: calc(var(--sidebar-width) + var(--body-pad));
982 |
983 | .commentForm,
984 | .sound__footer {
985 | margin-left: var(--offset) $i;
986 | width: calc(100% - var(--offset) - var(--body-pad)) $i;
987 | }
988 | .commentForm {
989 | margin-top: calc(24px + var(--body-pad)) $i;
990 | display: block $i;
991 | }
992 | .sound__footer {
993 | }
994 | }
995 |
996 | /**
997 | * User liked tracks
998 | **/
999 | .l-fixed-top-one-column {
1000 | pad(0);
1001 |
1002 | & > .l-top {
1003 | bg(2);
1004 | pad(0);
1005 | brd(bottom);
1006 | top: var(--header-h) $i;
1007 | width: 100% $i;
1008 | min-height: unset $i;
1009 | }
1010 | }
1011 | .userNetwork {
1012 | margin-top: var(--header-h) $i;
1013 |
1014 | &Info {
1015 | mar(0);
1016 |
1017 | .userAvatarBadge,
1018 | .userNetworkTop__title {
1019 | display: none $i;
1020 | }
1021 | }
1022 | &Tabs {
1023 | mar(0);
1024 | }
1025 | &__subheadlineWrapper {
1026 | display: none $i;
1027 | }
1028 | }
1029 |
1030 | /**
1031 | * Library > Likes
1032 | **/
1033 | .l-nav {
1034 | bg(2);
1035 | brd(bottom);
1036 | mar(0);
1037 | }
1038 | .badgeList {
1039 | mar(0);
1040 |
1041 | &__item {
1042 | mar(top, 0);
1043 | mar(bottom);
1044 | }
1045 | }
1046 | .collection__section {
1047 | margin: var(--body-pad) $i;
1048 | }
1049 | .collectionSection {
1050 | &__action {
1051 | mar(0);
1052 | }
1053 | &__subHeading {
1054 | align-self: end $i;
1055 | }
1056 | &__top {
1057 | normalise-header();
1058 | }
1059 | }
1060 | .listDisplayToggle {
1061 | &__options {
1062 | background-color: var(--border) $i;
1063 | gap: var(--border-width) $i;
1064 | brd();
1065 | mar(right);
1066 |
1067 | & > li {
1068 | mar(0);
1069 | }
1070 | }
1071 | &__title {
1072 | //display: none $i;
1073 | }
1074 | .sc-button {
1075 | brd(0);
1076 |
1077 | &.sc-button-selected {
1078 | hl();
1079 | }
1080 | }
1081 | }
1082 | .playableTile {
1083 | &__mainHeadingIcon {
1084 | display: none $i;
1085 | }
1086 | }
1087 |
1088 | /**
1089 | * Profile
1090 | **/
1091 | .l-user-hero {
1092 | pad(0);
1093 | margin: 32px auto $i;
1094 | // Original
1095 | width: 1240px $i;
1096 | }
1097 | .profileHeader {
1098 | // Original
1099 | padding: 32px $i;
1100 | }
1101 | .userInfoBar {
1102 | bg(2);
1103 | pad(0);
1104 | pad(right);
1105 | brd(bottom);
1106 |
1107 | .sc-button {
1108 | background-color: transparent $i;
1109 | pad(0);
1110 | min-width: unset $i;
1111 | min-height: unset $i;
1112 |
1113 | &:not(:hover) {
1114 | fg(2);
1115 | }
1116 | }
1117 | .sc-button-label {
1118 | display: none $i;
1119 | }
1120 | }
1121 | }
1122 |
--------------------------------------------------------------------------------
/stylus.user.styl:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name Stylus
3 | @namespace github.com/openstyles/stylus
4 | @version 1.1.0
5 | @description A new userstyle
6 | @author Me
7 |
8 | @preprocessor stylus
9 |
10 | @var checkbox sidebar-overlay "Sidebar overlay" 0
11 | @var checkbox show-styles "Show style count" 1
12 | @var checkbox show-whitespace "Show tabs" 1
13 | ==/UserStyle== */
14 |
15 | // Variables
16 | vendors = official;
17 | $small-screen = 768px;
18 | $select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
19 | $select-size = 16px;
20 | $i = !important;
21 |
22 | // Stylus
23 | svar(var) {
24 | s('var(--%s)', var);
25 | }
26 |
27 | cond(n, yes, no) {
28 | (n == 0 ? no : yes) $i;
29 | }
30 |
31 | sel-cond(sel, pos) {
32 | pos ? s('%s-%s', sel, pos) : sel;
33 | }
34 |
35 | color-a(n, bright = true) {
36 | s = bright ? -2 : null;
37 | n = n > 6 ? n - 8 : n;
38 |
39 | s('hsla(var(--color%s-h), var(--color-s%s), var(--color-l%s), var(--bg-opacity))', n, s, s);
40 | }
41 |
42 | // Appearance
43 | bg(n =) {
44 | background-color: s('var(--bg%s)', n) $i;
45 |
46 | if (n == -tr || n == -tr2 || n == -tr3) {
47 | backdrop-filter: var(--popup-filter) $i;
48 | }
49 | }
50 |
51 | fg(n =) {
52 | color: s('var(--fg%s)', n) $i;
53 | }
54 |
55 | bgc(n1 =, n2 =) {
56 | bg(n1);
57 | fg(n2);
58 | }
59 |
60 | hl() {
61 | background-color: var(--hl) $i;
62 | color: var(--hl-fg) $i;
63 | }
64 |
65 | accent() {
66 | background-color: var(--accent) $i;
67 | color: var(--accent-fg) $i;
68 | }
69 |
70 | clr(n) {
71 | color: s('var(--color%s)', n) $i;
72 | }
73 |
74 | lnh() {
75 | line-height: var(--line-height) $i;
76 | }
77 |
78 | pad(pos =, n = 1) {
79 | {sel-cond(padding, pos)}: \
80 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
81 | }
82 |
83 | mar(pos =, n = 1) {
84 | {sel-cond(margin, pos)}: \
85 | (n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
86 | }
87 |
88 | shd(n) {
89 | box-shadow: cond(n, s('var(--shadow-%s)', n), none);
90 | }
91 |
92 | rad(n = 1) {
93 | border-radius: cond(n, var(--border-radius), 0);
94 | }
95 |
96 | brd(pos =, color = border) {
97 | if (color) {
98 | color = svar(color);
99 | }
100 |
101 | {sel-cond(border, pos)}: \
102 | (color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
103 | if (!pos) {
104 | rad(pos);
105 | }
106 | }
107 |
108 | // Position
109 | box(w, h = w) {
110 | width: w $i;
111 | height: h $i;
112 | }
113 |
114 | flex(display = flex, alignment = center, justification =) {
115 | display: display $i;
116 | align-items: alignment $i;
117 | justify-content: justification $i;
118 | }
119 |
120 | // Animation
121 | anim(name =, func = ) {
122 | @media (prefers-reduced-motion: no-preference) {
123 | {name ? animation : transition}: name var(--trans-dur) func $i;
124 | }
125 | }
126 |
127 | dropfade() {
128 | anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
129 | }
130 |
131 | // Focus
132 | focus(p = focus) {
133 | anim();
134 |
135 | &:{p} {
136 | border-color: var(--hl) $i;
137 | box-shadow: var(--shadow-ins) var(--hl) $i;
138 | outline: none $i;
139 | }
140 | }
141 |
142 | header-focus(class = page-focus) {
143 | .{class} & {
144 | --bg2: var(--accent);
145 | --fg: var(--accent-fg);
146 | --border: var(--accent-border);
147 | }
148 |
149 | // Stylus is unable to recognise :where()
150 | :root:not(:-moz-window-inactive) & {
151 | --bg2: var(--accent);
152 | --fg: var(--accent-fg);
153 | --border: var(--accent-border);
154 | }
155 | }
156 |
157 | // Text
158 | replace-text(content =, text-color = fg, pos = after) {
159 | color: transparent $i;
160 | letter-spacing: -9999px $i;
161 |
162 | if (content) { // Replace
163 | &::{pos} {
164 | content: content $i;
165 | letter-spacing: 0 $i;
166 | color: svar(text-color) $i;
167 | }
168 | } else { // Hide
169 | * {
170 | letter-spacing: 0 $i;
171 | color: svar(text-color) $i;
172 | }
173 | }
174 | }
175 |
176 | hide-chars(amount, pos, bg =) {
177 | margin-{pos}: s('-%sch', amount) $i;
178 | position: relative $i;
179 |
180 | element = pos == left ? before : after;
181 | &::{element} {
182 | content: '' $i;
183 | position: absolute $i;
184 | inset: 0;
185 | box(s('%sch', amount), calc(1em * var(--line-height)));
186 | bg(bg);
187 | }
188 | }
189 |
190 | // Normalisation
191 | disabled() {
192 | &:disabled {
193 | opacity: 0.5 $i;
194 | cursor: not-allowed $i;
195 | }
196 | }
197 |
198 | normalise-select() {
199 | appearance: none $i;
200 | bgc(2);
201 | lnh();
202 | background-image:
203 | linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
204 | linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
205 | linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
206 | background-size: 20px 20px $i;
207 | background-repeat: no-repeat $i;
208 | background-position: right 50% $i;
209 | pad();
210 | padding-right: calc(var(--pad) + 20px) $i;
211 | brd();
212 | focus();
213 | disabled();
214 | }
215 |
216 | normalise-input() {
217 | bgc(2);
218 | lnh();
219 | pad();
220 | brd();
221 | focus();
222 | disabled();
223 |
224 | &::placeholder {
225 | fg(2);
226 | }
227 | }
228 |
229 | normalise-button() {
230 | bgc(2);
231 | lnh();
232 | background-image: none $i;
233 | padding: var(--pad) calc(var(--pad) * 2) $i;
234 | brd();
235 | cursor: pointer $i;
236 | focus();
237 | disabled();
238 | }
239 |
240 | normalise-color() {
241 | bg(2);
242 | pad(0);
243 | brd();
244 | box($select-size);
245 | focus();
246 | disabled();
247 |
248 | &::-webkit-color-swatch {
249 | brd(0);
250 | // Prevent from making it look like a radio input
251 | border-radius: calc(var(--border-radius) * 0.33) $i;
252 |
253 | &-wrapper {
254 | pad(0);
255 | }
256 | }
257 |
258 | &::-moz-color-swatch {
259 | brd(0);
260 | // Prevent from making it look like a radio input
261 | border-radius: calc(var(--border-radius) * 0.33) $i;
262 | }
263 | }
264 |
265 | normalise-checkbox(label = true) {
266 | if (label) {
267 | /label {
268 | lnh();
269 | flex();
270 | gap: 1ch $i;
271 | }
272 | }
273 |
274 | appearance: none $i;
275 | bg(2);
276 | brd();
277 | // Prevent from making it look like a radio input
278 | border-radius: calc(var(--border-radius) * 0.33) $i;
279 | box-shadow: $select-shadow $i;
280 | mar(0);
281 | position: relative $i;
282 | box($select-size);
283 | min-width: $select-size $i;
284 | focus();
285 |
286 | &::before,
287 | &::after {
288 | content: '';
289 | position: absolute $i;
290 | inset: 0;
291 | background-color: var(--hl) $i;
292 | transform-origin: 0 0 $i;
293 | }
294 | &:disabled {
295 | &::before,
296 | &::after {
297 | background-color: var(--fg2) $i;
298 | }
299 | }
300 |
301 | &::before {
302 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
303 | }
304 | &:indeterminate::before {
305 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
306 | transition-duration: 33.3ms $i;
307 | }
308 | &::after {
309 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
310 | }
311 |
312 | &:checked {
313 | &::before {
314 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
315 | transition-duration: 33.3ms $i;
316 | }
317 | &::after {
318 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
319 | transition-delay: 33.3ms $i;
320 | anim();
321 | }
322 | }
323 | }
324 |
325 | normalise-radio() {
326 | appearance: none $i;
327 | bg(2);
328 | brd();
329 | border-radius: 50% $i;
330 | box-shadow: $select-shadow $i;
331 | mar(0);
332 | position: relative $i;
333 | box($select-size);
334 | focus();
335 |
336 | &::before {
337 | content: '';
338 | position: absolute $i;
339 | inset: $select-size / 5;
340 | background-color: var(--hl) $i;
341 | border-radius: 50% $i;
342 | transition: transform var(--trans-dur) linear $i;
343 | transform: scale(0) $i;
344 | }
345 | &:disabled::before {
346 | background-color: var(--fg2) $i;
347 | }
348 | &:checked::before {
349 | transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
350 | transform: scale(1) $i;
351 | anim();
352 | }
353 | }
354 |
355 | normalise-header(first = true) {
356 | fg();
357 | lnh();
358 | text-transform: uppercase $i;
359 | letter-spacing: 1px $i;
360 | pad(0);
361 | pad(bottom);
362 | brd(bottom);
363 | mar(0);
364 | mar(bottom);
365 | if (!first) {
366 | margin-top: calc(var(--pad) * 2) $i;
367 | }
368 | }
369 |
370 | @-moz-document regexp("(moz|chrome)-extension://.*") {
371 | /**
372 | * Global
373 | **/
374 | body {
375 | bgc();
376 | }
377 | a,
378 | a:hover {
379 | color: var(--fg-link) $i;
380 | }
381 | i {
382 | color: var(--fg2) $i;
383 | transition: none $i;
384 |
385 | #stylus a:hover &,
386 | #stylus &:hover {
387 | color: var(--fg) $i;
388 | }
389 |
390 | &.checked,
391 | &.select-arrow,
392 | .add-applies-to &,
393 | .remove-applies-to & {
394 | display: none $i;
395 | }
396 | }
397 | input {
398 | /textarea,
399 | &:not([type]),
400 | &[type="text"],
401 | &[type="number"],
402 | &[type="search"],
403 | &[type="url"] {
404 | normalise-input();
405 | height: unset $i;
406 | }
407 | &[type="date"],
408 | /select {
409 | normalise-select();
410 | }
411 | &[type="checkbox"] {
412 | normalise-checkbox();
413 |
414 | &::after {
415 | content: '' $i;
416 | height: unset $i;
417 | }
418 | }
419 | &[type="radio"] {
420 | normalise-radio();
421 |
422 | &::after {
423 | display: none;
424 | }
425 | }
426 | &[type="color"] {
427 | normalise-color();
428 | }
429 | &[type="number"] {
430 | text-align: left;
431 | }
432 | }
433 | input,
434 | select {
435 | height: unset $i;
436 | }
437 | .select-wrapper::after {
438 | display: none $i;
439 | }
440 | .slider {
441 | --width: $select-size $i;
442 |
443 | &::after {
444 | brd(0);
445 | shd(0);
446 | width: unset $i;
447 | }
448 | }
449 | .radio-wrapper {
450 | lnh();
451 | }
452 | .firefox .chromium-only,
453 | .chromium-only.chrome-no-popup-border {
454 | opacity: .5;
455 | display: flex;
456 | pointer-events: none;
457 | }
458 | button {
459 | normalise-button();
460 |
461 | .split-btn > &:first-of-type {
462 | border-radius: var(--border-radius) 0 0 var(--border-radius) $i;
463 | mar(0);
464 | }
465 | .split-btn > &:last-of-type {
466 | border-radius: 0 var(--border-radius) var(--border-radius) 0 $i;
467 | }
468 | }
469 | #cancel-button {
470 | --bg2: var(--bg);
471 | normalise-button();
472 | replace-text('Back');
473 | }
474 | .CodeMirror {
475 | lnh();
476 |
477 | &-gutters {
478 | bg(2);
479 | brd(right);
480 | }
481 | &-lines {
482 | padding: var(--body-pad) 0 $i;
483 | }
484 | &-line {
485 | padding: 0 var(--body-pad) $i;
486 |
487 | &::before {
488 | content: '';
489 | position: absolute;
490 | left: 80ch;
491 | box(1px, 100%);
492 | background-color: var(--border);
493 | }
494 |
495 | &number {
496 | fg(2);
497 | font-family: var(--font-code) $i;
498 |
499 | &:hover {
500 | fg();
501 | }
502 | }
503 | }
504 | &-activeline-background,
505 | &-selected {
506 | bg(2);
507 | }
508 | &-cursor {
509 | border-left-color: var(--fg) $i;
510 | }
511 | &-matchingbracket {
512 | hl();
513 | }
514 | &-nonmatchingbracket {
515 | background-color: color-a(1) $i;
516 | fg();
517 | }
518 | }
519 | .cm {
520 | &-header,
521 | &-def,
522 | &-negative,
523 | &-qualifier,
524 | &-error,
525 | &-attribute,
526 | &-link {
527 | clr(9);
528 | }
529 | &-quote,
530 | &-positive,
531 | &-number,
532 | &-variable-3,
533 | &-builtin,
534 | &-atom {
535 | clr(10);
536 | }
537 | &-operator {
538 | clr(11);
539 | }
540 | &-keyword,
541 | &-tag {
542 | clr(12);
543 | }
544 | &-string,
545 | &-string-2,
546 | &-property {
547 | clr(13);
548 | }
549 | &-variable,
550 | &-variable-2 {
551 | clr(14);
552 | }
553 | &-comment,
554 | &-bracket,
555 | &-punctuation,
556 | &-meta {
557 | fg(2);
558 | }
559 | &-matchhighlight {
560 | hl();
561 | }
562 | &-tab {
563 | position: relative;
564 |
565 | &::before {
566 | content: '.';
567 | position: absolute;
568 | bottom: 50%;
569 | left: 5%;
570 | width: 90%;
571 | display: block;
572 | color: transparent;
573 | border-bottom: 1px solid var(--fg3);
574 | }
575 | }
576 | }
577 | .CodeMirror .applies {
578 | &-to {
579 | bg(3);
580 | pad();
581 | brd(top);
582 | brd(bottom);
583 | margin: var(--body-pad) 0 $i;
584 |
585 | &::before {
586 | display: none;
587 | }
588 |
589 | label {
590 | fg();
591 | mar(right);
592 | align-self: center $i;
593 |
594 | &::before {
595 | font-size: inherit;
596 | margin-right: 1ch;
597 | }
598 | }
599 | li {
600 | &:not(.applies-to-everything) {
601 | & > * {
602 | mar(0);
603 | }
604 | & > :last-child {
605 | margin-right: calc(var(--pad) + 1ch) $i;
606 | }
607 | }
608 | &:not(:only-child):not(:last-child) {
609 | mar(bottom);
610 | }
611 | }
612 | a {
613 | mar(0);
614 | align-self: center $i;
615 | }
616 | select,
617 | input {
618 | --bg2: var(--bg);
619 | }
620 | }
621 | &-to-item,
622 | &-value-wrapper {
623 | gap: var(--pad);
624 | mar(bottom, 0);
625 | }
626 | &-value-wrapper button {
627 | mar(right, 0);
628 | }
629 | }
630 | .colorpicker {
631 | &-popup {
632 | --main-background-color: var(--bg);
633 | --label-color: var(--fg2);
634 | --label-color-hover: var(--fg);
635 | --invalid-border-color: var(--color1);
636 | --invalid-background-color: color-a(9);
637 | --invalid-color: var(--color9);
638 | --fit-height: 300px $i;
639 | brd();
640 | shd(big);
641 |
642 | &-mover {
643 | opacity: 1;
644 | pad(0);
645 | mar(top);
646 | box(calc(var(--switcher-width) / 1.5), 38px);
647 | right: var(--pad);
648 | }
649 | }
650 | &-sliders {
651 | pad();
652 | padding-right: calc(var(--switcher-width) / 1.5 + var(--pad) * 2) $i;
653 | brd(top);
654 | }
655 | &-swatch,
656 | &-empty {
657 | left: var(--pad);
658 | top: var(--pad);
659 | }
660 | &-hue,
661 | &-opacity {
662 | margin-left: calc(38px + var(--pad));
663 | }
664 | &-input {
665 | &-container {
666 | brd(top);
667 | }
668 | &-group {
669 | pad(0);
670 | }
671 | &-field {
672 | pad();
673 | }
674 | }
675 | &-title {
676 | mar(top);
677 | }
678 | &-dropper {
679 | right: var(--pad);
680 | bottom: var(--pad);
681 |
682 | @media (prefers-color-scheme: dark) {
683 | filter: invert();
684 | }
685 | }
686 | &-palette {
687 | --swatch-size: $select-size;
688 | bg(2);
689 | pad();
690 | brd(top);
691 | mar(0);
692 | }
693 | }
694 | .colorview-swatch::before {
695 | brd();
696 | }
697 |
698 | /**
699 | * Hide elements
700 | **/
701 | [href="https://github.com/openstyles/stylus/wiki/Writing-UserCSS"],
702 | #header .aligned > :nth-child(3), // Editor theme
703 | #header.sticky #details-wrapper,
704 | #header.sticky #actions,
705 | #write-for-frames, // Plus sign for "write for"
706 | #beautify,
707 | #publish,
708 | #lint {
709 | display: none $i;
710 | }
711 |
712 | /**
713 | * Manage
714 | **/
715 | .newUI {
716 | #installed {
717 | mar(0);
718 |
719 | if (show-styles) {
720 | &::before {
721 | content: attr(data-total)' styles';
722 | position: absolute;
723 | top: var(--pad);
724 | right: var(--pad);
725 | fg(2);
726 | }
727 | }
728 | }
729 | .entry {
730 | &.odd {
731 | bg(2);
732 | }
733 |
734 | & > * {
735 | pad();
736 | }
737 | }
738 | .style-info[data-type="version"] {
739 | fg(2);
740 | padding-left: 1ch $i;
741 | }
742 | .style-name {
743 | flex();
744 |
745 | &::before {
746 | display: none;
747 | }
748 |
749 | &-link {
750 | fg();
751 | padding-left: 1ch $i;
752 |
753 | &::after {
754 | display: none;
755 | }
756 | }
757 | }
758 | }
759 |
760 | /**
761 | * Sidebar
762 | **/
763 | #header {
764 | bg(2);
765 | pad();
766 | shd(0);
767 |
768 | @media (max-width: 850px) {
769 | brd(right, 0);
770 | brd(bottom);
771 | display: block;
772 | }
773 |
774 | &-resizer {
775 | brd(0);
776 | brd(right);
777 | width: calc(var(--header-resizer-width) + var(--border-width) * 2);
778 |
779 | &::after {
780 | display: none $i;
781 | }
782 | }
783 |
784 | h1 {
785 | normalise-header();
786 | }
787 | label:not(.radio-wrapper) {
788 | display: inline-flex $i;
789 | }
790 | textarea,
791 | input,
792 | select,
793 | button {
794 | --bg2: var(--bg);
795 | }
796 | }
797 |
798 | if (sidebar-overlay) {
799 | @media (max-width: 850px) {
800 | #header {
801 | brd(bottom, 0);
802 | position: fixed $i;
803 | box(280px, 100%);
804 |
805 | &-resizer {
806 | display: unset $i;
807 | }
808 | }
809 | #header.sticky #basic-info-enabled > :not(#preview-errors),
810 | #header.sticky #mozilla-format-buttons,
811 | #header.sticky #basic-info-name {
812 | display: flex;
813 | }
814 | #header.sticky .buttons > button,
815 | #heading,
816 | h2 {
817 | display: block;
818 | }
819 | }
820 | #header {
821 | bg(-tr);
822 | anim();
823 |
824 | &::-webkit-scrollbar {
825 | display: none;
826 | }
827 |
828 | &:not(:hover) {
829 | width: var(--header-h) $i;
830 | padding: 0 $i;
831 |
832 | * {
833 | opacity: 0;
834 | }
835 | ../-resizer {
836 | opacity: 1 $i;
837 | }
838 | }
839 | }
840 | #stylus {
841 | &-manage,
842 | &-edit {
843 | #sections,
844 | #installed {
845 | padding-left: var(--header-h);
846 | }
847 | }
848 | &-install-usercss {
849 | #header {
850 | position: absolute;
851 | }
852 | .main {
853 | margin-left: 16px;
854 | }
855 | }
856 | }
857 | } else {
858 | @media (max-width: 850px) {
859 | #header {
860 | header-focus();
861 | }
862 | }
863 | }
864 |
865 | // ..in editor
866 | #basic-info {
867 | mar(0);
868 |
869 | @media (max-width: 850px) {
870 | mar(right, 0);
871 | }
872 |
873 | &-enabled {
874 | mar(top);
875 | mar(bottom);
876 |
877 | #header.sticky & {
878 | mar(top, 0);
879 | }
880 | }
881 | }
882 | #actions {
883 | mar(0);
884 |
885 | .buttons > * {
886 | mar(right);
887 | }
888 | }
889 | #preview-errors {
890 | hl();
891 | mar(0);
892 | mar(top);
893 | }
894 | #details-wrapper {
895 | mar(0);
896 |
897 | @media (max-width: 850px) {
898 | vertical-align: unset;
899 |
900 | details[open] > summary + * {
901 | brd();
902 | shd(big);
903 | }
904 | }
905 |
906 | details {
907 | mar(0);
908 |
909 | & > * {
910 | pad(0);
911 | mar(0);
912 | }
913 | }
914 | summary {
915 | normalise-header(false);
916 | position: unset $i;
917 | cursor: pointer $i;
918 | }
919 | label {
920 | pad(0);
921 | padding-bottom: calc(var(--pad) / 2) $i;
922 | }
923 | .aligned > div {
924 | display: flex $i;
925 | align-items: center $i;
926 |
927 | & > * {
928 | mar(top);
929 | }
930 | & > label {
931 | pad(0);
932 | width: 30%;
933 | }
934 | }
935 | }
936 |
937 | // ..in manage
938 | #manage-settings {
939 | .settings-column {
940 | mar(0);
941 | }
942 | }
943 | #filters {
944 | label:hover,
945 | .filter-selection:hover {
946 | background-color: transparent;
947 | transition: none;
948 | }
949 | }
950 | .filter-selection {
951 | mar(bottom);
952 | left: 0;
953 | flex();
954 | gap: 1ch;
955 |
956 | label {
957 | pad(0);
958 | }
959 | .select-wrapper {
960 | mar(0);
961 | }
962 | }
963 | .select-resizer {
964 | position: relative;
965 | left: 0;
966 | }
967 | #search-wrapper,
968 | #sort-wrapper {
969 | gap: var(--pad) $i;
970 | mar(bottom);
971 |
972 | .info {
973 | margin-left: 1ch;
974 | }
975 | }
976 | #add-style {
977 | mar(0);
978 |
979 | &-wrapper {
980 | flex-wrap: unset;
981 | }
982 | &-as-usercss-wrapper {
983 | mar(0);
984 | flex-direction: row;
985 | }
986 | }
987 | #manage-text {
988 | pad(top, 0);
989 | }
990 |
991 | /**
992 | * Popups
993 | **/
994 | #stylus {
995 | .split-btn-menu {
996 | --menu-pad: var(--pad);
997 | pad(0);
998 | brd();
999 | shd(big);
1000 | }
1001 | &-popup {
1002 | --inner-padding: s('calc(%s + var(--pad))', $select-size);
1003 | --outer-padding: var(--pad);
1004 | width: 280px $i;
1005 |
1006 | /.styles-last & #installed {
1007 | brd(top);
1008 | brd(bottom, 0);
1009 | }
1010 |
1011 | #installed {
1012 | brd(bottom);
1013 | }
1014 | .entry {
1015 | &::before {
1016 | top: 0;
1017 | right: var(--pad);
1018 | height: 100%;
1019 | flex();
1020 | fg(2);
1021 | }
1022 |
1023 | &:nth-child(even) {
1024 | bg(2);
1025 | }
1026 |
1027 | &-content {
1028 | height: s('calc(%s + var(--pad) * 2)', $select-size);
1029 | padding-right: calc(var(--pad) * 2);
1030 | }
1031 |
1032 | .main-controls {
1033 | pad(right);
1034 | }
1035 | .style-name {
1036 | line-height: normal;
1037 | flex-direction: row;
1038 | justify-content: flex-start;
1039 |
1040 | &::before {
1041 | display: none;
1042 | }
1043 |
1044 | input[type="checkbox"] {
1045 | position: relative;
1046 | top: 0;
1047 | left: 0;
1048 | }
1049 | }
1050 | &.disabled .style-name {
1051 | fg();
1052 | }
1053 | }
1054 | #main-actions {
1055 | bg();
1056 | brd(bottom);
1057 | flex-direction: column $i;
1058 | }
1059 | #write-wrapper {
1060 | pad(bottom, 0);
1061 | flex-direction: column-reverse $i;
1062 |
1063 | .match {
1064 | opacity: 1 $i;
1065 | }
1066 | }
1067 | #write-style {
1068 | margin-left: s('calc(%s + 1ch)', $select-size) $i;
1069 | mar(bottom);
1070 | width: auto;
1071 | }
1072 | #write-as {
1073 | &::after {
1074 | content: attr(title);
1075 | }
1076 |
1077 | i {
1078 | display: none $i;
1079 | }
1080 | }
1081 | #disableAll-label {
1082 | bg();
1083 |
1084 | &::after {
1085 | content: 'Disable all';
1086 | }
1087 |
1088 | img {
1089 | display: none;
1090 | }
1091 | }
1092 | #popup-options {
1093 | bg(2);
1094 |
1095 | & > * {
1096 | max-width: unset $i;
1097 | }
1098 | button {
1099 | --bg2: var(--bg);
1100 | }
1101 | }
1102 | }
1103 |
1104 | .menu {
1105 | &-title,
1106 | /#confirm > div > b {
1107 | margin: auto;
1108 | pad(bottom);
1109 | }
1110 |
1111 | &-items-wrapper {
1112 | bg();
1113 | pad();
1114 | brd();
1115 | shd(big);
1116 | }
1117 | &-item {
1118 | flex-direction: row;
1119 | justify-content: flex-start;
1120 |
1121 | &:hover,
1122 | &:active {
1123 | background-color: transparent;
1124 | }
1125 | &:not(:last-of-type) {
1126 | mar(bottom);
1127 | }
1128 |
1129 | & > span {
1130 | margin: 0;
1131 | }
1132 | }
1133 | &-icon {
1134 | width: $select-size;
1135 | }
1136 | &-buttons-wrapper {
1137 | pad(top);
1138 | }
1139 |
1140 | .checkbox-container {
1141 | box($select-size);
1142 | margin: 0;
1143 | }
1144 | }
1145 |
1146 | &-embedded-options,
1147 | &-options {
1148 | background-color: transparent $i;
1149 | }
1150 | &-options {
1151 | brd();
1152 | shd(big);
1153 |
1154 | #actions {
1155 | bg(2);
1156 | pad();
1157 | brd(top);
1158 | brd(bottom, 0);
1159 | border-radius: 0 0 var(--border-radius) var(--border-radius);
1160 | mar(0);
1161 |
1162 | button {
1163 | --bg2: var(--bg);
1164 | mar(0);
1165 | }
1166 | }
1167 | #options {
1168 | bg();
1169 | border-radius: 0 0 var(--border-radius) var(--border-radius);
1170 |
1171 | &-title {
1172 | letter-spacing: 0;
1173 | padding-left: 30%;
1174 | }
1175 | &-btn svg {
1176 | top: 0;
1177 | bottom: 0;
1178 | }
1179 |
1180 | .block {
1181 | &:last-child {
1182 | brd(bottom, 0);
1183 | mar(bottom, 0);
1184 | }
1185 |
1186 | .options-wrapper ^[3..-1] {
1187 | padding: 0 var(--pad) var(--pad);
1188 | brd(bottom);
1189 | margin: var(--pad) 0;
1190 | }
1191 |
1192 | h1 {
1193 | padding-right: 1ch;
1194 | }
1195 | label,
1196 | .label {
1197 | mar(0);
1198 |
1199 | &:not(:last-child) {
1200 | mar(bottom);
1201 | }
1202 |
1203 | & > :first-child {
1204 | mar(right, 0);
1205 | }
1206 | &:not([disabled]):hover > :first-child {
1207 | text-shadow: none;
1208 | }
1209 | }
1210 | }
1211 | .iconset {
1212 | gap: 1ch;
1213 |
1214 | input[type="radio"] {
1215 | mar(0);
1216 | }
1217 | }
1218 | }
1219 | }
1220 | }
1221 |
1222 | #message-box {
1223 | background-color: transparent;
1224 |
1225 | &-title {
1226 | pad();
1227 | padding-left: calc(var(--pad) * 2 + 16px) $i;
1228 | }
1229 | &-contents {
1230 | pad();
1231 | }
1232 | &-buttons {
1233 | bg(2);
1234 | text-align: center;
1235 | gap: var(--pad) $i;
1236 | pad();
1237 | brd(top);
1238 | border-radius: 0 0 var(--border-radius) var(--border-radius);
1239 | justify-content: space-between;
1240 |
1241 | & > * {
1242 | mar(0);
1243 | }
1244 | input,
1245 | button {
1246 | --bg2: var(--bg);
1247 | }
1248 | [data-cmd="close"] {
1249 | display: none;
1250 | }
1251 | }
1252 |
1253 | & > div {
1254 | bg();
1255 | brd();
1256 | shd(big);
1257 | }
1258 | }
1259 | .config {
1260 | &-dialog {
1261 | --pad: inherit;
1262 | --value-cell-w: 90px;
1263 | }
1264 | &-body {
1265 | label {
1266 | pad(0);
1267 | brd(0);
1268 | mar(0);
1269 | flex-direction: row-reverse $i;
1270 |
1271 | &:not(:last-child) {
1272 | mar(bottom);
1273 | }
1274 | }
1275 | input:not([type="checkbox"]),
1276 | select {
1277 | width: var(--value-cell-w);
1278 | }
1279 | input[type="checkbox"] {
1280 | margin-left: s('calc(var(--value-cell-w) - %s)', $select-size) $i;
1281 | }
1282 | }
1283 | &-reset-icon {
1284 | margin-top: -8px $i;
1285 | right: var(--pad) $i;
1286 | }
1287 | }
1288 | #message-box > div,
1289 | #stylus-options,
1290 | #help-popup {
1291 | dropfade();
1292 | }
1293 | #message-box {
1294 | animation: none;
1295 | }
1296 | #message-box,
1297 | #options {
1298 | &-title {
1299 | bg(3);
1300 | pad(top);
1301 | pad(bottom);
1302 | brd(bottom);
1303 | border-radius: var(--border-radius) var(--border-radius) 0 0;
1304 | min-height: var(--header-h);
1305 | flex();
1306 |
1307 | &::before {
1308 | left: var(--pad);
1309 | background-image: url('./icon/16.png');
1310 | padding: 0 16px 16px 0;
1311 | }
1312 | }
1313 | &-close-icon {
1314 | top: 0;
1315 | right: 0;
1316 | box(29px, var(--header-h));
1317 | flex(,,center);
1318 | }
1319 | }
1320 | #help-popup {
1321 | --pad-x: var(--pad);
1322 | --pad-y: var(--pad);
1323 |
1324 | /#confirm > div,
1325 | & {
1326 | bg();
1327 | pad(0);
1328 | brd();
1329 | shd(big);
1330 | }
1331 |
1332 | .title {
1333 | bg(2);
1334 | pad();
1335 | padding-right: 24px $i;
1336 | brd(bottom);
1337 | border-radius: var(--border-radius) var(--border-radius) 0 0;
1338 | mar(0);
1339 | }
1340 | .contents {
1341 | pad();
1342 | }
1343 | .keymap-list {
1344 | pad(0);
1345 |
1346 | input[type="search"] {
1347 | mar(0);
1348 | mar(bottom);
1349 | }
1350 | }
1351 | }
1352 | .regexp-report {
1353 | &-note {
1354 | fg(2);
1355 | }
1356 |
1357 | details[data-type="full"] {
1358 | clr(10);
1359 | }
1360 | }
1361 | .help-text mark {
1362 | bgc(2);
1363 | brd();
1364 | }
1365 | #search-replace-dialog {
1366 | bg(2);
1367 | brd(0);
1368 | brd(bottom);
1369 | shd(0);
1370 | opacity: 1 $i;
1371 | height: calc(var(--pad) * 4 + var(--font-size));
1372 | left: var(--header-width);
1373 | right: var(--scrollbar-width);
1374 | max-width: unset;
1375 | flex(,,center);
1376 |
1377 | .compact-layout & {
1378 | left: 0;
1379 | top: unset;
1380 | bottom: 0;
1381 | brd(top);
1382 | brd(bottom, 0);
1383 | }
1384 |
1385 | & > div {
1386 | background-color: unset $i;
1387 | pad(0);
1388 | }
1389 | [data-type="input-wrapper"] {
1390 | align-items: center;
1391 |
1392 | &::before {
1393 | content: 'Search:\00a0'
1394 | }
1395 | }
1396 | textarea {
1397 | bgc();
1398 | padding: calc(var(--pad) / 2);
1399 | brd();
1400 | mar(right);
1401 | height: unset;
1402 | focus();
1403 |
1404 | &::placeholder {
1405 | color: transparent;
1406 | }
1407 | }
1408 | [data-type="actions"] {
1409 | pad(left, 0);
1410 | opacity: 1;
1411 |
1412 | a {
1413 | height: calc(16px + var(--pad) - 1px); // TODO: doesn't work with uneven padding
1414 | flex();
1415 |
1416 | &:first-child {
1417 | border-radius: var(--border-radius) 0 0 var(--border-radius);
1418 | }
1419 | &:last-child {
1420 | border-radius: 0 var(--border-radius) var(--border-radius) 0;
1421 | }
1422 | &:not(:first-child) {
1423 | border-left: none;
1424 | }
1425 | &:not(:last-child) {
1426 | border-right: none;
1427 | }
1428 | }
1429 | }
1430 | [data-action] {
1431 | bg();
1432 | brd();
1433 | border-radius: 0 $i;
1434 | padding: 0 calc(var(--pad) / 2);
1435 | }
1436 | [data-action="case"] {
1437 | fg(2);
1438 |
1439 | &:hover {
1440 | fg();
1441 | text-decoration: none;
1442 | }
1443 | }
1444 | .CodeMirror-search-hint {
1445 | display: none;
1446 | }
1447 | [data-type="tally"] {
1448 | fg(2);
1449 | opacity: 1;
1450 | position: absolute;
1451 | right: var(--pad);
1452 |
1453 | &:not(:empty)::after {
1454 | content: '\00a0matches';
1455 | }
1456 | }
1457 | }
1458 | }
1459 |
1460 |
--------------------------------------------------------------------------------