Atomっぽい色合いにしたい！-本文編

カードの透明度を少し上げる。

code:style.css

.page-list-item {

opacity: 0.9;

transition: opacity .3s;

}

.page-list-item:hover{

opacity: 1;

}

Project Titleの色調調整

code:style.css

.quick-launch .project-home .title {

}

.quick-launch .project-home .icon-home::before {

}

ページ内スタイル

code:style.css

.page {

background-color: rgb(40, 44, 52);

box-shadow: none;

border-radius: 5px;

}

fontを変更する

code:style.css

html {

font: 16px/24px Helvetica Neue, Helvetica, Trebuchet MS, Arial, Verdana, Tahoma, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;

}

.text {

}

Streamにおいて、文字色を修正する

code:style.css

.stream .page .line{

}

status-barのスタイル変更

code:style.css

.status-bar {

background-color: rgba(255, 255, 255, 0);

border-top-left-radius: 15px;

}

引用

幅を広く設定した

aa

コードブロックの右線の幅と統一した。

code:style.css

span.quote {

padding-left: 10px;

padding-right: 10px;

width: 100%;

display: block;

}

カーソルをカスタマイズ

なお、画面スワイプによるカーソルの位置調整が重要となるスマホなどではカーソルを点滅させると位置を認識しづらいので点滅は無効となる。

code:style.css

/* カーソルの幅と色替え */

.cursor {

width: 0.25em;

}

@media screen and (min-width:1024px){

.cursor{

animation: blink 1s infinite;

}

@keyframes blink {

0% { opacity: 0; }

50% { opacity: 0; }

51% { opacity: 1; }

100% { opacity: 1;}

}

.cursor-line.with-image {

animation-name: none;

}

}

同時作業中のユーザのカーソルが点滅しないように設定

code:style.css

/* 同時作業中のユーザのカーソル設定 */

code:style.css

/* カーソルのある行の背景色と下線を薄いグレーにする */

.cursor-line {

border-right: 3px solid rgba(100, 135, 150, 0.75);

border-bottom: 0.5px dashed rgba(135, 165, 205, 0.45);

box-sizing: border-box;

}

選択範囲の色を変更する。

動かなくなってる...！？

どうやって修正しようかな

code:style.css

.selection{

}

入力時の文字色と背景色を変更する

code:style.css

textarea#text-input:focus {

}