ふたりの日記帳

[CSS-A-DATA]

/* -------- 起動アイコン -------- */
#mas {
position:fixed;
top:calc(100vh - 100px);
left:calc(100vw - 100px);
width:60px;
height:60px;
border-radius:50%;
border:2px solid #ccc;
bg-c:#ffefff;
text-align:center;
text-decoration:none;
display:inline-block;
line-height:60px;
z-index:200;
}

#mas.at {
bg-c:#ff9;
}

/* ----------- 基礎 ------------ */
.disp-par {
position:absolute;
z-index:100;
top:var(--tab-margin);
width:var(--disp-width);
height:var(--disp-height);
bg-c:#fff;
overflow:hidden;
transition:transform 1s, top .5s, right .5s, width .5s, height .5s, left .5s;
}

.cen-harf .disp-par {
width:var(--harf-disp-width);
}

#mainDisp {
right:var(--tab-spc);
}

#mainDisp.min {
transform:rotate(720deg);
}

/*
#main > div {
display:flex;
flex-direction:column-reverse;
}
*/

#main {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.all_disp {
/*
display:flex;
flex-direction:column-reverse;
*/
}

#menuDisp {
left:var(--tab-spc);
}

/* -- 汎用領域 ABCD -- */
.open-disp {
transition:transform 1s;
}

.open-disp:empty::before {
display:block;
margin:3rem 1rem;
text-align:center;
white-space:pre-wrap;
content:url("/home/default/files/yukikko2b.gif") "\a\a" attr(id) "の領域は白紙です";
}
.open-disp.cls {
transform:scale(0);
}

/* -------- バインダーシステム -------- */
#cenDisp {
position:absolute;
left:calc(50vw - var(--cen-harf-width));
top:var(--tab-margin);
width:var(--cen-width);
height:var(--disp-height);
overflow:hidden;
transition:left .5s, top .5s, height .5s, transform 1.5s;
}

.cen-harf #cenDisp {
left:calc(50vw - var(--cen-harf-harf));
width:var(--cen-harf-width);
}

#cenDisp div {
position:absolute;
z-index:-1;
height:100%;
width:50%;
top:0;
background-image:url("/home/new-diary/files/ring_n0.gif");
background-repeat:repeat-y;
background-size:var(--cen-size);
transition:background-position .5s, transform .5s;
}

.cen-harf #cenDisp div {
background-size:var(--cen-harf-size);
}

#cen0 { left:0; }
#cen1 { right:0; }

.cen-bg0 #cen0, .cen-bg2 #cen0, .cen-bg2 #cen1, .cen-bg3 #cen1 {
background-position:left top;
}

.cen-bg0 #cen1, .cen-bg1 #cen0, .cen-bg1 #cen1, .cen-bg3 #cen0 {
background-position:right top;
}

.cen-bg1 #cen0, .cen-bg2 #cen1, .cen-bg3 #cen0, .cen-bg3 #cen1 {
transform:scale(-1, 1);
}

#cenDisp a {
z-index:10;
display:block;
width:100%;
height:calc(100% / 3);
bg-c:transparent;
text-decoration:none;
transition:background-color 2s;
}

#cenDisp.bg com0 { background-color:orange; }
#cenDisp.bg com1 { background-color:#00f; }
#cenDisp.bg com2 { background-color:#0f0; }
#com0{ cursor:col-resize; }
#com1 { cursor:ew-resize; }
#com2 { cursor:zoom-in; }
.no-tab #com2 { cursor:zoom-out; }

/* ------ no-tab タブ非表示 ------ */
.no-tab #headerDisp {
left:0;
height:100vh;
width:calc(50vw - var(--cen-harf-width));
}

.no-tab .disp-par {
top:0;
height:100vh;
width:calc(50vw - var(--cen-harf-width));
}

.no-tab.cen-harf .disp-par {
width:calc(50vw - var(--cen-harf-harf));
}

.no-tab #menuDisp {
left:0;
}

.no-tab #mainDisp {
right:0;
}

.no-tab #cenDisp {
top:0;
height:100vh;
}


