cssCode B backUp / ふたりの日記帳 - ふたりのヤドカリの部屋 at eclat cyber city

2011 10/09 20:51

[CSS-B-DATA]
/* -------- 各領域の項目の見出し -------- */
.link_title, .entry_title, .disp-hd, .form-hd {
font-size:1.3rem;
line-height:1.5rem;
padding:1rem 2rem;
}

#F0 .link_title { (lg-180deg, var(--cf0b) 0, #fff 50%, var(--cf0b) 100%); }
#F1 .link_title { (lg-180deg, var(--cf1b) 0, #fff 50%, var(--cf1b) 100%); }
#F2 .entry_title { (lg-180deg, var(--cf2b) 0, #fff 50%, var(--cf2b) 100%); }
#F3 .disp-hd, #F3 .form-hd { (lg-180deg, var(--cf3b) 0, #fff 50%, var(--cf3b) 100%); }
#F4 .link_title { (lg-180deg, var(--cf4b) 0, #fff 50%, var(--cf4b) 100%); }
#M0 .entry_title { (lg-180deg, var(--cm0b) 0, #fff 50%, var(--cm0b) 100%); }
#M1 .entry_title { (lg-180deg, var(--cm1b) 0, #fff 50%, var(--cm1b) 100%); }
#M2 .entry_title { (lg-180deg, var(--cm2a) 0, var(--cm2b) 50%, var(--cm2a) 100%); }
#M3 .disp-hd { (lg-180deg, var(--cm3b) 0, #fff 50%, var(--cm3b)100%); }
#M4 .disp-hd, #M4 .form-hd { (lg-180deg, var(--cm4b) 0, #fff 50%, var(--cm4b)100%); }

/* -------- 共通小物 -------- */
.top-fix {
float:right;
display:inline-block;
}

.create-info {
padding:.5rem 0;
text-align:right;
font-size:1.08rem;
font-family:"Times New Roman";
line-height:1.8rem;
}

.create-info span {
color:brown;
}

/* -------- メニュー内 -------- */
ul {
list-style:none;
}

.com {
line-height:1.8rem;
font-family:Arial;
width:1.8rem;
text-align:center;
border:1px solid #808080;
border-radius:50%;
bg-c:#ff9;
color:#600;
display:inline-block;
box-shadow:2px 2px 2px #ccc;
cursor:pointer;
}

.com:hover {
bg-c:#ffc;
color:#900;
}

.com:active {
bg-c:#fff;
box-shadow:2px 2px 2px #ccc inset;
}

*.act {
display:none;
}

.com.se {
color:#000;
bg-c:#eef;
}

/* -------- ファイル取得コマンド -------- */
a.ax {
cursor:pointer;
}

/* -------- Index 索引 -------- */
#F0 a {
text-decoration:none;
}

#F0 .link_title .rt {
font-size:1rem;
float:right;
}

/* -------- 拡張ボタン -------- */
.extra {
padding:2em 3rem;
border-width:8px;
border-style:double;
border-color:#ccc;
border-radius:6px;
margin:1em 10%;
transition:font-size 1s, border-color 1s;
cursor:pointer;
}

.extra:hover {
bg-c:#ffc;
}

.extra.moves {
font-size:0;
border-color:#0c0;
}

.extra.moves.zero {
border-color:#fff
}

.par_year {
/* margin-top:1rem;*/
/* position:sticky;
top:-5px;*/
bg-c:#ffc;
}

.link_year {
display:inline-block;

line-height:1.7;
}

#index .link_month {
width:6rem;
bg-c:#ffc;
}

#index .link_month::before {
display:inline-block;
content:url("/home/new-diary/files/file.gif");
margin-right:8px;
}

#index a.link_month:active {
box-shadow:2px 2px #ccc;
}

.vol {
display:inline-block;
color:#f00;
text-align:right;
width:2rem;
margin-right:.5rem;
}

.aid {
display:inline-block;
color:darkgreen;
margin-right:.5rem;
transition:dont-size .5s;
}
:not(.toright).no-tab.zn #F0 .aid {
font-size:0;
}

#F0 .time {
color:#300;
transition:font-size .5s;
}

:not(.toright).zn #F0 .time {
font-size:0;
}

/* -------- F1 disp 日記のメニュー -------- */
#F1 a {
text-decoration:none;
}

