2020 06/01 20:37
🤍足跡 3.0.1 CSS (1)
Category : ツール
　


[LOG-CSS-DATA]
body.logs {
transition:background-position .5s;
background-position:-30vw top, left top;
}

span {
display:inline-block;
}

#counter {
padding:.25rem .5rem;
color:#fff;
background-color:#00f;
}
#messages caption {
padding:.22rem .5rem;
text-align:left;
}

/* -- 汎用領域と更新領域 -- */
#dtDisp, #sxDisp {
position:fixed;
overflow:auto;
left:21vw;
top:calc(16vh + 1.8rem);
scroll-behavior:smooth;
height:calc(90vh - 5.25rem);
overflow:auto;
width:73vw;
background-color:#fff;
border:1px solid #808080; border-radius:6px;
box-shadow:8px 8px 8px #808080, 8px 0 8px #ccc, 0 -8px 8px #eee, -8px 0 8px #eee;
z-index:20;
transform:scale(1);
transition:all .7s;
}

#dtDisp {
position:relative;
font-size:1rem;
padding-top:.25em;
overflow:hidden;
z-index:30;
transform:scale(1);
}
#dtDisp.z {
z-index:15;
}
#dtHead {
padding:.25em 3em;
background-color:#ffe;
background-image:url("/home/default/files/yosei_2.gif");
background-repeat:no-repeat;
background-position:left 1em top;
background-size:contain;
}

.again #dtDisp {
transform:rotate(360deg);
}

.dt-off #dtDisp {
top:2rem;
left:10vw;
width:0; height:0;
font-size:0;
}

#dtUser {
margin-left:1em;
}

#dtData {
height:calc(100% - 4.5rem);
overflow:auto;
}
#dtData table {
width:100%;
}
#dtData td {
padding-left:.5em;
width:calc(100% / 6);
white-space:nowrap;
overflow:hidden;
background-color:#efe;
}

#dtData .e2 span {
display:inline-block;
cursor:pointer;
}

#dtData .d1 {

}

#dtData .e1 {
text-align:right;
}

#dtData .e1::after {
color:#000;
padding-left:.5em;
content:":";
}

#dtData .e2 {
padding-left:.5em;
}
#dtDisp .e2 span {
padding-right:.5em;
}
#dtDisp .e2 input {
padding-left:3px;
font-size:1em;
line-height:1.2em;
}

#dtData input[type="text"] {
background-color:#ffefff;
}

#dtData .e1.fx { color:#000; }
#dtData .e2.fx { color:brown; }

#dtData .e2:hover {
background-color:#ffc;
}
#dtData .e2 span:hover {
color:magenta;
text-decoration:underline;
}

#dtBon {
line-height:1.5em;
padding:.25em 1em;
background-color:#eef;
}


/* -- 記事のコメント欄 -- */
#messages {
width:100%;
}


/* -- ナビ -- */
#naviDisp {
position:fixed; top:0; left:0;
width:100vw; height:6.3rem;
background:url("/home/default/files/kabe12.gif");
z-index:25;
transition:all .7s;
}
.nDisp-out #naviDisp {
transform:scale(0);
}

#naviDisp div {
position:absolute;
transition:all .5s;
}

/* -- ボタンの番号 -- */
span i {
display:inline-block;
font-size:70%;
vertical-align:top;
margin-left:.3em;
font-style:normal;
}

span.sect i, span.sect-rev i {
display:none;
}

#naviInfo {
background:url("/home/default/files/yosei_2.gif") 1vw 1vh no-repeat;
height:10vh; width:20vw;
border:1px solid #ffefff;
padding:1.5vh 0 0 80px;
font-size:.95rem;
line-height:1.8;
}
#naviInfo a {
color:#000;
}

#nb0Disp {
font-size:.9rem;
top:.4rem;
left:20vw;
width:80vw;
}

#nb1Disp {
font-size:.9rem;
top:2.4rem;
left:20vw;
width:80vw;

}
#nb2Disp {
font-size:.9rem;
left:0;
top:4.2rem;
padding:.5vh .4vw 0 .6vw;
width:100vw;
box-shadow:0 4px 4px #eee;
white-space:nowrap;
overflow:hidden;
z-index:30;
}

