Skip to content

irasutoya.com【ルナーダック】 by kaz

Imported from https://raw.githubusercontent.com/sabakuran/personal-stylesheets/master/css/jp/irasutoya.com.user.css

Mirrored from https://raw.githubusercontent.com/xrkaz/personal-stylesheets/master/css/jp/irasutoya.com.user.css

Screenshot of irasutoya.com【ルナーダック】

Details

Authorkaz

LicenseWTFPL

Categoryirasutoya

Created

Updated

Code size10 kB

Code checksumac2b95a6

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

DuckDuckGoにインスパイアされたirasutoya.comのテーマ

Features

• 7つのカラースキーム (ダーク、ピンク、シアン、イエロー、レッド、グリーン、ブルー) • 固定ナビゲーションバー • 画像の彩度セレクター • 画像の明るさセレクター • 丸い角トグル • モダンデザイン

Support

Chromium (Vivaldi) Firefox

Notes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
us = "\Aルナーダック v1.0.1 🌸 kaz.cx"

/* ==UserStyle==
==========================================================
とりあえず基本的なところだけ。忙しさがなくなったら改良します。
==========================================================
@name         irasutoya.com【ルナーダック】
@namespace    kaz.cx
@description  DuckDuckGoにインスパイアされたirasutoya.comのテーマ
@author       kaz <x@kaz.cx> (https://kaz.cx)
@homepageURL  https://kaz.cx/lunar-duck
@supportURL   https://github.com/xrkaz/personal-stylesheets/issues
@preprocessor stylus
@version      1.0.1
@license      WTFPL
===================
@var select cs "カラースキーム" {
    "デフォルト*":"cs-dark",
    "ミク":"cs-cyan",
    "ルカ":"cs-pink",
    "リン":"cs-yellow",
    "テト":"cs-red",
    "グミ":"cs-green",
    "カイト":"cs-blue",
}
@var checkbox navstick "固定ナビゲーションバー" 1
@var checkbox srcstick "固定検索パネル" 1
@var checkbox xzucc "SNSを隠す" 1
@var checkbox xpromo "プロモを隠す" 1
@var select imgsat "画像の彩度" {
  "グレースケール":"0%",
  "10%":"10%",
  "20%":"20%",
  "30%":"30%",
  "40%":"40%",
  "半分":"50%",
  "60%":"60%",
  "70%":"70%",
  "80%":"80%",
  "90%":"90%",
  "デフォルト*":"100%"
}
@var select imglumen "画像の明るさ" {
  "暗い":"0%",
  "10%":"10%",
  "20%":"20%",
  "30%":"30%",
  "40%":"40%",
  "半分":"50%",
  "60%":"60%",
  "70%":"70%",
  "80%":"80%",
  "90%":"90%",
  "デフォルト*":"100%"
}
@var select prad "丸い角" {
  "なし":"0",
  "デフォルト*":"4px",
  "8px":"8px",
  "12px":"12px"
}
@var checkbox xus "テーマの作成者を表示" 1
==/UserStyle== */