#F1 ul {
margin-top:1rem;
margin-bottom:3rem;
}

/* -- Archives 月別アーカイブ -- */
.link_month {
display:inline-block;
border:1px solid #808080;
border-radius:50%;
font-size:.9rem;
color:#000;
width:2rem;
line-height:2rem;
text-align:center;
margin-bottom:.25em;
box-shadow:2px 2px #808080;
transition:background-color .5s, box-shadow .5s;
}

.link_month.sect {
background-color:#900;
border:1px solid #000;
box-shadow:none;
color:#fff;
}
.link_month.bef {
background-color:#808080;
border:1px solid #000;
box-shadow:none;
color:#fff;
}

.link_month:hover {
bg-c:#ff9;
}
.link_month.sect:hover {
bg-c:#a00;
}
.link_month.bef:hover {
bg-c:#666;
}
.link_month:active {
bg-c:#ff6;
box-shadow:1px 1px 1px #808080 inset;
}

.ex span {
margin-right:6px;
}

/* -------- 最新の投稿 -------- */
#latest_articles li::before {
display:inline-block;
content:attr(class);
font:90%/1.3 "Times New Roman";
width:3rem;
border:1px solid #ccc;
bg-c:#ffefff;
text-align:center;
border-radius:1rem;
box-shadow:2px 2px 2px #ccc;
margin-right:.5rem;
}

/* -------- カテゴリ -------- */
#categories li {
border-bottom:1px dashed #ccc;
}

#categories a::before {

}

a.vis {
bg-c:#ffc;
}

#categories li[class]::after {
content:" (" attr(class) " )";
display:inline-block;
margin-left:.5rem;
color:steelblue;
}

#categories {

}

#categories .date {
margin-right:.5rem;
}

.len {
text-align:right;
float:right;
margin-right:1rem;
}

#F1 .cc {
display:inline-block;
text-align:center;
width:3rem;
border-radius:6px;
border:1px solid lightblue;
bg-c:#ffefff;
}

.cate-cmd {
margin-top:.5rem;
margin-bottom:.5rem;
background:url("/home/default/files/yosei_0.gif") no-repeat;
padding:1rem .5rem .5rem 60px;
}

.zn.no-tab .cate-cmd {
background:none;
padding:0;
}

.cate-cmd span {
display:inline-block;
cursor:pointer;
border:1px solid #ccc;
border-radius:6px;
bg-c:#ffc;
padding:.25rem .75rem;
line-height:2rem;
}

.zn.no-tab .cate-cmd span {
padding:.25rem;
line-height:1.5rem;
}

.cate-cmd span:hover {
bg-c:#ff9;
color:tomato;
}

/* -------- コマンド履歴 -------- */
#f3Body li {
border-bottom:1px dashed #ccc;
}

#f3Body .date {
float:right;
}

.date i {
font-style:normal;
color:brown;
}

.date i.day0 { color:#f00; }
.date i.day6 { color:#00f; }

/* -------- 年度別インデックス -------- */
h2 {
font-size:1.5em;
}

#archives {
counter-reset:x1;
}

dd li {
border-bottom:1px dashed #ccc;
white-space:nowrap;
}

dd li > * {
vertical-align:bottom;
}

#archives dd li::before {
display:inline-block;
counter-increment:x1;
content:counter(x1);
width:2rem;
text-align:right;
color:#600;
}

dd li .time, dd li .ed {
font-family:meiryo,"メイリオ",sans serif;
margin-left:.5rem;
transition:font-size .5s;
}

/* -------- 表示領域減の対応 -------- */
:not(.toright).zn dd li .time, :not(.toright).zn dd li .ed {
font-size:0px;
margin-left:0;
}

dd li a {
display:inline-block;
width:calc(100% - 13rem);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:wieth .5s;
text-decoration:none !important;
}

.zn dd li a {
width:calc(100% - 1.5rem);
}

dd li:hover {
bg-c:#f8f8f8;
border-bottom:1px solid #808080;
}

dd a:hover {
color:magenta;
bg-c:#fff;
}

.uplist {

}

/* -------- 月別表示の拡張 -------- */
h2.month_all {
margin-top:1.5rem;
margin-left:1.5rem;
font-size:120%;
color:#600;
background:url("/home/default/files/yosei_0.gif") no-repeat;
padding-left:60px;
line-height:30px;
}

