Last update: 2024/09/06 18:35

Lemmy/PieFed用のUserStylesを試作した

GitHubにあったlemmy-ui/src/assets/css/themes/nord.cssを整形したものをベースに作った Bootstrap 4.6.2 5.3.3のscssからコンパイルしたのでサーバー側にも導入できるかも

https://github.com/hanubeki/hanubeki-lemmy-themes

  • はぬべき@Lemmy@lm.korako.meOPM
    link
    fedilink
    日本語
    arrow-up
    1
    ·
    edit-2
    1 year ago

    次回アップデート予告

    .btn-group-toggle:has(.btn-outline-secondary) {
      border-radius: 0.5rem !important;
      background-color: var(--hlt-secondary);
      background-image: none;
      padding: 0.25rem 0;
    }
    
    .btn-group-toggle .btn-outline-secondary {
      margin: 0 0.25rem;
      border-radius: 0.5rem !important;
      color: var(--hlt-white);
      background-color: transparent;
      border-color: transparent !important;
      --hlt-btn-padding-y: 0.125rem;
      --hlt-btn-focus-shadow-rgb: var(--hlt-white-rgb);
    }
    
    .btn-group-toggle .btn-outline-secondary.disabled,
    .btn-group-toggle .btn-outline-secondary:disabled {
      color: var(--hlt-black) !important;
      background-color: transparent !important;
    }
    
    .btn-group-toggle .btn-outline-secondary.active,
    .btn-group-toggle .btn-outline-secondary:active {
      color: var(--hlt-primary) !important;
      background-color: var(--hlt-white) !important;
      background-image: linear-gradient(0deg, var(--hb-post-background), var(--hb-post-background)) !important;
    }
    
    .btn-group-toggle .btn-outline-secondary:is(:focus, :hover):not(.active, :active) {
      color: var(--hlt-secondary) !important;
      background-color: var(--hlt-white) !important;
    }
    
    @media (prefers-color-scheme: dark) {
      .btn-group-toggle:has(.btn-outline-secondary) {
        background-color: transparent;
        background-image: linear-gradient(0deg, var(--hb-post-background), var(--hb-post-background));
      }
    
      .btn-group-toggle .btn-outline-secondary {
        --hlt-btn-focus-shadow-rgb: var(--hlt-secondary-rgb);
      }
    
      .btn-group-toggle .btn-outline-secondary.disabled,
      .btn-group-toggle .btn-outline-secondary:disabled {
        color: var(--hlt-gray) !important;
      }
    
      .btn-group-toggle .btn-outline-secondary.active,
      .btn-group-toggle .btn-outline-secondary:active {
        background-color: var(--hlt-black) !important;
        background-image: none !important;
        border-color: transparent !important;
      }
    
      .btn-group-toggle .btn-outline-secondary:is(:focus, :hover):not(.active, :active) {
        color: var(--hlt-white) !important;
        background-color: var(--hlt-secondary) !important;
      }
    }