@-moz-document domain("irasutoya.com")
  
  i = !important
  
  :root
    --txt hsla(0, 0%, 100%, .8)
    --txt-act hsl(0, 0%, 100%)
    --txt-sub hsla(0, 0%, 100%, .5)
    --txt-ph hsla(0, 0%, 100%, .3)
    --txt-succ hsl(150, 50%, 50%)
    --txt-succ-act hsl(150, 50%, 80%)
    --bg-succ hsl(150, 30%, 20%)
    --txt-warn hsl(35, 50%, 50%)
    --bg-warn hsl(35, 30%, 20%)
    --txt-dang hsl(360, 50%, 50%)
    --bg-dang hsl(360, 30%, 20%)
    --txt-info hsl(225, 50%, 50%)
    --bg-info hsl(225, 30%, 20%)
    if cs == "cs-dark"
      --bg-1 hsl(0, 0%, 10%)
      --bg-2 hsl(0, 0%, 5%)
      --bg-3 hsl(0, 0%, 15%)
      --bg-4 hsl(0, 0%, 20%)
      --bg-5 hsl(0, 0%, 25%)
      --bg-6 hsl(0, 0%, 45%)
      --txt-lnk hsl(225, 100%, 70%)
      --txt-lnk-act hsl(225, 100%, 80%)
    else if cs == "cs-pink"
      --bg-1 hsl(315, 20%, 10%)
      --bg-2 hsl(315, 20%, 5%)
      --bg-3 hsl(325, 20%, 20%)
      --bg-4 hsl(330, 15%, 25%)
      --bg-5 hsl(330, 15%, 30%)
      --bg-6 hsl(330, 15%, 50%)
      --txt-lnk hsl(335, 45%, 60%)
      --txt-lnk-act hsl(335, 45%, 80%)
    else if cs == "cs-cyan"
      --bg-1 hsl(185, 20%, 10%)
      --bg-2 hsl(185, 20%, 5%)
      --bg-3 hsl(185, 100%, 10%)
      --bg-4 hsl(185, 30%, 20%)
      --bg-5 hsl(185, 15%, 40%)
      --bg-6 hsl(185, 30%, 45%)
      --txt-lnk hsl(190, 45%, 60%)
      --txt-lnk-act hsl(190, 45%, 80%)
    else if cs == "cs-yellow"
      --bg-1 hsl(50, 20%, 10%)
      --bg-2 hsl(50, 20%, 5%)
      --bg-3 hsl(50, 100%, 10%)
      --bg-4 hsl(50, 30%, 20%)
      --bg-5 hsl(50, 15%, 40%)
      --bg-6 hsl(50, 30%, 45%)
      --txt-lnk hsl(50, 45%, 60%)
      --txt-lnk-act hsl(50, 45%, 80%)
    else if cs == "cs-red"
      --bg-1 hsl(0, 20%, 10%)
      --bg-2 hsl(0, 20%, 5%)
      --bg-3 hsl(0, 100%, 10%)
      --bg-4 hsl(0, 30%, 20%)
      --bg-5 hsl(0, 15%, 40%)
      --bg-6 hsl(0, 30%, 45%)
      --txt-lnk hsl(0, 45%, 60%)
      --txt-lnk-act hsl(0, 45%, 80%)
    else if cs == "cs-green"
      --bg-1 hsl(140, 20%, 10%)
      --bg-2 hsl(140, 20%, 5%)
      --bg-3 hsl(140, 100%, 10%)
      --bg-4 hsl(140, 30%, 20%)
      --bg-5 hsl(140, 15%, 40%)
      --bg-6 hsl(140, 30%, 45%)
      --txt-lnk hsl(140, 45%, 60%)
      --txt-lnk-act hsl(140, 45%, 80%)
    else if cs == "cs-blue"
      --bg-1 hsl(200, 20%, 10%)
      --bg-2 hsl(200, 20%, 5%)
      --bg-3 hsl(200, 100%, 10%)
      --bg-4 hsl(200, 30%, 20%)
      --bg-5 hsl(200, 15%, 40%)
      --bg-6 hsl(200, 30%, 45%)
      --txt-lnk hsl(200, 45%, 60%)
      --txt-lnk-act hsl(200, 45%, 80%)

  pan1()
    background-color var(--bg-1)
    color var(--txt)
  shad()
    box-shadow 0 1px 3px hsla(0, 0%, 0%, .5)
  rad()
    border-radius prad
  sharad()
    shad()
    rad()
    
  /* 
  #Label2, #HTML6, #PopularPosts2, #HTML5
    margin 0
    
  .post
    margin 0
    padding 0
  
  .related-posts-widget img
    background none
  
  #PopularPosts1
    margin 0
  
  .box
    margin-left 0
  */
  
  // faq headers
  h3.faq
    color var(--txt-succ)
  
  #HTML7
    sharad()
    background-color var(--bg-3)
    z-index 1
  if srcstick
    #HTML7
      position sticky
      top 0
  if navstick
    #botmenu
      z-index 1
      position sticky
      top 0
    
    
  // scrollbar
  html
    // chromium
    ::-webkit-scrollbar
      width 15px
    ::-webkit-scrollbar-track
      background-color var(--bg-2)
      border-left 1px solid var(--bg-3)
    ::-webkit-scrollbar-thumb
      background-color var(--bg-4)
      border-radius 0
      &:hover
        background-color var(--bg-6)
    // firefox
    scrollbar-color var(--bg-4) var(--bg-2)
    scrollbar-width auto
      
  body
    background var(--bg-1)
    color var(--txt)
  a
    color var(--txt-lnk)
    &:hover, &:focus
      color var(--txt-lnk-act)
      text-decoration none
  .entry a:link, .entry a:visited
    color var(--txt-lnk)
    text-decoration none
    &:hover, &:focus
      color var(--txt-lnk-act)
      text-decoration none
  #footer a:link, #footer a:visited
    color var(--txt-lnk)
    text-decoration none
    &:hover, &:focus
      color var(--txt-lnk-act)
      text-decoration none
  .sidebar li a:link, .sidebar li a:visited
    color var(--txt-lnk)
    &:hover, &:focus
      color var(--txt-lnk-act)
      text-decoration none
  #submenu li a
    color var(--txt)
    &:hover, &:focus
      color var(--txt-act)
      background-color var(--bg-3)
      text-decoration none
  .category a:link, .category a:visited
    color var(--txt-sub)
    &:hover, &:focus
      color var(--txt)
      text-decoration none
  .category a
    shad()
    background var(--bg-4)
    &:hover, &:focus
      background var(--bg-5)
  .boxmeta h2 a:link, .boxmeta h2 a:visited
    color var(--txt-lnk)
    &:hover, &:focus
      color var(--txt-lnk-act)
      text-decoration none
      
  // ad management
  .entryadwrapperhome, .entryadwrapperhome2, .entryadwrapperhome3, .entryadwrapper, .entryadwrapper2, .entryadwrapperlabel, #HTML1
    display none
    
  // hide socials
  if xzucc
    .sharebuttuns, #HTML2, #HTML3, .linestamplink
      display none
      
  // hide promotions
  if xpromo
    [src="https://1.bp.blogspot.com/-8CoIodd2jBg/XSbwznho_MI/AAAAAAABTnQ/gGTTJepoFhk_TYyDTVl4fLZFk3GJocPdACLcBGAs/s250/banner_goods_desktop.jpg"],
    [src^="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Dino7dpAIlnBuIg4vEEvvE2CP5deoASLrP4Qz7Fwukn32y6nFsPERsrQNbrINsVurayaRcR6hZYGGSrTjlCfvkIPuSDbRnidozDiJHocZiLW8wBjhk_ooWFSm5-z2CaNAz0XFD8OWpTlxTDFCvXsxmnfTR18bXOOGytZX6GnZiS2UWoXukSv3mGS6w/s230/ban"]
      display none
  
  // adjust image saturation
  #torrent-description img, .comment-content img, .well img
    filter saturate(imgsat)
  
  // image shadows
  if imgshad
    #torrent-description img, .comment-content img, .well img
      shad()    
  
  // images
  img
    filter drop-shadow(2px 2px 0 var(--txt)) drop-shadow(-2px 2px 0 var(--txt)) drop-shadow(2px -2px 0 var(--txt)) drop-shadow(-2px -2px 0 var(--txt)) saturate(imgsat) brightness(imglumen)
    
  // header menu
  #botmenu
    shad()
    background-color var(--bg-2)
    border 1px solid var(--bg-3)
    border-top 0
    border-radius 0 0 prad prad
    margin-top 0
    
  // content
  .dottedborder
    display none
  .boxim
    background none
      
  // sidebar
  #wrapper
    background url(#)
  .sidebar .widget
    color var(--txt)
  .sidebar h2
    color var(--txt)
    text-shadow none
  .sidebar li
    text-shadow none
    border-bottom 0
  hr.sidebarhr
    display none
  .list-label-widget-content li
    margin-bottom 0
    
  // searchbar
  #searchwords
    sharad()
    background var(--bg-4)
    border 1px solid var(--bg-4)
    color var(--txt)
    width 219px
  #searchwords::placeholder
    color var(--txt-ph)
  #searchBtn
    background var(--bg-4)
    border 1px solid var(--bg-4)
    border-radius 0 prad prad 0
    cursor pointer
    &:hover, &:focus
      background var(--bg-6)
      border 1px solid var(--bg-6)
  #searchform
    width 230px
    
  // post content
  .post
    color var(--txt)
    border-bottom 0
  .title h2
    color var(--txt)
  .entry-post-date
    color var(--txt-sub)
  .category
    color var(--txt)
      
  // footer
  #footer
    shad()
    color var(--txt)
    background-color var(--bg-2)
    border 1px solid var(--bg-3)
    border-bottom 0
    border-radius prad prad 0 0
  #searchBtn img
    filter none
  // pyoko
  .pyokobottom
    margin-bottom 0
    margin-top 30px

  // rotating color animation
  @keyframes rainbow
    0%
      color hsl(335, 45%, 60%)
      text-shadow 0 0 10px hsl(335, 45%, 60%)
    10%
      color hsl(225, 100%, 70%)
      text-shadow 0 0 10px hsl(225, 100%, 70%)
    20%
      color hsl(190, 45%, 60%)
      text-shadow 0 0 10px hsl(190, 45%, 60%)
    30%
      color hsl(50, 45%, 60%)
      text-shadow 0 0 10px hsl(50, 45%, 60%)
    40%
      color hsl(0, 45%, 60%)
      text-shadow 0 0 10px hsl(0, 45%, 60%)
    50%
      color hsl(140, 45%, 60%)
      text-shadow 0 0 10px hsl(140, 45%, 60%)
    60%
      color hsl(200, 45%, 60%)
      text-shadow 0 0 10px hsl(200, 45%, 60%)
    70%
      color hsl(35, 60%, 40%)
      text-shadow 0 0 10px hsl(35, 60%, 40%)
    80%
      color hsl(10, 70%, 70%)
      text-shadow 0 0 10px hsl(10, 70%, 70%)
    90%
      color hsl(50, 100%, 50%)
      text-shadow 0 0 10px hsl(50, 100%, 50%)
    100%
      color hsl(335, 45%, 60%)
      text-shadow 0 0 10px hsl(335, 45%, 60%)

  // show userstyle attribution
  if xus
    .fcred::after
      content us
      display block
      white-space pre-wrap
      font-size 14px
      animation rainbow 5s infinite
...

Reviews

No reviews yet.