.h2-len {
margin-left:.5rem;
font-size:1rem;
font-weight:normal;
color:#00f;
}

/* -------- F4 リンク集 -------- */
.link-sec {
margin:2rem 0;
}
#f4Doc {
margin-bottom:2rem;
padding-bottom:6rem;
}

#f4Doc ul {
margin:1rem 0;
}

#f4Doc li {
display:inline-block;

width:25%;
margin:0;
margin-bottom:.5rem;
}

:not(.toright).no-tab.zn #f4Doc li {
width:50%;
}

:not(.toright).zn #f4Doc li {
width:33.3%;
}

.toright.zn #f4Doc li {
width:16.6%;
}

.toright.zs #f4Doc li {
width:12.5%;
}

#f4Doc li a {
display:inline-block;
border:4px double #cf6;
text-decoration:none;
border-radius:6px;
font:120%/1.6 "Times New Roman";
width:calc(100% - .5rem);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
padding:.25rem;
margin-bottom:0px;
bg-c:snow;
text-align:center;
transition:width .5s, box-shadow .3s, background-color .3s;
}

#f4Doc li a.trans-lv3 {
border:4px double #00f;
bg-c:#ffefff;
}
/* -- データ挿入機能 -- */
.load-par {

}
.load-par .loader {
cursor:pointer;
color:#00f;
display:inline-blick;
padding:1rem;
border:3px double #00f;
border-radius:6px;
box-shadow:3px 3px 3px #ccc;
}
.load-par .loader:hover {
color:magenta;
bg-c:#ffc;
box-shadow:4px 4px 4px #ccc;
}

.trans-info {
font-size:.9rem;
line-height:1rem;
color:#666;
/* color:#f60; */
margin-right:.5rem;
}
.trans-info span {
float:right;

}

.trans-date {
font-size:.9rem;
line-height:1rem;
color:#666;
vertical-align:top;
text-align:right;
margin-right:.5rem;
position:relative;
top:-.5rem;
}

#f4Doc a:hover {
bg-c:#ffc;
color:#000;
box-shadow:3px 3px 3px #ccc;
}

#f4Doc a:active {
color:#f60;
box-shadow:1px 1px #ccc inset;
}

/* -------- 更新フォーム -------- */
#eDisp {
bg-c:#fff;
padding:1rem 0;
}

#execSel {
font-size:1.05rem;
font-family:"Times New Roman";
font-weight:normal;
line-height:1.2;
padding:2px 4px 2px 12px; text-align:center;
background-color:#600; color:#ff9;
border:1px solid #808080;
border-radius:50%; min-width:6em;
box-shadow:2px 2px 2px #808080;
}
#execSel:disabled {
bg-c:#ccc;
}
select {

}
select.jp {
font:95%/1.0 meiryo,"メイリオ";
}
#execSel option {
border:1px solid #808080;

border-radius:50%; text-align:center;
padding:2px 0;
background-color:#900; color:#ffa;
}

#eDispTitle {
width:10em;
transition:width .5s, background-color .5s;
}
#eDispTitle:focus {
width:20em;
bg-c:#ffefff;
}

#newOpen:checked + label {
color:#f00;
bg-c:#ffc;
}

#eDispText {
line-height:1.3rem;
margin-top:.5rem;
margin-bottom:.5rem;
height:calc(100vh - 14rem);
transition:height .5s, background-color .5s;
}
#eDispText:focus {
bg-c:#ffefff;
}

input.cir {
border:1px solid #808080;
border-radius:50%;
text-align:center;
font-size:.9rem;
display:inline-block;
width:2.5rem;
line-height:2.5rem;
}

.edited {
bg-c:#ccf;
}

.comment_form input { vertical-align:middle; }
#poster_name input, .C372 #poster_name input { width:6em; }
#comment_field input, #C372 #poster_name input { width:22em; }

.comment_form label input, .comment_form label input {
border:1px solid steelblue;
background-color:#ffefff;
}

.comment_form textarea {
display:block;
width:100%;
font-size:1.1rem;
line-height:1.4;
margin-bottom:.5em;
border:1px solid orange;
border-radius:4px;
padding-left:2px;
}

