💛 メモ帳

/* -- 移動ボタン -- */
.bsc {
position:fixed;
right:1.7em; top:calc(50vh - 1.3em);
display:inline-block;
text-align:center;
width:2.5em;
line-height:2.5em;
cursor:pointer;
border:1px solid #808080;
border-radius:50%;
box-shadow:2px 2px 2px #ccc;
color:#00f;
font-weight:bold;
background-color:#fff;
transition:all .5s;
}
.bsc-out .bsc { right:-5em }
#bsc0 { top:calc(50vh - 4.4em); }
#bsc2 { top:calc(50vh + 1.7em); }
.bsc:hover {
background-color:#ffc;
}
.bsc:active {
box-shadow:2px 2px 2px #ccc inset;
}

/* -- 汎用 -- */
.box {
border:1px solid #808080;
border-radius:4px;
box-shadow:3px 3px 3px #ccc;
}

a {
text-decoration:underline;
}

#upsLogo a:hover, #upsDisp a:hover {
color:magenta;
bg-c:#ffc;
}

/* -- 左側の領域 -- */
/* -- ロゴ -- */
#upsLogo {
position:absolute; top:0; left:0;
padding-top:.2rem;
padding-bottom:.2rem;
width:20vw; height:4rem;
background-image:linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .9) 100%);
border-bottom:1px solid transparent;
box-shadow:0 3px 3px #ccc;
transition:all .6s;
}

/* -- ロゴの中のマスコット -- */
#upsMas {
position:absolute; top:.5rem; left:.5rem;
display:inline-block;
width:3rem; height:3rem;
border-radius:50%;
background-image:url(”/home/default/files/yosei_2.gif”);
background-repeat:no-repeat;
background-color:#ffc;
background-size:contain;
cursor:pointer;
transition:all .6s;
}

#upsMas:hover {
bg-c:#ffc;
transform:rotate(360deg);
}

/* -- ロゴの中の領域上下 -- */
#upsLogo div {
margin-left:4rem;
padding:0 .5rem;
line-height:1/8rem;
}
#upsLogo div a {

}

/* -- ログイン状態 -- */
#visInfo {
margin-right:1em;
background-color:#ffc;
}

#visInfo:not(.login)::before {
content:"ログアウトです";
}

#visInfo.login {
background-color:#ffefff;
}

/* -- 起動前のロゴ -- */
.ups-out #upsLogo {
transform:scale(0);
}

/* -- 左側のボタン類の親 -- */
#upsBox {
position:absolute; top:4rem; left:0;
width:20vw; height:calc(100vh - 4rem);
overflow:auto;
scrollbar-color:orange transparent;
scroll-behavior:smooth;
background-image:linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .75) 100%);
transition:all .6s;
}

/* -- 起動前の状態 -- */
.ups-out #upsBox {
transform:scale(0);
}

#upsSpBox {
transition:all .6s;
}

.box-opa #upsSpBox {
opacity:0;
}
/* -- 汎用class -- */
.box1 {
position:relative;
color:#000;
margin:.125em .5rem;
padding:0 .75em 0 3.25em;
line-height:2.5em;
background-color:#ffefff;
border:1px solid #808080;
border-radius:4px;
box-shadow:3px 3px 3px #ccc;
cursor:pointer;
transition:all .5s;
}
/* -- upsSpBoxの第一の子供 -- */
.exec {

}
.exec:hover {
background-color:#6a6;
}
/* -- 更新ファイルグループの親 -- */
.sp-par {
position:relative;
transition:all .6s;
}
.sp-par.go {

}

/* -- spの上のコマンド -- */
.exec {
background-color:darkgreen;
color:#fff;
}

.go .box1 {
background-color:#eee;
}

.box1::before {
display:inline-block;
position:absolute; left:.5em; top:.25em;
width:2em; height:2em;
background-repeat:no-repeat;
background-size:70%;
background-position:center center;
content:"";
transition:all .5s;
border:1px solid #808080;
border-radius:50%;
}
.sp-top::before {
background-image:url("/home/log2/files/folder_o.gif");
background-color:#ffefff;
}
.exec:before {
background-color:#ffefff;
background-image:url("/home/log2/files/property.gif");
transition:all .5s;
}
.exec:hover::before {
transform:rotate(360deg);
}

.go-2 .sp-top::before {
background-image:url("/home/log2/files/folder_c.gif");
background-color:#ffefff;
}

