settings
|# settings
|## references
/customize/Dark Theme CSS
|## style.css customed
|### import
code:style.css
@import '/api/code/Mijinko/コードブロックの行番号を表示するUserCSS/style.css';
|### cursor line highlighted
/customize/Dark Theme CSS
- blinking
code:style.css
/* カーソルの幅と色替え */
.cursor {
width: 1.5px;
background-color: rgba(255, 255, 255,.6);
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;
}
|### section
- /customize/sectionを水平線で区切る
code:style.css
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title) .text {
padding-top: 0.2em;
}
.app:not(.presentation) .line.section-title:not(.line-title):before {
content: "";
display: block;
width: 111%;
position: absolute;
left: -49px;
border-top: 1px lightgray solid;
}
|### line block as a standard style
|#### Hidden ? - .helpfeel
? hello - helpfeel
code:style.css
.line code.helpfeel {
font-size: 1.1em;
}
.
|#### Quate
quated line
|### line as a standard style
|#### line decorations
table:inline_decorations
seq syntax like html tag
1 |h1 <h1>
2 h2 <h2>
3 h3 <h3>
4 h4 <h4>
5 highlight <strong>
6 bold <b>
7 italic <i>
8 strike <del>
9 underline <u>
.
|# h1 *を6
|## h2 *を4
|### h3 *を3
|#### h4 *を2
strong - strong highlight span
bold
italic
strike
underline
|#### existing line decorations customized
/customize/Dark Theme CSS
/akio6o6/settings#59298c794096630000c78071 を カスタマイズ
code:style.css
.line strong {
display: inline-block;
}
.line strong.level-2 {
width: 100%;
padding: 0.05em 0.4em 0.05em 0em; /* top right bottom left*/
}
.line strong.level-3 {
width: 100%;
margin: 0.25em 0;
padding: 0.05em 0.05em 0.05em 0.5em;
border-left: solid 2.5px #00cccc;
color: #C5C8CA;
}
.line strong.level-4 {
width: 100%;
padding: 0.05em 0.05em 0.05em 0.5em; /* top right bottom left*/
color: #00cccc;
}
.line strong.level-6 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0em 0.05em 0em;
}
/* * - <strong> */
.line strong.level-1{
font-weight: normal;
background: linear-gradient(transparent 50%, #2d3038 80%, #ffdf99 85%, #2d3038 100%);
}
/* / - <italic> */
.line .deco-\/ {
color: #e5e5e7;
background-color: darkslateblue;
}
|
https://gyazo.com/ddab24a12818ca0df5613ebd1ae7c994
[** |#### user's line decorations customized
Tilde ~, Extranation !, percent %, and &,
left-(, Right-), plus +, left-{, right-}
or-|, Coron-., Canma-,
decrecent - > cressent - <
.
left-( 1.125em
left-{ 1em
left-( 0.9em
left-{ 0.8em
.
code:style.css
.line .deco-\| {
font-size:1.2em;
font-weight:bold;
}
.line .deco-\> {
display:inline-block;
width:100%;
color: #e5e5e7;
background-color: #2d3038;
padding: 0.05em 0.4em 0.05em 0.5em;
margin: 0.25em 0;
}
.line .deco-\( {
font-size:0.9em;
}
.line .deco-\{ {
font-size:0.8em;
}
.line strong.level-5{
color: #C5C8CA;
font-size:1.25em;
font-weight: normal;
line-height: normal;
padding-left: 0px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
/* ***** - <customed> */
.app.presentation .line strong.level-5{
/*display: none; toggle*/
color: #C5C8CA;
font-size:1.25em;
font-weight: normal;
line-height: normal;
padding-left: 0px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.app.presentation .line strong.level-6 {
font-size: xx-large;
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0em 0.05em 0em;
}
|### inline block customised
|#### inline block decorations
notion decoration `['
code:style.css
.deco-\' {
/* Key part for making behave as a block */
display:inline-block;
width:100%;
/* background color and border */
color: #003f66;
background-color: #c8e7fa;
opacity:0.8;
border: 1.2px solid #009999;
/* making some free space around it */
padding-left: 5px;
padding-right: 5px;
margin-bottom: 5px;
}
|### block
|#### Table block
/customize/テーブルにボーダーを引く
/customize/テーブルの見た目をカスタマイズ
code:style.css
.table-block .cell {
box-shadow:
1px 0 0 0 #888,
0 1px 0 0 #888,
1px 1px 0 0 #888,
1px 0 0 0 #888 inset,
0 1px 0 0 #888 inset
}
/* 1行目をSection titleとすると太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
|#### Code block
importにてline numberを付与
hashtag and link
#hashtag
/help-jp/UserCSS
code:style.css
/** link for dark style */
a.page-link {
/** color: #ffffcc; FIXME */
}
/* ＃- <hashtag> */
atype="hashTag"{
display: inline-block;
padding: 1px 2px;
margin: 0 1px 1px 0;
background: #fff;
color: #1e90ff;
font-size: 0.8em;
border: 1px solid lightsteelblue;
border-radius: 2px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* <link> other site url */
.line a.link:not(.icon)::after {
color: #ffffcc;
content: '🌐';
display: inline-block
}
/* <link> internal link */
.line a.page-link {
/* border-bottom: solid .1rem #5e8af7; FIXME empty-page-link, bold*/
font-size: bold;
}
.line a.page-link::before {
color: #a0a0a0;
content: '';
display: inline-block;
margin-right: .2rem;
}
|## style.css Presentation Mode
|### img, icon style
code:style.css
/** img */
.line img {
}
.line .strong-img {
max-width: 450px;
min-width: 300px;
}
.app.presentation .line img {
width: auto !important;
zoom: 200%;
}
.app.presentation .line .strong-img {
max-width: 450px;
min-width: 300px;
width: auto !important;
zoom: 80%;
}
/** icon */
.line img.icon {
}
.line img.strong-icon {
max-height: 600px;
width: 300px;
height: auto;
}
.app.presentation .line .section-title img.icon {
height: 80%;
}
.app.presentation .line img.strong-icon {
max-width: 100%;
max-height: 100%;
width: auto !important;
height: 450px !important;
}
.
code:style.css
htmldata-display-style*="presentation" body {
background-color: var(--page-bg, #fefefe);
}
.app.presentation .navbar,
.app.presentation .quick-launch,
.app.presentation .related-page-list,
.app.presentation .telomere,
.app.presentation .status-bar {
display: none;
}
.app.presentation .page {
box-shadow: none;
}
.app.presentation .line {
font-size: 2vw;
line-height: 1.2em;
}
.app.presentation .line .text:not(.section-title):not(.code-block) {
margin-bottom: 10px;
}
.app.presentation .line .code-block {
line-height: 1em;
background-color: var(--code-bg, rgba(0, 0, 0, 0.04));
}
.app.presentation .line .code-block code {
font-size: 0.6em;
}
.app.presentation .line .code-block code.code-body {
margin-left: -0.9em;
}
.app.presentation .line .dot {
width: 0.5vw;
height: 0.5vw;
top: calc(0.6em - 0.25vw);
right: 1vw;
}
.app.presentation .line.section-title:not(:first-child) {
page-break-before: always;
}
@media print {
/* .app .lines { */
/* margin-top: 100mm; */
/* } */
.app.presentation .line {
display: block !important;
}
}
.app.presentation .col-page {
min-width: 80vw;
max-width: 130vh;
}
.app.presentation .col-page-side {
opacity: 0;
transition: opacity 0.5s;
}
.app.presentation .col-page-side:hover {
opacity: 1;
}
htmldata-os*="android" .app.presentation .line,
.app.presentationdata-os*="android" .line {
display: block;
}
htmldata-os*="android" .app.presentation .section-title:not(:first-child),
.app.presentationdata-os*="android" .section-title:not(:first-child) {
margin-top: 50vh;
}
htmldata-os*="ios" .app.presentation .line,
.app.presentationdata-os*="ios" .line {
display: block;
}
htmldata-os*="ios" .app.presentation .section-title:not(:first-child),
.app.presentationdata-os*="ios" .section-title:not(:first-child) {
margin-top: 50vh;
}
/* ... */
htmldata-display-style*="presentation" .text-input {
font-size: 3vw;
}
htmldata-display-style*="presentation" .text-input.line-title {
font-size: 6vw;
}
/* customize */
.app.presentation .line.section-0.section-title {
/* display:inline-block; FIXME not work */
/* width:100%; */
font-size: xx-large;
margin-bottom: 0.5em;
text-align: left; /* FIXME not work*/
border-bottom: solid 3px #ccc;
}
.app.presentation .line.section-title {
/* display:inline-block; FIXME not work */
/* width:100%; */
font-size: xx-large;
margin-bottom: 0.5em;
text-align: left; /* FIXME not work*/
border-bottom: solid 3px #ccc;
}
/* **** - <h2> */
.app.presentation .line.section-title strong.level-4 {
font-size: xx-large;
font-weight: bold;
padding: 1.2rem, 1.4em, 1.4em, 1.2rem ;
}
.app.presentation .line strong.level-4 {
font-size: xx-large;
font-weight: bold;
line-height: 1.2;
padding: 1.2rem, 1.4em, 1.4em, 1.2rem ;
}
/* *** - <h3> */
.app.presentation .line.section-title strong.level-3{
font-size:xx-large;
color: #494949;/*文字色*/
padding: 0.1em, 1em, 0.1em, 1.5em;/*FIXME padding-left */
background: #E6E6FA;/*背景色*/
}