このページは個人的なメモ書きです。何かあればご連絡ください。

• ページの半プライベート化、目立たせない、など、色々やっています
  • ↑ プライベート化や目立たせない処理について、タネが分かっちゃった方は心に秘めておいてもらえたら
• 自由にご自身のCosenseにつかっちゃってください。許諾もクレジットも要りません
  • @import url(https://scrapbox.io/api/code/glisp/settings/style.css) するでも、スタイルごとコピペするでも。ただ、このグラデーションはbaku89.iconにとってのシグニチャなので、CSS変数の --gradient-data だけは上書きしてもらえると嬉しかったりもします

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;600&family=Shippori+Mincho:wght@400;700&family=Inter@400;700&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

body {
  color: black;

  /* Overrides app.css variables */
  --body-bg: white;
  --card-hover-bg: transparent;
  --cursor-color: white;
  --code-bg: transparent;
  --code-color: var(--terminal-foreground);
  --empty-page-link-color: #f8275d;
  --expandable-menu-bg: white;
  --card-border: none;
  --card-backside: black;
  --card-box-hover-shadow: none;
  --card-description-color: var(--page-text-color);
  --card-description-code-color: var(--code-color);
  --card-description-link-color: currentColor;
  --card-title-bg: black;
  --line-title-color: var(--page-text-color);
  --navbar-bg: white;
  --navbar-icon-color: black;
  --navbar-title-color: black;
  --new-button-vertical-color: black;
  --new-button-horizontal-color: black;
  --new-button-bg: var(--body-bg);
  --new-button-hover-bg: black;
  --page-text-color: black;
  --page-link-color: var(--page-text-color);
  --page-link-color-cursor-line: var(--page-text-color);
  --quote-bg-color: transparent;
  --relation-label-bg: black;
  --relation-label-empty-bg: white;
  --relation-label-links-bg: black;
  --telomere-border: #aaa;
  --telomere-unread: #381dff;
  --telomere-updated: #000000;
  --tool-text-color: black;
  --tool-light-color: black;
  --tool-color: black;
  --tool-bg: black;
  --search-form-bg: transparent;
  --search-form-icon-color: black;

  /* Custom CSS variables */
  --text-font: 'Shippori Mincho', yu-mincho-pr6n, YuMincho, 游明朝, 'Yu Mincho',
    YuMincho, 'Hiragino Mincho ProN', HGS明朝E, serif;
  --heading-font: 'Inter', Helvetica, 'Zen Kaku Gothic New', sans-serif;
  --code-font: 'Fira Code', Monaco, monospace;

  --terminal-background: #f9f9f9;
  --terminal-foreground: #020202;
  --terminal-ansiBlack: #020202;
  --terminal-ansiRed: #cd3232;
  --terminal-ansiGreen: #00bc00;
  --terminal-ansiYellow: #a5a900;
  --terminal-ansiBlue: #0752a8;
  --terminal-ansiMagenta: #bc05bc;
  --terminal-ansiCyan: #0598bc;
  --terminal-ansiWhite: #343434;
  --terminal-ansiBrightBlack: #5e5e5e;
  --terminal-ansiBrightRed: #cd3333;
  --terminal-ansiBrightGreen: #1bce1a;
  --terminal-ansiBrightYellow: #adbb5b;
  --terminal-ansiBrightBlue: #0752a8;
  --terminal-ansiBrightMagenta: #c451ce;
  --terminal-ansiBrightCyan: #52a8c7;
  --terminal-ansiBrightWhite: #a6a3a6;
  

  /*--gradient-data: #2638ff 0%, #f37ea5 16%, #f0a59b 28%, #f1caca 35%,
    #ccdce6 44%, #bef1ee 54%, #8ef6b7 63%, #6fc8d9 82%, #2638ff 100%;*/
  
  --gradient-data: #2638ff 0%, #c9baec 16%, #e8c6b2 30%, #dee1f3 44%, #bef1ee 54%, #8ef6b7 63%, #6fc8d9 82%, #2638ff 100%;

  --gradient-bg: linear-gradient(to right, var(--gradient-data));
  --grid-gap: 4px;
}

.editor {
  font-family: var(--text-font);
}

/* Reset */
input,
button,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

[data-hover-visible] .line a:is(.link, .page-link, .empty-page-link):hover {
  color: var(--body-bg);
  text-decoration: none;
  border-radius: 0.3em;
  background: var(--gradient-bg);
  background-attachment: fixed;
  background-position: 0 0;
  background-size: 1000px 1px;
  animation: link-bg-anim 4s linear 0s infinite;
  -webkit-animation: link-bg-anim 4s linear 0s infinite;
}

@keyframes link-bg-anim {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 1000px;
  }
}

