mirror of
https://gitlab.com/tildes/tildes.git
synced 2026-04-16 06:18:34 +02:00
CSS: add "-color" suffix to all custom properties
I think it's best to be specific that all of these are colors, otherwise there could be some confusing usages (and potential collisions) with ones like --border. Sorry @Bauke (and probably some others), I know this will most likely mess with any changes you've already made to override these properties, but I wanted to do it eventually and it's only going to get worse the longer I wait.
This commit is contained in:
Deimos
@@ -12,26 +12,26 @@
|
||||
// will fall back to the default value from `$default-theme` instead.
|
||||
|
||||
body {
|
||||
color: var(--foreground-primary);
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--foreground-primary-color);
|
||||
background-color: var(--background-secondary-color);
|
||||
|
||||
* {
|
||||
border-color: var(--border);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover);
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--link-visited);
|
||||
color: var(--link-visited-color);
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
@@ -39,293 +39,293 @@ body {
|
||||
}
|
||||
|
||||
&:visited code {
|
||||
color: var(--link-visited);
|
||||
color: var(--link-visited-color);
|
||||
}
|
||||
}
|
||||
|
||||
a.link-user,
|
||||
a.link-group {
|
||||
&:visited {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
a.logged-in-user-alert {
|
||||
color: var(--alert);
|
||||
color: var(--alert-color);
|
||||
|
||||
&:visited {
|
||||
color: var(--alert);
|
||||
color: var(--alert-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include syntax-highlighting;
|
||||
|
||||
blockquote {
|
||||
border-color: var(--foreground-highlight);
|
||||
background-color: var(--background-secondary);
|
||||
border-color: var(--foreground-highlight-color);
|
||||
background-color: var(--background-secondary-color);
|
||||
|
||||
code,
|
||||
pre {
|
||||
background-color: var(--background-primary);
|
||||
background-color: var(--background-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
color: var(--foreground-highlight);
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--foreground-highlight-color);
|
||||
background-color: var(--background-secondary-color);
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: var(--background-primary);
|
||||
background-color: var(--background-primary-color);
|
||||
}
|
||||
|
||||
meter {
|
||||
// Crazy styles to get this to work adapted from Spectre.css's _meters.scss
|
||||
background: var(--background-secondary);
|
||||
background: var(--background-secondary-color);
|
||||
|
||||
&::-webkit-meter-bar {
|
||||
background: var(--background-secondary);
|
||||
background: var(--background-secondary-color);
|
||||
}
|
||||
|
||||
// For some mysterious reason, none of the below rules can be merged
|
||||
&::-webkit-meter-optimum-value {
|
||||
background: var(--success);
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
&:-moz-meter-optimum::-moz-meter-bar {
|
||||
background: var(--success);
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
&::-webkit-meter-suboptimum-value {
|
||||
background: var(--warning);
|
||||
background: var(--warning-color);
|
||||
}
|
||||
|
||||
&:-moz-meter-sub-optimum::-moz-meter-bar {
|
||||
background: var(--warning);
|
||||
background: var(--warning-color);
|
||||
}
|
||||
|
||||
&::-webkit-meter-even-less-good-value {
|
||||
background: var(--error);
|
||||
background: var(--error-color);
|
||||
}
|
||||
|
||||
&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
|
||||
background: var(--error);
|
||||
background: var(--error-color);
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr:nth-of-type(2n + 1) {
|
||||
background-color: var(--background-secondary);
|
||||
background-color: var(--background-secondary-color);
|
||||
}
|
||||
|
||||
.table td {
|
||||
border-bottom-color: var(--border);
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
.table th {
|
||||
border-bottom-color: var(--foreground-highlight);
|
||||
border-bottom-color: var(--foreground-highlight-color);
|
||||
}
|
||||
|
||||
.form-autocomplete {
|
||||
.menu {
|
||||
background-color: var(--background-secondary);
|
||||
background-color: var(--background-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb .breadcrumb-item {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
|
||||
&:not(:last-child) {
|
||||
a {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
a {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: var(--button);
|
||||
color: var(--button-color);
|
||||
background-color: transparent;
|
||||
border-color: var(--button);
|
||||
border-color: var(--button-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-transparent);
|
||||
background-color: var(--button-transparent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-comment-collapse:hover {
|
||||
border-color: var(--border);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
color: var(--foreground-secondary);
|
||||
border-color: var(--border);
|
||||
color: var(--foreground-secondary-color);
|
||||
border-color: var(--border-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-link {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
color: var(--button-by-brightness);
|
||||
color: var(--button-by-brightness-color);
|
||||
|
||||
background-color: var(--button);
|
||||
border-color: var(--button);
|
||||
background-color: var(--button-color);
|
||||
border-color: var(--button-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-darkened-10);
|
||||
border-color: var(--button-darkened-10);
|
||||
background-color: var(--button-darkened-10-color);
|
||||
border-color: var(--button-darkened-10-color);
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--button-by-brightness);
|
||||
color: var(--button-by-brightness-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-used {
|
||||
color: var(--button-used);
|
||||
border-color: var(--button-used-darkened-3);
|
||||
color: var(--button-used-color);
|
||||
border-color: var(--button-used-darkened-3-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-used-darkened-3);
|
||||
border-color: var(--button-used-darkened-8);
|
||||
color: var(--white);
|
||||
background-color: var(--button-used-darkened-3-color);
|
||||
border-color: var(--button-used-darkened-8-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-post-action {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--foreground-extreme);
|
||||
color: var(--foreground-extreme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-post-action-used {
|
||||
color: var(--button-used);
|
||||
color: var(--button-used-color);
|
||||
}
|
||||
|
||||
.btn-comment-label-exemplary {
|
||||
@include label-button(var(--comment-label-exemplary));
|
||||
@include label-button(var(--comment-label-exemplary-color));
|
||||
}
|
||||
|
||||
.btn-comment-label-joke {
|
||||
@include label-button(var(--comment-label-joke));
|
||||
@include label-button(var(--comment-label-joke-color));
|
||||
}
|
||||
|
||||
.btn-comment-label-noise {
|
||||
@include label-button(var(--comment-label-noise));
|
||||
@include label-button(var(--comment-label-noise-color));
|
||||
}
|
||||
|
||||
.btn-comment-label-offtopic {
|
||||
@include label-button(var(--comment-label-offtopic));
|
||||
@include label-button(var(--comment-label-offtopic-color));
|
||||
}
|
||||
|
||||
.btn-comment-label-malice {
|
||||
@include label-button(var(--comment-label-malice));
|
||||
@include label-button(var(--comment-label-malice-color));
|
||||
}
|
||||
|
||||
.chip {
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--foreground-highlight);
|
||||
background-color: var(--background-secondary-color);
|
||||
color: var(--foreground-highlight-color);
|
||||
|
||||
&.active {
|
||||
background-color: var(--button);
|
||||
color: var(--button-by-brightness);
|
||||
background-color: var(--button-color);
|
||||
color: var(--button-by-brightness-color);
|
||||
|
||||
.btn {
|
||||
color: var(--button-by-brightness);
|
||||
color: var(--button-by-brightness-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: var(--error);
|
||||
background-color: var(--error-color);
|
||||
|
||||
color: var(--error-by-brightness);
|
||||
color: var(--error-by-brightness-color);
|
||||
|
||||
.btn {
|
||||
color: var(--error-by-brightness);
|
||||
color: var(--error-by-brightness-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-branch-counter {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
|
||||
.comment-nav-link,
|
||||
.comment-nav-link:visited {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
|
||||
.comment-removed-warning {
|
||||
color: var(--warning);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.label-comment-exemplary {
|
||||
@include theme-special-label(
|
||||
var(--background-label-exemplary),
|
||||
var(--foreground-label-exemplary),
|
||||
var(--comment-label-exemplary)
|
||||
var(--background-label-exemplary-color),
|
||||
var(--foreground-label-exemplary-color),
|
||||
var(--comment-label-exemplary-color)
|
||||
);
|
||||
}
|
||||
|
||||
.label-comment-joke {
|
||||
@include theme-special-label(
|
||||
var(--background-label-joke),
|
||||
var(--foreground-label-joke),
|
||||
var(--comment-label-joke)
|
||||
var(--background-label-joke-color),
|
||||
var(--foreground-label-joke-color),
|
||||
var(--comment-label-joke-color)
|
||||
);
|
||||
}
|
||||
|
||||
.label-comment-noise {
|
||||
@include theme-special-label(
|
||||
var(--background-label-noise),
|
||||
var(--foreground-label-noise),
|
||||
var(--comment-label-noise)
|
||||
var(--background-label-noise-color),
|
||||
var(--foreground-label-noise-color),
|
||||
var(--comment-label-noise-color)
|
||||
);
|
||||
}
|
||||
|
||||
.label-comment-offtopic {
|
||||
@include theme-special-label(
|
||||
var(--background-label-offtopic),
|
||||
var(--foreground-label-offtopic),
|
||||
var(--comment-label-offtopic)
|
||||
var(--background-label-offtopic-color),
|
||||
var(--foreground-label-offtopic-color),
|
||||
var(--comment-label-offtopic-color)
|
||||
);
|
||||
}
|
||||
|
||||
.label-comment-malice {
|
||||
@include theme-special-label(
|
||||
var(--background-label-malice),
|
||||
var(--foreground-label-malice),
|
||||
var(--comment-label-malice)
|
||||
var(--background-label-malice-color),
|
||||
var(--foreground-label-malice-color),
|
||||
var(--comment-label-malice-color)
|
||||
);
|
||||
}
|
||||
|
||||
%collapsed-theme {
|
||||
.comment-header {
|
||||
background-color: var(--background-primary);
|
||||
background-color: var(--background-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -340,37 +340,37 @@ body {
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
color: var(--foreground-highlight);
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--foreground-highlight-color);
|
||||
background-color: var(--background-secondary-color);
|
||||
}
|
||||
|
||||
.comment:target > .comment-itself {
|
||||
border-left-color: var(--stripe-target);
|
||||
border-left-color: var(--stripe-target-color);
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-color: var(--border);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.divider[data-content]::after {
|
||||
color: var(--foreground-primary);
|
||||
background-color: var(--background-primary);
|
||||
color: var(--foreground-primary-color);
|
||||
background-color: var(--background-primary-color);
|
||||
}
|
||||
|
||||
.donation-goal-meter-over-goal {
|
||||
background: var(--comment-label-exemplary);
|
||||
background: var(--comment-label-exemplary-color);
|
||||
|
||||
&::-webkit-meter-bar {
|
||||
background: var(--comment-label-exemplary);
|
||||
background: var(--comment-label-exemplary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown .menu .btn-post-action:hover {
|
||||
background-color: var(--background-secondary);
|
||||
background-color: var(--background-secondary-color);
|
||||
}
|
||||
|
||||
.empty-subtitle {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
|
||||
.form-autocomplete .form-autocomplete-input .form-input {
|
||||
@@ -379,45 +379,45 @@ body {
|
||||
|
||||
.form-input,
|
||||
.form-input[readonly] {
|
||||
color: var(--foreground-primary);
|
||||
background-color: var(--background-input);
|
||||
border-color: var(--border);
|
||||
color: var(--foreground-primary-color);
|
||||
background-color: var(--background-input-color);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
// error colors for :invalid inputs, using same approach as Spectre
|
||||
.form-input:not(:placeholder-shown):invalid {
|
||||
border-color: var(--error);
|
||||
border-color: var(--error-color);
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px var(--error);
|
||||
box-shadow: 0 0 0 1px var(--error-color);
|
||||
}
|
||||
|
||||
+ .form-input-hint {
|
||||
color: var(--error);
|
||||
color: var(--error-color);
|
||||
}
|
||||
}
|
||||
|
||||
.form-markdown-preview {
|
||||
border-color: var(--border);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.form-select {
|
||||
border-color: var(--border);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.form-select:not([multiple]):not([size]) {
|
||||
background-color: var(--background-input);
|
||||
background-color: var(--background-input-color);
|
||||
}
|
||||
|
||||
.group-list-item-not-subscribed {
|
||||
a.link-group {
|
||||
color: var(--warning);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--foreground-highlight);
|
||||
background-color: var(--background-secondary-color);
|
||||
color: var(--foreground-highlight-color);
|
||||
}
|
||||
|
||||
.label-topic-tag {
|
||||
@@ -426,133 +426,133 @@ body {
|
||||
a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: var(--foreground-primary);
|
||||
color: var(--foreground-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.label-topic-tag-nsfw,
|
||||
.label-topic-tag[class*="label-topic-tag-nsfw-"] {
|
||||
@include theme-special-label(
|
||||
var(--topic-tag-nsfw),
|
||||
var(--topic-tag-nsfw-foreground),
|
||||
var(--topic-tag-nsfw-border)
|
||||
var(--topic-tag-nsfw-color),
|
||||
var(--topic-tag-nsfw-foreground-color),
|
||||
var(--topic-tag-nsfw-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.label-topic-tag-spoiler,
|
||||
.label-topic-tag[class*="label-topic-tag-spoiler-"] {
|
||||
@include theme-special-label(
|
||||
var(--topic-tag-spoiler),
|
||||
var(--topic-tag-spoiler-foreground),
|
||||
var(--topic-tag-spoiler-border)
|
||||
var(--topic-tag-spoiler-color),
|
||||
var(--topic-tag-spoiler-foreground-color),
|
||||
var(--topic-tag-spoiler-border-color)
|
||||
);
|
||||
}
|
||||
|
||||
.link-no-visited-color:visited {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.logged-in-user-username,
|
||||
.logged-in-user-username:visited {
|
||||
color: var(--foreground-primary);
|
||||
color: var(--foreground-primary-color);
|
||||
}
|
||||
|
||||
.menu {
|
||||
background-color: var(--background-primary);
|
||||
border-color: var(--border);
|
||||
background-color: var(--background-primary-color);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.message {
|
||||
header {
|
||||
color: var(--foreground-highlight);
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--foreground-highlight-color);
|
||||
background-color: var(--background-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.nav .nav-item {
|
||||
a {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover);
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.active a {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-list {
|
||||
a:visited {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-controls {
|
||||
background-color: var(--background-secondary);
|
||||
background-color: var(--background-secondary-color);
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
background-color: var(--background-primary);
|
||||
border-left-color: var(--border);
|
||||
background-color: var(--background-primary-color);
|
||||
border-left-color: var(--border-color);
|
||||
}
|
||||
|
||||
#site-footer a:visited {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.site-header-context {
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--foreground-primary);
|
||||
color: var(--foreground-primary-color);
|
||||
}
|
||||
|
||||
.toast a,
|
||||
.toast a:visited {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
.site-header-logo,
|
||||
.site-header-logo:visited {
|
||||
color: var(--foreground-highlight);
|
||||
color: var(--foreground-highlight-color);
|
||||
}
|
||||
|
||||
.site-header-sidebar-button.badge[data-badge]::after {
|
||||
background-color: var(--alert);
|
||||
background-color: var(--alert-color);
|
||||
}
|
||||
|
||||
.tab {
|
||||
border-color: var(--border);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.tab .tab-item {
|
||||
a {
|
||||
color: var(--foreground-primary);
|
||||
color: var(--foreground-primary-color);
|
||||
}
|
||||
|
||||
&.active a,
|
||||
&.active button {
|
||||
color: var(--link);
|
||||
border-bottom-color: var(--link);
|
||||
color: var(--link-color);
|
||||
border-bottom-color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: var(--error);
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--warning);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.text-wiki {
|
||||
@@ -563,76 +563,76 @@ body {
|
||||
h5,
|
||||
h6 {
|
||||
a {
|
||||
color: var(--foreground-highlight);
|
||||
color: var(--foreground-highlight-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
color: var(--foreground-highlight);
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--foreground-highlight-color);
|
||||
background-color: var(--background-secondary-color);
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
.toast.toast-warning {
|
||||
border-color: var(--warning);
|
||||
color: var(--warning-foreground);
|
||||
background-color: var(--warning-background);
|
||||
border-color: var(--warning-color);
|
||||
color: var(--warning-foreground-color);
|
||||
background-color: var(--warning-background-color);
|
||||
}
|
||||
|
||||
.topic-actions {
|
||||
.btn-post-action {
|
||||
color: var(--link);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.btn-post-action-used {
|
||||
color: var(--link-visited);
|
||||
color: var(--link-visited-color);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-listing {
|
||||
> li:nth-of-type(2n) {
|
||||
color: var(--foreground-mixed);
|
||||
background-color: var(--background-mixed);
|
||||
color: var(--foreground-mixed-color);
|
||||
background-color: var(--background-mixed-color);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-full-byline {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
|
||||
.topic-full-tags {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
|
||||
a {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-info-comments-new {
|
||||
color: var(--alert);
|
||||
color: var(--alert-color);
|
||||
}
|
||||
|
||||
.topic-info-source-scheduled {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
|
||||
.topic-log-entry-time {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
|
||||
.topic-text-excerpt {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
|
||||
summary::after {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
|
||||
&[open] {
|
||||
color: var(--foreground-primary);
|
||||
color: var(--foreground-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -640,48 +640,48 @@ body {
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-darkened-3);
|
||||
border-color: var(--button-darkened-8);
|
||||
background-color: var(--button-darkened-3-color);
|
||||
border-color: var(--button-darkened-8-color);
|
||||
}
|
||||
}
|
||||
|
||||
.is-comment-deleted,
|
||||
.is-comment-removed {
|
||||
color: var(--foreground-secondary);
|
||||
color: var(--foreground-secondary-color);
|
||||
}
|
||||
|
||||
.is-comment-mine > .comment-itself {
|
||||
border-left-color: var(--stripe-mine);
|
||||
border-left-color: var(--stripe-mine-color);
|
||||
}
|
||||
|
||||
.is-comment-exemplary {
|
||||
> .comment-itself {
|
||||
border-left-color: var(--comment-label-exemplary);
|
||||
border-left-color: var(--comment-label-exemplary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.is-comment-new {
|
||||
> .comment-itself {
|
||||
border-left-color: var(--alert);
|
||||
border-left-color: var(--alert-color);
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
color: var(--foreground-highlight);
|
||||
color: var(--foreground-highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
.is-message-mine,
|
||||
.is-topic-mine {
|
||||
border-left-color: var(--stripe-mine);
|
||||
border-left-color: var(--stripe-mine-color);
|
||||
}
|
||||
|
||||
.is-topic-official {
|
||||
border-left-color: var(--alert);
|
||||
border-left-color: var(--alert-color);
|
||||
|
||||
h1 {
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--alert);
|
||||
color: var(--alert-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
&.btn-used:hover {
|
||||
background-color: $color;
|
||||
color: var(--white);
|
||||
color: var(--white-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -199,355 +199,355 @@
|
||||
|
||||
// When creating CSS custom properties and using any of Sass' capabilities
|
||||
// you'll have to interpolate it with the Sass syntax `#{...}` as seen below.
|
||||
--alert: #{map-get($theme, "alert")};
|
||||
--alert-color: #{map-get($theme, "alert")};
|
||||
|
||||
--background-input: #{map-get($theme, "background-input")};
|
||||
--background-mixed:
|
||||
--background-input-color: #{map-get($theme, "background-input")};
|
||||
--background-mixed-color:
|
||||
#{mix(
|
||||
map-get($theme, "background-primary"),
|
||||
map-get($theme, "background-secondary")
|
||||
)};
|
||||
--background-primary: #{map-get($theme, "background-primary")};
|
||||
--background-secondary: #{map-get($theme, "background-secondary")};
|
||||
--background-primary-color: #{map-get($theme, "background-primary")};
|
||||
--background-secondary-color: #{map-get($theme, "background-secondary")};
|
||||
|
||||
--border: #{map-get($theme, "border")};
|
||||
--border-color: #{map-get($theme, "border")};
|
||||
|
||||
--button: #{map-get($theme, "button")};
|
||||
--button-by-brightness:
|
||||
--button-color: #{map-get($theme, "button")};
|
||||
--button-by-brightness-color:
|
||||
#{choose-by-brightness(
|
||||
map-get($theme, "button"),
|
||||
map-get($theme, "black"),
|
||||
map-get($theme, "white")
|
||||
)};
|
||||
--button-transparent: #{rgba(map-get($theme, "button"), 0.2)};
|
||||
--button-transparent-color: #{rgba(map-get($theme, "button"), 0.2)};
|
||||
|
||||
--button-darkened-3: #{darken(map-get($theme, "button"), 3%)};
|
||||
--button-darkened-8: #{darken(map-get($theme, "button"), 8%)};
|
||||
--button-darkened-10: #{darken(map-get($theme, "button"), 10%)};
|
||||
--button-darkened-3-color: #{darken(map-get($theme, "button"), 3%)};
|
||||
--button-darkened-8-color: #{darken(map-get($theme, "button"), 8%)};
|
||||
--button-darkened-10-color: #{darken(map-get($theme, "button"), 10%)};
|
||||
|
||||
--button-used: #{map-get($theme, "button-used")};
|
||||
--button-used-darkened-3: #{darken(map-get($theme, "button-used"), 3%)};
|
||||
--button-used-darkened-8: #{darken(map-get($theme, "button-used"), 8%)};
|
||||
--button-used-color: #{map-get($theme, "button-used")};
|
||||
--button-used-darkened-3-color: #{darken(map-get($theme, "button-used"), 3%)};
|
||||
--button-used-darkened-8-color: #{darken(map-get($theme, "button-used"), 8%)};
|
||||
|
||||
--error: #{map-get($theme, "error")};
|
||||
--error-by-brightness:
|
||||
--error-color: #{map-get($theme, "error")};
|
||||
--error-by-brightness-color:
|
||||
#{choose-by-brightness(
|
||||
map-get($theme, "error"),
|
||||
map-get($theme, "black"),
|
||||
map-get($theme, "white")
|
||||
)};
|
||||
|
||||
--foreground-extreme:
|
||||
--foreground-extreme-color:
|
||||
#{choose-by-brightness(
|
||||
map-get($theme, "background-primary"),
|
||||
map-get($theme, "black"),
|
||||
map-get($theme, "white")
|
||||
)};
|
||||
--foreground-highlight: #{map-get($theme, "foreground-highlight")};
|
||||
--foreground-mixed:
|
||||
--foreground-highlight-color: #{map-get($theme, "foreground-highlight")};
|
||||
--foreground-mixed-color:
|
||||
#{mix(
|
||||
map-get($theme, "foreground-primary"),
|
||||
map-get($theme, "foreground-highlight")
|
||||
)};
|
||||
--foreground-primary: #{map-get($theme, "foreground-primary")};
|
||||
--foreground-secondary: #{map-get($theme, "foreground-secondary")};
|
||||
--foreground-primary-color: #{map-get($theme, "foreground-primary")};
|
||||
--foreground-secondary-color: #{map-get($theme, "foreground-secondary")};
|
||||
|
||||
--link: #{map-get($theme, "link")};
|
||||
--link-hover: #{darken(map-get($theme, "link"), 5%)};
|
||||
--link-visited: #{map-get($theme, "link-visited")};
|
||||
--link-color: #{map-get($theme, "link")};
|
||||
--link-hover-color: #{darken(map-get($theme, "link"), 5%)};
|
||||
--link-visited-color: #{map-get($theme, "link-visited")};
|
||||
|
||||
--stripe-mine: #{map-get($theme, "stripe-mine")};
|
||||
--stripe-target: #{map-get($theme, "stripe-target")};
|
||||
--stripe-mine-color: #{map-get($theme, "stripe-mine")};
|
||||
--stripe-target-color: #{map-get($theme, "stripe-target")};
|
||||
|
||||
--success: #{map-get($theme, "success")};
|
||||
--success-color: #{map-get($theme, "success")};
|
||||
|
||||
--syntax-builtin: #{map-get($theme, "syntax-builtin")};
|
||||
--syntax-comment: #{map-get($theme, "syntax-comment")};
|
||||
--syntax-constant: #{map-get($theme, "syntax-constant")};
|
||||
--syntax-keyword: #{map-get($theme, "syntax-keyword")};
|
||||
--syntax-literal: #{map-get($theme, "syntax-literal")};
|
||||
--syntax-string: #{map-get($theme, "syntax-string")};
|
||||
--syntax-builtin-color: #{map-get($theme, "syntax-builtin")};
|
||||
--syntax-comment-color: #{map-get($theme, "syntax-comment")};
|
||||
--syntax-constant-color: #{map-get($theme, "syntax-constant")};
|
||||
--syntax-keyword-color: #{map-get($theme, "syntax-keyword")};
|
||||
--syntax-literal-color: #{map-get($theme, "syntax-literal")};
|
||||
--syntax-string-color: #{map-get($theme, "syntax-string")};
|
||||
|
||||
// Colors for the special topic tags
|
||||
@if $is-light {
|
||||
--topic-tag-nsfw: #{map-get($theme, "topic-tag-nsfw")};
|
||||
--topic-tag-nsfw-foreground: #{map-get($theme, "white")};
|
||||
--topic-tag-nsfw-border: transparent;
|
||||
--topic-tag-nsfw-color: #{map-get($theme, "topic-tag-nsfw")};
|
||||
--topic-tag-nsfw-foreground-color: #{map-get($theme, "white")};
|
||||
--topic-tag-nsfw-border-color: transparent;
|
||||
|
||||
--topic-tag-spoiler: #{map-get($theme, "topic-tag-spoiler")};
|
||||
--topic-tag-spoiler-foreground: #{map-get($theme, "white")};
|
||||
--topic-tag-spoiler-border: transparent;
|
||||
--topic-tag-spoiler-color: #{map-get($theme, "topic-tag-spoiler")};
|
||||
--topic-tag-spoiler-foreground-color: #{map-get($theme, "white")};
|
||||
--topic-tag-spoiler-border-color: transparent;
|
||||
} @else {
|
||||
--topic-tag-nsfw: transparent;
|
||||
--topic-tag-nsfw-foreground: #{map-get($theme, "topic-tag-nsfw")};
|
||||
--topic-tag-nsfw-border: #{map-get($theme, "topic-tag-nsfw")};
|
||||
--topic-tag-nsfw-color: transparent;
|
||||
--topic-tag-nsfw-foreground-color: #{map-get($theme, "topic-tag-nsfw")};
|
||||
--topic-tag-nsfw-border-color: #{map-get($theme, "topic-tag-nsfw")};
|
||||
|
||||
--topic-tag-spoiler: transparent;
|
||||
--topic-tag-spoiler-foreground: #{map-get($theme, "topic-tag-spoiler")};
|
||||
--topic-tag-spoiler-border: #{map-get($theme, "topic-tag-spoiler")};
|
||||
--topic-tag-spoiler-color: transparent;
|
||||
--topic-tag-spoiler-foreground-color: #{map-get($theme, "topic-tag-spoiler")};
|
||||
--topic-tag-spoiler-border-color: #{map-get($theme, "topic-tag-spoiler")};
|
||||
}
|
||||
|
||||
--warning: #{map-get($theme, "warning")};
|
||||
--warning-color: #{map-get($theme, "warning")};
|
||||
|
||||
// Colors for warning toasts
|
||||
@if $is-light {
|
||||
--warning-background: #{rgba(map-get($theme, "warning"), 0.9)};
|
||||
--warning-foreground: #{map-get($theme, "black")};
|
||||
--warning-background-color: #{rgba(map-get($theme, "warning"), 0.9)};
|
||||
--warning-foreground-color: #{map-get($theme, "black")};
|
||||
} @else {
|
||||
--warning-background: transparent;
|
||||
--warning-foreground: #{map-get($theme, "warning")};
|
||||
--warning-background-color: transparent;
|
||||
--warning-foreground-color: #{map-get($theme, "warning")};
|
||||
}
|
||||
|
||||
// Colors that were hardcoded in previously.
|
||||
--white: #{map-get($theme, "white")};
|
||||
--white-color: #{map-get($theme, "white")};
|
||||
|
||||
// Variables for the comment labels.
|
||||
@if $is-light {
|
||||
--background-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
|
||||
--background-label-joke: #{map-get($theme, "comment-label-joke")};
|
||||
--background-label-noise: #{map-get($theme, "comment-label-noise")};
|
||||
--background-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
|
||||
--background-label-malice: #{map-get($theme, "comment-label-malice")};
|
||||
--background-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
|
||||
--background-label-joke-color: #{map-get($theme, "comment-label-joke")};
|
||||
--background-label-noise-color: #{map-get($theme, "comment-label-noise")};
|
||||
--background-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
|
||||
--background-label-malice-color: #{map-get($theme, "comment-label-malice")};
|
||||
|
||||
--comment-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
|
||||
--comment-label-joke: #{map-get($theme, "comment-label-joke")};
|
||||
--comment-label-noise: #{map-get($theme, "comment-label-noise")};
|
||||
--comment-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
|
||||
--comment-label-malice: #{map-get($theme, "comment-label-malice")};
|
||||
--comment-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
|
||||
--comment-label-joke-color: #{map-get($theme, "comment-label-joke")};
|
||||
--comment-label-noise-color: #{map-get($theme, "comment-label-noise")};
|
||||
--comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
|
||||
--comment-label-malice-color: #{map-get($theme, "comment-label-malice")};
|
||||
|
||||
--foreground-label-exemplary: #{map-get($theme, "white")};
|
||||
--foreground-label-joke: #{map-get($theme, "white")};
|
||||
--foreground-label-noise: #{map-get($theme, "white")};
|
||||
--foreground-label-offtopic: #{map-get($theme, "white")};
|
||||
--foreground-label-malice: #{map-get($theme, "white")};
|
||||
--foreground-label-exemplary-color: #{map-get($theme, "white")};
|
||||
--foreground-label-joke-color: #{map-get($theme, "white")};
|
||||
--foreground-label-noise-color: #{map-get($theme, "white")};
|
||||
--foreground-label-offtopic-color: #{map-get($theme, "white")};
|
||||
--foreground-label-malice-color: #{map-get($theme, "white")};
|
||||
} @else {
|
||||
--background-label-exemplary: transparent;
|
||||
--background-label-joke: transparent;
|
||||
--background-label-noise: transparent;
|
||||
--background-label-offtopic: transparent;
|
||||
--background-label-malice: transparent;
|
||||
--background-label-exemplary-color: transparent;
|
||||
--background-label-joke-color: transparent;
|
||||
--background-label-noise-color: transparent;
|
||||
--background-label-offtopic-color: transparent;
|
||||
--background-label-malice-color: transparent;
|
||||
|
||||
--comment-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
|
||||
--comment-label-joke: #{map-get($theme, "comment-label-joke")};
|
||||
--comment-label-noise: #{map-get($theme, "comment-label-noise")};
|
||||
--comment-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
|
||||
--comment-label-malice: #{map-get($theme, "comment-label-malice")};
|
||||
--comment-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
|
||||
--comment-label-joke-color: #{map-get($theme, "comment-label-joke")};
|
||||
--comment-label-noise-color: #{map-get($theme, "comment-label-noise")};
|
||||
--comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
|
||||
--comment-label-malice-color: #{map-get($theme, "comment-label-malice")};
|
||||
|
||||
--foreground-label-exemplary: #{map-get($theme, "comment-label-exemplary")};
|
||||
--foreground-label-joke: #{map-get($theme, "comment-label-joke")};
|
||||
--foreground-label-noise: #{map-get($theme, "comment-label-noise")};
|
||||
--foreground-label-offtopic: #{map-get($theme, "comment-label-offtopic")};
|
||||
--foreground-label-malice: #{map-get($theme, "comment-label-malice")};
|
||||
--foreground-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
|
||||
--foreground-label-joke-color: #{map-get($theme, "comment-label-joke")};
|
||||
--foreground-label-noise-color: #{map-get($theme, "comment-label-noise")};
|
||||
--foreground-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
|
||||
--foreground-label-malice-color: #{map-get($theme, "comment-label-malice")};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin syntax-highlighting {
|
||||
.highlight {
|
||||
.syntax-c {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Comment
|
||||
.syntax-err {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Error
|
||||
.syntax-g {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Generic
|
||||
.syntax-k {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Keyword
|
||||
.syntax-l {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Literal
|
||||
.syntax-n {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Name
|
||||
.syntax-o {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Operator
|
||||
.syntax-x {
|
||||
color: var(--syntax-constant);
|
||||
color: var(--syntax-constant-color);
|
||||
} // Other
|
||||
.syntax-p {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Punctuation
|
||||
.syntax-cm {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Comment.Multiline
|
||||
.syntax-cp {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Comment.Preproc
|
||||
.syntax-c1 {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Comment.Single
|
||||
.syntax-cs {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Comment.Special
|
||||
.syntax-gd {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Generic.Deleted
|
||||
.syntax-ge {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
font-style: italic;
|
||||
} // Generic.Emph
|
||||
.syntax-gr {
|
||||
color: var(--syntax-constant);
|
||||
color: var(--syntax-constant-color);
|
||||
} // Generic.Error
|
||||
.syntax-gh {
|
||||
color: var(--syntax-constant);
|
||||
color: var(--syntax-constant-color);
|
||||
} // Generic.Heading
|
||||
.syntax-gi {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Generic.Inserted
|
||||
.syntax-go {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Generic.Output
|
||||
.syntax-gp {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Generic.Prompt
|
||||
.syntax-gs {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
font-weight: bold;
|
||||
} // Generic.Strong
|
||||
.syntax-gu {
|
||||
color: var(--syntax-constant);
|
||||
color: var(--syntax-constant-color);
|
||||
} // Generic.Subheading
|
||||
.syntax-gt {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Generic.Traceback
|
||||
.syntax-kc {
|
||||
color: var(--syntax-constant);
|
||||
color: var(--syntax-constant-color);
|
||||
} // Keyword.Constant
|
||||
.syntax-kd {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Keyword.Declaration
|
||||
.syntax-kn {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Keyword.Namespace
|
||||
.syntax-kp {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Keyword.Pseudo
|
||||
.syntax-kr {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Keyword.Reserved
|
||||
.syntax-kt {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Keyword.Type
|
||||
.syntax-ld {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Literal.Date
|
||||
.syntax-m {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Literal.Number
|
||||
.syntax-s {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Literal.String
|
||||
.syntax-na {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Name.Attribute
|
||||
.syntax-nb {
|
||||
color: var(--syntax-builtin);
|
||||
color: var(--syntax-builtin-color);
|
||||
} // Name.Builtin
|
||||
.syntax-nc {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Name.Class
|
||||
.syntax-no {
|
||||
color: var(--syntax-constant);
|
||||
color: var(--syntax-constant-color);
|
||||
} // Name.Constant
|
||||
.syntax-nd {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Name.Decorator
|
||||
.syntax-ni {
|
||||
color: var(--syntax-builtin);
|
||||
color: var(--syntax-builtin-color);
|
||||
} // Name.Entity
|
||||
.syntax-ne {
|
||||
color: var(--syntax-builtin);
|
||||
color: var(--syntax-builtin-color);
|
||||
} // Name.Exception
|
||||
.syntax-nf {
|
||||
color: var(--syntax-builtin);
|
||||
color: var(--syntax-builtin-color);
|
||||
} // Name.Function
|
||||
.syntax-nl {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Name.Label
|
||||
.syntax-nn {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Name.Namespace
|
||||
.syntax-nx {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Name.Other
|
||||
.syntax-py {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Name.Property
|
||||
.syntax-nt {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Name.Tag
|
||||
.syntax-nv {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Name.Variable
|
||||
.syntax-ow {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Operator.Word
|
||||
.syntax-w {
|
||||
color: var(--foreground);
|
||||
color: var(--foreground-color);
|
||||
} // Text.Whitespace
|
||||
.syntax-mf {
|
||||
color: var(--syntax-literal);
|
||||
color: var(--syntax-literal-color);
|
||||
} // Literal.Number.Float
|
||||
.syntax-mh {
|
||||
color: var(--syntax-literal);
|
||||
color: var(--syntax-literal-color);
|
||||
} // Literal.Number.Hex
|
||||
.syntax-mi {
|
||||
color: var(--syntax-literal);
|
||||
color: var(--syntax-literal-color);
|
||||
} // Literal.Number.Integer
|
||||
.syntax-mo {
|
||||
color: var(--syntax-literal);
|
||||
color: var(--syntax-literal-color);
|
||||
} // Literal.Number.Oct
|
||||
.syntax-sb {
|
||||
color: var(--syntax-string);
|
||||
color: var(--syntax-string-color);
|
||||
} // Literal.String.Backtick
|
||||
.syntax-sc {
|
||||
color: var(--syntax-string);
|
||||
color: var(--syntax-string-color);
|
||||
} // Literal.String.Char
|
||||
.syntax-sd {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Literal.String.Doc
|
||||
.syntax-s2 {
|
||||
color: var(--syntax-string);
|
||||
color: var(--syntax-string-color);
|
||||
} // Literal.String.Double
|
||||
.syntax-se {
|
||||
color: var(--syntax-constant);
|
||||
color: var(--syntax-constant-color);
|
||||
} // Literal.String.Escape
|
||||
.syntax-sh {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Literal.String.Heredoc
|
||||
.syntax-si {
|
||||
color: var(--syntax-string);
|
||||
color: var(--syntax-string-color);
|
||||
} // Literal.String.Interpol
|
||||
.syntax-sx {
|
||||
color: var(--syntax-string);
|
||||
color: var(--syntax-string-color);
|
||||
} // Literal.String.Other
|
||||
.syntax-sr {
|
||||
color: var(--syntax-constant);
|
||||
color: var(--syntax-constant-color);
|
||||
} // Literal.String.Regex
|
||||
.syntax-s1 {
|
||||
color: var(--syntax-string);
|
||||
color: var(--syntax-string-color);
|
||||
} // Literal.String.Single
|
||||
.syntax-ss {
|
||||
color: var(--syntax-string);
|
||||
color: var(--syntax-string-color);
|
||||
} // Literal.String.Symbol
|
||||
.syntax-bp {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Name.Builtin.Pseudo
|
||||
.syntax-vc {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Name.Variable.Class
|
||||
.syntax-vg {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Name.Variable.Global
|
||||
.syntax-vi {
|
||||
color: var(--syntax-keyword);
|
||||
color: var(--syntax-keyword-color);
|
||||
} // Name.Variable.Instance
|
||||
.syntax-il {
|
||||
color: var(--syntax-comment);
|
||||
color: var(--syntax-comment-color);
|
||||
} // Literal.Number.Integer.Long
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user