diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml
index bcd936922d..8400649043 100644
--- a/scripts/userstyles.yml
+++ b/scripts/userstyles.yml
@@ -746,6 +746,13 @@ userstyles:
readme:
app-link: "https://pypi.org"
current-maintainers: [*trinkey]
+ pythonanywhere:
+ name: PythonAnywhere
+ categories: [development]
+ color: sapphire
+ readme:
+ app-link: "https://pythonanywhere.com"
+ current-maintainers: [*trinkey]
quizlet:
name: Quizlet
categories: [education, productivity]
diff --git a/styles/pythonanywhere/catppuccin.user.css b/styles/pythonanywhere/catppuccin.user.css
new file mode 100644
index 0000000000..f34cfad6b6
--- /dev/null
+++ b/styles/pythonanywhere/catppuccin.user.css
@@ -0,0 +1,1480 @@
+/* ==UserStyle==
+@name PythonAnywhere Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/pythonanywhere
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/pythonanywhere
+@version 0.0.1
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/pythonanywhere/catppuccin.user.css
+@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);
+
+ @media (prefers-color-scheme: light) {
+ :root {
+ #catppuccin(@lightFlavor, @accentColor);
+ }
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root {
+ #catppuccin(@darkFlavor, @accentColor);
+ }
+ }
+
+ #catppuccin(@lookup, @accent) {
+ @rosewater: @catppuccin[@@lookup][@rosewater];
+ @flamingo: @catppuccin[@@lookup][@flamingo];
+ @pink: @catppuccin[@@lookup][@pink];
+ @mauve: @catppuccin[@@lookup][@mauve];
+ @red: @catppuccin[@@lookup][@red];
+ @red-filter: @catppuccin[@@lookup][@red-filter];
+ @maroon: @catppuccin[@@lookup][@maroon];
+ @peach: @catppuccin[@@lookup][@peach];
+ @yellow: @catppuccin[@@lookup][@yellow];
+ @green: @catppuccin[@@lookup][@green];
+ @green-filter: @catppuccin[@@lookup][@green-filter];
+ @teal: @catppuccin[@@lookup][@teal];
+ @sky: @catppuccin[@@lookup][@sky];
+ @sapphire: @catppuccin[@@lookup][@sapphire];
+ @blue: @catppuccin[@@lookup][@blue];
+ @lavender: @catppuccin[@@lookup][@lavender];
+ @text: @catppuccin[@@lookup][@text];
+ @text-filter: @catppuccin[@@lookup][@text-filter];
+ @subtext1: @catppuccin[@@lookup][@subtext1];
+ @subtext0: @catppuccin[@@lookup][@subtext0];
+ @overlay2: @catppuccin[@@lookup][@overlay2];
+ @overlay1: @catppuccin[@@lookup][@overlay1];
+ @overlay0: @catppuccin[@@lookup][@overlay0];
+ @surface2: @catppuccin[@@lookup][@surface2];
+ @surface1: @catppuccin[@@lookup][@surface1];
+ @surface0: @catppuccin[@@lookup][@surface0];
+ @base: @catppuccin[@@lookup][@base];
+ @mantle: @catppuccin[@@lookup][@mantle];
+ @crust: @catppuccin[@@lookup][@crust];
+ @accent-color: @catppuccin[@@lookup][@@accent];
+
+ --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(@lookup = latte, light, dark);
+
+ ::selection {
+ background-color: fade(@accent-color, 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-color, 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-color;
+ }
+ }
+
+ /* Console */
+
+ x-screen {
+ background-color: @base !important;
+ color: @text !important;
+ }
+
+ .cursor-node {
+ border-color: @accent-color !important;
+ &[focus="true"] {
+ background-color: @accent-color !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(@lookup = latte, @subtext1, @surface1) !important;
+ }
+ &[style*="background-color: rgb(0, 0, 0);"] {
+ background-color: if(@lookup = latte, @subtext1, @surface1) !important;
+ }
+
+ &[style^="color: rgb(85, 87, 83);"] {
+ color: if(@lookup = latte, @subtext1, @surface2) !important;
+ }
+ &[style*="background-color: rgb(85, 87, 83);"] {
+ background-color: if(@lookup = 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(@lookup = latte, @surface2, @subtext1) !important;
+ }
+ &[style*="background-color: rgb(211, 215, 207);"] {
+ background-color: if(@lookup = latte, @surface2, @subtext1) !important;
+ }
+ /* Bright White */
+ &[style^="color: rgb(238, 238, 236);"] {
+ color: if(@lookup = latte, @surface1, @subtext0) !important;
+ }
+ &[style*="background-color: rgb(238, 238, 236);"] {
+ background-color: if(@lookup = latte, @surface1, @subtext0) !important;
+ }
+ /* Dim White */
+ &[style^="color: rgb(141, 143, 138);"] {
+ color: fade(if(@lookup = 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-color;
+ }
+ }
+
+ 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-color;
+ }
+
+ .gcsc-find-more-on-google-magnifier {
+ fill: @accent-color;
+ }
+
+ .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-color;
+ }
+ }
+
+ .gs-webResult .gs-snippet {
+ color: @text;
+ }
+
+ .badge {
+ background-color: @crust;
+
+ &:hover,
+ &:focus {
+ background-color: @mantle;
+ }
+ }
+
+ .dashboard-panel__headline a {
+ text-decoration-color: @accent-color;
+ }
+
+ .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-color;
+ }
+ }
+
+ .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-color;
+ border-color: @surface0;
+ }
+ }
+
+ .label-primary {
+ background-color: @accent-color;
+ color: @crust;
+ }
+
+ .label-info {
+ background-color: @accent-color;
+ 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-color;
+ }
+
+ .btn-info .badge,
+ .btn-primary .badge {
+ color: @accent-color;
+ 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-color;
+ }
+
+ .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-color;
+ }
+
+ .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-color;
+ }
+ }
+ }
+
+ .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;
+ color: @accent-color;
+ 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-color;
+ }
+ }
+
+ &.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-color;
+ background: @accent-color;
+ color: @base;
+ }
+
+ .primary-navbar {
+ a,
+ form,
+ .active {
+ background-color: @base;
+ }
+
+ form .btn-link {
+ color: @accent-color;
+ }
+
+ .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-color;
+ }
+ }
+
+ #id_develop_anywhere_details {
+ background-color: @base;
+ }
+
+ #id_support_details {
+ background-color: @base;
+
+ a {
+ color: @accent-color !important;
+ }
+ }
+
+ #id_company_info_strip {
+ color: @text;
+ }
+
+ .console_table .info_tooltip {
+ color: @accent-color;
+ }
+
+ #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;
+ color: @crust;
+ border-color: @accent-color;
+ }
+
+ button:disabled,
+ .pagination .disabled {
+ background-color: darken(@accent-color, 5%);
+ border-color: darken(@accent-color, 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;
+ color: @crust;
+ border-color: @accent-color;
+ }
+
+ 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}");
+ }
+ }
+}
+
+/* prettier-ignore */
+@catppuccin: {
+ @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @red-filter: brightness(0) saturate(100%) invert(25%) sepia(97%) saturate(4962%) hue-rotate(337deg) brightness(81%) contrast(106%); @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @green-filter: brightness(0) saturate(100%) invert(47%) sepia(78%) saturate(440%) hue-rotate(63deg) brightness(94%) contrast(93%); @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @text-filter: brightness(0) saturate(100%) invert(30%) sepia(7%) saturate(1674%) hue-rotate(196deg) brightness(97%) contrast(91%); @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; @red-filter: brightness(0) saturate(100%) invert(68%) sepia(21%) saturate(4617%) hue-rotate(312deg) brightness(110%) contrast(81%); @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @green-filter: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(540%) hue-rotate(51deg) brightness(90%) contrast(92%); @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @text-filter: brightness(0) saturate(100%) invert(74%) sepia(16%) saturate(454%) hue-rotate(192deg) brightness(110%) contrast(92%); @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; @red-filter: brightness(0) saturate(100%) invert(61%) sepia(16%) saturate(1882%) hue-rotate(306deg) brightness(111%) contrast(86%); @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @green-filter: brightness(0) saturate(100%) invert(83%) sepia(35%) saturate(356%) hue-rotate(57deg) brightness(94%) contrast(88%); @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @text-filter: brightness(0) saturate(100%) invert(82%) sepia(77%) saturate(662%) hue-rotate(181deg) brightness(103%) contrast(92%); @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; @red-filter: brightness(0) saturate(100%) invert(58%) sepia(60%) saturate(462%) hue-rotate(299deg) brightness(107%) contrast(91%); @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @green-filter: brightness(0) saturate(100%) invert(95%) sepia(57%) saturate(525%) hue-rotate(47deg) brightness(93%) contrast(91%); @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @text-filter: brightness(0) saturate(100%) invert(88%) sepia(10%) saturate(1247%) hue-rotate(191deg) brightness(99%) contrast(93%); @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; };
+}
+
+// vim:ft=less
diff --git a/styles/pythonanywhere/preview.webp b/styles/pythonanywhere/preview.webp
new file mode 100644
index 0000000000..57be73265c
--- /dev/null
+++ b/styles/pythonanywhere/preview.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ae1abda41fa311b41bea5a809d89c98b0bfb71b8cefacee49f0c16357a1a0b97
+size 134030