/* Syntax Highlighting */
code.highlight .hljs-title,
code.highlight .hljs-section,
code.highlight .hljs-name,
code.highlight .hljs-selector-id,
code.highlight .hljs-selector-class {
  color: var(--terminal-ansiCyan);
}

code.highlight .hljs-symbol,
code.highlight .hljs-bullet,
code.highlight .hljs-subst,
code.highlight .hljs-meta,
code.highlight .hljs-meta .hljs-keyword,
code.highlight .hljs-selector-attr,
code.highlight .hljs-selector-pseudo,
code.highlight .hljs-link {
  color: var(--terminal-ansiRed);
}

code.highlight .hljs-number,
code.highlight .hljs-string,
code.highlight .hljs-meta .hljs-meta-string,
code.highlight .hljs-literal,
code.highlight .hljs-doctag,
code.highlight .hljs-regexp {
  color: var(--terminal-ansiYellow);
}

code.highlight .hljs-attribute,
code.highlight .hljs-attr,
code.highlight .hljs-variable,
code.highlight .hljs-template-variable,
code.highlight .hljs-class .hljs-title,
code.highlight .hljs-type {
  color: var(--terminal-ansiGreen);
}

code.highlight .hljs-keyword,
code.highlight .hljs-selector-tag,
code.highlight .hljs-addition {
  color: var(--terminal-ansiMagenta);
}

code.highlight .hljs-built_in,
code.highlight .hljs-deletion {
  color: var(--terminal-ansiBlue);
}

code.highlight .hljs-comment,
code.highlight .hljs-quote {
  color: var(--terminal-ansiBrightBlack);
}

.line {
  .page & {
    line-height: 2;
  }

  &.line-title {
    font-family: var(--heading-font);
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.6;
    text-wrap: balance;
  }

  /* Link */
  & a:is(.link, .page-link, .empty-page-link) {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.3);
  }
  
  & a[href="/glisp/hidden"],
  & a[href="/glisp/sage"] {
    display: none;
  }

  & a.empty-page-link {
    text-decoration-color: rgba(248, 39, 93, 0.3);
  }

  & strong {
    font-weight: 700 !important;
    font-family: var(--heading-font);
  }

  /* Icon */
  & img.icon {
    border-radius: 50%;
    top: -0.2em;
    margin: 0 2px;
    aspect-ratio: 1;
  }

  & .indent-mark {
    & .dot {
      display: block;
      position: absolute;
      top: 1em;
      width: 5px;
      height: 5px;
      transform: translate(-50%, -50%);
    }

    & :is(.c-1, .c-3) + .dot {
      background: white;
      border: 1px solid black;
    }

    & :is(.c-2, .c-3) + .dot {
      border-radius: 0;
    }
  }

  /* inline code */
  & code {
    font-size: 95%;

    & .backquote {
      font-size: 0.5em;
    }
  }

  &.cursor-line code.code .backquote {
    font-size: inherit;
  }

  /* blockquote */
  & .quote {
    border-left: 2px solid currentColor;
    padding-left: 1.2em;

    & i {
      color: #999;

      &:before {
        content: '---- ';
        font-family: var(--code-font);
      }
    }
  }

  & .telomere {
    font-family: var(--code-font);

    & .telomere-border {
      border-width: 0 0 0 1px !important;
    }
  }

  & span.code-block:not(.start) {
    background-color: #f9f9f9;
  }

  & span.code-block .code-block-start {
    background-color: transparent;
    padding: 4px 12px;

    & :is(a, i) {
      color: var(--page-text-color) !important;
      text-decoration: none !important;
    }
  }
  
  & .image {
    max-height: 600px;
    border-radius: 0.3em;
    vertical-align: middle;
  }
  
  &:not(.cursor-line).section-title {
    & .image {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    & .empty-char-index {
      display: none;
    }
  }
  
  &:not(.cursor-line).image-line-2 {
    & .image {
      max-width: inherit;
      width: 100%;
    }
    
    & .text > span {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.3em;
      align-items: center;
      
      .empty-char-index {
        display: none;
      }
      
      .modal-image {
        display: block;
      }
      
      & > span {
        display: block;
      }
    }
  }
  
    /* Image Captions */
    &:not(.cursor-line).section-title:has(.modal-image) + &,
    &:not(.cursor-line).section-title:has(.iframe-video-player) + & {
      .text:has(.deco-\#) {
        text-align: center;
        text-wrap: balance;
        font-size: 84%;
      }
    }
}

