Skip to content

Instantly share code, notes, and snippets.

@koaning

koaning/custom.css

Created July 18, 2025 13:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save koaning/aaa16e9a597b7567c4039d3711f3c3d3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save koaning/aaa16e9a597b7567c4039d3711f3c3d3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. koaning created this gist Jul 18, 2025.
    109 changes: 109 additions & 0 deletions custom.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    /* Custom CSS for Marimo - Font customization */

    /* Import Press Start 2P font from Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

    :root {
    --marimo-monospace-font: 'Press Start 2P', 'Courier New', monospace;
    --marimo-text-font: 'Press Start 2P', 'Courier New', monospace;
    --marimo-heading-font: 'Press Start 2P', 'Courier New', monospace;
    }

    .cm-line {
    font-family: var(--marimo-monospace-font);
    }

    /* Base Colors */
    :root {
    --background: light-dark(#e5e9f0, #2e3440);
    --foreground: light-dark(#2e3440, #d8dee9);
    --muted: light-dark(#eceff4, #434c5e);
    --muted-foreground: light-dark(#4c566a, #a3be8c);
    --popover: light-dark(#eceff4, #3b4252);
    --popover-foreground: light-dark(#2e3440, #d8dee9);
    --card: light-dark(#f0f4fc, #3b4252);
    --card-foreground: light-dark(#3b4252, #e5e9f0);
    --border: light-dark(#cbd5e1, #4c566a);
    --input: light-dark(#d8dee9, #3b4252);
    --primary: light-dark(#5e81ac, #88c0d0);
    --primary-foreground: light-dark(#eceff4, #2e3440);
    --secondary: light-dark(#81a1c1, #4c566a);
    --secondary-foreground: light-dark(#2e3440, #eceff4);
    --accent: light-dark(#88c0d0, #5e81ac);
    --accent-foreground: light-dark(#eceff4, #969eb0);
    --ring: light-dark(#81a1c1, #5e81ac);
    }

    /* Semantic Colors */
    :root {
    --destructive: hsl(0deg 100% 65%);
    --destructive-foreground: light-dark(#eceff4, #2e3440);
    --error: light-dark(#bf616a, #bf616a);
    --error-foreground: light-dark(#eceff4, #2e3440);
    --success: light-dark(#a3be8c, #a3be8c);
    --success-foreground: light-dark(#eceff4, #2e3440);
    --action: light-dark(#ebcb8b, #ebcb8b);
    --action-hover: light-dark(#f0d9a8, #eacb8b);
    --action-foreground: light-dark(#2e3440, #2e3440);
    --link: light-dark(#81a1c1, #88c0d0);
    --link-visited: light-dark(#b48ead, #b48ead);
    --stale: hsl(42deg 56% 44% / 25%);
    }

    /* Shadows */
    :root {
    --base-shadow: light-dark(
    hsla(0deg, 0%, 85%, 40%),
    hsla(0deg, 0%, 36%, 60%)
    );
    --base-shadow-darker: light-dark(
    hsla(0deg, 0%, 50%, 40%),
    hsla(0deg, 0%, 50%, 60%)
    );
    --base-shadow-opacity: 5%;

    /* Background properties */
    --background-image: linear-gradient(
    0deg,
    hsl(272deg 33% 11%) 0%,
    hsl(276deg 30% 9%) 20%,
    hsl(279deg 29% 7%) 40%,
    hsl(190deg 80% 40%) 70%,
    hsl(185deg 90% 55%) 85%,
    hsl(180deg 100% 70%) 100%
    );
    --background-repeat: no-repeat;
    --background-attachment: fixed;
    --background-size: auto;
    }

    body {
    background-image: var(--background-image) !important;
    background-repeat: var(--background-repeat) !important;
    background-attachment: var(--background-attachment) !important;
    background-size: var(--background-size) !important;
    }


    /* Custom cursors - override everything */
    * {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=), auto !important;
    }

    html,
    body {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=), auto !important;
    }

    a,
    button,
    a *,
    button *,
    [role="button"],
    [role="button"] *,
    input[type="button"],
    input[type="submit"],
    .clickable,
    .clickable * {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer !important;
    }