/* ==UserStyle==
@name PythonAnywhere Catppuccin
@namespace github.com/catppuccin/userstyles/styles/pythonanywhere
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pythonanywhere
@version 2024.12.31
@updateURL https://github.com/keonly/userstyles/raw/main/styles/pythonanywhere/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Apythonanywhere
@description Soothing pastel theme for PythonAnywhere
@author Catppuccin
@license MIT
@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray*"]
==/UserStyle== */
@-moz-document domain("www.pythonanywhere.com"),
domain("eu.pythonanywhere.com"),
domain("blog.pythonanywhere.com") {
@import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css");
@import (css)
url("https://chroma.catppuccin.com/@{lightFlavor}-chroma-style.css")
(prefers-color-scheme: light);
@import (css)
url("https://chroma.catppuccin.com/@{darkFlavor}-chroma-style.css")
(prefers-color-scheme: dark);
:root {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
}
@media (prefers-color-scheme: dark) {
#catppuccin(@darkFlavor);
}
}
#catppuccin(@flavor) {
@rosewater: @catppuccin[@@flavor][@rosewater];
@flamingo: @catppuccin[@@flavor][@flamingo];
@pink: @catppuccin[@@flavor][@pink];
@mauve: @catppuccin[@@flavor][@mauve];
@red: @catppuccin[@@flavor][@red];
@maroon: @catppuccin[@@flavor][@maroon];
@peach: @catppuccin[@@flavor][@peach];
@yellow: @catppuccin[@@flavor][@yellow];
@green: @catppuccin[@@flavor][@green];
@teal: @catppuccin[@@flavor][@teal];
@sky: @catppuccin[@@flavor][@sky];
@sapphire: @catppuccin[@@flavor][@sapphire];
@blue: @catppuccin[@@flavor][@blue];
@lavender: @catppuccin[@@flavor][@lavender];
@text: @catppuccin[@@flavor][@text];
@subtext1: @catppuccin[@@flavor][@subtext1];
@subtext0: @catppuccin[@@flavor][@subtext0];
@overlay2: @catppuccin[@@flavor][@overlay2];
@overlay1: @catppuccin[@@flavor][@overlay1];
@overlay0: @catppuccin[@@flavor][@overlay0];
@surface2: @catppuccin[@@flavor][@surface2];
@surface1: @catppuccin[@@flavor][@surface1];
@surface0: @catppuccin[@@flavor][@surface0];
@base: @catppuccin[@@flavor][@base];
@mantle: @catppuccin[@@flavor][@mantle];
@crust: @catppuccin[@@flavor][@crust];
@accent: @catppuccin[@@flavor][@@accentColor];
@text-filter: @catppuccin-filters[@@flavor][@text];
@red-filter: @catppuccin-filters[@@flavor][@red];
@green-filter: @catppuccin-filters[@@flavor][@green];
--ctp-rosewater: @rosewater;
--ctp-flamingo: @flamingo;
--ctp-pink: @pink;
--ctp-mauve: @mauve;
--ctp-red: @red;
--ctp-maroon: @maroon;
--ctp-peach: @peach;
--ctp-yellow: @yellow;
--ctp-green: @green;
--ctp-teal: @teal;
--ctp-sky: @sky;
--ctp-sapphire: @sapphire;
--ctp-blue: @blue;
--ctp-lavender: @lavender;
--ctp-text: @text;
--ctp-subtext1: @subtext1;
--ctp-subtext0: @subtext0;
--ctp-overlay2: @overlay2;
--ctp-overlay1: @overlay1;
--ctp-overlay0: @overlay0;
--ctp-surface2: @surface2;
--ctp-surface1: @surface1;
--ctp-surface0: @surface0;
--ctp-base: @base;
--ctp-mantle: @mantle;
--ctp-crust: @crust;
color-scheme: if(@flavor = latte, light, dark);
::selection {
background-color: fade(@accent, 30%);
}
input,
textarea {
&::placeholder {
color: @subtext0;
}
}
/* Ace file editor */
.ace_editor {
background-color: @crust;
color: @text;
.ace_gutter,
.ace_gutter-cell {
background: @mantle;
color: @overlay1;
}
.ace_print-margin {
background: @mantle;
}
.ace_marker-layer {
.ace_active-line {
background-color: fade(@yellow, 20%);
}
.highlight-line-error {
background-color: fade(@red, 20%);
}
.ace_bracket {
border-color: @overlay1;
}
}
.ace_doctype {
color: @mauve;
}
.ace_cursor,
.ace_xml.ace_text {
color: @text;
}
.ace_heading {
&.ace_1,
&.ace_1 + .ace_heading {
color: @red;
}
&.ace_2,
&.ace_2 + .ace_heading {
color: @peach;
}
&.ace_3,
&.ace_3 + .ace_heading {
color: @yellow;
}
&.ace_4,
&.ace_4 + .ace_heading {
color: @green;
}
&.ace_5,
&.ace_5 + .ace_heading {
color: @blue;
}
&.ace_6,
&.ace_6 + .ace_heading {
color: @mauve;
}
}
.ace_list {
color: @text;
&.ace_markup {
color: @sky;
}
}
.ace_marker-layer .ace_selection {
background: fade(@accent, 30%);
}
.ace_fold {
background-color: @surface0;
border-color: @surface1;
}
.ace_constant.ace_language,
.ace_keyword,
.ace_meta {
color: @mauve;
}
.ace_xml,
.ace_support.ace_class,
.ace_support.ace_type {
color: @yellow;
}
.ace_line .ace_identifier:not(:first-of-type),
.ace_entity.ace_name.ace_function,
.ace_constant {
color: @blue;
}
.ace_paren,
.ace_variable.ace_language {
color: @red;
}
.ace_constant.ace_numeric {
color: @peach;
}
.ace_entity.ace_other.ace_attribute-name,
.ace_support.ace_constant,
.ace_support.ace_function {
color: @teal;
}
.ace_entity.ace_name.ace_tag,
.ace_variable {
color: @blue;
}
.ace_storage {
color: @peach;
}
.ace_string {
color: @green;
}
.ace_comment {
color: @overlay2;
}
.ace_indent-guide {
@svg: escape(
''
);
background-image: url("data:image/svg+xml;utf8,@{svg}");
}
}
.ace_tooltip {
background-color: @crust;
color: @text;
border-color: @surface0;
}
#ace_settingsmenu {
background-color: @mantle;
box-shadow: none;
color: @subtext0;
}
#kbshortcutmenu {
background-color: @mantle;
box-shadow: none;
.ace_optionsMenuEntry {
&:hover,
&:focus {
background-color: @base;
}
}
&,
.ace_optionsMenuCommand {
color: @subtext0;
}
.ace_optionsMenuKey {
color: @accent;
}
}
/* Console */
x-screen {
background-color: @base !important;
color: @text !important;
}
.cursor-node {
border-color: @accent !important;
&[focus="true"] {
background-color: @accent !important;
}
}
/* $ prompt character */
[style*="color: rgb(0, 186, 19);"] {
color: @green !important;
}
/* ANSI colors */
x-row span {
/* Black & Bright Black */
&[style^="color: rgb(0, 0, 0);"] {
color: if(@flavor = latte, @subtext1, @surface1) !important;
}
&[style*="background-color: rgb(0, 0, 0);"] {
background-color: if(@flavor = latte, @subtext1, @surface1) !important;
}
&[style^="color: rgb(85, 87, 83);"] {
color: if(@flavor = latte, @subtext1, @surface2) !important;
}
&[style*="background-color: rgb(85, 87, 83);"] {
background-color: if(@flavor = latte, @subtext1, @surface2) !important;
}
/* Red and Bright Red */
&[style^="color: rgb(204, 0, 0);"],
&[style^="color: rgb(239, 41, 41);"] {
color: @red !important;
}
&[style*="background-color: rgb(204, 0, 0);"],
&[style*="background-color: rgb(239, 41, 41);"] {
background-color: @red !important;
}
/* Dim Red */
&[style^="color: rgb(136, 0, 0);"] {
color: fade(@red, 80%) !important;
}
/* Green and Bright Green */
&[style^="color: rgb(78, 154, 6);"],
&[style^="color: rgb(0, 186, 19);"] {
color: @green !important;
}
&[style*="background-color: rgb(78, 154, 6);"],
&[style*="background-color: rgb(0, 186, 19);"] {
background-color: @green !important;
}
/* Dim Green */
&[style^="color: rgb(52, 103, 4);"] {
color: fade(@green, 80%) !important;
}
/* Yellow and Bright Yellow */
&[style^="color: rgb(196, 160, 0);"],
&[style^="color: rgb(252, 233, 79);"] {
color: @yellow !important;
}
&[style*="background-color: rgb(196, 160, 0);"],
&[style*="background-color: rgb(252, 233, 79);"] {
background-color: @yellow !important;
}
/* Dim Yellow */
&[style^="color: rgb(131, 107, 0);"] {
color: fade(@yellow, 80%) !important;
}
/* Blue and Bright Blue */
&[style^="color: rgb(52, 101, 164);"],
&[style^="color: rgb(114, 159, 207);"] {
color: @blue !important;
}
&[style*="background-color: rgb(52, 101, 164);"],
&[style*="background-color: rgb(114, 159, 207);"] {
background-color: @blue !important;
}
/* Dim Blue */
&[style^="color: rgb(35, 67, 109);"] {
color: fade(@blue, 80%) !important;
}
/* Pink and Bright Pink */
&[style^="color: rgb(117, 80, 123);"],
&[style^="color: rgb(242, 0, 203);"] {
color: @pink !important;
}
&[style*="background-color: rgb(117, 80, 123);"],
&[style*="background-color: rgb(242, 0, 203);"] {
background-color: @pink !important;
}
/* Dim Pink */
&[style^="color: rgb(78, 53, 82);"] {
color: fade(@pink, 80%) !important;
}
/* Teal and Bright Teal */
&[style^="color: rgb(6, 152, 154);"],
&[style^="color: rgb(0, 181, 189);"] {
color: @teal !important;
}
&[style*="background-color: rgb(6, 152, 154);"],
&[style*="background-color: rgb(0, 181, 189);"] {
background-color: @teal !important;
}
/* Dim Teal */
&[style^="color: rgb(4, 101, 103);"] {
color: fade(@teal, 80%) !important;
}
/* White */
&[style^="color: rgb(211, 215, 207);"] {
color: if(@flavor = latte, @surface2, @subtext1) !important;
}
&[style*="background-color: rgb(211, 215, 207);"] {
background-color: if(@flavor = latte, @surface2, @subtext1) !important;
}
/* Bright White */
&[style^="color: rgb(238, 238, 236);"] {
color: if(@flavor = latte, @surface1, @subtext0) !important;
}
&[style*="background-color: rgb(238, 238, 236);"] {
background-color: if(@flavor = latte, @surface1, @subtext0) !important;
}
/* Dim White */
&[style^="color: rgb(141, 143, 138);"] {
color: fade(if(@flavor = latte, @surface2, @subtext1), 80%) !important;
}
}
#terminal div {
&[style*="color: rgb(16, 16, 16);"] {
color: @text !important;
}
&[style*="background-color: rgb(240, 240, 240);"] {
background-color: @crust !important;
}
}
body,
.dark {
background-color: @base;
color: @text;
}
a {
&,
&:hover,
&:focus {
color: @accent;
}
}
hr,
pre {
border-color: @surface0;
}
small,
.small {
color: @subtext0;
}
input,
button:not(.close, [class*="btn"], [data-toggle="dropdown"]) {
background-color: @crust;
border-color: @surface0;
&:hover,
&:focus {
background-color: @mantle;
}
i.glyphicon {
pointer-events: none;
}
}
blockquote {
border-color: @surface0;
footer,
small,
.small {
color: @subtext0;
}
}
.footer p {
color: @text;
}
.gsc-modal-background-image {
background-color: @base;
}
.gsc-results-wrapper-overlay {
background-color: @mantle;
color: @subtext0;
}
input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus {
border-color: @surface0;
}
.gsc-completion-container {
background-color: @crust;
border-color: @surface0;
}
.gsc-completion-selected {
background-color: @mantle;
}
input.gsc-input {
background-color: @mantle;
}
.gsc-input-box,
.gsc-results {
background-color: @mantle;
}
.gsc-option-menu-item-highlighted {
background-color: @base;
color: @text;
}
.gsc-selected-option-container {
background-color: @crust;
color: @text;
border-color: @surface0;
}
.gsc-webResult.gsc-result {
border-color: @surface0;
background-color: @mantle;
}
.gsc-search-button-v2 {
&,
&:hover,
&:focus {
border-color: @surface0;
background-color: @crust;
color: @text;
}
svg {
fill: @text;
}
}
.gsc-result-info,
.gsc-orderby-label,
.gsc-option-menu-item {
color: @subtext0;
}
.gcsc-find-more-on-google {
color: @accent;
}
.gcsc-find-more-on-google-magnifier {
fill: @accent;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
color: @text;
background-color: unset;
}
.gsc-control-cse .gsc-option-menu {
background-color: @crust;
}
.gs-webResult div.gs-visibleUrl {
color: @subtext0;
}
.gs-webResult.gs-result a.gs-title {
&,
&:hover,
&:focus,
b {
color: @accent;
}
}
.gs-webResult .gs-snippet {
color: @text;
}
.badge {
background-color: @crust;
&:hover,
&:focus {
background-color: @mantle;
}
}
.dashboard-panel__headline a {
text-decoration-color: @accent;
}
.dashboard-columns {
border-top-color: @surface0;
&::before {
background-color: @surface0;
}
.row > div {
border-color: @surface0;
}
}
.pagination > li {
> span,
> a {
background-color: @crust;
border-color: @surface0;
color: @text;
&:hover,
&:focus {
background-color: @mantle;
}
}
}
textarea {
background-color: @crust;
outline-color: @surface0;
border-color: none;
outline-style: solid;
&:focus {
outline-color: @accent;
}
}
.jumbotron {
background-color: @mantle;
}
.jumbotron > hr {
border-top-color: @mantle;
}
.top-nav {
background: @crust;
li a,
li button.btn-link {
color: @text;
}
button:focus,
a:focus,
li a:focus {
background-color: @crust;
}
}
.err {
border-color: @red;
}
.btn-success,
.open > .dropdown-toggle.btn-success {
&,
&:focus,
&.focus,
&:active,
&.active,
&:hover {
color: @mantle;
background-color: @green;
border-color: @surface0;
}
}
.btn-success .badge {
color: @green;
background-color: @crust;
}
tr.hoverable:hover {
background-color: @mantle;
}
td {
&.file_size,
&.file_timestamp {
color: @subtext0;
}
}
span[style="color: blue;"] {
color: @text !important;
}
[style="color: #888"],
[style="color: #444"] {
color: @text !important;
}
.btn-info,
.btn-primary,
.open > .dropdown-toggle.btn-info,
.open > .dropdown-toggle.btn-primary {
&,
&:focus,
&.focus,
&:active,
&.active,
&:hover {
color: @base;
background-color: @accent;
border-color: @surface0;
}
}
.label-primary {
background-color: @accent;
color: @crust;
}
.label-info {
background-color: @accent;
color: @crust;
}
.label-danger {
background-color: @red;
color: @crust;
}
.btn-danger {
background-color: @red;
border-color: @red;
color: @crust;
&:hover,
&:focus {
background-color: darken(@red, 5%);
color: @mantle;
}
}
.btn-warning {
background-color: @yellow;
border-color: @yellow;
color: @mantle;
&:hover,
&:focus {
background-color: darken(@yellow, 5%);
color: @mantle;
}
}
.edit_value {
color: @accent;
}
.btn-info .badge,
.btn-primary .badge {
color: @accent;
background-color: @crust;
}
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
border-color: @surface0;
&,
small {
color: @base;
}
button {
background-color: unset;
}
hr {
border-top-color: @surface0;
}
a {
color: @base;
text-decoration: underline;
}
.close {
&,
&:hover,
&:focus {
color: @crust;
}
}
}
.alert-success {
background-color: @green;
}
.alert-info {
background-color: @accent;
}
.alert-warning {
background-color: @yellow;
}
.alert-danger {
background-color: @red;
}
.close {
opacity: 100%;
text-shadow: none;
&,
&:hover,
&:focus {
color: @text;
background: none;
}
}
.form-control {
color: @text;
background-color: @crust;
border-color: @surface0;
box-shadow: inset 0 1px 1px @surface0;
&:focus {
border-color: @surface0;
box-shadow: inset 0 1px 1px @surface0;
}
&[disabled],
&[readonly] {
background-color: @mantle;
}
}
.help-block {
color: @text;
}
.pricing_table ul {
background-color: @base;
}
.pricing_table ul li {
background: @mantle;
}
.pricing_table ul li:first-child,
.account_type_header {
color: @text;
}
.sub_and_dark_blue,
.scheduled_task:not(.enabled) {
color: @subtext0;
}
#id_initializing_mysql_spinner {
background-color: @crust !important;
color: @text;
}
.directory_listing_table i.pale {
color: @subtext0;
opacity: 100%;
}
.pricing_table ul.Free li {
background-color: @mantle;
}
.col-md-12 {
div[style*="background-color"] {
background-color: @mantle !important;
}
h1[style*="color"] {
color: @text !important;
}
}
.table {
background-color: @base;
th,
td {
border-top-color: @surface0;
}
> thead th {
border-bottom-color: @surface0;
}
.success,
.info,
.warning,
.danger {
background-color: @base;
&,
td,
th {
&,
&:hover {
background-color: @base;
}
}
}
td.active,
th.active,
&.active td,
&.active th {
background-color: @mantle;
}
}
.table-bordered {
border-color: @surface0;
th,
td {
border-color: @surface0;
}
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover {
background-color: @mantle;
}
.highlighted_feature_text {
color: @green;
}
.text-muted {
color: @subtext0;
}
.modal-header {
border-bottom-color: @surface0;
}
.modal-content {
background-color: @base;
border-color: @surface0;
box-shadow: 0 3px 9px @crust;
}
.modal-backdrop {
background-color: @crust;
}
.directories_listing_group h4,
.page-header,
.gsc-above-wrapper-area,
.nav-tabs,
.property_group_header {
border-bottom-color: @surface0;
}
.nav-tabs a {
&:hover,
&:focus {
border-color: @surface0 !important;
}
}
.popover {
background-color: @mantle;
border-color: @surface0;
box-shadow: none;
&.top > .arrow {
&,
&::after {
border-top-color: @mantle;
}
}
&.right > .arrow {
&,
&::after {
border-right-color: @mantle;
}
}
&.left > .arrow {
&,
&::after {
border-left-color: @mantle;
}
}
&.bottom > .arrow {
&,
&::after {
border-bottom-color: @mantle;
}
}
}
.popover-title {
background-color: @mantle;
border-bottom-color: @surface0;
}
.modal-footer {
border-top-color: @surface0;
}
.unsorted {
color: @subtext0;
}
.sorted-up,
.sorted-down {
color: @accent;
}
.ui-widget-content {
border-color: @surface0;
background: @mantle;
color: @text;
}
.ui-state-default {
border-color: @surface0;
background: @surface1;
color: @text;
}
.bootstrap-switch {
border-color: @surface0;
&.bootstrap-switch-focused {
border-color: @surface0;
box-shadow: none;
}
.bootstrap-switch-label {
color: @text;
background-color: @surface0;
}
.bootstrap-switch-handle-off,
.bootstrap-switch-handle-on {
color: @text;
background-color: @crust;
&.bootstrap-switch-success,
&.bootstrap-switch-warning,
&.bootstrap-switch-danger,
&.bootstrap-switch-primary {
color: @base;
}
&.bootstrap-switch-success {
background-color: @green;
}
&.bootstrap-switch-warning {
background-color: @yellow;
}
&.bootstrap-switch-danger {
background-color: @red;
}
&.bootstrap-switch-primary {
background-color: @accent;
}
}
}
.tooltip-inner {
color: @text;
background-color: @crust;
}
.tooltip {
&.right .tooltip-arrow {
border-right-color: @crust;
}
&.left .tooltip-arrow {
border-left-color: @crust;
}
&.top,
&.top-left,
&.top-right {
.tooltip-arrow {
border-top-color: @crust;
}
}
&.bottom,
&.bottom-left,
&.bottom-right {
.tooltip-arrow {
border-bottom-color: @crust;
}
}
}
.has-error {
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
label {
color: @red;
}
}
.success-stories-container {
background-color: @mantle;
color: @text;
h3 {
color: @text;
}
}
.gsc-control-cse {
border-color: @surface0;
background-color: @base;
}
.post_metadata {
color: @subtext0;
}
.ui-widget-header {
background-color: @base;
border-color: @surface0;
color: @text;
}
.fullscreen-main-navbar {
background-color: @mantle;
}
.dropdown-menu {
background-color: @mantle;
border-color: @surface0;
box-shadow: none;
> li > a {
color: @text;
&:hover,
&:focus {
background-color: @base;
}
}
}
.fullscreen-main-navbar button.btn-link {
&:hover,
&:focus {
background-color: @base;
}
}
.navbar-default .btn-link {
&,
&:hover,
&:focus {
color: @text;
}
}
.btn.btn-default {
border-color: @accent;
color: @accent;
background-color: @base;
&:hover,
&:focus {
background-color: @surface0;
}
}
.well {
background-color: @mantle;
border-color: @surface0;
}
.icon-bar {
background-color: @text;
}
.nav-tabs > li,
.nav-pills > li {
> a {
border-color: @surface0;
&,
&:hover,
&:focus {
color: @accent;
}
}
&.active > a {
&,
&:focus {
background-color: @mantle;
}
&:hover,
&:focus {
background-color: @crust;
}
}
&:not(.active) > a {
&:hover,
&:focus {
background-color: @mantle;
}
}
}
.ui-state-highlight {
border-color: @accent;
background: @accent;
color: @base;
}
.primary-navbar {
a,
form,
.active {
background-color: @base;
}
form .btn-link {
color: @accent;
}
.active a {
color: @text;
}
}
.post,
.topic {
background-color: @mantle;
border-color: @surface0;
}
.editable-click {
&,
&:hover,
&:focus {
border-bottom-color: @subtext0;
}
}
[style*="background: whitesmoke;"] {
background-color: @mantle !important;
}
@media (min-width: 768px) {
.modal-content {
box-shadow: 0 5px 15px @crust;
}
}
@media screen and (max-width: 767px) {
.table-responsive {
border-color: @surface0;
}
}
#id_main_screenshot {
box-shadow: 12px 12px 29px @surface1;
}
#id_hosting_details,
#id_education_details {
&,
h1,
h2,
h3 {
background-color: @mantle;
color: @text;
}
.btn {
color: @crust !important;
}
a {
color: @accent;
}
}
#id_develop_anywhere_details {
background-color: @base;
}
#id_support_details {
background-color: @base;
a {
color: @accent !important;
}
}
#id_company_info_strip {
color: @text;
}
.console_table .info_tooltip {
color: @accent;
}
#id_console_name {
color: @text;
}
.beginner_pane,
.pricing_pane {
background-color: @mantle;
}
#id_error_message,
#id_login_error {
color: @red;
}
.post_preview {
background-color: @base;
h3 {
color: @text;
}
}
.teacher-navbar {
background-color: @mantle;
color: @text;
}
.nav > li > a:focus {
background: none;
}
/* blog */
.site-header {
background-color: @crust;
}
h1,
h2,
h3,
h4,
code {
color: @text !important;
}
button code {
background: none !important;
color: inherit !important;
}
p,
.tipue_search_content_text,
.tipue_search_content_bold,
#tipue_search_error,
#tipue_search_results_count,
.post-meta {
color: @subtext0;
}
.navbar-default .navbar-toggle {
&:hover,
&:focus {
background-color: @mantle;
}
}
button:not(.btn-link, .btn, [data-toggle="dropdown"]),
.pagination a,
#tipue_search_foot_boxes li.current,
#tipue_search_foot_boxes li a {
background-color: @accent;
color: @crust;
border-color: @accent;
}
button:disabled,
.pagination .disabled {
background-color: darken(@accent, 5%);
border-color: darken(@accent, 5%);
}
#tipue_search_input,
form.navbar-search {
background-color: @mantle;
color: @text;
}
svg {
fill: @subtext0;
}
.fa-at,
.fa-twitter,
.fa-rss {
filter: @text-filter;
}
.hide_search_icon path {
stroke: @subtext0;
}
footer,
footer .wrap {
background-color: @crust;
color: @text;
border-color: @crust;
}
.pagination a,
#tipue_search_foot_boxes li.current,
#tipue_search_foot_boxes li a {
background-color: @accent;
color: @crust;
border-color: @accent;
}
img[src*="ssl.gstatic.com/ui/v1/disclosure/small-grey-disclosure-arrow-down.png"],
img[src*="/static/anywhere/images/staff.png"],
img[src*="/static/glyphicons/glyphicons_"],
img[src="/static/anywhere/images/PA-logo-snake-only.svg"],
.testimonial-content,
.quickstart_logo:not([src$="/django-logo-negative-small.png"]),
.ui-icon {
filter: @text-filter;
}
img[src*="/static/anywhere/images/cross.png"] {
filter: @red-filter;
}
img[src*="/static/anywhere/images/tick.png"] {
filter: @green-filter;
}
.quickstart_logo[src$="/django-logo-negative-small.png"] {
// Original image has background - can't filter
@svg: escape(
''
);
content: url("data:image/svg+xml,@{svg}");
}
img[src$="/images/PA-logo.svg"] {
@svg: escape(
''
);
content: url("data:image/svg+xml;utf8,@{svg}");
}
}
}
/* deno-fmt-ignore */
@catppuccin: {
@latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; };
@frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; };
@macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; };
@mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #f4f4f4; @subtext1: #e0e0e0; @subtext0: #c6c6c6; @overlay2: #a8a8a8; @overlay1: #8d8d8d; @overlay0: #6f6f6f; @surface2: #525252; @surface1: #393939; @surface0: #262626; @base: #161616; @mantle: #0b0b0b; @crust: #000000; };
};
/* deno-fmt-ignore */
@catppuccin-filters: {
@latte: { @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) hue-rotate(266deg) brightness(93%) contrast(97%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) hue-rotate(255deg) brightness(94%) contrast(100%); @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) hue-rotate(342deg) brightness(84%) contrast(94%); @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) hue-rotate(331deg) brightness(99%) contrast(82%); @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) hue-rotate(356deg) brightness(103%) contrast(99%); @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) hue-rotate(354deg) brightness(95%) contrast(83%); @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) hue-rotate(76deg) brightness(95%) contrast(66%); @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) hue-rotate(139deg) brightness(100%) contrast(82%); @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) hue-rotate(166deg) brightness(99%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) hue-rotate(209deg) brightness(94%) contrast(105%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) hue-rotate(195deg) brightness(83%) contrast(91%); @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) hue-rotate(191deg) brightness(77%) contrast(81%); @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) hue-rotate(189deg) brightness(82%) contrast(88%); @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) hue-rotate(187deg) brightness(92%) contrast(88%); @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) hue-rotate(182deg) brightness(109%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) hue-rotate(182deg) brightness(98%) contrast(92%); @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) hue-rotate(196deg) brightness(106%) contrast(82%); };
@frappe: { @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) hue-rotate(280deg) brightness(107%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) hue-rotate(225deg) brightness(94%) contrast(91%); @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) hue-rotate(305deg) brightness(91%) contrast(99%); @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) hue-rotate(307deg) brightness(109%) contrast(90%); @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) hue-rotate(335deg) brightness(96%) contrast(94%); @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) hue-rotate(309deg) brightness(105%) contrast(80%); @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) hue-rotate(42deg) brightness(87%) contrast(89%); @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) hue-rotate(110deg) brightness(85%) contrast(81%); @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) hue-rotate(141deg) brightness(109%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) hue-rotate(185deg) brightness(96%) contrast(95%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) hue-rotate(191deg) brightness(98%) contrast(96%); @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) hue-rotate(192deg) brightness(96%) contrast(97%); @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) hue-rotate(198deg) brightness(88%) contrast(75%); @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) hue-rotate(197deg) brightness(86%) contrast(79%); };
@macchiato: { @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) hue-rotate(280deg) brightness(102%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) hue-rotate(222deg) brightness(104%) contrast(93%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) hue-rotate(305deg) brightness(110%) contrast(86%); @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) hue-rotate(306deg) brightness(93%) contrast(101%); @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) hue-rotate(330deg) brightness(103%) contrast(92%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) hue-rotate(314deg) brightness(101%) contrast(87%); @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) hue-rotate(48deg) brightness(92%) contrast(85%); @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) hue-rotate(110deg) brightness(87%) contrast(90%); @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) hue-rotate(142deg) brightness(96%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) hue-rotate(183deg) brightness(99%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) hue-rotate(191deg) brightness(92%) contrast(88%); @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) hue-rotate(194deg) brightness(90%) contrast(90%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) hue-rotate(200deg) brightness(93%) contrast(85%); @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) hue-rotate(202deg) brightness(98%) contrast(88%); };
@mocha: { @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) hue-rotate(315deg) brightness(107%) contrast(90%); @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) hue-rotate(283deg) brightness(101%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) hue-rotate(224deg) brightness(96%) contrast(102%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) hue-rotate(294deg) brightness(104%) contrast(91%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) hue-rotate(306deg) brightness(116%) contrast(84%); @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) hue-rotate(338deg) brightness(98%) contrast(101%); @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) hue-rotate(313deg) brightness(102%) contrast(95%); @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) hue-rotate(63deg) brightness(104%) contrast(78%); @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) hue-rotate(108deg) brightness(93%) contrast(90%); @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) hue-rotate(164deg) brightness(106%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) hue-rotate(180deg) brightness(98%) contrast(100%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) hue-rotate(190deg) brightness(100%) contrast(93%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) hue-rotate(192deg) brightness(84%) contrast(84%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) hue-rotate(202deg) brightness(93%) contrast(87%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) hue-rotate(202deg) brightness(95%) contrast(90%); @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) hue-rotate(220deg) brightness(95%) contrast(91%); };
};