/* -------- TABシステム -------- */
/* -- TAB共通 -- */
.tab {
position:absolute;
top:3px;
width:2.5rem;
height:calc(100vh - 6px);
overflow:hidden;
z-index:50;
transition:left .5s, right .5s, top .5s, height .5s, transform 1s, background-image 1s;
}

.tab a {
text-decoration:none;
}

/* -- 左右の位置指定 -- */
#tab0 {
left:3px;
bg-c:#fff;
border-radius:16px 0 0 16px;
}

#tab1 {
right:3px;
bg-c:#fff;
border-radius:0 16px 16px 0;
}

/* -- TABの退避アクション -- */
#tab1.min {
right:-4rem;
}

body.zn #tab0 {

}

/* -- TAB背景 -- */

#tab0.bg0, .t0 { (lg-90deg, var(--cf0a) 0, var(--cf0b) 100%); }
#tab0.bg1, .t1 { (lg-90deg, var(--cf1a) 0, var(--cf1b) 100%); }
#tab0.bg2, .t2 { (lg-90deg, var(--cf2a) 0, var(--cf2b) 100%); }
#tab0.bg3, .t3 { (lg-90deg, var(--cf3a) 0, var(--cf3b) 100%); }
#tab0.bg4, .t4 { (lg-90deg, var(--cf4a) 0, var(--cf4b) 100%); }

#tab1.bg0, .u0 { (lg-270deg, var(--cm0a) 0, var(--cm0b) 100%); }
#tab1.bg1, .u1 { (lg-270deg, var(--cm1a) 0, var(--cm1b) 100%); }
#tab1.bg2, .u2 { (lg-270deg, var(--cm2a) 0, var(--cm2b) 100%); }
#tab1.bg3, .u3 { (lg-270deg, var(--cm3a) 0, var(--cm3b) 100%); }
#tab1.bg4, .u4 { (lg-270deg, var(--cm4a) 0, var(--cm4b) 100%); }

/* -- 個別のタブ -- */
.tb {
width:2.25rem;
position:absolute;
height:36%;
padding-left:.125rem;
padding-right:.125rem;
border-radius:16px 0 0 16px;
bg-c:#fff;
z-index:50；
transition:top .5s, height 1s, padding-top .5s;
}

#tab1 .tb {

}

/* -- 左右の位置調整 -- */
#tab0 .tb {
left:0;
}

#tab1 .tb {
right:0;
border-radius:0 16px 16px 0;
}

/* -- 選択タブ -- */
.tab .tb.sel {
width:2.5rem;
z-index:100;
}

/* -- タブの重なり -- */
.tab .sel + div { z-index:90; }
.tab .sel + div + div { z-index:80; }
.tab .sel + div + div + div { z-index:70; }
.tab .sel + div + div + div + div { z-index:60; }

/* -- タブの位置 -- */
.t0, .u0 { top:0; }
.t1, .u1 { top:16%; }
.t2, .u2 { top:32%; }
.t3, .u3 { top:48%; }
.t4, .u4 { top:64%; }

/* -- タブ選択ボタン -- */
.tabs-hd {
display:block;
line-height:2rem;
width:2rem;
font-size:1rem;
text-align:center;
color:#000;
bg-c:#fff;
border:1px solid #000;
border-radius:50%;
margin-top:2vh;
margin-left:auto;
margin-right:auto;
transition:width .5s, hright .5s, left .5s, line-height .5s, box-shadow .5s;
}

#tab1 .tb.sel .tabs-hd {

}

/* -- 選択されたタブのボタン -- */
.tb.sel .tabs-hd {
height:2.25rem;
width:2.25rem;
line-height:2.25rem;
box-shadow:2px 2px 2px #808080;
}

/* -- 選択タブより下のタブ -- */
.sel ~ .tb .tabs-hd {
margin-top:22vh;
}

/* -- 合計ボタン -- */
.tabs-sum {
display:block;
font-size:1rem;
line-height:1.4rem;
text-align:center;
color:#000;
border:1px solid #808080;
padding:.2rem 0;
margin-top:.5rem;
border-radius:6px;
bg-c:#ffefff;
cursor:pointer;
}

