108 lines
2.6 KiB
CSS
108 lines
2.6 KiB
CSS
/* ==UserStyle==
|
|
@name Gruvbox for Pocketbase
|
|
@namespace git.m3.fyi/Marsn3
|
|
@version 1.0.2
|
|
@description A dark Theme for Pocketbase
|
|
@author Marsn3
|
|
@homepageURL https://git.m3.fyi/Marsn3/userstyles
|
|
@updateURL https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/pocketbase.user.css
|
|
@license MIT
|
|
==/UserStyle== */
|
|
|
|
@-moz-document domain("api.m3.fyi") {
|
|
/*~~~~~ Base Colors ~~~~~*/
|
|
:root {
|
|
--txtPrimaryColor: var(--fg);
|
|
--txtHintColor: var(--fg2);
|
|
--txtDisabledColor: var(--fg3);
|
|
--primaryColor: var(--green-dim);
|
|
--bodyColor: var(--bg);
|
|
--baseColor: var(--bg);
|
|
--baseAlt1Color: var(--bg4);
|
|
--baseAlt2Color: var(--bg3);
|
|
--baseAlt3Color: var(--bg2);
|
|
--baseAlt4Color: var(--bg1);
|
|
--infoColor: var(--blue);
|
|
--infoAltColor: var(--blue-dim);
|
|
--successColor: var(--green);
|
|
--successAltColor: var(--green-dim);
|
|
--dangerColor: var(--red);
|
|
--dangerAltColor: var(--red-dim);
|
|
--warningColor: var(--orange);
|
|
--warningAltColor: var(--orange-dim);
|
|
--overlayColor: rgba(168, 153, 132, 0.25);
|
|
--tooltipColor: var(--bg4);
|
|
--shadowColor: rgba(50, 48, 47, 0.5);
|
|
--accent-color: var(--primaryColor);
|
|
}
|
|
|
|
/*~~~~~ Buttoms ~~~~~*/
|
|
.btn-sm .btn-warning {
|
|
background-color: var(--warningColor) !important;
|
|
}
|
|
.btn.btn-secondary,
|
|
.btn.btn-outline {
|
|
color: var(--txtHintColor);
|
|
background: var(--baseAlt4Color);
|
|
}
|
|
|
|
/*~~~~~ Labels ~~~~~*/
|
|
.label.label-warning,
|
|
.label.label-info,
|
|
.label.label-success,
|
|
.alert {
|
|
color: var(--baseColor);
|
|
}
|
|
.alert.alert-warning .icon {
|
|
color: var(--baseColor);
|
|
}
|
|
|
|
/*~~~~~ Syntax Highlighting for Code fields ~~~~~*/
|
|
.prism-light,
|
|
code {
|
|
background: var(--baseAlt4Color) !important;
|
|
}
|
|
.prism-light .token.punctuation {
|
|
color: var(--txtPrimaryColor);
|
|
}
|
|
.prism-light .token.property {
|
|
color: var(--infoColor);
|
|
}
|
|
.prism-light .token.operator {
|
|
color: var(--dangerColor);
|
|
}
|
|
.prism-light .token.keyword {
|
|
color: var(--dangerColor);
|
|
}
|
|
.prism-light .token.string {
|
|
color: var(--successColor);
|
|
}
|
|
.prism-light .token.boolean {
|
|
color: var(--warningColor);
|
|
}
|
|
.prism-light .token.number {
|
|
color: var(--orange);
|
|
}
|
|
.prism-light .token.class-name {
|
|
color: var(--blue);
|
|
}
|
|
.prism-light .token.comment {
|
|
color: var(--fg4);
|
|
}
|
|
.prism-light .token.function {
|
|
color: var(--purple);
|
|
}
|
|
|
|
/*~~~~~ Colored Delete Icon ~~~~~*/
|
|
.ri-delete-bin-7-line {
|
|
color: var(--dangerColor);
|
|
}
|
|
|
|
/*~~~~~ Syntax Highlighting for Regex Fields ~~~~~*/
|
|
.ͼb {
|
|
color: var(--purple);
|
|
}
|
|
.ͼe {
|
|
color: var(--dangerColor);
|
|
}
|
|
}
|