_CSS_etc
#_CSS_Import
特に分割するまでもない雑多なUserCSS群。
スタイル
code:style.css
.page:is(div, main) {
border: 1px solid var(--common-accent-color);
}
/* フォント指定 */
div.editor {
font-family: var(--base-fonts);
}
/* 全体の設定 */
body {
margin: 0;
}
div.col-page {
max-width: 1200px;
}
/* リンクカード（トップページ） */
.page-list ul.grid li div.header {
font-family: var(--euro-caps); /* 後でSettingsとマージする */
}
.page-list ul.grid li.page-list-item a .pin {
/* ピン留めされたカードの折れ曲がったような表示のアレ */
display: none;
}
.page-list ul.grid li.page-list-item a:hover {
/* リンクカード（ホバー時） */
background-color: var(--card-hover-bg);
}
.page-list ul.grid li.page-list-item a:hover .content div.header {
/* リンクカード（ホバー時）のヘッダ部分 */
border-top: var(--card-hover-title-bg) solid 10px;
}
.page-list ul.grid li.page-list-item a .hover {
/* デフォルトであったホバー時スタイルの無効化 */
display: none;
}
/* プロジェクトタイトル */
div.quick-launch.layout-list div.left-box {
/* タイトルバー（トップページのみ） */
background-color: var(--tool-base-bg);
}
div.quick-launch div.left-box .btn {
/* ボタン */
border-radius: 0;
}
/* Streamボタン */
nav.navbar ul.navbar-menu>li.stream-btn {
display: block;
}
nav.navbar ul.navbar-menu>li.stream-btn a {
color: var(--stream-button-bg);
}
nav.navbar ul.navbar-menu>li.stream-btn a:hover {
color: var(--stream-button-hover-bg);
}
/* PC・タブレットでの表示 */
@media (min-width: 768px) {
/* 背景画像 */
div#app-container {
background-image: url("https://i.gyazo.com/b1006cf1b07b1580ffa4598c15a8b669.png");
background-color: #0b0401;
background-repeat: no-repeat;
background-size: contain;
min-height: var(--container-height-min);
}
/* ソートボタン */
div.page-sort-menu div.dropdown {
/* ボタン */
}
div.page-sort-menu div.dropdown a.tool-btn {
/* ボタン文字 */
font-family: var(--euro-caps);
width: 200px;
padding: 3px 3px;
text-align: right;
background-color: var(--dropdown-bg);
border-radius: 0;
}
div.page-sort-menu div.dropdown span.kamon-caret-down::before {
/* 矢印 */
content: "\F309";
font-family: 'Font Awesome 5 Brands', 'Font Awesome 5 Free';
font-size: 14px;
font-weight: bold;
position: relative;
margin: 0 8px;
border-radius: 0;
}
}
コードの行番号を表示する
code:style.css
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title {
counter-reset: codeline;
}
div.line span.code-block,
div.line span.code-block .code-block-margin {
/* デフォルトのCSSを無効化 */
background-color: inherit;
}
.code-block span.indent {
background-color: var(--code-bg, rgba(0, 0, 0, 0.04));
}
.code-block span.indent code.code-body {
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
}
.code-block span.indent code.code-body::before {
content: counter(codeline);
position: absolute;
display: inline-block;
z-index: 10;
margin-left: -2.4em;
width: 2em;
text-align: right;
vertical-align: bottom;
border-right: solid 1px #fff;
/* ↓行番号の色の指定はここ */
color: var(--code-color);
}
/* カーソル行の行番号を濃く表示する */
.code-block span.indent code.code-body::before {
opacity: .5;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
background-color: var(--common-accent-color);
}
}
のびのびドロップダウン
ソース：/villagepump/のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
/Mijinko/プロジェクトタイトルと戻るボタンを上部に固定するUserCSS
code:style.css
@media (min-width: 1200px) {
/* PC版（長い方） */
.layout-page div.left-box {
display: flex;
align-items: center;
position: fixed;
top: 0;
margin-left: 52px;
z-index: 1000;
flex-wrap: nowrap;
width: 268px;
}
.layout-page a.navbar-brand {
/* justify-content: flex-end;*/
}
.layout-page ul.global-menu-for-user {
margin: 0 30px 0 auto;
}
}
@media (min-width: 768px) and (max-width: 1199.9px) {
/* PC版（狭いほう） */
@media (min-width: 992px) {
.layout-page a.project-home {
width: calc((100% - 30px - 290px) / 3);
left: 90px;
}
}
@media (max-width: 991.9px) {
.layout-page a.project-home {
width: calc((100% - 30px - 290px) / 3);
left: 74px;
}
}
}
@media (max-width: 768px) {
/* スマホ版 */
.layout-page ul.global-menu-for-user {
margin: 0 0 0 auto;
right: 0;
}
.layout-page a.project-home {
margin-left: 34px;
width: calc((100% - 30px - 110px));
}
}
@media (max-width: 1199.9px) {
/* PC版（狭いほう）とスマホ版 */
.layout-page a.project-home {
position: fixed;
top: 0;
z-index: 1000;
text-align: left;
}
}
Mijinko_SDの個人プロジェクトから流用したもの
code:style.css
/* ピン留めアイテムとそれ以外を分ける */
.grid-style-item.pin + .grid-style-item:not(.pin) {
clear: left;
}
/* カード一覧の画面でウィンドウサイズを変更した時の動きを減らす */
li.grid-style-item,
.related-page-list .grid li.relation-label {
width: 154px ;
height: 169px ;
margin: 0 16.8px 16.8px 0 ;
}
/* ページタイトルのスタイル */
div.line-title .text {
font-size: 28px;
border-bottom: 1px solid var(--line-title-color);
padding-left: 0.25em;
padding-bottom: 9px !important;
margin-bottom: 21px;
}
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: bold;
display: inline-block;
font-size: .5em;
color: #888;
padding-right: 2px;
}