/* -- 100以上の場合 -- */
.tabs-sum.w2 {
line-height:1.1rem;
}

/* -- 追加・上書きの区別 -- */
.tabs-sum.ape {
bg-c:#afa;
}

/* --------- TABのコントロール領域 ----------- */
/* -- TABS共通 -- */
.tabs {
bg-c:transparent;
color:#fff;
display:block;
text-align:center;
margin:.5rem 0;
height:140px;
font-size:.1rem;
transform:scale(1);
transition:transform .5s, height .5s;
}

/* -- 切り替えの効果 -- */
.tabs.sm { transform:scale(0); }

/* -- TABSコマンド -- */
.tabs a {
display:block;
height:2rem;
width:100%;
margin:4px auto;
text-decoration:none;
font-size:1rem;
bg-c:rgba(255, 255, 255, .5);
color:#000;
border:1px solid #000;
border-radius:6px;
}

/* -- コマンド選択テーブル -- */
.tabs a.only { display:none; }
.u0 .uu0.only, .u1 .uu1.only, .u2 .uu2.only, .u3 .uu3.only, .u4 .uu4.only { display:block; }
.t0 .tt0.only, .t1 .tt1.only, .t2 .tt2.only, .t3 .tt3.only, .t4 .tt4.only { display:block; }

/* -- F2選択フラグ -- */
.isf2 .t2 .tabs-hd {
bg-c:#cfc;
}

.isf2 .tabs a.f2-sw {
bg-c:#cfc;
box-shadow:3px 3px 3px #ccc inset;
}

.tabs a.sr {
bg-c:#fff;
color:#f00;
font-weight:bold;
}

.tabs a.sr-err {
color:brown;
}

.tabs a.cc {
/* transform:scale(.6);*/
}

/* -- コマンド 内容のクリア -- */
#tabs0x, #tabs1x {
bg-c:#f99;
color:#000;
}

#tabs0x:hover, #tabs1x:hover {
bg-c:#f00;
color:#fff;
}

/* ------- TABの最大 -------- */
.tabs .fc {
margin-top:.5rem;
transform:scale(0);
transition:transform .5s;
}

.tabs .fc.fc1 { margin-top:2rem; }
.tab.full > div.sel {
top:0;
height:100%;
transition:height .5s;
}

.full .tabs {
height:calc(100% - 100px);
}

.full .tabs .fc {
transform:scale(1);
}

/* -------- TAB マウスアクション -------- */
.tabs-sum:hover {
bg-c:#ff9;
}

.tabs-sum.ape:hover {
bg-c:#6f6;
}

.tabs-hd:hover {
bg-c:#ff9;
box-shadow:3px 3px 3px #808080;
font-weight:bold;
}

.tabs-hd:active {
bg-c:#ff9;
box-shadow:3px 3px 3px #808080 inset;
font-weight:bold;
}

.tabs a:hover {
bg-c:#ff9;
font-weight:bold;
}

.tb.sel .tb-a:hover .tabs-hd {
bg-c:#ffefff;
}

.tab a:active {

}


/* ----------- znシステム ----------- */
/*
TABを使わない場合は 20% 80%（バインダーを含む）
狭い領域 + TAB = 30%
広い領域 + CEN + TAB = 70%（バインダーを含む）
*/

.zn #menuDisp {
width:calc(30% - var(--tab-spc));
}

.zn #cenDisp {
left:30%;
}

.zn #mainDisp {
width:calc(70% - var(--cen-width) - var(--tab-spc));
}

.zn.cen-harf #mainDisp {
width:calc(70% - var(--cen-harf-width) - var(--tab-spc));
}

/* -------- 右側への移動 ---------- */
.toright.zn #menuDisp {
width:calc(70% - var(--cen-width) - var(--tab-spc));
}

.toright.zn #cenDisp {
left:calc(70% - var(--cen-width));
}

