Skip to content

Instantly share code, notes, and snippets.

@mtib

mtib/arc-dark-rallly.css

Last active April 16, 2023 14:47
Show Gist options
  • Save mtib/b77de6bfd2f40f9f4572b041bc92f704 to your computer and use it in GitHub Desktop.
Save mtib/b77de6bfd2f40f9f4572b041bc92f704 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mtib revised this gist Apr 16, 2023. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions arc-dark-rallly.css
    View file
    Original file line number Diff line number Diff line change
    @@ -47,10 +47,10 @@ html, :root {
    background-color: var(--arc-palette-foregroundSecondary) !important;
    }

    .text-slate-700, .text, .text-slate-800, .heading-sm, .subheading, .font-medium, .text-gray-600, label {
    .text-slate-700, .text-slate-500, .text, .text-slate-800, .heading-sm, .subheading, .font-medium, .text-gray-600, label {
    color: var(--arc-palette-foregroundPrimary) !important;
    }
    .text-slate-500\/75, .text-slate-500, .text-slate-600, .text-primary-600, .group:hover .group-hover\:text-primary-600 {
    .text-slate-500\/75, .text-slate-600, .text-primary-600, .group:hover .group-hover\:text-primary-600 {
    color: var(--arc-palette-foregroundSecondary) !important;
    }
    .btn-default, .btn-primary, .bg-primary-400 {
  2. mtib revised this gist Apr 16, 2023. 1 changed file with 26 additions and 28 deletions.
    54 changes: 26 additions & 28 deletions arc-dark-rallly.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,24 +1,24 @@
    html, :root {
    background-color: #111 !important;
    background-color: var(--arc-palette-background) !important;
    }

    .bg-pattern {
    background-color: #111 !important;
    background-color: var(--arc-palette-background) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23333' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
    }

    .bg-white {
    background-color: #111 !important;
    color: #fff !important;
    background-color: var(--arc-palette-background) !important;
    color: var(--arc-palette-foregroundPrimary) !important;
    }

    .bg-slate-200 {
    background-color: #444 !important;
    background-color: var(--arc-background-gradient-color0) !important;
    }

    .bg-gray-50, .bg-gray-50\/80 {
    background-color: #000 !important;
    color: #fff !important;
    background-color: var(--arc-background-gradient-color0) !important;
    color: var(--arc-palette-foregroundPrimary) !important;
    }

    .border-b {
    @@ -32,50 +32,48 @@ html, :root {
    border-color: #666 !important;
    }

    .segment-button button, .hover\:bg-slate-50:hover {
    color: #eee !important;
    background-color: #555 !important;
    .segment-button button, .hover\:bg-slate-50:hover, .bg-primary-50 {
    color: var(--arc-palette-foregroundPrimary) !important;
    background-color: var(--arc-palette-focus) !important;
    border-color: var(--arc-palette-focus) !important;
    }

    .hover\:bg-gray-50:hover, .bg-slate-100, .bg-gray-100, .bg-slate-50 {
    background-color: #333 !important;
    background-color: var(--arc-palette-cutoutColor) !important;
    }

    .segment-button .segment-button-active {
    color: #fff !important;
    background-color: rgb(79 70 229/var(--tw-bg-opacity)) !important;
    color: var(--arc-palette-foregroundPrimary) !important;
    background-color: var(--arc-palette-foregroundSecondary) !important;
    }

    .text-slate-700, .text-slate-800, .heading-sm, .subheading, .font-medium, .text-gray-600, label {
    color: #fff !important;
    .text-slate-700, .text, .text-slate-800, .heading-sm, .subheading, .font-medium, .text-gray-600, label {
    color: var(--arc-palette-foregroundPrimary) !important;
    }
    .text-slate-500\/75, .text-slate-500, .text-slate-600, .text {
    color: rgb(164, 159, 255) !important;
    .text-slate-500\/75, .text-slate-500, .text-slate-600, .text-primary-600, .group:hover .group-hover\:text-primary-600 {
    color: var(--arc-palette-foregroundSecondary) !important;
    }
    .btn-default {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229/var(--tw-border-opacity)) !important;
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229/var(--tw-bg-opacity)) !important;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity)) !important;
    .btn-default, .btn-primary, .bg-primary-400 {
    border-color: var(--arc-palette-focus) !important;
    background-color: var(--arc-palette-foregroundSecondary) !important;
    color: var(--arc-palette-foregroundPrimary) !important;
    }
    .bg-gradient-to-b {
    background: #000 !important;
    background: var(--arc-background-gradient-color0) !important;
    }

    .menu-items {
    background-color: rgb(0,0,0) !important;
    color: white !important;
    color: var(--arc-palette-foregroundPrimary) !important;
    border-color: #666 !important;
    }
    .menu-item:hover, .bg-blue-50 {
    background-color: rgb(30,30,30) !important;
    color: white !important;
    color: var(--arc-palette-foregroundPrimary) !important;
    }

    .input {
    color: white !important;
    color: var(--arc-palette-foregroundPrimary) !important;
    background-color: #333 !important;
    border-color: #666 !important;
    }
  3. mtib renamed this gist Apr 15, 2023. 1 changed file with 16 additions and 2 deletions.
    18 changes: 16 additions & 2 deletions style.css → arc-dark-rallly.css
    View file
    Original file line number Diff line number Diff line change
    @@ -32,10 +32,24 @@ html, :root {
    border-color: #666 !important;
    }

    .text-slate-800 {
    .segment-button button, .hover\:bg-slate-50:hover {
    color: #eee !important;
    background-color: #555 !important;
    }

    .hover\:bg-gray-50:hover, .bg-slate-100, .bg-gray-100, .bg-slate-50 {
    background-color: #333 !important;
    }

    .segment-button .segment-button-active {
    color: #fff !important;
    background-color: rgb(79 70 229/var(--tw-bg-opacity)) !important;
    }

    .text-slate-700, .text-slate-800, .heading-sm, .subheading, .font-medium, .text-gray-600, label {
    color: #fff !important;
    }
    .text-slate-500\/75, .text-slate-500, .text-slate-600 {
    .text-slate-500\/75, .text-slate-500, .text-slate-600, .text {
    color: rgb(164, 159, 255) !important;
    }
    .btn-default {
  4. mtib created this gist Apr 15, 2023.
    73 changes: 73 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    html, :root {
    background-color: #111 !important;
    }

    .bg-pattern {
    background-color: #111 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23333' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
    }

    .bg-white {
    background-color: #111 !important;
    color: #fff !important;
    }

    .bg-slate-200 {
    background-color: #444 !important;
    }

    .bg-gray-50, .bg-gray-50\/80 {
    background-color: #000 !important;
    color: #fff !important;
    }

    .border-b {
    border-bottom-color: #666 !important;
    }
    .border {
    border: 1px solid #666 !important;
    }

    .divide-y > * {
    border-color: #666 !important;
    }

    .text-slate-800 {
    color: #fff !important;
    }
    .text-slate-500\/75, .text-slate-500, .text-slate-600 {
    color: rgb(164, 159, 255) !important;
    }
    .btn-default {
    --tw-border-opacity: 1;
    border-color: rgb(79 70 229/var(--tw-border-opacity)) !important;
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229/var(--tw-bg-opacity)) !important;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity)) !important;
    }
    .bg-gradient-to-b {
    background: #000 !important;
    }

    .menu-items {
    background-color: rgb(0,0,0) !important;
    color: white !important;
    border-color: #666 !important;
    }
    .menu-item:hover, .bg-blue-50 {
    background-color: rgb(30,30,30) !important;
    color: white !important;
    }

    .input {
    color: white !important;
    background-color: #333 !important;
    border-color: #666 !important;
    }
    .input::placeholder {
    color: #aaa !important;
    }