.box1 span {
float:right;
color:#666;
}
.exec span { color:#ccc; }
.box1 b {
font-weight:normal;
color:#339;
margin-right:3px;
}

.box1 i {
font-style:normal;
color:#000;
margin-left:3px;
}
.exec b {
color:#fff;
}
.exec i {
color:#ffefff;
}

.exec i.ze {
color:#ff0;
}

.go-2 .sp-top i {
color:#600;
}
.sp-top i.ze {
color:#00f;
}
.go-2 .sp-top i.ze {
color:#f00;
text-decoration:underline;
}

.sp-top:hover {
background-color:#ffdfff;
}
.go-2 .sp-top:hover {
background-color:#ccf;
}

.sp-top:hover::before {
background-color:#ff9;
}
.go-2 .sp-top:hover::before {
background-color:#fff;
}
.box1:active {
box-shadow:3px 3px 3px #ccc inset;
}

/* -- 左側のボタン -- */
.sp {
position:relative;
color:#000;
margin:0 .25em 0 .25em;
padding:0 0 0 2em;
transition:opacity .6s, font-size .3s, color .5s, backgrouund-color .5s, transform .6s;
border-bottom:1px solid #ccc;
}
.sp:not(.loaded)::before {
position:absolute;
display:inline-block;
top:.8em; left:1em;
content:"";
width:.0;
height:.0;
border-width:.25em;
border-style:solid;
border-color:#f00 #f00 transparent transparent;
transition:all .5s;
transform:rotate(45deg);
}
.sp.sp-arc:not(.loaded) .exe::before {
content:"A";
color:#00f;
margin-right:.25em;
}
.sp.sp-css.loaded .exe::before {
content:"📋";
margin-right:.25em;
}

.sp.opa {
opacity:0;
}

/* -- ロード済み -- */
.sp.loaded {
color:brown;
padding:0 0 0 .75em;
}

.sp:hover {
background-color:#ffefff;
}

.sp.loaded:hover {
color:#900;
border-bottom:1px solid #666;

}
.sp:not(.loaded):hover {
color:#00f;
border-bottom:1px solid #666;

}
.sp:not(.loaded):hover::before {
border-color:#00f #00f transparent transparent;
}
.sp:not(.loaded):hover:before {
transform:rotate(1125deg);
}

/* -- 選択中 -- */
.sp.loaded.vis {
color:#00f;
}
.sp.loaded:hover {
color:magenta;
}
.sp:active {

}

.sp .exe {
display:inline-block;
vertical-align:middle;
}
.sp .exe {
width:calc(100% - 1.75em);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
cursor:pointer;
transition:all .4s;
}

.sp .del {
padding-left:.25em;
padding-right:.25em;
margin-left:.5em;
border:1px solid #ccc;
border-radius:50%;
cursor:pointer;
background-color:#eef;
transition:all .4s;
}

.sp:not(.loaded) .del {
display:none;
}
.sp .del:hover {
background-color:orange;
color:#fff;
border:1px solid tomato;
box-shadow:2px 2px 2px #ccc;
}
.sp .del:active {
background-color:#f00;
box-shadow:none;
}

/* -- メニュー折りたたみ -- */
.go-1 .sp {
transform:scale(0);
}
.go-2 .sp {
font-size:0;
padding:0;
margin:0;
border:none;
}

.me.act {
background-color:#ffefff;
}

/* -- spの表示選択 -- */
.full-1 .sp-top, .full-1 .sp:not(.loaded) {
transform:scale(0);
}
.full-2 .exec::before {
transform:scale(-1, 1);
}

.full-2 .sp-top, .full-2 .sp:not(.loaded) {
font-size:0;
border:none;
padding:0;
margin:0;
}


#upsDoc {
padding-bottom:20em;

}

#upsAfter {
margin:2em 0 4em 0;
padding-bottom:5em;
}

#upsAfter iframe {
display:none;
}

/* -- 右側の領域の親元-- */
#upsDisp {
position:fixed; right:0; top:0;
padding:1rem 0;
width:calc(80vw - 2rem);
height:100vh;
scrollbar-color:orange transparent;
background-image:linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .75) 100%);
overflow:auto;
scroll-behavior:smooth;
transition:all .6s;
}

/* -- 起動前 -- */
.ups-out #upsDisp {
transform:scale(0);
}
/* -- 領域の一番目のエリア -- */
#up1st {
transition:opacity 1s, transform .6s;
margin:0 4rem 4rem 1.5rem;
background-color:#fff;
padding:1em;
height:100vh;
overflow:auto;
}