.toright.zn #mainDisp {
width:calc(30% - var(--tab-spc));
}

.toright.zn.cen-harf #cenDisp {
left:calc(70% - var(--cen-harf-width));
}

.toright.zn.cen-harf #menuDisp {
width:calc(70% - var(--cen-harf-width) - var(--tab-spc));
}

/* ------ zn no-tab 複合 ------ */
.no-tab.zn #headerDisp {
left:0;
height:100vh;
width:20%;
}

.no-tab.zn #menuDisp {
left:0;
top:0;
height:100vh;
width:20%;
}

.no-tab.zn #mainDisp {
right:0;
top:0;
height:100vh;
width:calc(80% - var(--cen-width));
}

.no-tab.cen-harf.zn #mainDisp {
width:calc(80% - var(--cen-harf-width));
}

.no-tab.zn #cenDisp {
top:0;
left:20%;
height:100vh;
}

/* -------- 右側への移動 ---------- */
.no-tab.zn #headerDisp {
left:0;
height:100vh;
width:20%;
}

.toright.no-tab.zn #menuDisp {
left:0;
top:0;
height:100vh;
width:calc(80% - var(--cen-width));
}

.toright.no-tab.cen-harf.zn #menuDisp {
width:calc(80% - var(--cen-harf-width));
}

.toright.no-tab.zn #mainDisp {
right:0;
top:0;
height:100vh;
width:20%;
}

.toright.no-tab.zn #cenDisp {
top:0;
left:calc(80% - var(--cen-width));
height:100vh;
}

.toright.no-tab.cen-harf.zn #cenDisp {
left:calc(80% - var(--cen-harf-width));
}

/* ----------- zsシステム 最大表示 ----------- */
.zs #menuDisp, .zs #tab0 { left:-50vw; }
.zs #cenDisp { left:0; }
.zs #mainDisp { width:calc(100vw - var(--cen-width) - var(--tab-spc)); }
.zs.cen-harf #mainDisp { width:calc(100vw - var(--cen-harf-width) - var(--tab-spc)); }

/* -------- 右側への移動 ---------- */
.toright.zs #mainDisp, .toright.zs #tab1 { right:-100vw; }
.toright.zs #cenDisp { left:calc(100vw - var(--cen-width)); }
.toright.zs.cen-harf #cenDisp { left:calc(100vw - var(--cen-harf-width)); }
.toright.zs #menuDisp { left:var(--tab-spc); width:calc(100vw - var(--cen-width) - var(--tab-spc)); }
.toright.zs.cen-harf #menuDisp { width:calc(100vw - var(--cen-harf-width) - var(--tab-spc)); }
.toright.zs #tab0 { left:var(--tab-margin); }

/* ------ zs no-tab 複合 ------ */
.no-tab.zs #headerDisp {
left:0;
height:100vh;
width:20%;
}

.no-tab.zs #menuDisp, .no-tab.zs #tab0 {
left:-50vw;
}

.no-tab.zs #mainDisp {
right:0;
top:0;
height:100vh;
width:calc(100vw - var(--cen-width));
}

.no-tab.cen-harf.zs #mainDisp {
width:calc(100vw - var(--cen-harf-width));
}

.no-tab.zs #cenDisp {
top:0;
left:0;
height:100vh;
}


/* -------- 右側への移動 ---------- */
.no-tab.zs #headerDisp {
left:0;
height:100vh;
width:20%;
}

.toright.no-tab.zs #mainDisp, .toright.no-tab.zs #tab1 {
right:-100vw;
}

.toright.no-tab.zs #menuDisp {
left:0;
top:0;
height:100vh;
width:calc(100vw - var(--cen-width));
}

.toright.no-tab.cen-harf.zs #menuDisp {
width:calc(100vw - var(--cen-harf-width));
}

.toright.no-tab.zs #cenDisp {
top:0;
left:calc(100vw - var(--cen-width));
height:100vh;
}

.toright.no-tab.cen-harf.zs #cenDisp {
left:calc(100vw - var(--cen-harf-width));
}


