Last update: 2024/03/13 09:45

Lemmy用のUserStylesを試作した

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

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

  • はぬべき@LemmyOPM
    link
    日本語
    1
    edit-2
    5 months 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;
      }
    }
    
  • はぬべき@LemmyOPM
    link
    110 months ago

    lemmy-ui 0.18用のBootstrap 5.3.0ベースのcssも作ってみました。

  • はぬべき@LemmyOPM
    link
    1
    edit-2
    10 months ago

    ちなみに、このテーマはCSS自体はnord.cssがベースではあるがNordではなく自分用に作ってたカラースキームをベースに作り変えました。 GoogleのHCTカラーシステムをベースに作ってるのでMaterial You感もあるかもしれません。

    • 鴉河雛@ :c_estella:
      link
      fedilink
      1
      edit-2
      1 year ago

      @hanubeki 画像添付するとリンクとぶのは仕様です・・・
      なお、その後また編集でリンク貼ると画像付きのリンクにできます。

      あと、こちらのCSS適用してみました。

      • はぬべき@LemmyOPM
        link
        21 year ago

        URLの方を編集すると今度は添付画像が消えたので(URLコピーしててよかった)
        本文の方に載せておきました。

        CSS導入していただきありがとうございます。
        これでスマホでもこのテーマが使えます。