#oDisp {
min-height:20rem;
}

.form-ft {
padding-bottom:6rem;
bg-c:#ffc;
margin-bottom:3rem;
}

.form-fix {
font-family:"Times New Roman";
display:inline-block;
text-align:center;
float:right;
margin-left:.5rem;
border-radius:6px;
transform:scale(.9);
transition:transform .3s;
cursor:pointer;
}

.form-fix:hover {
transform:scale(1.05);
color:#f00;
}

/* -- タイトル部分の制御 -- */
.row {
font-size:1rem;
margin-top:.5em;
transition:font-size .5s, margin-top .5s;
}
.row input[type="text"] {
border-radius:1rem;
padding-left:.5rem;
padding-right:.5rem;
font-size:1em;
line-height:1.5;
}
.rows .row {
font-size:0px;
}

.rows .row input[type="text"] {
border:none;
}
.rows .row input[type="checkbox"] {
display:none;
}

#eDisp textarea {
display:block;
width:100%;
font-size:1.1rem;
line-height:1.4;
margin-bottom:.5em;
border:1px solid orange;
border-radius:4px;
padding-left:2px;
}

#eDisp.rows textarea {
height:calc(100vh - 9rem - 3px);
}

#post {
box-shadow:2px 2px 2px #ccc;
}
#post:hover {
bg-c:#ff9;
color:magenta;
box-shadow:4px 4px 4px #ccc;
}

#post:active {
box-shadow:1px 1px 1px #ccc inset;
color:#f60;
}

#M3 {
padding-right:.5rem;
}

#M3 .disp-hd {
margin-right:.5rem;
}

.m3-ft {
padding-bottom:6rem;
}

#m3Doc {
margin:1rem 0;
}

#m3Doc a {
color:#000;
border:3px solid #ccc;
padding:.25rem;
display:inline-block;
text-decoration:none;
font-size:.9rem;
margin-top:.5rem;
margin-right:.5rem;
width:calc(25% - .5rem);
border-radius:5px;
box-shadow:3px 3px 3px #ccc;
transition:box-shadow .5s, transform .5s;
vertical-align:top;
}

#m3Doc a.m3w0 { (lg-180deg, var(--cm0b) 0, #eee 100%); }
#m3Doc a.m3w1 { (lg-180deg, var(--cm1b) 0, #eee 100%); }
#m3Doc a.m3w2 { (lg-180deg, var(--cm2b) 0, #eee 100%); }
#m3Doc a.m3w3 { (lg-180deg, var(--cf2b) 0, #eee 100%); }
#m3Doc a.act { border:3px solid orange; }

:not(.toright).zn #m3Doc a { width:calc(20% - .5rem); }
:not(.toright).zn.no-tab #m3Doc a { width:calc(16.6% - .5rem); }
:not(.toright).zs #m3Doc a { width:calc(12.5% - .5rem); }
.toright.zn #m3Doc a { width:calc(33.3% - .5rem); }
.toright.zn.no-tab #m3Doc a { width:calc(50% - .5rem); }

#m3Doc .rt {
float:right;
display:inline-block;
text-align:center;
width:1.5rem;
line-height:1.5rem;
border-radius:50%;
bg-c:#fff;
border:1px solid hotpink;
transition:backgrorund-color .5s, color .5s;
}

#m3Doc a.act .rt {
bg-c:orange;
color:#fff;
}

#m3Doc .img-par {
position:relative;
width:100%;
padding-top:100%;
}

#m3Doc img {
object-fit:cover;
bg-c:#fff;
width:100%;
height:100%;
}

#m3Doc img.cover { object-fit:cover; }
.toright.zn #m3Doc img {/* height:120px; */ }
#m3Doc .ft { text-align:right; }

#m3Doc a:hover {
border:3px solid #00f;
box-shadow:5px 5px 5px #808080;
transform:scale(1.02);
}

#m3Doc a.act:hover {
border:3px solid #f00;
}

/* -------- M4 disp 検証・コントロール -------- */
#M4 {
padding-bottom:4rem;
}

#M4 ul {
margin:1rem 2rem;
list-style:disc;
}

#M4 a {
text-decoration:none;
}

#M4 a:hover {
color:magenta;
}

[/CSS-B-DATA]

編集

コメント (0)