#nb2Disp::before {
display:inline-block;
width:3vw;
text-align:center;
margin-right:.3vw;
content:"us";
}

#nb0Disp span, #nb1Disp span {
text-align:center;
border:1px solid #808080;
text-align:center;
width:6vw;
box-shadow:2px 2px 2px #ccc;
border-radius:3px;
cursor:pointer;
margin-right:.1vw;
transition:all .3s;
}

#nb0Disp span {
display:inline-block;
}

#nb1Disp span.ww {
width:5vw;
}



/* -- ボタンのマウスイベント -- */
#nb0Disp span.db {
background-color:#fff;
}
#nb0Disp span.db.ac {
color:#fff;
background-color:#36f;
}

/* -- トグルで別色 -- */
#nb0Disp span#nb00.db { background-color:#3c3; color:#fff; }
#nb0Disp span#nb00.db.ac { background-color:orange; color:#000; }
#nb0Disp span#nb03.db { background-color:#9cf; color:#000; }
#nb0Disp span#nb03.db.ac { background-color:#fc0; color:#000; }

#nb0Disp span.db:hover {
background-color:#ff9;
color:#339;
}
#nb0Disp span.db.ac:hover {
background-color:#9cf;
color:#339;
}

#nb0Disp span.db:active {
box-shadow:2px 2px 2px #ccc inset;
}

/* -- C/D切り替え -- */
body.cd-cg span.db.cp,
body.cd-cg span.db.dp {
color:#fff;
}

body:not(.cd) #nb0Disp span.db.dp,
body.cd #nb0Disp span.db.cp {
display:none;
}

/* -- ボタンの位置調整 空白を空ける -- */
#nb1Disp span#aLine { margin-left:.5vw; }
#nb1Disp span#eLine { margin-right:.5vw; }

/* -- 振り分けA-Eボタンの配色 -- */
#nb1Disp span.cca {
background-color:#cf9;
color:#000;
}

#nb1Disp span.cca.ccb {
background-color:#ffefff;
}

#nb1Disp span.cca:hover {
background-color:#aaf;
}

#nb1Disp span.cca.ccb:hover {
background-color:#ffefff;
color:blue;
}

#nb1Disp span:active, #nb1Disp span:active {
box-shadow:2px 2px 2px #808080 inset;
}

#aRev:hover {
background-color:orange;
color:#fff;
}

/* -- ボタンのトグル -- */


#nb00 {
background-color:lightblue;
color:#300;
}

.loop #nb00 {
background-color:#f00;
color:#0ff;
}

/* -- メニューレコード三段目 -- */
#nb2Disp span {
text-align:center;
font-family:Arial;
line-height:1.65;
margin-right:.2vw;
border-radius:3px;
overflow:hidden;
border:1px solid #808080;
box-shadow:2px 2px 2px #ccc;
cursor:pointer;
transition:all .5s;
}

#nb2Disp span:hover {
background-color:#ffc;
color:#339;
}
#nb2Disp span:active {
box-shadow:2px 2px 2px #ccc inset;
}

/* -- セルの幅 -- */
.nav-vol, .log-vol { width:4vw; }
.nav-vol.w3, .log-vol.w3 { width:3vw; }
.nav-vol.w5, .log-vol.w5 { width:5vw; }
.nav-vol.w6, .log-vol.w6 { width:6vw; }

.nav-uid, .log-uid { width:10vw; }
.nav-uid.fx, .log-uid.fx { width:12vw; }
.nav-uid.mn, .log-uid.mn { width:10vw; }
.nav-dte, .log-dte { width:9vw; }
.nav-dte.ms, .log-dte.ms { width:6vw; }
.nav-sec, .log-sec { width:3vw; }

