457 lines
13 KiB
CSS
457 lines
13 KiB
CSS
/* v.12.35.20 */
|
|
|
|
* { color-scheme: light dark; } /* view-source:about:blank */ /* fixed #fff blink */
|
|
|
|
:root{
|
|
--bodyP: 5vw;
|
|
--wrapper: 540px;
|
|
--wrapper2: 700px;
|
|
--wrapper3: 900px;
|
|
--wrapper4: 100%;
|
|
--wrapperTV: 100%;
|
|
--wrapperXL: 490px; /* old main .wrapper */
|
|
--wrapperL: 430px;
|
|
--wrapperM: 330px;
|
|
--wrapperS: 230px;
|
|
--wrapperXS: 130px;
|
|
--inputH: 43px;
|
|
--fontSize: 13.4px;
|
|
/*--mobileScreen: 500px;*/
|
|
}
|
|
|
|
|
|
html, body, a, input, button, textarea, pre, code{
|
|
font-family: 'Noto Sans', 'Roboto', Arial, Sans-Serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
/*font-size: 13.4px;*/ font-size: 14px;
|
|
text-decoration:none;
|
|
letter-spacing: 0.16px;
|
|
/*hyphens: auto;*/
|
|
}
|
|
|
|
@media (hover: none) {
|
|
html, body, a, input, button, textarea, pre, code{
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
html, body { margin: 0 auto; padding: 0; }
|
|
body {
|
|
padding: 0 var(--bodyP);
|
|
display: flex;
|
|
/*flex-basis: 100%;*/ flex-basis: auto;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
overflow-wrap: break-word;
|
|
/*word-break: break-all;*/
|
|
}
|
|
html {
|
|
position: relative;
|
|
height: -webkit-fill-available;
|
|
}
|
|
|
|
.content { flex: 1 0 auto; }
|
|
.page { min-height: 100vh; }
|
|
|
|
header, footer {
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
header{ margin: 0 auto; }
|
|
/*nav a::first-letter{ font-size: 1rem; font-weight: 600;}*/
|
|
|
|
header { padding: 15px 0; }
|
|
nav, footer { text-align: center; max-width: 100%; }
|
|
nav a, nav button, footer span { display: inline-block; padding: 5px 6px; }
|
|
footer { padding: 25px 0; }
|
|
footer span::first-letter { text-transform: capitalize; }
|
|
nav button:hover { background: none; }
|
|
|
|
nav a:first-child, footer a:first-child, footer span:first-child, nav a:not(.dropdownMenuContent) { padding-left: 0; }
|
|
footer span:last-child { padding-right: 0; }
|
|
|
|
h1, .h1 { font-size: 1.20em; }
|
|
h2, .h2 { font-size: 1.18em; }
|
|
h3, .h3 { font-size: 1.15em; }
|
|
h4, .h4 { font-size: 1.12em; }
|
|
h5, .h5 { font-size: 1.10em; }
|
|
h6, .h6 { font-size: 1.05em; }
|
|
|
|
input[type=text], input[type=search], textarea, input[type=submit]{
|
|
width: 100%;
|
|
min-height: var(--inputH);
|
|
margin: 0px;
|
|
margin-top: 2px;
|
|
/*box-shadow: 4px 4px var(--d2);*/
|
|
margin-bottom: 0;
|
|
padding: 5px;
|
|
}
|
|
select, input[type="color"], input[type="date"], input[type="time"]{ padding: 5px; min-height:15px; display: inline-block; }
|
|
input[type=checkbox]{ cursor: pointer; margin: 0; padding: 5px; line-height: normal; }
|
|
textarea { outline-color:transparent; outline-style:none; resize: vertical; }
|
|
input[type=submit] { cursor:pointer; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
td { padding: 5px; }
|
|
|
|
/* class */
|
|
|
|
.wrapper, .wrapper2, .wrapper3, .wrapper4, .wrapperXL, .wrapperL, .wrapperM, .wrapperS, .wrapperXS { width: 100%; margin: 0 auto; }
|
|
.wrapper, .post { max-width: var(--wrapper); }
|
|
.wrapper2, .post2 { max-width: var(--wrapper2); }
|
|
.wrapper3, .post3 { max-width: var(--wrapper3); }
|
|
.wrapper4, .post4 { max-width: var(--wrapper4); }
|
|
.wrapperTV, .postTV { max-width: var(--wrapperTV); }
|
|
.wrapperXL, .postXL { max-width: var(--wrapperXL); }
|
|
.wrapperL, .postL { max-width: var(--wrapperL); }
|
|
.wrapperM, .postM { max-width: var(--wrapperM); }
|
|
.wrapperS, .postS { max-width: var(--wrapperS); }
|
|
.wrapperXS, .postXS { max-width: var(--wrapperXS); }
|
|
|
|
.post, .post2, .post3, .postTV, .tv, .postXL, .postXL, .postL, .postM, .postS, .postXS {
|
|
padding: 11px;
|
|
padding-bottom: 10px;
|
|
border-radius: 5px;
|
|
width: 100%;
|
|
display: block;
|
|
margin: 0 auto;
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
/* pre for post */
|
|
iframe, .pre iframe, .pre video, .pre audio { display: block; margin-top: 15px; border-radius: 5px; width: 100%; }
|
|
.pre .img { margin-bottom: 5px; margin-top: 15px; }
|
|
|
|
.postFooter {
|
|
margin-top: 7px;
|
|
display: grid;
|
|
grid-template-columns: auto 120px;
|
|
grid-gap: 1%;
|
|
}
|
|
.postTaglist { text-align: left; }
|
|
.postTime { text-align: right; }
|
|
.postTagList a, .postTime a{ font-size: calc(100% - 5%); }
|
|
|
|
|
|
|
|
.op { opacity: 0.85; }
|
|
.op:hover { opacity: 1; }
|
|
.op2 { opacity: 0.25; }
|
|
.op2:hover { opacity: 1; }
|
|
|
|
.center, .center2, .center3, .center4 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: safe center;
|
|
align-self: safe center;
|
|
box-sizing: border-box;
|
|
/*margin: 0 var(--bodyP);*/ margin: 0 auto;
|
|
}
|
|
|
|
.center2 { min-height: 40vh; }
|
|
.center3 { min-height: 50vh; }
|
|
.center4 { min-height: 100vh; }
|
|
|
|
|
|
|
|
.logo, .logo2{
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
width: 60px;
|
|
max-height: 60px;
|
|
padding: 1px;
|
|
border: 2px dashed var(--cOp);
|
|
}
|
|
|
|
.logo2 { width: 26px; height: 26px; }
|
|
|
|
/*.ico, .ico img, .ico2, .ico2 img {
|
|
border-radius: 50%;
|
|
border: 1px solid var(--d);
|
|
padding: 2px;
|
|
}*/
|
|
.ico, .ico2 {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
/*filter: brightness(90%);*/
|
|
opacity: 0.9;
|
|
font-size: small;
|
|
margin-right: 5px;
|
|
text-align: center;
|
|
height: auto;
|
|
}
|
|
.ico2 {
|
|
/*filter: brightness(90%);*/
|
|
font-size: xx-small;
|
|
}
|
|
.ico:hover, .ico2:hover {
|
|
filter: grayscale(0%);
|
|
filter: brightness(100%);
|
|
}
|
|
|
|
.gray { filter:grayscale(56%); }
|
|
|
|
.tagList {
|
|
word-break: break-all;
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
.tagList a { margin: 1px; }
|
|
.tag, .tag2, .button {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
.tag, .tag2 { font-size: calc(100% - 10%); padding: 3px 5px; min-width: 27px; }
|
|
.button { padding: 9px; max-width: 100%; }
|
|
.button, .tag, .tag2 { border-radius: 5px; }
|
|
.tag2 { padding: 5px 7px; }
|
|
|
|
|
|
@media (hover: none) {
|
|
.scrollX {
|
|
overflow: hidden;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollX::-webkit-scrollbar { width: 0px; display: none; }
|
|
}
|
|
|
|
/* colors */
|
|
body{ background: var(--bg); color :var(--c3); }
|
|
|
|
a { color: var(--c2); }
|
|
a:hover{ color: var(--c4); }
|
|
|
|
hr{ border: 1px solid var(--d2); border-bottom:1px solid var(--l); }
|
|
/*a{ color: var(--blue); } a:hover { color: var(--blue2); }*/
|
|
/*::selection { background: #8A9A5B; color: #FFFFFF; }*/
|
|
::selection { background: darkorange; color: #FFF; }
|
|
|
|
input, textarea, input:focus, select, button, input[type="number"] { border: 1px solid var(--d3); background: var(--l2); color: var(--c3); border-radius: 3px; }
|
|
input:hover, textarea:hover, select:hover, button:hover { background: var(--l3); }
|
|
input[type="submit"] { background: var(--d); color: var(--c2); }
|
|
input[type="submit"]:hover { background: var(--d2); color: var(--c3); }
|
|
|
|
input[type="file"] { background: var(--d); color: var(--c); }
|
|
input[type="range"], progress { width: 100%; max-width: 100%; margin: 0; }
|
|
input[type="number"]{ padding: 5px; }
|
|
|
|
/*input[type=range] {
|
|
-webkit-appearance: none;
|
|
background: var(--l3);
|
|
outline: none;
|
|
height: 6px;
|
|
}*/
|
|
|
|
::placeholder, input::-webkit-input-placeholder { font-size: calc(100% - 15%); color: var(--c); }
|
|
|
|
|
|
input[type="search"]::-webkit-search-cancel-button{
|
|
-webkit-appearance: none;
|
|
height: 10px;
|
|
width: 10px;
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABbmlDQ1BpY2MAACiRdZHPKwRhGMc/uwiLHDhI0hyWHGxtlBxZB5dNWpTFZXfM7KqdMc3MJrkqFwflIC5+HfwHXJUrpRQpyckf4NdFGs+7q3YT7/TO8+n7vt+n9/2+EE4WdMurjYNl+25qPKHNpue0+mciNNICdGd0zxmdnEzy7/i4JaTqTUz1+n/fn6Np0fB0CDUID+mO6wuPCCdXfEfxpnC7ns8sCh8I97tyQOFLpWfL/KQ4V+Y3xe50agzCqqeWq+JsFet51xLuE45ahaL+cx51k2bDnpmS2imzC48U4yTQyFJkiQI+Mam2ZPa3L17yTbAsHl3+Dqu44siRF2+/qEXpakg1RTfkK7Cqcv+dp2cODpS7Nyeg7jEIXnugfhu+toLg8zAIvo6g5gHO7Yp/WXIafhd9q6JF96F1HU4vKlp2B842oOPeybiZklQjM2ya8HICLWlou4bIfDmrn3WO72B6TZ7oCnb3oFf2ty58A5N3Z9gRfyj7AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAvUlEQVQYV2NgIBIwgtRNmzatFkhdyMrK2gzTBxQTA7I7gbgZKH6PCSohAxIESoZDNYoC6Q1ArA7EYDUwEzmA7G4gDgTiViCOAOL/QJwDNO0KXCHUFB4gPRuI/YH4ORB7ABXdhjkFZjWIzwfEckD8DYh/AbEGTBGIBisEuk0SSG0F4p9AbAbER4EY7ma4QiBjARC/BOJ0kA9BbgPivUDcDTQEbDIL1PgiIP0ZqOgRlP8DSFcC8QEgfoDsBIJsAOsYNCiM5q29AAAAAElFTkSuQmCC");
|
|
cursor: pointer;
|
|
}
|
|
input, progress, select { accent-color: var(--b3); } /* comment for validator*/
|
|
|
|
table, tr, td { border: 1px solid var(--d); background-color: var(--l); }
|
|
td { background-color: var(--l2); }
|
|
|
|
|
|
|
|
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
|
|
|
|
.brand, .brand button{ color: var(--b3); }
|
|
.b2 { color: var(--b4); }
|
|
.brand:hover, .brand button:hover { color: var(--b4); }
|
|
|
|
.red { color: var(--red); } .red2 { color: var(--red2); }
|
|
.red:hover { color: var(--red2); }
|
|
|
|
.orange{ color: var(--orange); } .orange2 { color: var(--orange2); }
|
|
.orange:hover { color: var(--orange2); }
|
|
|
|
.yellow { color: var(--yellow); } .yellow2 { color: var(--yellow2);}
|
|
.yellow:hover { color: var(--yellow2); }
|
|
|
|
.green { color: var(--green); } .green2 { color: var(--green2); }
|
|
.green:hover { color: var(--green2); }
|
|
|
|
.blue { color: var(--blue); } .blue2 { color: var(--blue2); }
|
|
.blue:hover { color: var(--blue2); }
|
|
|
|
.indigo{ color: var(--indigo); } .indigo2 { color: var(--indigo2); }
|
|
.indigo:hover { color: var(--indigo2); }
|
|
|
|
.violet { color: var(--violet); } .violet2 { color: var(--violet2); }
|
|
.violet:hover { color: var(--violet2); }
|
|
|
|
.active { color: var(--c3); }
|
|
.active:hover { color: var(--c); }
|
|
|
|
.border, .borderList { border: 1px solid var(--d3); }
|
|
.border2, .border2List { border: 1px dashed var(--d4); }
|
|
.border3, .border3List { border: 1px solid var(--d2); }
|
|
.border4, .border4List { border: 1px solid var(--d); }
|
|
|
|
.borderList, .border2List { margin-bottom: -2px; }
|
|
.border3List, .border4List { position: relative; z-index: 3; margin-top: -1px; }
|
|
.border3List:first-child, .border4List:first-child { margin-top: 0; margin-bottom: 0; }
|
|
.border3List:hover{ z-index: 5; border: 1px solid var(--d3);}
|
|
.border4List:hover { z-index: 5; border-bottom: 1px solid var(--d3); }
|
|
|
|
|
|
|
|
.bg, .bgList, .light { background: radial-gradient(var(--l2) 40%, var(--l) 100%); }
|
|
.bgList:nth-child(2n), .light:hover { background: radial-gradient(var(--l3), var(--l2)); }
|
|
.bg2, .bg2List, .light2 { background: var(--l); }
|
|
.bg2List:nth-child(2n), .light2:hover, .light3{ background: var(--l2); }
|
|
.bg3, .bg3List, .light3 { background: var(--l2); }
|
|
.bg3List:nth-child(2n), .light3:hover, .light4{ background: var(--l3); }
|
|
.bg4, .bg4List, .light4 { background: var(--l3); }
|
|
.bg4List:nth-child(2n), .light4:hover, .light5, .bg5 { background: var(--l4); }
|
|
|
|
.highlight { background: var(--l4); border-bottom: 1px solid var(--d3); color: var(--c4); }
|
|
.highlight:hover { color: var(--c4); }
|
|
|
|
.highlight2 { border-bottom: 1px solid var(--orange); }
|
|
.highlight2:hover { color: var(--c4); }
|
|
|
|
|
|
/* other */
|
|
.padding { padding: 5px; }
|
|
.padding2 { padding: 9px; }
|
|
.padding-bottom { padding-bottom: 5px; }
|
|
.padding-bottom2 { padding-bottom: 9px; }
|
|
.text-transform-capitalize { text-transform: capitalize; }
|
|
.text-transform-uppercase { text-transform: uppercase; }
|
|
.text-transform-lowercase { text-transform: lowercase; }
|
|
.text-transform-none { text-transform: none; }
|
|
.text-transform-full-width { text-transform: full-width; }
|
|
.text-transform-full-size-kana { text-transform: full-size-kana; }
|
|
.block { display: block; box-sizing: border-box; }
|
|
.inline-block { display: inline-block; }
|
|
.none { display: none; }
|
|
.zero { margin: 0; padding: 0; }
|
|
.margin { margin: 1px; }
|
|
.tLeft { text-align: left; }
|
|
.tCenter { text-align: center; }
|
|
.tRight { text-align: right; }
|
|
.capitalize { text-transform: capitalize; }
|
|
.lowercase { text-transform: lowercase; }
|
|
.b, .b a { font-weight: 600; }
|
|
.bold, .bold a { font-weight: 600; }
|
|
.medium, .medium a { font-size: medium; }
|
|
.large, .large a { font-size: large; }
|
|
.small, .small a { font-size: small; }
|
|
.x-small, .x-small a { font-size: x-small; }
|
|
.xx-small, .xx-small a { font-size: xx-small; }
|
|
.cursorNone { pointer-events: none; }
|
|
.clear { clear: both; }
|
|
.scroll {
|
|
/*overflow-x: auto;
|
|
overflow-y: hidden;
|
|
white-space: nowrap;*/
|
|
display: block;
|
|
max-height: 100vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
scroll-padding-top: 16px;
|
|
}
|
|
|
|
.break { overflow: hidden; word-wrap: break-word; overflow-wrap: break-word; }
|
|
|
|
|
|
/* ads */
|
|
.adsHeader { display: block; float: right; text-align: right; }
|
|
.adsHeader a { font-size: x-small; }
|
|
.adsBody { padding-bottom: 15px; }
|
|
.adsBody a { word-break: break-all; } /* fixed over */
|
|
|
|
|
|
|
|
|
|
|
|
/* fix */
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
word-break: break-all;
|
|
margin: 25px 0;
|
|
text-transform: capitalize;
|
|
}
|
|
h1, h2, h3, h4, h5, h6, .bold, .b, b { letter-spacing: 0.2px; }
|
|
|
|
@media(max-width: 200px) { div, input, textarea, a{ word-break: break-all; } }
|
|
|
|
div, input, textarea, img, svg, header, footer { box-sizing: border-box; }
|
|
|
|
.sup { vertical-align: super; vertical-align: top; font-weight: 600; }
|
|
.pre{ white-space: pre-wrap; word-wrap: break-word; line-height: normal; }
|
|
|
|
button { cursor: pointer; }
|
|
|
|
/*textarea:focus {outline: none;}*/
|
|
form { margin: 0 auto; padding: 0; width: 100%; box-sizing: border-box; }
|
|
/*br, hr { clear: both; }*/
|
|
svg, form, iframe, video, audio, img, hr, table{ max-width:100%; }
|
|
svg, img { height: auto; display: inline-block; }
|
|
|
|
input, textarea { display: block; }
|
|
|
|
@media(max-width: 395px) {
|
|
.m, .m2 { width: 100%; max-width: 100%; padding: 0; }
|
|
.m2 { display: block; position: relative; }
|
|
}
|
|
|
|
.over, .over a{
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: inline-flex; /* display: block; display: inline-block; */
|
|
max-width: 100%;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
iframe { border: none; }
|
|
img { overflow: hidden; font-size: calc(100% - 30%); }
|
|
|
|
html { scrollbar-width: thin; }
|
|
::-webkit-scrollbar { width: 7px; } /* for validator commnet */
|
|
|
|
input:focus{ outline: none }
|
|
footer { margin-top: 10vh; }
|
|
|
|
.logo2 { margin-right: 5px; }
|
|
|
|
ul li { line-height: 0.3; margin: 0; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|