/* -- 親の直属子分 A(0-)のidが入る -- */
.area {
transition:opacity 1s, transform .6s;
margin:0 4rem 4rem 1.5rem;
}
/* -- cssの直属子分 id = file + user -- */
.css, .image {
transition:opacity 1s, transform .6s;
margin:0 4rem 4rem 1rem;
}

/* --　追加 -- */
.area.ne, .css.ne, .image.ne {
opacity:0;
}

/* -- タイトルなどの一段目の領域 -- */
.navi {
color:blueviolet;
}
/* -- 一番左の番号 -- */
.eno {
display:inline-block;

padding:.25em 1em;
bg-c:#cfc;
}

/* -- inputの親 -- */
.inp-par {
margin-left:.5em;
vertical-align:middle;
}

/* -- 名前とタイトル -- */
.inp {
font-size:100%;
line-height:1.7em;
border-radius:4px;
padding:0 4px;
margin-left:.25em;
}

/* -- 上のを領域の幅可変対応にする -- */
.inp.iw1 { width:calc(30% - 12rem); }
.inp.iw2 { width:calc(70% - 26rem); }

/ * -- 数値は見やすく -- */
.inp.sp2 {
letter-spacing:1px;
}

/* -- チェックボックスの親 -- */
label {
margin-left:.5em;
padding:.25em;
color:#000;
transition:all .5s;
}
label.w {
color:#f00;
}

/* -- checkbox font-sizeでは無理、scaleで -- */
.cbox {
transform:scale(1.4);
margin-right:.5em;
}

/* -- ログイン情報 -- */
.uid {
margin-left:.25em;
padding:.25em .5em;
color:#000;
border:1px solid #ccc;
border-radius:4px:
bg-c:#ff9;
}

/* -- エリア開放ボタン -- */
.dels {
cursor:pointer;
background-color:orange;
color:#000;
font-weight:bold;
padding:.25em .5em;
line-height:1.8em;
float:right;
transition:all .5s;
}
.dels:hover {
background-color:#f00;
color:#fff;
}
.dels:active {
box-shadow:3px 3px 3px #ccc inset;
}


/* -- テキストの置換などを施すコマンド群 -- */
.cms {
margin:.25em 0;
padding:.25em;
background-color:#ffe;
}

.cms .inp {
width:calc(40vw - 14rem);
}
.inp-btn {
padding:0 .5em;
margin-left:.5em;
background-color:#ffc;
cursor:pointer;
transition:all .5s;
}
.inp-btn:hover {
background-color:#ccf;
}
.inp-btn:active {
box-shadow:2px 2px 2px #ccc inset;
}

/* -- 画像アップローダーの領域　-- */
.upload-area {
padding:3px;
height:calc(100vh - 10rem);
overflow:auto;
line-height:1.4;
background-color:#fff;
transition:all .5s;
}
.upload-area.black {
background-color:#000;
}

mg.big {
width:20%;
}
img.mini {
float:left;
/*
margin:2em;
padding:1em;
background-color:#fff;
border:2px solid #808080;*/
}

/* -- テキストエリア -- */
.txt {
display:block;
width:100%;
padding:3px;
height:calc(100vh - 10rem);
overflow:auto;
line-height:1.4;
transition:all .5s;
}

.txt:focus {
background-color:#ffefff;
}

/* -- テキストエリアの下の領域 -- */
.ups-info {
margin:.5em 0;
padding:0 .5em;
background-color:#eef;
}

/* -- 送信ボタン -- */
.cir {
display:inline-block;
width:3rem;
font-size:90%;
line-height:3rem;
text-align:center;
border-radius:50%;
background-color:#ffe;
cursor:pointer;
transition:all .5s;
}

.cir:hover {
background-color:#ff9;
border:1px solid #00f;
color:#00f;
}
.cir:action {
box-shadow:3px 3px 3px #ccc inset;
color:tomato;
}

/* -- 送信状態 -- */
.info {
margin-left:.3em;
}

/* -- 右寄せで情報など -- */
.len {
display:inline-block;
float:right;
color:#808080;
text-align:right;
line-height:3rem;
padding-right:.5em;
}

/* -- 投稿日付 -- */
.len b {
font-weight:nomal;
color:brown;
}
/* -- 本文の文字情報 -- */
.len i {
font-style:normal;
color:#000;
}

.ups-info * {
vertical-align:middle;
}