2020 06/01 20:38
Category : ツール
[LOG-CSS-DATA]
/* -- リスト下部にあるメモ欄システム -- */
#ulDatMemo {
margin:2em 1em 2em 1em;
padding:1em .5em 2em .5em;
}
/* -- メモ帳更新用テキストエリア -- */
#memoText {
font-size:100%;
line-height:1.5em;
padding:.25em;
margin:.5rem 1rem .5rem 0;
width:calc(100% - 4rem);
height:15.5em;
border-radius:4px;
outline:none;
resize:none;
transition:height .6s, background-color .6s, opacity .4s;
}
#memoText:focus {
background-color:#ffefff;
}
#memoText.sleep {
height:0;
background-color:#ffc;
opacity:0;
}
/* -- メモ送信ボタン -- */
#meUpBtn {
position:fixed; bottom:4rem; right:-5rem;
display:inline-block;
text-align:center;
font-size:90%;
width:3rem; line-height:3rem;
border:1px solid #808080;
border-radius:50%;
box-shadow:4px 4px 4px #ccc;
background-color:#fff;
transition:all .5s;
cursor:pointer;
z-index:20;
}
.edit-on #meUpBtn {
right:1rem;
}
/* -- 送信が必要な場合 -- */
.ups #meUpBtn {
background-color:#f88;
}
#meUpBtn:hover {
background-color:#ff9;
}
.ups #meUpBtn:hover {
background-color:#f00;
color:#fff;
}
#meUpBtn:active {
box-shadow:3px 3px 3px #ccc inset;
}
/* -- メモをロードして表示させる起動ボタン -- */
.memo-st {
display:inline-block;
padding:.5em 1em;
user-select:none;
border:1px solid #808080;
color:#00f;
background-color:#ffc;
box-shadow:5px 5px 5px #ccc;
cursor:pointer;
transition:all .5s;
}
.memo-st:hover {
background-color:#eef;
color:#000;
}
.memo-st:active {
box-shadow:3px 3px 3px #ccc inset;
}
/* -- 全て#ulMemo(n)のidが入るメモ本体 -- */
.memo {
position:relative;
transition:all .5s;
counter-reset:MCNT;
}
/* メモ内の要素は全てspan -- */
.memo span {
position:relative;
display:inline-block;
float:left;
padding:.5rem 1rem;
margin:1rem 2rem 1rem 5rem;
border:1px solid #000;
border-radius:.5rem;
box-shadow:3px 3px 3px #ccc;
cursor:default;
counter-increment:MCNT;
transition:all .5s;
}
.memo span.e {
padding:.25em .5em;
}
.memo span.s {
opacity:0;
}
.memo span::before {
position:absolute; left:-4.5rem; top:1rem;
display:inline-block;
font-size:.8rem; line-height:1.3rem;
text-align:center;
white-space:pre-wrap;
}
.memo span.o::before { top:.5rem; }
.memo span.w::before { top:2rem; }
.memo span::after {
position:absolute; left:-.6rem; top:1.5rem;
border-style:solid;
border-width:1px;
border-color:transparent transparent #000 #000;
display:inline-block;
width:1rem; height:1rem;
content:"";
transform:rotate(45deg);
}
.memo span.o::after { top:.8rem; }
.memo span.w::after { top:2.5rem; }
/* -- ハム太郎・緑 -- */
.es-1 { background-color:#efe; }
.es-1::before {
content:url("/home/nancyan/files/hamu_folder1.gif")
"\Aハム太郎\A" attr(class) "\A" "mc/" counter(MCNT);
}
.es-1::after { background-color:#eef8ee; }
/* -- はむはむ・ピンク -- */
.es-2 { background-color:#ffefff; }
.es-2::before {
content:url("/home/nancyan/files/hamu_folder2.gif")
"\Aはむはむ\A" attr(class) "\A" "mc/" counter(MCNT);
}
.es-2::after { background-color:#ffefff; }
/* -- 妖精・右向き -- */
.es-3 {
background-color:#fff;
font-size:1rem;
}
.es-3:first-line { color:#00f; }
.es-3::before {
content:url("/home/default/files/yosei_2.gif")
"\A" "Yosei" "\A" attr(class) "\A" "mc/" counter(MCNT);
}
.es-3::after { background-color:#fff; }
/* -- 妖精・アニメ -- */
.es-4 {
background-color:#fff;
font-family:serif;
font-size:1rem;
}
.es-4:first-line { font-weight:bold; color:brown; }
.es-4::before {
content:url("/home/default/files/angel.gif")
"\A" "Angel" "\A" attr(class) "\A" "mc/" counter(MCNT);
}
.es-4::after { background-color:#fff; }
.es-41 {
background-color:#fff;
font:bold 110%/1.5 monospace;
white-space:pre-wrap;
}
.es-41:first-line { font-weight:bold; color:brown; }
.es-41::before {
content:url("/home/default/files/angel.gif")
"\A" "Angel" "\A" attr(class) "\A" "mc/" counter(MCNT);
}
.es-41::after { background-color:#fff; }
.memo img.img1 {
float:left;
margin-right:.5em;
}
.memo img.img2 {
float:right;
}
.memo-load .memo {
opacity:0;
}
.memo .es-4 b { color:#00f; }
.memo span:hover {
box-shadow:5px 5px 5px #ccc;
}
.memo textarea {
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
font-size:100%;
padding:.25em;
resize:none;
border:none;
outline:none;
border-radius:3px;
transition:all .4s;
}
.memo-off #ulDatMemo {
display:none;
}
#ulDatMemo a {
text-decoration:underline;
}
#ulDatMemo a:hover {
color:magenta;
}
#ulMemoFooter {
clear:both;
margin-bottom:8em;
}
[/LOG-CSS-DATA]