Atomっぽい色合いにしたい！-本文編
カードの透明度を少し上げる。
style.css.page-list-item {
opacity: 0.9;
transition: opacity .3s;
}
.page-list-item:hover{
opacity: 1;
}
Project Titleの色調調整
style.css.quick-launch .project-home .title {
color: #fff;
}
.quick-launch .project-home .icon-home::before {
color: #fff;
}
ページ内スタイル
style.css.page {
background-color: rgb(40, 44, 52);
box-shadow: none;
border: #666 solid 0.5px;
border-radius: 5px;
}
fontを変更する
style.csshtml {
font: 16px/24px Helvetica Neue, Helvetica, Trebuchet MS, Arial, Verdana, Tahoma, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;
}
.text {
color: #c5c9d1;
}
Streamにおいて、文字色を修正する
style.css .stream .page .line{
color: #c5c9d1;
}
status-barのスタイル変更
style.css.status-bar {
background-color: rgba(255, 255, 255, 0);
color: #a9aaaf;
border-top-left-radius: 15px;
border-top-color: #888;
border-left-color: #888;
}
引用
コードブロックの右線の幅と統一した。
style.cssspan.quote {
padding-left: 10px;
padding-right: 10px;
width: 100%;
display: block;
border-left: solid 5px #4b7ff5;
}
カーソルをカスタマイズ
なお、画面スワイプによるカーソルの位置調整が重要となるスマホなどではカーソルを点滅させると位置を認識しづらいので点滅は無効となる。
style.css/* カーソルの幅と色替え */
.cursor {
width: 0.25em;
background-color: #528bff;
}
@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;
}
}
同時作業中のユーザのカーソルが点滅しないように設定
style.css/* 同時作業中のユーザのカーソル設定 */
.shared-cursors .cursor { background-color: #; animation: none }
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;
}
選択範囲の色を変更する。
デフォルトでは緑半透明だが、
Atomでは白半透明となっている。
動かなくなってる...！？
どうやって修正しようかな
!important を追記。あんま〜りこの方法は使いたくなかったけど！！
style.css.selection{
background-color: #ffffff77 !important;
}
入力時の文字色と背景色を変更する
style.csstextarea#text-input:focus {
background: #282c34ee;
color: #F5F8FA;
}