.project-home .title {
  font-family: var(--code-font);
  font-weight: 300;
}

.quick-launch {
  margin-top: 18px;
}

.page {
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.brand-icon {
  & path {
    fill: white;
    stroke: black;
    vector-effect: non-scaling-stroke;
    transform: scale(.9);
    transform-origin: 50% 50%;
  }
}

.cursor {
  mix-blend-mode: difference;
}

code {
  font-family: var(--code-font);
  font-weight: light;
}

.global-menu {
  & .project-list-filter input {
    display: block;
    font-size: 14px;
    flex-grow: 1;
    padding-left: 36px !important;
  }
  
  & .project-list-filter .kamon {
    position: absolute;
    left: 26px;
  }
  
  & .project-list-filter a {
    padding: 0;
    overflow: visible !important;
  }
  
  & .project-list-filter a:focus-within {
    box-shadow: none;
    background-color: transparent !important;
  }
}

.navbar {
  font-family: var(--heading-font);
  padding: 12px 0 8px;
  background-color: transparent;
  background-image: var(--gradient-bg);
  background-size: 100% 4px;
  background-repeat: repeat-x;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  
    --button-hover-color: black;
  
  & .navbar-menu {
    margin: 0 10px 0 0;
  }

  & .navbar-menu > li > a {
    color: black;
    background: var(--body-bg);
    border-radius: 1000px;
  }

  & .navbar-brand {
    margin-left: 10px;
  }
  
  & .row .project-home:hover {
      color: white;
  }
}

.new-button:hover :is(.horizontal-line, .vertical-line) {
  background-color: white;
}

/* Dropdown */
.dropdown-menu,
.page-list-mode-menu,
.page-sort-menu,
.page-filter-menu,
.page-list-translation-menu {
  font-family: var(--code-font), var(--heading-font);
  border-color: black;
  
  & .fas {
    color: currentColor !important;
  }
  
  & .tool-btn {
    font-weight: 300;
  }

  & .divider {
    background-color: black;
  }
}

.dropdown-menu > li > a.selected,
[data-hover-visible] .dropdown-menu > li > a.selected {
  color: blue;
}

[data-hover-visible]
  :is(.page-sort-menu, .page-filter-menu, .page-list-translation-menu, .page-menu, .page-list-mode-menu) {
  & .tool-btn:hover {
    color: var(--body-bg);
  }
}

.grid li.splitter.splitter {
  display: none;
}

.search-result-list .list:has(.list-style-item[data-page-title="hidden"], .list-style-item[data-page-title="sage"]) .list-style-item {
  display: none;
}

:is(.page-list, .related-page-list) ul.grid {
  margin: 0;
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(169px, 1fr));
  gap: var(--grid-gap);
}