/* -- メインリスト -- */
#mainDisp {
position:fixed; top:6.4rem; left:0;
scroll-behavior:smooth;
width:100vw; height:calc(100vh - 6.3rem);
overflow:auto;
padding:0 .4vw;
box-shadow:0 4px 4px #eee;
background:url("/home/default/files/kabe12.gif");
z-index:10;
transform:scale(1);
transition:all 1s;
counter-reset:ulCNT;
}

.mDisp-out #mainDisp {
transform:scale(0);
}

#ulDat {
opacity:1;
transition:opacity .3s;
}

#ulDat.hide {
display:none;
}

#mainDisp li {
color:#000;
font-family:Arial;
line-height:1.65;
white-space:nowrap;
border-bottom:1px dotted #600;
padding:1px .2vw;
transition:all .4s;
}

#mainDisp li.del, #mainDisp li.tpE {
background-color:#eee;
}

#mainDisp li.rec-sel {
background-color:#ccf;
}

.non-tpA li.tpA, .non-tpB li.tpB, .non-tpC li.tpC,
.non-tpD li.tpD, .non-tpE li.tpE {
display:none;
}

#mainDisp li:hover {
background-color:#ffc;
border-bottom:1px solid #00f;
}

/* -- リストのセル -- */
#mainDisp li span {
vertical-align:middle;
margin-right:.2vw;
cursor:pointer;
overflow:hidden;
transition:all .4s ;
}

#ulDat li span {
transition:opacity .3s;
}

body.cng #ulDat li span {
opacity:.2;
}

#mainDisp li span:not(:first-child) {
border-right:2px dashed #808080;
}

.df {
display:inline-block;
tranition:all .5s;
}

.non-tl .tl0, .non-tl .tl1, .non-tl .tl2, .non-tl .tl3, .non-tl .tl4,
.non-tl .tl5, .non-tl .tl6, .non-tl .tl7, .non-tl .tl8, .non-tl .tl9 {
opacity:0;
}

/* -- A-Eのボタンで変化 -- */
.cg-tp #mainDisp li span {
opacity:.2;
}

.log-uid.sect-now {
background-color:orange;
}
.log-uid.sect {
color:#fff;
background-color:#36f;
}

.log-uid.sect-bef, .nav-uid.sect-bef {
color:#000;
}

/* -- ------------- */

#messages {
counter-reset:CNT;
}
#messages tr {
counter-increment:CNT;
}

tr.non-tr {
background-color:#f3f3f3;
}
#messages td {
display:inline-block;
line-height:1.65rem;
padding:0 1ex;
}


.log-vol {
text-align:right;
padding-right:.5em;

}

td.num {
display:inline-block;
white-space:nowrap;
width:6ex;
text-align:right;
}

td.num::before {
line-height:1.65rem;
content:counter(CNT);
}

td.user_id {
display:inline-block;
width:16ex;
line-height:1.65rem;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
cursor:pointer;
}

td.user_id:hover {
color:#fff;
background-color:#00f;
}

/* -- 足跡取得の見出しナンバー -- */
#ulDat li::before {
counter-increment:ulCNT;
display:inline-block;
width:3vw;
margin-right:.3vw;
text-align:center;
content:counter(ulCNT);
transition:all .5s;
}

#ulDat li.mk::before {
background-color:#cfc;
}
#ulDat li.ws-on::before {
background-color:pink;
}

#ulDat li.up::before {
color:#f00;
text-decoration:underline;
}

.log-uid {
font-size:1.1em;
padding-left:.5em;
padding-right:.5em;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

.log-dte {
text-align:center;
overflow:hidden;
white-space:nowrap;
}
.log-dte.ls {
text-align:left;
padding-left:.4vw;
}
.log-dte.old {
background-color:#ff9;
color:red;
}

.log-sec {
line-height:1.65rem;
text-align:center;
font-family:Arial;
}

li:not(.tpE) .log-uid:hover {
color:magenta;
background-color:#fff;
}

td.message {
font-size:.95em;
width:calc(100% - 50ex);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.dt {
transition:all 1s;
}
/* -- 領域拡大 -- cp-on */
.cp-on #main { margin-right:1rem; }
.co-on #menu, .cp-on #header { left:-20vw; }
.cp-on #back_link a:not([target]) {
transform:scale(.3) rotate(720deg);
top:-10rem;
}
.cp-on #back_link a[target] {
top:-5rem; right:-5rem; width:5rem; height:5rem;
}
.cp-on .comment_title { right:-20vw; }
.cp-on .dt {
font-size:0px;
}