/* -------- オープニング エンディング -------- */
.za #mainDisp, .za #menuDisp {
top:100vh;
transform:scale(0);
}

.za #menuDisp {
left:-100vw;
}

.za #mainDisp {
right:-100vw;
}

.za #tab0 { left:-3rem; }
.za #tab1 { right:-3rem; }

.za #cenDisp {
left:0;
top:0;
height:100vh;
}

.za.toright #cenDisp {
left:calc(100vw - var(--cen-width));
}

.za.cen-harf.toright #cenDisp {
left:calc(100vw - var(--cen-harf-width));
}

/* ------- zf システム 最少化 ------- */
body.zf {
background-image:url("/home/js/files/moon.gif");
background-repeat:no-repeat;
background-position:right top;
/* background-size:auto 30%; */
transition:background-size 2s;
}

body.zf.zoom {
background-size:auto 40%;
}

.zf #mainDisp, .zf #menuDisp {
top:100vh;
transform:scale(0);
}

.zf #menuDisp {
left:-100vw;
}

.zf #mainDisp {
right:-100vw;
}

.zf #tab0 { left:-3rem; }
.zf #tab1 { right:-3rem; }

.zf #cenDisp {
left:1rem;
top:calc(100vh - 100px);
height:var(--cen-width);
border-radius:50%;
}

.zf.toright #cenDisp {
left:calc(100vw - var(--cen-width));
}

.zf.cen-harf #cenDisp {
height:var(--cen-harf-width);
top:calc(100vh - 70px);
}

.zf.cen-harf.toright #cenDisp {
left:calc(100vw - var(--cen-harf-width));
}


/* ---------- 小窓 timeInfo --------- */
#timeInfo {
position:absolute;
z-index:140;
height:1.4rem;
font-size:1rem;
line-height:1.4rem;
bg-c:#fff;
width:100%;
left:0;
bottom:-3rem;
padding:0 .5rem;
overflow:hidden;
white-space:pre;
transition:bottom .5s;
}

#timeInfo.act {
bottom:0;
}


/* --------- 汎用領域 ---------- */
.disp {
z-index:50;
position:absolute;
padding-top:1rem;
padding-right:1rem;
padding-bottom:6rem;
padding-left:1rem;
top:0;
left:0;
transition:height .5s, opacity 1s;
opacity:0;
width:100%;
height:100%;
scroll-behavior:smooth;
bg-c:#fff;
overflow-y:auto;
}

.disp.frame {
padding:0;
}

.disp.frame .disp-ft {
display:none;
}

.disp.frame.trim {
opacity:0;
}

/* -- スクロールバーの表示 -- */
.notbar .disp {
-ms-overflow-style:none; /* IE, Edge 対応 */
scrollbar-width:none; /* Firefox 対応 */
}

.notbar .disp::-webkit-scrollbar {
display:none; /* Chrome, Safari 対応 */
}

#mainDisp.revbar .disp, #mainDisp.revbar .disp .sec {
transform:scale(-1, 1);
}

.disp:empty::before {
content:"要素は空です";
}

.disp-end {
margin-bottom:8rem;
}


/* -- 表示領域の切り替え -- */
.disp.sel {
z-index:90;
opacity:1;
}

.disp.sel + div { z-index:80; }
.disp.sel + div + div { z-index:70; }
.disp.sel + div + div + div { z-index:60; }
.disp.sel + div + div + div + div { z-index:50; }

#main > div {
transition:opacity 1s, tstransform 1s;
}

#main > div.opa {

}

#mainDisp .sec {

}

/* ------ disp prefix ------ */
#mainDisp.pre .disp {
position:relative;
opacity:1;
height:50%;
width:50%;
display:inline-block;
margin:0rem;
/* transform:scale(.5);*/
border:1px solid #808080;
}

#menuDisp.pre {
/* left:-50vw;*/
}

#mainDisp.pre #M1.disp {
/* translate(-120px, -20px);*/
}

#archives, #index, #F3 .disp-hd, #F4 .link_title {
margin-top:1rem;
}

[/CSS-A-DATA]