ul.grid {
  & :is(.page-list, .related-page-list) & li.page-list-item {
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: 10 / 11;
  }

  .page-list & li.page-list-item {
    &:first-child,
    &[data-page-links~="'important'"] {
      grid-column: span 2;
      grid-row: span 2;
    }
  }

  /* Grid icon coloring */
  & li.page-list-item {
    aspect-ratio: 1 / 1;
    
    &:first-child {
      --border-color: black !important;
      
      & .header {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      & .title {
        font-size: 2.5rem;
        font-family: var(--code-font);
        font-weight: 300 !important;
        display: block !important;
        color: white !important;
        background: none !important;
        text-align: center;
        height: 1.1em;
        line-height: 1em;
        padding-top: .1em;
      }
    
      & .icon img {
        filter: none !important;
      }
    }
  
    
    &:has(.icon) {
      & img {
        /*filter: saturate(0);*/
      }
    }
    
       &[data-page-title='lookdev'] {
         
         & .title {
           color: #8912df !important;
           
           &:before {
             content: '`(';
           }
           
           &:after {
             content: '?)';
           }
         }
       }
    
    &[data-page-links~="'member'"] {
      & img {
        filter: none !important;
           border-radius: 9999px !important;
           margin-inline: auto !important;
           transform: scale(.7);
           transform-origin: 50% 70%;
      }
    }
    
    &[data-page-links~="'person'"] {
      --border-color: #4740db;
    }

    &[data-page-links~="'memo'"],
    &[data-page-links~="'自動勉強会アーカイブ'"] {
      --border-color: #e9695e;
    }
    
    &[data-page-links~="'diary'"] {
         --border-color: #144cc7;
       }

    /* for Paper/Books */
    &[data-page-title^='『'],
    &[data-page-links~="'text'"] {
      --border-color: #02bde0;
    }
    
    &[data-page-links~="'sage'"] {
         order: 5000;
       }

    &[data-page-title='settings'] {
      --border-color: #ccdce6;
      order: 10000;
    }

    &[data-page-title^="Glisp"] {
      --border-color: #914fdd;
    }
    
    &[data-page-title="baku89"] {
         --border-color: black !important;
         
       }
    
    &[data-page-links~="'hidden'"] {
      --border-color: #1bcf7e;
      display: none;
    }
  }

  --border-color: black;

  & li.page-list-item a {
    position: relative;
    box-shadow: inset 0 0 0 1px black;
    overflow: hidden;
    height: 100%;
    border-radius: 8px;
    
    &:has(.icon) {
      box-shadow: none;
    }

    &:after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--border-color);
      mix-blend-mode: screen;
      z-index: 20;
    }

    & .hover {
       border-radius: 8px;
       overflow: hidden;
       z-index: 50;
       
      &:before {
        content: '';
        position: absolute;
        inset: 0;
        display: block;
         border: 4px solid;
         border-image-slice: 4;
         border-image-source: conic-gradient(from 0turn, var(--gradient-data));
         animation: link-bg-conic-anim 1.5s linear 0s infinite reverse;
       }
    }

    & .pin {
      right: -1px;
      top: -1px;
      border-radius: 0 0 0 8px;
      z-index: 100;
      background: linear-gradient(
        45deg,
        var(--border-color) 50%,
        var(--body-bg) 50%
      );
    }

    & .content {
      font-family: var(--text-font);
      height: calc(100% - 14px);
      border-radius: 4px;
      overflow: hidden;
      margin: 0 12px 12px;
      padding-top: 12px;
    }

    & .header {
      border-top: none;
      padding: 0 0 12px;
      z-index: 1;
    }

    & .title {
      font-weight: 700 !important;
      font-size: 14px;
      font-family: var(--heading-font);
      background: white;
      display: inline;
      padding: 0 2px;
      border-radius: .2em;
    }

    & .description {
      padding: 0;
      
      & code {
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 3px;
      }
    }

    & img.inline-icon {
      border-radius: 50%;
      padding: 0 2px;
    }

    & .icon {
      padding: 0;
      margin-inline: 0;
      

      & img {
        position: absolute;
        object-fit: cover;
        height: 100%;
        inset: 0;
        border-radius: 4px;
        /* filter: saturate(0);*/
      }
    }
  }
}

@keyframes link-bg-conic-anim {
  0% {
    border-image-source: conic-gradient(from 0turn, var(--gradient-data));
  }
  10% {
    border-image-source: conic-gradient(from 0.1turn, var(--gradient-data));
  }
  20% {
    border-image-source: conic-gradient(from 0.2turn, var(--gradient-data));
  }
  30% {
    border-image-source: conic-gradient(from 0.3turn, var(--gradient-data));
  }
  40% {
    border-image-source: conic-gradient(from 0.4turn, var(--gradient-data));
  }
  50% {
    border-image-source: conic-gradient(from 0.5turn, var(--gradient-data));
  }
  60% {
    border-image-source: conic-gradient(from 0.6turn, var(--gradient-data));
  }
  70% {
    border-image-source: conic-gradient(from 0.7turn, var(--gradient-data));
  }
  80% {
    border-image-source: conic-gradient(from 0.8turn, var(--gradient-data));
  }
  90% {
    border-image-source: conic-gradient(from 0.9turn, var(--gradient-data));
  }
  100% {
    border-image-source: conic-gradient(from 1turn, var(--gradient-data));
  }
}