.entry_body {

transition:font-size .7s;
}

/* -- 固定セル 0,1の色 -- */
.bg1 {
background-color:#93c;
color:#fff;
}

li:not(.tpE) .df.b1 {
background-color:#ffefff;
border:1px solid #ccc;
border-radius:4px;
box-shadow:2px 2px 2px 2px #ccc;
}

li.tpE .df.b1 {
background-color:#eee;
border:1px solid #ccc;
}

li:not(.tpE) .df.b1:active {
box-shadow:2px 2px 2px #ccc inset;
}
.
.done.log-vol.df1 {
color:#fff;
background-color:#00f;
}

#mainDisp li.ws {
background-color:#cfc;
}

#mainDisp li.ws .df.b1 {
background-color:orange;
color:#fff;
border:1px solid #808080;
}


#actInfo {
display:none;
}


/* セル選択ボタングループ -- */
.tc-g.eec {
background-color:#00f;
color:#fff;
}

.tc-g:hover {
color:#000;
background-color:#ccf;
}
.tc-g.eec:hover {
background-color:#88f;
}
.tc-g::before {
content:"■";
display:inline-block;
text-shadow:0 0 2px #000;
margin-right:.3em;
transition:all .8s;
}

.tc-g.tc0::before { color:#fcc; }
.tc-g.tc1::before { color:#efe; }
.tc-g.tc2::before { color:#ffefff; }
.tc-g.tc3::before { color:#ffc; }
.tc-g.tc4::before { color:#fff; }
.tc-g.tc5::before { color:#fff; }
.tc-g:hover::before {
transform:rotate(720deg);
}

/* -- タイプ別表示 -- */
.tp0 {
background-color:#fee;
color:#033;
}
.tp1 {
background-color:#efe;
color:#303;
}
.tp2 {
background-color:#ffefff;
color:#000;
}
.tp3 {
background-color:#ffe;
color:#003;
}
.tp4 {
background-color:#fff;
color:#000;
}
.tp5 {
background-color:#fff;
color:#000;
}

/* -- リストの並び替えのマーク -- */
#nb2Disp span::after {
display:inline-block;
font-size:70%;
color:#ff9;
vertical-align:top;
margin-left:.3em;
}

#nb2Disp span.sect, #nb2Disp span.sect-rev {
background-color:#00f;
color:#fff;
}

#nb2Disp span.sect-rev::after,
#nb2Disp span.sect.uid::after,
#nb2Disp span.sect.df::after,
#nb2Disp span.sect.nav-sec::after { content:"▼"; }
#nb2Disp span.sect::after,
#nb2Disp span.sect-rev.uid::after,
#nb2Disp span.sect-rev.df::after,
#nb2Disp span.sect-rev.nav-sec::after { content:"▲"; }

/* -- 並び替えのセル列 -- */
#ulDat li:not(.tpE) span.sect {
background-color:#eff;
color:#000;
}


/* セル選択ボタングループ -- */
.tc, .tb {
transition:all .5s;
background-color:#ffc;
display:none;
}

/* -- セルとラベルのマスク -- */
.tp0, .tp1, .tp2, .tp3, .tp4, .tp5, .tp6, .tp7, .tp8, .tp9,
.tl0, .tl1, .tl2, .tl3, .tl4, .tl5, .tl6, .tl7, .tl8, .tl9,
.log-sec, .nav-sec {
opacity:1;
transition:opacity .4s;
display:none;
}

.tw0 .tp0, .tw1 .tp1, .tw2 .tp2, .tw3 .tp3, .tw4 .tp4,
.tw5 .tp5, .tw6 .tp6, .tw7 .tp7, .tw8 .tp8, .tw9 .tp9,
.tw0 .tl0, .tw1 .tl1, .tw2 .tl2, .tw3 .tl3, .tw4 .tl4,
.tw5 .tl5, .tw6 .tl6, .tw7 .tl7, .tw8 .tl8, .tw9 .tl9 {
display:inline-block;
}

/* -- ボタングループAB切替 -- */
body.bc .tb, body:not(.bc) .tc {
display:inline-block;
}

/* -- データ抽出のエリア -- */

/* -- 更新エリア -- */
#sxDisp {

}

#sxTop {
position:absolute; top:0; left:0;
width:100%;
padding:0 1em;
line-height:2.6em;
}

#sxTopCmd {
float:right;
}

