settings
settings
code:style.css
/* header色変え */
.navbar-default {
background: linear-gradient(90deg, #313131, #747474);
border-bottom:solid 1px #f0f0f0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
overflow: unset;
}
.quick-launch .project-home {
color:#fff;
font-weight:bold;
}
.quick-launch .project-home:hover{
color:#fff !important;
}
@media screen and (max-width: 768px) {
.quick-launch .project-home {
color:#444;
font-weight:bold;
}
}
.editor {
font-family: 'Noto Serif JP', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 1.3em;
line-height: 2.1em;
leter-spacing:-1px;
}
@media screen and (max-width: 768px) {
.editor {
font-size: 1em;
line-height: 2em;
}
}
.app.presentation .editor .text{
font-size: 0.8em !important;
text-align:left;
line-height:2.2em;
}
.app.presentation .line{
font-size:2.2vw;
font-weight:bold;
}
.app.presentation .line .indent-mark .dot{
top:1em;
background-color:#999;
}
.app.presentation .line.section-title .level-1,
.app.presentation .line.section-title .level-2,
.app.presentation .line.section-title .level-3,
.app.presentation .line.section-title .level-4,
.app.presentation .line.section-title .level-5{
font-size: 0.7em !important;
text-align:left;
line-height:1.4em;
}
.app.presentation .lines{
border-bottom:0px;
}
/* 見出しスタイリング */
.line .level-1,
.line .level-2,
.line .level-3,
.line .level-4,
.line .level-5,
.line .level-6,
.line .level-7,
.line .level-8{
font-weight:bold !important;
}
.line .level-1 {
font-size:1em !important;
}
.line.section-title .level-1 {
font-size:1.1em !important;
line-height:1.2em;
margin: 0 0 0.5em 0px;
border-bottom: solid 3px #EDF0F4;
color:#404D6F;
padding: 0 0.3em 0.5em !important;
}
.line.section-title .level-2 {
width: 100%;
font-size:1.2em !important;
line-height:1.2em;
color:#303D5F;
padding: 0 0.8em 0.6em !important;
border-bottom: dashed 1px #dddddd;
margin-bottom: -0.5em;
}
.line.section-title .level-3 {
width: 100%;
padding: 0em 0.1em 0.4em;
margin: 0 0 0.5em 0;
color:#202D4F;
border-bottom: solid 3px #EDF0F4;
font-size:1.4em;
line-height:1.4em;
font-weight:bold !important;
}
.navbar-form .search-form{
border:0px !important;
}
.quote:before{
display: inline-block;
position: relative;
top: 0px;
left: 0px;
content: "\f10d";
font-family: FontAwesome;
color: #cfcfcf;
font-size: 30px;
line-height: 1em;
font-weight: 900;
}
.line .quote{
padding:10px 20px;
font-style:normal;
}
a.link {
font-size:0.8em;
}
a.link:after {
margin: 0 3px;
font-family: FontAwesome;
vertical-align: middle;
content: '\f08e';
}
a.link.icon:after {
margin:0;
content:none;
}
a{
text-decoration:underline;
}
.iframe-video-player{
position: relative;
}
.iframe-video-player iframe{
width: 100%;
}
.quick-launch.layout-page .plan-badge,
.quick-launch.layout-page .private-badge{display:none;}
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700');
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css');
body {
background-color: #f9f9f9;
color: #555555;
font-family: 'Noto Serif JP', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.page{
border-radius: 0;
}
.col-menu{
display:none;
}
/* 1. Scrapboxアイコンをバーガーアイコンに置き換え */
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #eee; }
.line .indent-mark .dot{
top:0.85em;
}
.navbar .navbar-brand .icon-arrow-down {
display:none;
}
.navbar-form .search-form {
background-color:rgba(255, 255, 255, 0.2);
border:thin solid #eeeeee;
}
.navbar .navbar-menu .mobile-search-toggle {
color:#dddddd;
}
.navbar .navbar-menu .mobile-search-toggle.active {
color:#555555 !important;
}
.search-form .form-group button {
color:#dddddd
}
.search-form .form-group button.focus {
color:#dddddd
}
.plan-badge {
display:none;
}
.private-badge {
display:none;
}
inputtype="range".grid-size-range {
color:#cccccc;
}
.grid li {
margin:0px;
padding:0px;
}
.grid li.page-list-item a {
box-shadow: 2px 2px 3px rgba(0,0,0,0.05);
width:100%;
height:inherit;
}
.grid li.page-list-item a:hover {
}
.grid li.page-list-item a .content {
display:flex;
flex-direction:column;
}
.grid li.page-list-item a .content .header {
order:0;
padding: 16px 16px 14px;
line-height:1.2em;
}
.grid li.page-list-item a .content .header .title {
color:#424242;
font-weight:bold;
}
.grid li.page-list-item a .content .icon {
order:1;
padding:0px;
margin:0px 10px 10px 10px;
}
.grid li.page-list-item a .content .description {
order:2;
font-size:0.8em;
line-height:1.5em;
margin:-8px 0 0;
padding: 4px 18px 4px;
}
.page {
box-shadow: 0 0px 10px rgba(0,0,0,0.05);
background-color: #ffffff;
}
.col-page {
max-width:920px;
}
.col-page-side {
width: calc((100% - 920px) / 2);
}
.line.line-title {
text-align:center;
border-bottom:thin solid #eeeeee;
margin-bottom:13px;
font-weight:bold;
color:#424242;
}
.lines {
border-bottom:thin solid #eeeeee;
padding-bottom:40px;
}
.line img.strong-image {
max-width:100%;
}
.line.section-title strong {
display: inline-block;
font-weight:bold;
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
a{
transition: 0.4s ;
text-decoration:none !important;
}
a:hover{
opacity:0.3;
}
.line span.code-block {
font-size: 0.9em;
}
.page-menu .random-jump-button {
display:none;
}
.related-page-list .grid li{
}
.grid li.relation-label a {
color:#aaa !important;
background-color:#f0f0f0 !important;
font-size:0.9em;
padding: 0 20px;
text-align:center;
}
.grid li.relation-label .arrow {
border-left-color:#aaaaaa !important;
}
.grid li.relation-label.empty-links {
display:none;
}
.page-list-item.empty {
display:none;
}
/* プロジェクトTOPへのリンクと周辺パーツを強引にnavbarに移動 */
/* ※次のnavbar固定と同時に使う必要がある */
@media screen and (min-width: 768px) {
.quick-launch .project-home {
position: fixed; top: 7px; left: calc((100% - 1080px)/2); z-index: 990;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home { left: 65px } }
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home { left: 80px } }
@media screen and (min-width: 1261px) {
.quick-launch .project-home { left: calc((100% - 1260px)/2 + 80px) } }
/*** navbar固定 ***/
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
body:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }
/*** 画像を並べて表示 ***/
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
/* イタリックは少し小さいフォントにする */
.line .deco-\/ {
font-size: 0.8em;
line-height: 0.9em;
color: #aaaaaa !important;
}
.deco-\/ a.page-link {
color: #aaaaaa !important;
}
.deco-\/ a.page-link:visited {
color: #aaaaaa !important;
}
.deco-\/ a.page-link:hover {
color: #888888 !important;
}
from: /phoooutty/settings
code:style.css
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'FontAwesome'; font-size: 20px; color: #ccc; bottom: 0 }
code:style.css
/* スリムなテロメア */
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #eee }
.line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #8f9899; background-color: transparent }
/* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: #fff; width: 2px }
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: #ccc; width: 2px }
特殊文字色1
特殊文字色
code:style.css
.deco-\# {
color: #4F3D30; /* 白文字 */
background-color: #FEF8D9;
padding: 4px 5px;
font-weight:bold;
}
.deco-\! { /* 重要な部分は!を付ける */
color: #4F4745;
background-color: #FFEF5A !important;
padding: 4px 5px;
font-weight:bold;
}
.deco-\" a.link{
background: linear-gradient(135deg, #26f 30%, #d6c);
display:block;
width:40%;
line-height:1.2em !important;
margin: -5px auto 0;
padding:0.8em 1em;
text-align:center;
border-radius:2em;
color:white !important;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
}
.deco-\" a.link:hover{
opacity:0.4 ;
}
@media screen and (max-width: 768px) {
.deco-\" a.link{
width:80% !important;
}
}
code:style.css
.deco-\{:before {
position: absolute;
margin: 0 0 0 -1.5em;
padding: 0;
content: "▪️︎";
font-size:2em;
color:#fff;
}
.deco-\{ {
font-size:0.9em;
line-height:2.1em;
padding: 0.4em 1.2em;
margin: 0.6em 0 0em 0.2em;
display:inline-block;
}
.deco-\~ {
display:inline-block;
margin:0 auto;
text-align: center;
}
code:style.css
.deco-\}:before {
position: absolute;
margin: 0.35em 0 0 -0.8em;
padding: 0;
content: '\f0da︎';
font-family: FontAwesome;
font-size:1.5em;
color:#ccc;
}
@media screen and (max-width: 768px) {
.deco-\}:before {
margin: 0.35em 0 0 -0.94em;
}
}
.deco-\} {
line-height:1.1em;
padding: 0.2em 0.2em;
margin: -0.1em 0 0em 0.2em;
border-bottom: dashed 2px #EDF0F4;
color:#6F7C9E;
font-weight:bold;
}