.col-page {
  padding: 0 !important;
}

input[type='text'] {
  outline: none !important;
  appearance: none !important;
  border-radius: 100px !important;
  padding: 0 20px !important;
  box-shadow: 0 0 0 1px black !important;

  &:focus {
    box-shadow: 0 0 0 1px black, inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
  }

  &:focus,
  &.for-mobile {
    background-color: transparent !important;
    color: var(--page-text-color) !important;
  }
}

.search-form .form-group {
  & input {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, .8);
    
    &:focus {
      border-radius: 16px 16px 0 0 !important;
    }
  }
  
  & .dropdown-menu {
    border: 1px solid black;
    margin: 0 -1px 0;
    border-radius: 0 0 16px 16px;
    max-width: auto;
    width: calc(100% + 2px);
  }
  
  & button {
    right: 5px;
  }
}

.table-block .cell {
  background-color: var(--quote-bg-color) !important;
  border-top: 1px solid currentColor;
}

.status-bar > div {
  border-style: dashed none none dashed;
  font-family: var(--code-font);
}

.page-menu {
  border-radius: 0;
  box-shadow: none;
  top: calc(62px + 1em);
  box-shadow: 0 0 0 1px black;
  border-radius: 100px;

  &.xs div.dropdown {
    padding-left: 0;
    padding-right: 0;
  }

  & .tool-btn {
    font-family: var(--code-font);

    &:hover {
      color: white;
      background: black;
    }
  }
}

.expandable-menu {
  top: 12px;
  backdrop-filter: none;
  box-shadow: 0 0 0 1px black;
  border-radius: 1000px 0 0 1000px;

  &:has(> .closed) {
    box-shadow: none;
    --navbar-bg: transparent;
  }

  & .toggle-button {
    opacity: 1;
    color: black;
  }

  & .page-menu .tool-btn {
    color: var(--tool-color);
  }
}

/* Related page list */
.related-page-list {
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);

  & .grid li {
    width: 100%;
    height: 100%;
  }

  /* Diagonal stripes */
  & li.relation-label a {
    --gray: #999;
    background-image: linear-gradient(
      45deg,
      var(--gray) 6.25%,
      transparent 6.25%,
      transparent 50%,
      var(--gray) 50%,
      var(--gray) 56.25%,
      transparent 56.25%
    );
    background-size: 8px 8px;
    background-color: black;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    border-radius: 8px;
  }
  & li.relation-label a :is(.title, .icon-lg) {
    color: white;
  }

  /* No pattern */
  & li.relation-label:is(.links, .project-links) a {
    background-image: none;
  }

  /* Dots */
  & li.relation-label.empty-links {
    & a {
      background-image: linear-gradient(to right, white 75%, transparent 75%),
        linear-gradient(to bottom, white 75%, transparent 75%);
      background-size: 4px 4px;
      background-color: black;

      & .title,
      & .icon-bg {
        color: black;
      }
    }

    & .arrow {
      border-left-color: black;
    }
  }
}

/* Custom Syntax */
.deco-\# {
  color: #777;
  font-size: 0.9em;
  --page-link-color: currentColor;
}

.deco-\| {
  background: #ddd;
  color: white;
  border-radius: 999px;
  padding: 0 1em;
  font-family: var(--code-font);
  font-family: .9em;
  
  &:after {
    content: '';
    position: absolute;
    background: #ddd;
    height: 1px;
    top: 50%;
    left: 3.2em;
    width: 100%;
  }
  
}

.iframe-video-player {
  iframe {
    max-height: inherit;
    height: auto;
    border-radius: 0.3em;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .page {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .line {
    .telomere {
      display: none;
    }
  }

  .scroll-bar-overlay .unread-bar {
    width: 2px;
  }
}

     
 #L673357c3f5066e00008af6b8 {
   display: none !important;
 }
 
 .grid li.page-list-item.pin::after {
   display: none;
 }