#sxClose {
display:inline-block;
text-align:center;
font-weight:bold;
border-radius:4px;
width:1.8em;
line-height:1.8em;
margin-left:.5em;
margin-top:.4em;
border:1px solid #808080;
box-shadow:3px 3px 3px #ccc;
transition:all .5s;
}

#sxClose:hover {
background-color:#36f;
color:#fff;
}

#sxDoc {
position:absolute; top:2.6em; left:0;
width:100%;
/* background-color:#efe;*/
height:calc(100% - 2.6em);
overflow:auto;
}

.sx-off #sxDisp {
transform:scale(0) rotate(360deg);
}

#sxPar0 {
width:70%;
float:left;
}

#sxPar1 {
margin-left:70%;
}

#sxDisp textarea {
display:block;
width:98%;
height:11em;
margin-left:1%;
}

#sxText {

}

#upText {
margin-bottom:.5em;
}

#upCmdDisp {
margin:.5em 0;
}

.sx {
display:inline-block;
border:1px solid #808080; border-radius:4px;
box-shadow:3px 3px 3px #ccc;
padding:.5em 1em; margin-right:.5em;
text-align:center;
background-color:#ffc;
transition:all .5s;
cursor:pointer;
}

body.sx1-off .sx.sx1, body.sx2-off .sx.sx2 {
display:none;
}

#sxCDisp {
/* background-color:#fee;*/
}
#sxCDisp span {
display:inline-block;
text-align:right;
}
.sx-s1 { width:10%; }
.sx-s2 { width:10%; }
.sx-s3 { width:30%; }

#sxDisp table {
/* display:block;*/
width:95%;
border:1px solid #808080;
border-radius:4px;
margin:1em 0;
}
#sxDisp td, #sxDisp th {
line-height:1.5em;
border-bottom:1px dashed #808080;
}
#sxDisp td {
padding-right:.5em;
text-align:right;
}

#sxDisp th {
color:darkgreen;
padding:0 .25em;
background-color:#ffc;
}
#sxDisp th.ch {
background-color:#080;
color:#fff;
}

.sx.sx-at {
background-color:orange;
color:#fff;
}
#upCmdDisp span.cg {
background-color:#080;
color:#fff;
}
#upCmdDisp span.cg:hover {
background-color:#0f0;
color:#f0f;
}

#upCmdDisp span.ex-up {
background-color:#33f;
color:#fff;
}

#upCmdDisp span.up {
background-color:#fcf; color:#000;
}

/* -- sdiBtn リスト反映ボタン-- */
#sdiBtn { background-color:#cfc; }
#sdiBtn.up { background-color:#f0f; color:#fff; }
#sdiBtn:hover { background-color:#efe; }
#sdiBtn.up:hover { background-color:#fcf; color:#000; }

.sx:hover, #upBtn:hover {
background-color:#ccf;
}

.sx.ex-up:hover {
color:tomato;
}

.sx:active, #upBtn:active {
box-shadow:3px 3px 3px #eee inset;
}

#upRes {
display:inline-block;
color:brown;
margin-left:.5em;
}

#sxPar1 div {
margin-left:1em;
}

#sxMsgDisp {
margin:2em;
}
#upFileDisp {
padding-bottom:6em;
}

#upFileDisp a {
text-decoration:underline;
}
#upFileDisp a:hover {
color:magenta;
}

/* -- 汎用 -- */




[/LOG-CSS-DATA]


編集
コメント (0)