Skip to content

Drupal.org Dark-Mode by sanduhrs

Screenshot of Drupal.org Dark-Mode

Details

Authorsanduhrs

LicenseGPL-v2-or-later

Categorywww.drupal.org

Created

Updated

Size288 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Work in progress to give d.o a dark-mode.

Notes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           www.drupal.org - Dec 2023
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("www.drupal.org") {
    @charset "UTF-8";
    @import url(https://fonts.googleapis.com/css?family=Ubuntu:700,400,300);
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font: inherit;
      font-size: 100%;
      vertical-align: baseline;
    }

    html {
      line-height: 1;
    }

    ol, ul {
      list-style: none;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    caption, th, td {
      text-align: left;
      font-weight: normal;
      vertical-align: middle;
    }

    q, blockquote {
      quotes: none;
    }
    q:before, q:after, blockquote:before, blockquote:after {
      content: "";
      content: none;
    }

    a img {
      border: none;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
      display: block;
    }

    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .clear {
      clear: both;
    }

    .clearleft {
      clear: left;
    }

    .clearright {
      clear: right;
    }

    .right {
      clear: right;
      float: right;
      margin: 0 0 0.692em 20px;
    }

    .left {
      clear: left;
      float: left;
      margin: 0 20px 0.692em 0;
    }

    .icon-left {
      clear: left;
      float: left;
      width: 2em;
      margin: 0 .8em .692em 0;
    }

    .icon-inline {
      height: 1em;
      max-width: 1.25em;
    }

    .gray {
      opacity: .5;
    }

    .aside {
      display: flex;
      flex-direction: column;
    }

    @media (min-width: 26.25em) {
      .aside-half {
        width: 48.3871%;
        float: right;
        margin-right: 0;
        *margin-left: -1.33333em;
      }
    }
    @media (max-width: 26.25em) {
      .aside-half {
        float: none;
        margin: 0;
      }
    }
    img.no-clear {
      clear: none;
    }

    .comment .confirm-button-form, .profile #drupalorg-add-confirm-button {
      margin-top: 0.69231em;
    }
    .comment .confirm-button-form .undo, .profile #drupalorg-add-confirm-button .undo {
      background-color: #ffe69f;
      margin-bottom: .5em;
      padding: .5em;
      text-align: center;
    }
    .comment .confirm-button-form input, .profile #drupalorg-add-confirm-button input {
      margin-right: 0;
      width: 140px;
    }
    .comment .confirm-button-form .throbber, .profile #drupalorg-add-confirm-button .throbber {
      margin-top: 0;
    }

    .button-link, .panel-layout.capricorn .pane-bundle-case-study .field-name-field-cta-link a,
    .panel-layout.capricorn .pane-bundle-cta .field-name-field-cta-link a, .panel-layout.capricorn .pane-bundle-case-study a .field-name-field-cta-link .field-item,
    .panel-layout.capricorn .pane-bundle-cta a .field-name-field-cta-link .field-item {
      border: 2px solid #0678be;
      color: #0678be;
      display: inline-block;
      font-size: 1.25em;
      padding: 0.5em 1.75em;
      text-decoration: none;
    }
    .button-link:hover, .panel-layout.capricorn .pane-bundle-case-study .field-name-field-cta-link a:hover,
    .panel-layout.capricorn .pane-bundle-cta .field-name-field-cta-link a:hover, .panel-layout.capricorn .pane-bundle-case-study a .field-name-field-cta-link .field-item:hover,
    .panel-layout.capricorn .pane-bundle-cta a .field-name-field-cta-link .field-item:hover, .button-link:focus, .panel-layout.capricorn .pane-bundle-case-study .field-name-field-cta-link a:focus,
    .panel-layout.capricorn .pane-bundle-cta .field-name-field-cta-link a:focus, .panel-layout.capricorn .pane-bundle-case-study a .field-name-field-cta-link .field-item:focus,
    .panel-layout.capricorn .pane-bundle-cta a .field-name-field-cta-link .field-item:focus, .active.button-link, .panel-layout.capricorn .pane-bundle-case-study .field-name-field-cta-link a.active,
    .panel-layout.capricorn .pane-bundle-cta .field-name-field-cta-link a.active, .panel-layout.capricorn .pane-bundle-case-study a .field-name-field-cta-link .active.field-item,
    .panel-layout.capricorn .pane-bundle-cta a .field-name-field-cta-link .active.field-item {
      background-color: #0678be;
      color: white;
      text-decoration: none;
    }

    .accordion-processed {
      margin-bottom: 1em;
    }
    .accordion-processed > h3 {
      margin: .5em 0 0 0;
    }
    .accordion-processed > h3 button {
      background: url(../images/icon-w-dropdown.svg) #0678be center right 1em/1.5em no-repeat;
      border: none;
      color: white;
      display: block;
      font-size: 1rem;
      font-weight: bold;
      padding: 1em 2.5em 1em 1em;
      text-align: left;
      width: 100%;
    }
    .accordion-processed > h3 button:hover, .accordion-processed > h3 button:focus {
      background-color: #064771;
    }
    .accordion-processed > .accordion-content {
      background: white;
      max-height: 250em;
      overflow: auto;
      padding: 1em;
      transition: max-height .3s, opacity .3s ease-in;
    }
    @media screen and (prefers-reduced-motion: reduce) {
      .accordion-processed > .accordion-content {
        transition: unset;
      }
    }
    .accordion-processed > .accordion-content[hidden] {
      display: block;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      padding: 0;
      visibility: hidden;
    }
    @media (prefers-color-scheme: dark) {
      .accordion-processed > h3 button {
        background: url(../images/icon-w-dropdown.svg) #2e2e2e center right 1em/1.5em no-repeat;
        color: white;
      }
      .accordion-processed > h3 button:hover, .accordion-processed > h3 button:focus {
        background-color: #222222;
      }
      .accordion-processed > .accordion-content {
        background: #4e4e4e;
        color: whitesmoke;
      }
    }

    .drupalorg-site-api .ctools-collapsible-container {
      margin-bottom: 5px;
    }
    .drupalorg-site-api div > table {
      overflow: auto;
      display: block;
    }
    .drupalorg-site-api .block-api .description {
      float: right;
      padding-left: 10px;
    }
    .drupalorg-site-api .block-api input[type="submit"] {
      margin-top: .5em;
    }
    .drupalorg-site-api table.views-table:not(.mobile-table) .views-field-title {
      min-width: 20em;
    }
    .drupalorg-site-api #api-function-signature td,
    .drupalorg-site-api #api-function-signature td a,
    .drupalorg-site-api #api-function-signature td a:visited {
      color: #9d9d93;
    }
    .drupalorg-site-api #api-function-signature tr.active td.branch {
      font-weight: bold;
    }
    .drupalorg-site-api #api-function-signature tr.active td,
    .drupalorg-site-api #api-function-signature tr.active td a,
    .drupalorg-site-api #api-function-signature tr.active td a:visited {
      color: #000;
    }
    .drupalorg-site-api #api-function-signature th,
    .drupalorg-site-api #api-function-signature td {
      padding: 0.2em;
      background: #fff;
    }
    .drupalorg-site-api #api-function-signature td code {
      background: #fff;
    }
    .drupalorg-site-api #api-function-signature td.signature {
      font-size: 1.2em;
    }
    .drupalorg-site-api #api-function-signature .branch {
      text-align: right;
      white-space: nowrap;
    }
    .drupalorg-site-api #api-function-signature th {
      font-size: 0.6944em;
      font-weight: normal;
    }
    .drupalorg-site-api #api-function-signature td.signature {
      width: 100%;
    }
    .drupalorg-site-api #api-function-signature del {
      text-decoration: none;
      color: #9e8353;
    }
    .drupalorg-site-api #api-function-signature ins {
      text-decoration: none;
      color: #456500;
    }
    .drupalorg-site-api #api-function-signature.mobile-table td:before {
      display: none;
    }
    .drupalorg-site-api #api-function-signature.mobile-table .branch {
      text-align: left;
      padding-bottom: 0;
    }
    .drupalorg-site-api #api-function-signature.mobile-table .signature {
      padding-top: 0;
    }
    @media (min-width: 65.625em) {
      .drupalorg-site-api .container-12, .drupalorg-site-api #footer .block-inner, #footer .drupalorg-site-api .block-inner {
        width: 90%;
        max-width: none;
      }
    }
    .drupalorg-site-api #content .item-list ul {
      padding-left: 0;
    }
    .drupalorg-site-api #content .item-list ul ul {
      padding-left: 1.5em;
    }
    .drupalorg-site-api #content .item-list ul .item-list li {
      list-style: disc;
    }
    .drupalorg-site-api #content table {
      position: relative;
      z-index: 1;
    }
    .drupalorg-site-api #content .api-alternatives {
      background: whitesmoke;
      padding: 1em;
      margin-bottom: 1em;
    }
    .drupalorg-site-api #content .api-alternatives summary {
      display: list-item;
      color: inherit;
    }
    .drupalorg-site-api #content .api-alternatives ol {
      margin-top: .5em;
    }

    ol.code-line...

Reviews

No reviews yet.