)で囲まなくても良いように
bs_boxのクラス指定でも書けるようにした。
2020/07/13
.alert内で段落と段落が連結した際の上下マージンを1.5emに調整
2020/07/15
.alert書式の修正、行高さの調整
パネル内で見出しを使う場合、書式の初期化
メニューやフッター内でも使えるように修正
をnagamira_css8h.cssへ引っ越し
2020/07/17
.alert左右マージンをいい具合になるよう調整
2020/07/20
.alert左右マージンを0.2emに
2020/07/22
.panelモバイル端末画面時とそれ以上の画面のマージン、排他余白を切り分ける
文字書式は後述している.alertと同じ
2020/07/22
.alertモバイル端末画面時とそれ以上の画面のマージン、排他余白を切り分ける
文字書式は前述している.panelと同じ
2020/07/22
.panelの排他余白は必ず0にする。上下見出しつきパネル、アコーディオンパネルなどで共用しているためここを変えるとレイアウト崩れが発生する
2020/07/29
パネルの記述の可読性がよくないので改行を入れるなど修正
2020/07/29
パネル、枠類、dark系統の色の調整 バラバラなのが多いので調整
通常 #353535
明るい系 #555555
アラートボックスなどは別系にしているので変えない事
2020/07/29
セクションでのパネル見出し背景を半透明にする
2020/07/29
セクションでのパネル枠線を半透明にする
2020/07/29
パネル見出し（ヘッダー・フッター）ボーダー下線を0pxにする。
透明にしても見えてしまうため
2020/07/29
panel関数で使われる.panel-[色名] の他に
bs_box関数のクラス指定でpanelを指定しても使えるようにクラス名.panel.[色名] を追加
2020/07/30
クラス名panel-lightがあったところにboostrapの色名lightを追加したことで関数処理で「panel-」が付与された色指定クラスの「panel-light」と重複して混乱するので、panel-lightをpanel-brightに、panel-light-borderをpanel-lightsolidに名前を変える
2020/08/01
パネル、アラートボックスが入れ子になった時のマージンを切り替える
ただし、2階層以上は記述が難解に無理があるのでやめよう
入れ子になった時はwidthをautoに切り替えることで、横幅をあわせる
2020/08/01
border-radius: 0px;の削除忘れを消す
グレーの枠が他の枠と角丸めが異なっていた事を修正
2020/08/05
背景色つき枠（塗りつぶし枠）オレンジ枠の文字を黒色に修正
2020/08/08
パネル、アラートボックスが入れ子になった時
上下マージンを1emへ 横マージンを0.5emから0.1emへと若干狭くする
これによってpanel枠とアラートボックスの区別をつけて枠を二重枠にする事ができる
2020/08/08
アラートボックス内の段落のマージンが小さくて窮屈なので調整
2020/08/08
パネルのみ「パネル>パネル」と入れ子になった時、自動で内側のマージンを0にします。
2020/08/10
パネルが上下に隣り合った場合、下のパネルの上マージンを0.8emに増やす
2020/08/12
panel-brightクラス指定なしを追加、
.panel-brightクラスが複数あるのでこれを統合へ
先にあった分をここに統合。
2020/08/12
.panel-bright-borderクラスの追加
2020/08/15
.panel-solid-bright セクション内で自動適用されるスタイルを追加
.panel-lightsolidの用途がはっきりしない似たクラスが複数あると引数指定で混乱するのでまとめる
.panel-solidの用途がはっきりしない似たクラスが複数あると引数指定で混乱するのでまとめる
.panel-solid-brightの用途がはっきりしない似たクラスが複数あると引数指定で混乱するのでまとめる
panel-lightsolidクラス枠線が透明で背景に薄く色がかかっているパネルとして再利用
セクション内でのpanel-lightsolidクラスの文字色、背景色を自動調整
.panel-brightクラス セクション内での調整を追加
2020/08/17
パネル枠線ボーダースタイルの値を別の所で指定できるように分離
下の方の「パネル枠線スタイル」を参照
2020/08/18
パネル枠線ボーダー太さ修正、
オプション
narrow（2px）を追加（見送りコメントで）
bold（8px）を追加
boldは
double,groove,ridge,inset,outsetで利用を推奨
shadowを追加
パネル枠にbox-shadowを追加する
2020/09/01
bs_box関数のクラス指定で透明（transparent）を指定できるように追加
ただし、パネルの目的からすると微妙
2020/09/01
パネル見出し（ヘッダー・フッター）排他領域上下を.2emから.1emへ
他の所で調整して余白がすこし大きくなったので調整
2020/09/04
アラートボックス内の段落の排他領域、モバイル画面時時のを0.5emから0.3emへ小さくする
2020/09/07
パネル関数改修に伴い、クラス指定の修正
2020/09/10
warningパネル類で使っていた色オレンジ（efa404）が旧い頃のデザインでこれを山吹色（普通）ffc818、（明るい）fdc100
（背景）ffe286に置き換えていく
2020/09/10
.panel-lightsolidの色を調整。青みがかかっていたsuccessなどを本来の色に合わせた
2020/09/16
パネル枠線の太さ可変を6段階をやめて、2，3，4pxに統合して、アコーディオンパネルと識別する
2020/09/18
パネルの色を修正、infoとsuccess、defaultを色弱の場合にコントラスト差を強める
2020/09/19
パネルwarning見出し文字色を修正黒色に変更
2020/09/27
パネルの角の丸めをアコーディオンパネルと合わせて7pxから4pxに
2020/10/02
panel-lightsolidクラスに見出しつきパネル指定時の見出し装飾クラスを追加
panel関数で引数指定ができるようにする
2020/10/02
panel-solidクラスに見出しつきパネル指定時の見出し装飾クラスを追加
panel関数で引数指定ができるようにする
2020/10/02
panel-bright-borderクラスに見出しつきパネル指定時の見出し装飾クラスを追加
panel関数で引数指定ができるようにする
2020/10/03
panel関数内で 色名の後に「bold」を指定した時のために.boldクラスを追加
2020/10/03
.panel.boldの線の太さを可変にする
通常の枠線太さの倍とする
2020/10/03
.panel-solid-bright ヘッダフッタ装飾を追加
2020/10/03
セクション内でのpanel-lightsolidクラスに見出しつきパネルの色調整
背景画像によっては読みづらいかもしれない
2020/10/03
見出しつきpanelのヘッダーフッター内でleft,center,rightを指定した時、マージンが増えるのを防ぐ
2020/10/03
パネル見出し（ヘッダー・フッター）のborder-radiusを全ての角で 0pxへ
2020/10/03
.panel-bright クラスのshadowオプションを外して指定できるようにする
2020/10/06
panel-title-nobackcolor-border-over
panel-title-nbkclrb-over はレイアウト崩れが多いのと
新しい機能でカバーできるので廃止する
2020/10/06
角丸ボーダーオーバー見出し枠パネル
panel-title-radius-border-over
panel-title-rb-over はレイアウト崩れが多いのと
新しい機能でカバーできるので廃止する
2020/10/06
#html2関数で使ってきた枠線の外にタイトルが出るpanel-title-square-border-over
panel関数でクラス名が利用できるようになったので改修して、新たなクラスを作成する
2020/10/06
見出しが枠の外側にあるpanel-title-outerが入れ子になっている時のマージンを設定
2020/10/06
パネルのヘッダとフッタの文字の大きさを2px小さくする
panel関数が修正できた事でパネル見出しの区別が容易にできるようになった事から調整
2020/10/07
パネル見出しの大きさを変える（試験）
panel [large|lg] [色名]
panel [small|sm] [色名]
panel [mini|xs] [色名]
panel関数自体にいれるか、それともクラスだけにしてしまうか?
2020/10/08
panelの無指定時の枠線色を薄いグレーから#888888に修正
2020/10/08
panelとpanel-title-outerの陰を#777から薄く#a7a7a7;に切り替え
2020/10/08
panel-heading,panel-footer見出し部分の陰を追加
2020/10/09
panel-title-outerb 外側枠線の装飾を無効にする
2020/10/09
パネルpanel-solidクラスにpanel-headingとpanel-footerの背景色を追加
panel.inc.phpの修正に伴う措置
2020/10/12
パネル枠線スタイルを
.panel-title-outer.warning>.panel-body
で指定できるように追加
2020/10/18
panel関数の引数
見出しの上下余白高さオプションを追加
heading-large、heading-lg
heading-small、heading-sm
2020/10/19
panel関数の引数
本文の行間の高さオプションを追加
line-height-lg|line-height-large
line-height-sm|line-height-small
2021/01/29
.panel-heading, .panel-footerにoutlineを復活
outline: 1px solid;とする
前は親属性でoutline: 0pxにしていたが、
WEBブラウザの対応が十分ではない。
0px指定にもかかわらず拡大すると内枠が浮いて出る問題が出た
モニタの解像度拡大の傾向が見られるため属性と色指定も復活
2021/01/29
.panel-heading, .panel-footerのoutline属性復活にともない
前はなかったoutline-colorを追加
色を調整
2021/01/29
枠線外見出しつきパネル
outline: 0px;を追加
2021/01/29
2Kに対応、1700px、2000pxの文字の大きさを追加。デザインは随時見直し
サイドメニューの文字バランスは検討
2021/01/30
2Kに対応、1500px、2000px、2500pxの文字の大きさデザインは随時見直し
テストしたところ1700pxはおそらく使わないと判断
2021/01/31
見出しつきパネルにoutline-color属性の追加
拡大した時に間ができないようにするため
2021/02/01
.panel.successの色記述ミスでinfoの色になっていたのを修正
2021/02/07
画面拡大時、セクションでのパネル見出しの枠線が拡大されて色差が出てしまうが、これはブラウザの仕様の問題。
それほど支障はないので保留
2021/09/04
見出しヘッダ、見出しフッタの左右位置の調整
1emから.5emへ
2021/09/04
見出しフッタ（.panel-title-outer .panel-footer ）の大きさがAndroid端末では正常に出ないので調整。
2021/09/06
外部見出しつきパネル（.panel-title-outer ）の見出しヘッダ、フッタの角丸めを8pxから4pxへ修正
2021/09/06
見出しヘッダ、見出しフッタの左右位置の調整を可変に切り替える
モバイル画面と768px以上で位置が変わる。
英語では気づきにくいが日本語では画面全体が広く場合は字下げが大きい方がわかりやすいため。
2021/09/07
モバイル画面でのパネル見出し（ヘッダー・フッター）排他領域上下を.1emになるように調整
==================================*/
/*==================================
パネル見出しの大きさを修正
2018.04.30
2019.02.26
最小ポイント数を18ポイントに修正
2019.03.03
メディアクエリ1200px以上の場合を追加
文字間詰め
2019.03.27
568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。
2019/09/18
パネルの上下マージンを広くする
2019/12/25
パネルのタイトルの書体サイズ 360px 時を追加
2019/12/28
パネルのタイトルの書体サイズ1500px以上時を追加
大きさの割にバランスが悪いため
2019/12/30
パネルのタイトルの書体サイズ1200px以上を調整
アコーディオンパネルとパネル上下の見た目のバランスが悪いので修正
2020/01/07
パネル見出し（ヘッダー・フッター）のタイトル書体を太字にする
アルファベットが細字になってしまう場合があるので
2020/07/10
.alertの中で見出しを使う場合に初期化・カスタマイズする
2020/07/15
.alertの中で見出しを使う場合に初期化・カスタマイズの修正
2021/01/30
2Kに対応、1500px、2000pxの文字の大きさを追加。デザインは随時見直し
==================================*/
.panel-title {
font-size: 20px;
}
@media (min-width: 360px) {
.panel-title {
font-size: 22px;
}
}
@media (min-width: 568px) {
.panel-title {
font-size: 24px;
}
}
@media (min-width: 768px) {
.panel-title {
font-size: 22px;
}
}
@media (min-width: 992px) {
.panel-title {
font-size: 24px;
}
}
@media (min-width: 1200px) {
.panel-title {
font-size: 26px;
}
}
@media (min-width: 1500px) {
.panel-title {
font-size: 28px;
}
}
@media (min-width: 2000px) {
.panel-title {
font-size: 30px;
}
}
@media (min-width: 2500px) {
.panel-title {
font-size: 32px;
}
}
/* =============================
パネルのデザインを変える ここが一番始まり
枠（panel）の再設定
well,
jumbotronはアイキャッチ、bs_box（枠）,セクションでも併用しているのでここで一緒に再設定しないように注意
背景色つき枠（alert）送信フォームで使われている事が多いため、再設定しない
2019.03.02
読みやすさを優先
解像度毎に枠（パネル）内の相互余白の再設定
2019.03.03
メディアクエリ1200px以上パターンを追加
文字間詰め
2019.03.08
枠線のデザインはスタイルシートの色設定など順番の都合のため、後の方で設定する
2019.03.27
568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。
2019.04.01
外枠の調整で不要になったので568px時のメディアクエリをコメント化
2019.05.03
左右マージン調整
2019.05.18
パネルが連続する時の上のマージンを調整
2019.05.29
パネル内の文字処理にword-break: break-all;を追加。
これまでの折り返しがきちんと行われない問題が解決
2019/09/12
パネルの角をもっと丸める（4px→8px）
メディアクエリ毎の記述を削除
理由はパネルとアコーディオンパネルの形が同じだと区別ができないため
2019/09/18
パネルの上下マージンを広くする
空間がないと詰まって読みづらいと感じる
1.875em;で調整。
2019/09/21
アコーディオンパネルで使われる本文上に引いていたボーダー線を消す
見た目もいいとはいえなかったのが改善された。
【メモ】
.panel-group .panel-heading + .panel-collapse > .list-group,
.panel-group .panel-heading + .panel-collapse > .panel-body
アコーディオンパネルと別の所だったのでなかなかわからなかった。
2019/12/25
パネル線の太さは
「パネルのデザインを変える」で対応しています。
2019/12/25
パネルのタイトルの書体サイズ 360px 時を追加
2020/01/07
パネルのマージンを調整
モバイル端末時 上下1.875em 左右0.6em;
568px以上時 左右1em;
同時にマージンの記述方法を修正
2020/01/08
パネルの内側帯の角が目立たないように角丸めを7pxにする
outlineプロパティで作った枠線は角丸にすることができない
2020/07/22
パネル見出し（ヘッダー・フッター）の左右排他領域1emから0.5emへ
2020/07/22
パネルの左右マージン、モバイル端末568px画面未満時は1emから0.5emへ
margin: 1.875em 1em;→margin: 1.875em 0.5em
2020/07/22
.panelモバイル端末画面時とそれ以上の画面のマージン、排他余白を切り分ける
文字書式は後述している.alertと同じ
2020/07/22
.panelの排他余白は必ず0にする。アコーディオンパネルなどで共用しているためここを変えるとレイアウト崩れが発生する
2020/07/28
アコーディオンパネルで使うスタイルをこちらに置きっぱなし
nagamira_css4h.cssへ移動
2020/08/17
パネル枠線ボーダースタイルの値を別の所で指定できるように分離
下の方の「パネル枠線スタイル」を参照
ここでは基礎的なスタイルのみ指定
2020/09/27
パネルの角の丸めをアコーディオンパネルと合わせて7pxから4pxに
前は視覚的な区別がつきづらかったので角の丸めで区別していたが、今は視覚的に区別できるようになったので
アコーディオンパネル内でパネルを使うために線の太さと一緒に併せる
=============================*/
.panel {
padding: 0;
margin: 1.875em 0.5em;
border-color: transparent;
border-radius: 4px;
box-shadow: none;
background-color: inherit;
}
@media (min-width: 568px) {
.panel {
margin: 1.875em 1em;
}
}
/*2019.05.19 パネルが連続する時の上マージンを調整 通常は1em*/
.panel-group .panel+.panel {
margin-top: 0.8em;
}
/*
2020/10/19
panel関数に本文の行間の高さオプションを追加
line-height-lg|line-height-large
line-height-sm|line-height-small
*/
.line-height-large>.panel-body>p,
.line-height-lg>.panel-body>p {
line-height: 2.275em;
}
.line-height-small>.panel-body>p,
.line-height-sm>.panel-body>p {
line-height: 1.475em;
}
/*==================================
2019.03.08
パネルのデザインを変える
パネルの枠線のデザインを変える
パネル見出し内の排他領域を変える
このクラスはアコーディオンパネルでも使っているのでセレクタ宣言を区別できるようにしていく
2019/09/12
角の丸めを上位の方で統合
2019/09/16
パネル枠を太くする
見やすくするためとbs_boxとの識別
2019/12/25
パネル枠が太く画面がそれだけ大きくなってしまうので細くする
2020/08/17
パネル枠線ボーダースタイルの値を別の所で指定できるように分離
下の方の「パネル枠線スタイル」を参照
ここでは線の太さのみ指定
2020/08/18
パネル枠線ボーダー太さ修正、
オプション
narrow（2px）を追加（見送りコメントで）
bold（8px）を追加
boldは
double,groove,ridge,inset,outsetで利用を推奨
shadowを追加
パネル枠にbox-shadowを追加する
2020/09/16
パネル枠線の太さ可変を6段階をやめて、2，3，4pxに統合して、アコーディオンパネルと識別する
====================================*/
.panel {
border: 2px;
}
@media (min-width: 992px) {
.panel {
border: 3px;
}
}
@media (min-width: 1500px) {
.panel {
border: 4px;
}
}
/*
.panel.narrow{
border: 2px;
}
*/
/*
2020/10/03
.panel.boldの線の太さを可変にする
通常の枠線太さの倍とする
*/
.panel.bold{
border-width: 4px;
}
@media (min-width: 992px) {
.panel.bold {
border-width: 6px;
}
}
@media (min-width: 1500px) {
.panel.bold {
border-width: 8px;
}
}
.panel.shadow{
box-shadow: 3px 3px 4px #a7a7a7;
}
@media (min-width:768px) {
.panel.shadow {
box-shadow: 3px 3px 6px #a7a7a7;
}
}
/*====================================
2020/08/17
パネル枠線スタイル
dashed
破線で表示されます。
dotted
点線で表示されます。
solid
1本線で表示されます。
double
2本線で表示されます。
groove
立体的に窪んだ線で表示されます。
ridge
立体的に隆起した線で表示されます。
inset
上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
outset
上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。
hidden
ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はhiddenの値が優先されます。
none
ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
2020/10/12
パネル枠線スタイルを
.panel-title-outer>.panel-body
で指定できるように追加
====================================*/
.panel,
.panel.solid,
.panel-title-outer>.panel-body.solid{
border-style: solid;
}
.panel.dotted,
.panel-title-outer>.panel-body.dotted{
border-style: dotted;
}
.panel.dashed,
.panel-title-outer>.panel-body.dashed{
border-style: dashed;
}
.panel.double,
.panel-title-outer>.panel-body.double{
border-style: double;
}
.panel.groove,
.panel-title-outer>.panel-body.groove{
border-style: groove;
}
.panel.ridge,
.panel-title-outer>.panel-body.ridge{
border-style: ridge;
}
.panel.inset,
.panel-title-outer>.panel-body.inset{
border-style: inset;
}
.panel.outset,
.panel-title-outer>.panel-body.outset{
border-style: outset;
}
.panel.hidden,
.panel-title-outer>.panel-body.hidden{
border-style: hidden;
}
.panel.none,
.panel-title-outer>.panel-body.none{
border-style: none;
}
/*====================================
2019/09/07
メニュー用パネル内の書式をつくる
2020/07/22
メニュー用パネルの左右マージンを0にする
====================================*/
#menubar>div.qhm-plugin-panel.panel,
#menubar>div.qhm-bs-box.panel {
padding: 0px;
margin: 1em 0em;
}
/*
2019/09/07
メニュー用パネル内の箇条書きの線を消す場合以下を使う
通常はコメント扱い
*/
/*
#menubar > div.qhm-plugin-panel.panel > div > ul > li,
#menubar > div.qhm-bs-box.panel > div > ul > li{
border-top:none;
border-bottom:none;
}
*/
/*=============
2019/09/07
メニュー用パネル内の箇条書き、箇条書きへのマウスオーバーを回避
2019/09/11
メニュー用パネル内の文字色だけの要素へのマウスオーバーを回避
【注意】元のスタイルシートに作り込まれていた記述ミスの修正
2019/09/13
メニュー用パネル内の箇条書き、箇条書きについてはメニュー内で箇条書きを書こうとする方がおかしいと結論、元の状態に戻す。
=============*/
#menubar>div.qhm-plugin-panel.panel>div>ul>li:hover, #menubar>div.qhm-bs-box.panel>div>ul>li:hover, #menubar>ul.list1.list-group>li:hover {
background-color: rgba(233, 233, 233, .5);
color: #555;
}
/* ===============
パネルのデザインを変える
見出しつきパネル 上部 下部 の書体サイズ
2019.03.03
メディアクエリ1200px以上パターンを追加
2019.03.27
568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。
2019.09.03
ヘッダとフッタの書体を太くして見やすくした。
同時にユーザーがいちいち書体を太くする手間が省ける
2019.09.03
パネルのヘッダとフッタに黒縁取りを採用。読みやすくなった。
2019/09/19
パネルのヘッダとフッタの黒縁取りを取りやめ。
パネルを他のクラスと合わせて使うと縁取りがあったりなかったりするので
カスタマイズ項目とする。
ただし、別のマウスオーバー時の縁取りは問題ないのでそのまま適用する。
2019/12/29
解像度1500px以上の文字サイズを追加（複数）
2019/12/29
パネルのヘッダとフッタ解像度360未満のの文字サイズを追加
2019/12/29
パネルのヘッダとフッタの文字の大きさを2px大きくする
2020/10/06
パネルのヘッダとフッタの文字の大きさを2px小さくする
panel関数が修正できた事でパネル見出しの区別が容易にできるようになった事から調整
2021/01/30
2Kに対応、1500px、2000pxの文字の大きさを追加。デザインは随時見直し
2021/01/30
2Kに対応、2500pxの文字の大きさを追加。デザインは随時見直し
2021/08/31
【試作中】パネルのヘッダとフッタの文字の大きさをiphone7,8,SE2でも読みやすくする
大きさは段落と同じ
=============== */
.panel-heading, .panel-footer {
font-size: 20px;
font-weight: 700;
/*見出しつきパネルの縁取りを行う場合は以下を使う*/
/*text-shadow: rgb(10, 10, 10) 1px 0px 0px, rgb(10, 10, 10) 0.540302px 0.841471px 0px, rgb(10, 10, 10) -0.416147px 0.909297px 0px, rgb(10, 10, 10) -0.989992px 0.14112px 0px, rgb(10, 10, 10) -0.653644px -0.756802px 0px, rgb(10, 10, 10) 0.283662px -0.958924px 0px, rgb(10, 10, 10) 0.96017px -0.279415px 0px;*/
}
/*iphone5,SE*/
@media (min-width: 320px) {
.panel-heading, .panel-footer {
font-size: 24px;
}
}
/*Android*/
@media (min-width: 360px) {
.panel-heading, .panel-footer {
font-size: 20px;
}
}
/*iphone7,8,SE2*/
@media (min-width: 375px) {
.panel-heading, .panel-footer {
font-size: 24px;
}
}
/*モバイル横にした時*/
@media (min-width: 568px) {
.panel-heading, .panel-footer {
font-size: 26px;
}
}
@media (min-width: 768px) {
.panel-heading, .panel-footer {
font-size: 20px;
}
}
@media (min-width: 992px) {
.panel-heading, .panel-footer {
font-size: 22px;
}
}
@media (min-width: 1200px) {
.panel-heading, .panel-footer {
font-size: 24px;
}
}
@media (min-width: 1500px) {
.panel-heading, .panel-footer {
font-size: 26px;
}
}
@media (min-width: 2000px) {
.panel-heading, .panel-footer {
font-size: 28px;
}
}
@media (min-width: 2500px) {
.panel-heading, .panel-footer {
font-size: 30px;
}
}
/*==================================
2019．03．08
パネルのデザインを変える
見出しがあるパネルのヘッダとフッターの色を変える
線の円は見出しつき枠で使うので初期化を忘れずに
線は後で引く
2019.03.12
色の明度を落としてみた
2019.03.24灰色の明度を調整
2019/09/16枠ズレの問題を解消するためoutline:を導入
2019/09/18
.panel-heading,.panel-footerでborder-radius: 0;を削除。
任意に形を変えるため
2020/01/08
パネル見出し（ヘッダー・フッター）outlineをnoneにする
パネル見出し（ヘッダー・フッター）各色のoutline:属性の記述を廃止
2020/07/12
パネル系統にdefaultと同じ色のsecondaryをクラス追記、新色light、darkを追加
2020/07/29
セクションでのパネル見出し背景を半透明（7a）にする
2020/09/18
パネルの色を修正、infoとsuccess、defaultを色弱の場合にコントラスト差を強める
2020/09/19
パネルwarning見出し文字色を修正黒色に変更
2021/01/21
.panel-heading, .panel-footerのoutline属性復活にともない
前はなかったoutline-colorを追加
====================================*/
/* 該当する色オプションがない場合の予備として記述 色は任意で*/
.panel-heading, .panel-footer {
color: #fff;
background-color: #888888;
border-color: #888888;
outline-color: #888888;
}
.panel-nocolor>.panel-heading,
.panel-nocolor>.panel-footer {
color: #fff;
background-color: #c4c4c450;
border-color: #c4c4c450;
outline-color: #c4c4c450;
}
.panel-default>.panel-heading,
.panel-default>.panel-footer,
.panel-secondary>.panel-heading,
.panel-secondary>.panel-footer {
color: #fff;
background-color: #888888;
border-color: #888888;
outline-color: #888888;
}
.panel-info>.panel-heading,
.panel-info>.panel-footer {
color: #fff;
background-color: #36a2af;
border-color: #36a2af;
outline-color: #36a2af;
}
.panel-danger>.panel-heading,
.panel-danger>.panel-footer {
color: #fff;
background-color: #db6868;
border-color: #db6868;
outline-color: #db6868;
}
.panel-lightsolid.primary>.panel-heading,
.panel-lightsolid.primary>.panel-footer,
.panel-primary>.panel-heading,
.panel-primary>.panel-footer {
color: #fff;
background-color: #337ab7;
border-color: #337ab7;
outline-color: #337ab7;
}
.panel-success>.panel-heading,
.panel-success>.panel-footer {
color: #fff;
background-color: #409668;
border-color: #409668;
outline-color: #409668;
}
.panel-warning>.panel-heading,
.panel-warning>.panel-footer {
color: #13100a;
background-color: #ffc818;
border-color: #ffc818;
outline-color: #ffc818;
}
.panel-light>.panel-heading,
.panel-light>.panel-footer {
color: #13100a;
background-color: #efefef;
border-color: #efefef;
outline-color: #efefef;
}
.panel-dark>.panel-heading,
.panel-dark>.panel-footer {
color: #fff;
background-color: #353535;
border-color: #353535;
outline-color: #353535;
}
/*
2020/07/29
セクションでのパネル見出し背景を半透明(7a)にする
2020/09/18
パネルの色を修正、infoとsuccess、defaultを色弱の場合にコントラスト差を強める
2021/02/07
画面拡大時、セクションでのパネル見出しの枠線が拡大されて色差が出てしまうが、これはブラウザの仕様の問題。
それほど支障はないので保留
*/
section .panel-nocolor>.panel-heading,
section .panel-nocolor>.panel-footer {
background-color: #c4c4c47a;
border-color: #c4c4c47a;
outline-color: #c4c4c47a;
}
section .panel>.panel-heading,
section .panel>.panel-footer,
section .panel-default>.panel-heading,
section .panel-default>.panel-footer,
section .panel-secondary>.panel-heading,
section .panel-secondary>.panel-footer {
background-color: #8888887a;
border-color: #8888887a;
outline-color: #8888887a;
}
section .panel-info>.panel-heading,
section .panel-info>.panel-footer {
background-color: #36a2af7a;
border-color: #36a2af7a;
outline-color: #36a2af7a;
}
section .panel-danger>.panel-heading,
section .panel-danger>.panel-footer {
background-color: #db68687a;
border-color: #db68687a;
outline-color: #db68687a;
}
section .panel-primary>.panel-heading,
section .panel-primary>.panel-footer {
background-color: #337ab77a;
border-color: #337ab77a;
outline-color: #337ab77a;
}
section .panel-success>.panel-heading,
section .panel-success>.panel-footer {
background-color: #4096687a;
border-color: #4096687a;
outline-color: #4096687a;
}
section .panel-warning>.panel-heading,
section .panel-warning>.panel-footer {
background-color: #ffc8187a;
border-color: #ffc8187a;
outline-color: #ffc8187a;
}
section .panel-light>.panel-heading,
section .panel-light>.panel-footer {
background-color: #efefef7a;
border-color: #efefef7a;
outline-color: #efefef7a;
}
section .panel-dark>.panel-heading,
section .panel-dark>.panel-footer {
background-color: #3535357a;
border-color: #3535357a;
outline-color: #3535357a;
}
/*==================================
2019.03.19
パネル見出し（ヘッダー・フッター）での上下余白が大きすぎるので調整
padding: 10px 15px;→padding: 6px 1em;
2019/12/30
パネル見出し（ヘッダー・フッター）上下余白を完全可変に
padding: 6px 1em;→padding: .3em 1em;
でも大きすぎたので再度調整
padding: .3em 1em;
↓
padding: .1em 1em;
line-height: 1.3em;
2020/01/07
パネル見出し（ヘッダー・フッター）のタイトル書体を太字にする
アルファベットが細字になってしまう場合があるので
2020/01/08
パネル見出し（ヘッダー・フッター）の排他領域上下を.1emから.2emへ
2020/07/22
パネル見出し（ヘッダー・フッター）の左右排他領域排他領域1emから0.5emへ
2020/07/29
パネル見出し（ヘッダー・フッター）ボーダー下線を0pxにする。
透明にしても見えてしまうため
2020/09/01
パネル見出し（ヘッダー・フッター）排他領域上下を.2emから.1emへ
他の所で調整して余白がすこし大きくなったので調整
2020/10/03
パネル見出し（ヘッダー・フッター）のborder-radiusを全ての角で 0pxへ
2020/10/18
panel関数の引数
見出しの上下余白高さオプションを追加
heading-large、heading-lg
heading-small、heading-sm
2021/01/21
outlineを復活
outline: 1px solid;とする
前は不要と削除していたが、WEBサイトを拡大すると内枠が拡大してしまうため
今後のモニタの解像度拡大の傾向で判断
2021/09/07
モバイル画面でのパネル見出し（ヘッダー・フッター）排他領域上下を.1emになるように調整
====================================*/
.panel-heading, .panel-footer {
FONT-WEIGHT: 700;
padding: 0.1em 0.5em;
line-height: 1.3em;
border-radius: 0px;
box-shadow: none;
outline: 1px solid;
}
@media (min-width: 568px) {
.panel-heading, .panel-footer {
padding: .3em 0.5em;
}
}
.heading-large>.panel-heading,
.heading-large>.panel-footer,
.heading-lg>.panel-heading,
.heading-lg>.panel-footer {
padding: .6em 0.5em;
}
.heading-small>.panel-heading,
.heading-small>.panel-footer,
.heading-sm>.panel-heading,
.heading-sm>.panel-footer {
padding: 0.1em 0.5em;
}
/*====================================
先に引いたパネルの種類別に線の色を指定する
2019.03.12色の明度を落としてみた
2019.03.24灰色の明度を調整
2019.04.01全体の色彩を調整
2020/07/12
パネル系統にdefaultと同じ色のsecondary、新色としてlight、darkを追加
2020/07/29
セクションでのパネル枠線を半透明にする
2020/07/29
panel関数で使われる.panel-[色名] の他に
bs_box関数のクラス指定でpanelを指定しても使えるようにクラス名.panel.[色名] を追加
こちらは用途がはっきりしているのでまとめない。
2020/09/01
bs_box関数のクラス指定で透明（transparent）を指定できるように追加
ただし、パネルの目的からすると微妙
2020/09/18
パネルの色を修正、infoとsuccess、defaultを色弱の場合にコントラスト差を強める
2020/10/03
panel関数内で 色名の後に「bold」を指定した時のために.boldクラスを追加
2020/10/08
panelの無指定時の枠線色を薄いグレーから#888888に修正
2020/10/03
panel関数内で panel-title-outer 時「bold」を指定した時のために.boldクラスを追加
2021/02/01
.panel.successの色記述ミスでinfoの色になっていたのを修正
====================================*/
.panel {
border-color: #888888;
}
.panel.transparent{
border-color: transparent;
}
.panel-nocolor,
.panel-nocolor.bold,
.panel.nocolor {
border-color: #c4c4c450;
}
.panel-default,
.panel-secondary,
.panel-default.bold,
.panel-secondary.bold,
.panel.default,
.panel.secondary {
border-color: #888888;
}
.panel-info,
.panel-info.bold,
.panel.info {
border-color: #36a2af;
}
.panel-danger,
.panel-danger.bold,
.panel.danger {
border-color: #db6868;
}
.panel-primary,
.panel-primary.bold,
.panel.primary {
border-color: #337ab7;
}
.panel-success,
.panel-success.bold,
.panel.success {
border-color: #409668;
}
.panel-warning,
.panel-warning.bold,
.panel.warning {
border-color: #ffc818;
}
.panel-light,
.panel-light.bold,
.panel.light {
border-color: #efefef;
}
.panel-dark,
.panel-dark.bold,
.panel.dark {
border-color: #353535;
}
/*
2020/07/29
セクションでのパネル枠線を半透明（7a）にする
*/
section .panel-nocolor,
section .panel.nocolor {
border-color: #c4c4c47a;
}
section .panel,
section .panel-default,
section .panel-secondary {
border-color: #8888887a;
}
section .panel-info {
border-color: #36a2af7a;
}
section .panel-danger {
border-color: #db68687a;
}
section .panel-primary {
border-color: #337ab77a;
}
section .panel-success {
border-color: #4096687a;
}
section .panel-warning {
border-color: #ffc8187a;
}
section .panel-light {
border-color: #efefef7a;
}
section .panel-dark {
border-color: #3535357a;
}
/*==================================
2019/10/28
背景色を使いたい場合、
クラス指定で「background-color」を追記する。
#html2(
)
2020/07/12
パネル系統にdefaultと同じ色のsecondary、新色としてlight、darkを追加
2020/09/18
パネルの色を修正、infoとsuccess、defaultを色弱の場合にコントラスト差を強める
====================================*/
.panel-bk-color {
background-color: #c4c4c450;
}
.panel-default-bk-color,
.panel-secondary-bk-color {
background-color: #99999950;
}
.panel-info-bk-color {
background-color: #36a2af50;
}
.panel-danger-bk-color {
background-color: #db686850;
}
.panel-primary-bk-color {
background-color: #337ab750;
}
.panel-success-bk-color {
background-color: #40966850;
}
.panel-warning .background-color {
background-color: #ffc81850;
}
.panel-light .background-color {
background-color: #efefef50;
}
.panel-dark .background-color {
background-color: #1b1e2150;
}
/* ======================
以上
panelクラス パネル設定
2019.03.23
======================*/
/*==================================
2019.03.27
背景色つき枠の親となる.alertクラスの左右マージンの調整
2019/12/30
マージン、排他領域の修正 ピクセル指定からem指定へ
2020/07/09
.alert書式の修正
2020/07/13
.alert内で段落と段落が連結した際の上下マージンを1.5emに調整
2020/07/17
.alert左右マージンをいい具合になるよう調整
2020/07/20
.alert左右マージンを0.2emに
2020/07/22
.alertモバイル端末画面時とそれ以上の画面のマージン、排他余白を切り分ける
文字書式は前述している.panelと同じ
2020/08/01
パネル、アラートボックスが入れ子になった時のマージン
ただし、2階層まで。それ以上はデザインに無理があるのでやめよう
2020/08/08
アラートボックス内の段落のマージンが小さくて窮屈なので調整
2020/09/04
アラートボックス内の段落の排他領域、モバイル画面時時のを0.5emから0.3emへ小さくする
====================================*/
.alert {
border: 1px solid transparent;
padding: 0.3em;
margin: 0.5em 0.5em 0.5em;
border: 1px solid transparent;
border-radius: 6px;
}
@media (min-width: 568px) {
.alert {
padding: 0.5em;
margin: 1.2em 1em 1.2em;
}
}
/*
パネル、アラートボックスが入れ子になった時のマージンを切り替える
ただし、2階層以上は記述が難解に無理があるのでやめよう
入れ子になった時はwidthをautoに切り替えることで、横幅をあわせる
2020/08/08
パネル、アラートボックスが入れ子になった時
上下マージンを1emへ 横マージンを0.5emから0.1emへと若干狭くする
これによってpanel枠とアラートボックスの区別をつけて枠を二重枠にする事ができる
2020/08/08
パネルのみ「パネル パネル」と入れ子になった時、自動で内側のマージンを0にします。
2020/08/10
パネルが上下に隣り合った場合、下のパネルの上マージンを0.8emに増やす
2020/10/06
見出しが枠の外側にあるpanel-title-outerが入れ子になっている時のマージンを設定
*/
.panel .alert,
.alert .panel,
.alert .alert{
margin:1em 0.1em;
}
.panel .panel{
margin:0em;
}
.panel+.panel{
margin-top:0.8em;
}
.panel-title-outer .panel-title-outer{
margin: 2em 0em;
}
@media (min-width: 568px) {
.panel-title-outer .panel-title-outer{
margin: 2em 0em;
}
}
/*通常のパネル内に入れ子になった場合*/
.panel .panel-title-outer{
margin: 1.8em 0em;
}
/*panel-title-outer shadowを無効にする*/
.panel-title-outer.shadow{
box-shadow: none;
}
/*
panel-title-outerb 外側枠線の装飾を無効にする
*/
.panel-title-outer.bold,
.panel-title-outer.dotted,
.panel-title-outer.dashed,
.panel-title-outer.double,
.panel-title-outer.groove,
.panel-title-outer.ridge,
.panel-title-outer.inset,
.panel-title-outer.inset,
.panel-title-outer.outset{
border: none;
}
.haik-menu .alert,
.hail-article .alert {
margin-left: 0em;
margin-right: 0em;
}
.alert>p, .alert>ul {
margin: 0.5em;
line-height: 1.8em;
font-weight: 700;
}
.alert>p+p {
margin-top: 1.5em;
}
.close {
float: right;
font-size: 24px;
font-weight: 700;
line-height: 1.5em;
color: #000;
text-shadow: 1px 1px 0px #fff;
opacity: .8;
}
/*==================================
2020/07/10
.alertのスタイル
Boostrap4で追加された新しい色を移植
色は調整
====================================*/
.alert-primary {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
.alert-default,
.alert-secondary {
color: #383d41;
background-color: #e2e3e5;
border-color: #d6d8db;
}
.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}
.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
.alert-warning {
color: #5f4417;
background-color: #ffeeba;
border-color: #ffe48d;
}
.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.alert-light {
color: #505050;
background-color: #fdfdfe;
border-color: #efefef;
}
.alert-dark {
color: #1b1e21;
background-color: #d6d8d9;
border-color: #c6c8ca;
}
/*==================================
2019.03.30
背景色つき枠のデザインを変える
クラス .panel-bright
背景がうすく色がかかっている。文字が黒い。
2019.05.03
継承クラス .panel-bright .panel-defaultで角の丸めを0にしていたのを修正
2019/09/12
継承クラス .panel-bright で背景色の透明度を統一
例 #aaaaaa17; 左から6桁が色、その次の2桁が透明度を表す
2020/07/12
パネル系統にdefaultと同じ色のsecondaryをクラス追記、新色light、darkを追加
2020/07/13
背景色つき枠のデザインを変える
#html2(
)で囲まなくても良いように
bs_boxのクラス指定でも書けるようにした。ただ、引数が複数あると混乱するので予備・隠し機能とする
#bs_box(class=panel-bright default)
{
クラス panel-bright default
}
2020/07/29
panel-brightクラス darkの枠線色を変える
2020/08/12
panel-brightクラス指定なしを追加、
.panel-brightクラスが複数あり、用途もはっきりしないものを統合へ
ここをコメントにして、問題なければ消す。
2020/09/18
パネルの色を修正、infoとsuccess、defaultを色弱の場合にコントラスト差を強める
====================================*/
/*
.panel-bright,
.panel-bright .panel-default,
.panel-bright .panel-secondary,
.panel-bright.default,
.panel-bright.secondary {
color: #333;
background-color: #aaaaaa17;
border-color: #999;
}
.panel-bright .panel-info,
.panel-bright.info {
color: #333;
background-color: #36a2af17;
border-color: #36a2af;
}
.panel-bright .panel-danger,
.panel-bright.danger {
color: #333;
background-color: #db686817;
border-color: #db6868;
}
.panel-bright .panel-primary,
.panel-bright.primary {
color: #333;
background-color: #337ab717;
border-color: #337ab7;
}
.panel-bright .panel-success,
.panel-bright.success {
color: #333;
background-color: #40966817;
border-color: #409668;
}
.panel-bright .panel-warning,
.panel-bright.warning {
color: #333;
background-color: #fdc10017;
border-color: #fdc100;
}
.panel-bright .panel-light,
.panel-bright.light {
color: #333;
background-color: #efefef17;
border-color: #efefef;
}
.panel-bright .panel-dark,
.panel-bright.dark{
color: #333;
background-color: #1b1e2117;
border-color: #555555;
}
*/
/*
2020/08/12
.panel-bright-borderクラスの追加
旧panel-light-borderの名称変更
2020/10/02
panel-bright-borderクラスに見出しつきパネル指定時の見出し装飾クラスを追加
panel関数で引数指定ができるようにする
2021/01/31
outline-color属性の追加
拡大した時に間ができないようにするため
*/
/* クラスの障害に備えた宣言 */
.panel-bright-border .panel {
color: #333;
border-color: #c4c4c4;
}
.panel-bright-border,
.panel-bright-border .panel-default,
.panel-bright-border .panel-secondary,
.panel-bright-border.default,
.panel-bright-border.secondary {
border-color: #aaaaaa;
}
.panel-bright-border>.panel-heading,
.panel-bright-border.default>.panel-heading,
.panel-bright-border.secondary>.panel-heading,
.panel-bright-border>.panel-footer,
.panel-bright-border.default>.panel-footer,
.panel-bright-border.secondary>.panel-footer{
color: #333;
background-color: #cecece;
outline-color:#cecece;
border-color: #aaaaaa;
}
.panel-bright-border .panel-info,
.panel-bright-border.info {
border-color: #109eb3;
}
.panel-bright-border.info>.panel-heading,
.panel-bright-border.info>.panel-footer {
color: #333;
background-color: #75d4e2;
outline-color:#75d4e2;
border-color: #109eb3;
}
.panel-bright-border .panel-danger,
.panel-bright-border.danger {
border-color: #fc5f62;
}
.panel-bright-border.danger>.panel-heading,
.panel-bright-border.danger>.panel-footer {
color: #333;
background-color: #ffb8b9;
outline-color:#ffb8b9;
border-color: #fc5f62;
}
.panel-bright-border .panel-primary,
.panel-bright-border.primary {
border-color: #308bda;
}
.panel-bright-border.primary>.panel-heading,
.panel-bright-border.primary>.panel-footer {
color: #333;
background-color: #b4dcff;
outline-color:#b4dcff;
border-color: #308bda;
}
.panel-bright-border .panel-success,
.panel-bright-border.success {
border-color: #00A784;
}
.panel-bright-border.success>.panel-heading,
.panel-bright-border.success>.panel-footer {
color: #333;
background-color: #57dabf;
outline-color:#57dabf;
border-color: #00A784;
}
.panel-bright-border .panel-warning,
.panel-bright-border.warning {
border-color: #fdc100;
}
.panel-bright-border.warning>.panel-heading,
.panel-bright-border.warning>.panel-footer {
color: #333;
background-color: #ffe285;
outline-color:#ffe285;
border-color: #fdc100;
}
.panel-bright-border .panel-light,
.panel-bright-border.light {
border-color: #efefef;
}
.panel-bright-border.light>.panel-heading,
.panel-bright-border.light>.panel-footer {
color: #333;
background-color: #f7f7f7;
outline-color:#f7f7f7;
border-color: #efefef;
}
.panel-bright-border .panel-dark,
.panel-bright-border.dark {
border-color: #555555;
}
.panel-bright-border.dark>.panel-heading,
.panel-bright-border.dark>.panel-footer {
color: #fff;
background-color: #8a8a8a;
outline-color:#8a8a8a;
border-color: #555555;
}
/*==================================
2019.05.20
背景色つき枠のデザインを変える
クラス .panel-lightsolidを追加
背景がうすく色がかかっている。文字が黒い。枠線が背景と同じ色
2019.05.03
継承クラス .panel-bright .panel-defaultで角の丸めを0にしていたのを修正
2020/07/12
パネル系統にdefaultと同じ色のsecondaryをクラス追記、新色light、darkを追加
2020/07/13
背景色つき枠のデザインを変える
#html2(
)で囲まなくても良いように
bs_boxのクラス指定でも書けるようにした。
#bs_box(class=panel-lightsolid default)
{
クラス panel-lightsolid default
}
2020/07/30
panel-lightsolidの枠線を透明にする
2020/08/15
.panel-lightsolidをpanel-brightに移行、
2020/08/15
.panel-lightsolidの用途がはっきりしない似たクラスが複数あると引数指定で混乱するのでまとめる
2020/08/15
セクション内でのpanel-lightsolidクラスの文字色、背景色を自動調整
2020/09/10
.panel-lightsolidの色を調整。青みがかかっていたsuccessなどを本来の色に合わせた
2020/09/18
パネルの色を修正、infoとsuccess、defaultを色弱の場合にコントラスト差を強める
2020/10/02
panel-lightsolidクラスに見出しつきパネル指定時の見出し装飾クラスを追加
panel関数で引数指定ができるようにする
2020/10/03
セクション内でのpanel-lightsolidクラスに見出しつきパネルの色調整
背景画像によっては読みづらいかもしれない
透明度 ab→スマホでは濃すぎる 70→で様子を見る
2021/01/31
outline-color属性の追加
拡大した時に間ができないようにするため
====================================*/
.panel-lightsolid,
.panel-lightsolid.default,
.panel-lightsolid.secondary,
.panel-lightsolid>.panel-heading,
.panel-lightsolid.default>.panel-heading,
.panel-lightsolid.secondary>.panel-heading,
.panel-lightsolid>.panel-footer,
.panel-lightsolid.default>.panel-footer,
.panel-lightsolid.secondary>.panel-footer {
color: #333;
background-color: #99999930;
border-color: transparent;
outline-color: #99999930;
}
.panel-lightsolid.info,
.panel-lightsolid.info>.panel-heading,
.panel-lightsolid.info>.panel-footer {
color: #333;
background-color: #36a2af30;
outline-color: #36a2af30;
border-color: transparent;
}
.panel-lightsolid.danger,
.panel-lightsolid.danger>.panel-heading,
.panel-lightsolid.danger>.panel-footer {
color: #333;
background-color: #db686830;
outline-color: #db686830;
border-color: transparent;
}
.panel-lightsolid.primary,
.panel-lightsolid.primary>.panel-heading,
.panel-lightsolid.primary>.panel-footer {
color: #333;
background-color: #337ab730;
outline-color: #337ab730;
border-color: transparent;
}
.panel-lightsolid.success,
.panel-lightsolid.success>.panel-heading,
.panel-lightsolid.success>.panel-footer {
color: #333;
background-color: #40966830;
outline-color: #40966830;
border-color: transparent;
}
.panel-lightsolid.warning,
.panel-lightsolid.warning>.panel-heading,
.panel-lightsolid.warning>.panel-footer {
color: #333;
background-color: #fdc10030;
outline-color: #fdc10030;
border-color: transparent;
}
.panel-lightsolid.light,
.panel-lightsolid.light>.panel-heading,
.panel-lightsolid.light>.panel-footer {
color: #333;
background-color: #efefef30;
outline-color: #efefef30;
border-color: transparent;
}
.panel-lightsolid.dark,
.panel-lightsolid.dark>.panel-heading,
.panel-lightsolid.dark>.panel-footer {
color: #333;
background-color: #1b1e2130;
outline-color: #1b1e2130;
border-color: transparent;
}
/*セクション内でのpanel-lightsolidクラスの文字色、背景色を自動調整*/
section .panel-lightsolid,
section .panel-lightsolid.default,
section .panel-lightsolid.secondary {
color: #111;
background-color: #aaaaaa70;
outline-color: #aaaaaa70;
border-color: transparent;
}
section .panel-lightsolid.info {
color: #e9e9e9;
background-color: #36a2af70;
outline-color: #36a2af70;
}
section .panel-lightsolid.danger {
color: #111;
background-color: #db686870;
outline-color: #db686870;
}
section .panel-lightsolid.primary {
color: #e9e9e9;
background-color: #337ab770;
outline-color: #337ab770;
}
section .panel-lightsolid.success {
color: #e9e9e9;
background-color: #40966870;
outline-color: #40966870;
}
section .panel-lightsolid.warning {
color: #111;
background-color: #ffc81870;
outline-color: #ffc81870;
}
section .panel-lightsolid.light {
color: #111;
background-color: #efefef70;
outline-color: #efefef70;
}
section .panel-lightsolid.dark {
color: #e9e9e9;
background-color: #1b1e2170;
outline-color: #1b1e2170;
}
section .panel-lightsolid>.panel-heading,
section .panel-lightsolid.default>.panel-heading,
section .panel-lightsolid.secondary>.panel-heading,
section .panel-lightsolid>.panel-footer,
section .panel-lightsolid.default>.panel-footer,
section .panel-lightsolid.secondary>.panel-footer {
color: #111;
background-color: #aaaaaa70;
outline-color: #aaaaaa70;
}
section .panel-lightsolid.info>.panel-heading,
section .panel-lightsolid.info>.panel-footer {
color: #e9e9e9;
background-color: #36a2af70;
outline-color: #36a2af70;
}
section .panel-lightsolid.danger>.panel-heading,
section .panel-lightsolid.danger>.panel-footer {
color: #111;
background-color: #db686870;
outline-color: #db686870;
}
section .panel-lightsolid.primary>.panel-heading,
section .panel-lightsolid.primary>.panel-footer {
color: #e9e9e9;
background-color: #337ab770;
outline-color: #337ab770;
}
section .panel-lightsolid.success>.panel-heading,
section .panel-lightsolid.success>.panel-footer {
color: #e9e9e9;
background-color: #40966870;
outline-color: #40966870;
}
section .panel-lightsolid.warning>.panel-heading,
section .panel-lightsolid.warning>.panel-footer {
background-color: #ffc81870;
outline-color: #ffc81870;
}
section .panel-lightsolid.light>.panel-heading,
section .panel-lightsolid.light>.panel-footer {
background-color: #efefef70;
outline-color: #efefef70;
}
section .panel-lightsolid.dark>.panel-heading,
section .panel-lightsolid.dark>.panel-footer {
color: #e9e9e9;
background-color: #1b1e2170;
outline-color: #1b1e2170;
}
/*==================================
2019.03.30
背景色つき枠のデザインを変える
背景が濃く色がかかっている。文字が白い。
クラス .panel-solid
2020/07/12
パネル系統にdefaultと同じ色のsecondaryをクラス追記、新色light、darkを追加
2020/07/13
背景色つき枠のデザインを変える
#html2(
)で囲まなくても良いように
bs_boxのクラス指定でも書けるようにした。
ただ、引数が複数あると混乱するので予備・隠し機能とする
#bs_box(class=panel-solid default)
{
クラス panel-solid default
}
2020/08/01
border-radius: 0px;の削除忘れを消す
グレーの枠が他の枠と角丸めが異なっていた事を修正
2020/08/05
背景色つき枠（塗りつぶし枠）オレンジ枠の文字を黒色に修正
2020/08/12
.panel-solid（色未指定）を追加
2020/08/15
.panel-solid セクション内で自動適用されるスタイルを追加
2020/08/15
.panel-solidの用途がはっきりしない似たクラスが複数あると引数指定で混乱するのでまとめる
2020/09/10
warningがオレンジ色すぎるとの指摘
山吹色に近い#ffdf36に修正
2020/09/18
パネルの色を修正、infoとsuccess、defaultを色弱の場合にコントラスト差を強める
2020/10/09
パネルpanel-solidクラスにpanel-headingとpanel-footerの背景色を追加
panel.inc.phpの修正に伴う措置
2021/01/31
outline-color属性の追加
拡大した時に間ができないようにするため
====================================*/
.panel-solid>.panel-heading,
.panel-solid>.panel-footer{
color: #333;
background-color: #e0e0e0;
outline-color:#e0e0e0;
border-color: #e0e0e0;
}
.panel-solid,
.panel-solid.default,
.panel-solid.secondary
{
color: #fff;
background-color: #999;
border-color: #999;
}
.panel-solid>.panel-heading,
.panel-solid.default>.panel-footer,
.panel-solid.secondary>.panel-footer,
.panel-solid>.panel-footer,
.panel-solid.default>.panel-footer,
.panel-solid.secondary>.panel-footer{
color: #fff;
background-color: #717070;
outline-color:#717070;
border-color: #999;
}
.panel-solid.info {
color: #fff;
background-color: #36a2af;
border-color: #36a2af;
}
.panel-solid.info>.panel-heading,
.panel-solid.info>.panel-footer{
color: #fff;
background-color: #277d88;
outline-color:#277d88;
border-color: #36a2af;
}
.panel-solid.danger {
color: #fff;
background-color: #db6868;
border-color: #db6868;
}
.panel-solid.danger>.panel-heading,
.panel-solid.danger>.panel-footer{
color: #fff;
background-color: #c14949;
outline-color:#c14949;
border-color: #db6868;
}
.panel-solid.primary {
color: #fff;
background-color: #337ab7;
border-color: #337ab7;
}
.panel-solid.primary>.panel-heading,
.panel-solid.primary>.panel-footer{
color: #fff;
background-color: #215c8e;
outline-color:#215c8e;
border-color: #337ab7;
}
.panel-solid.success {
color: #fff;
background-color: #409668;
border-color: #409668;
}
.panel-solid.success>.panel-heading,
.panel-solid.success>.panel-footer{
color: #fff;
background-color: #267b4e;
outline-color:#267b4e;
border-color: #409668;
}
.panel-solid.warning {
color: #333;
background-color: #ffc818;
border-color: #ffc818;
}
.panel-solid.warning>.panel-heading,
.panel-solid.warning>.panel-footer{
color: #333;
background-color: #eab201;
outline-color:#eab201;
border-color: #ffc818;
}
.panel-solid.light {
color: #333;
background-color: #f5f5f5;
border-color: #f5f5f5;
}
.panel-solid.light>.panel-heading,
.panel-solid.light>.panel-footer{
color: #333;
background-color: #e0e0e0;
outline-color:#e0e0e0;
border-color: #f5f5f5;
}
.panel-solid.dark {
color: #fff;
background-color: #353535;
border-color: #353535;
}
.panel-solid.dark>.panel-heading,
.panel-solid.dark>.panel-footer{
color: #fff;
background-color: #616161;
outline-color:#616161;
border-color: #353535;
}
/*
セクション内での背景色つき枠,背景に色がかかっているパネル表示
透明度 9C
*/
section .panel-solid,
section .panel-solid.default,
section .panel-solid.secondary {
color: #fff;
background-color: #5050509c;
border-color: #9999999C;
}
section .panel-solid>.panel-heading,
section .panel-solid.default>.panel-footer,
section .panel-solid.secondary>.panel-footer,
section .panel-solid>.panel-footer,
section .panel-solid.default>.panel-footer,
section .panel-solid.secondary>.panel-footer{
color: #fff;
background-color: #7170709C;
outline-color:#7170709C;
border-color: #9999999C;
}
section .panel-solid.info {
color: #fff;
background-color: #36a2af9C;
border-color: #36a2af9C;
}
section .panel-solid.info>.panel-heading,
section .panel-solid.info>.panel-footer{
color: #fff;
background-color: #277d889C;
outline-color:#7170709C;
border-color: #36a2af9C;
}
section .panel-solid.danger {
color: #fff;
background-color: #db68689C;
border-color: #db68689C;
}
section .panel-solid.danger>.panel-heading,
section .panel-solid.danger>.panel-footer{
color: #fff;
background-color: #c149499C;
outline-color:#7170709C;
border-color: #db68689C;
}
section .panel-solid.primary {
color: #fff;
background-color: #337ab79C;
border-color: #337ab79C;
}
section .panel-solid.primary>.panel-heading,
section .panel-solid.primary>.panel-footer{
color: #fff;
background-color: #215c8e9C;
outline-color:#215c8e9C;
border-color: #337ab79C;
}
section .panel-solid.success {
color: #fff;
background-color: #4096689C;
outline-color:#4096689C;
border-color: #4096689C;
}
section .panel-solid.success>.panel-heading,
section .panel-solid.success>.panel-footer{
color: #fff;
background-color: #267b4e9C;
outline-color:#267b4e9C;
border-color: #4096689C;
}
section .panel-solid.warning {
color: #333;
background-color: #ffc8189C;
outline-color:#ffc8189C;
border-color: #ffc8189C;
}
section .panel-solid.warning>.panel-heading,
section .panel-solid.warning>.panel-footer{
color: #333;
background-color: #eab2019C;
outline-color:#eab2019C;
border-color: #ffc8189C;
}
section .panel-solid.light {
color: #333;
background-color: #f5f5f59C;
border-color: #f5f5f59C;
}
section .panel-solid.light>.panel-heading,
section .panel-solid.light>.panel-footer{
color: #333;
background-color: #e0e0e09C;
outline-color:#e0e0e09C;
border-color: #f5f5f59C;
}
section .panel-solid.dark {
color: #fff;
background-color: #3535359C;
border-color: #3535359C;
}
section .panel-solid.dark>.panel-heading,
section .panel-solid.dark>.panel-footer{
color: #fff;
background-color: #6161619C;
outline-color:#6161619C;
border-color: #3535359C;
}
/*==================================
2019.04.04
背景色つき枠,背景に色がかかっている彩度が高いバージョン
灰色、オレンジで文字色を黒にしている。
クラス .panel-solid-bright
【使い方】
#html2で
タグで囲んで使う
【例】
#html2(
)
#bs_box{{
グレーの背景の枠です
}}
#bs_box(panel,info){{
水色の背景の枠です
}}
#bs_box(panel,success){{
緑色の背景の枠です
}}
#bs_box(panel,primary){{
紺色の背景の枠です
}}
#bs_box(panel,warning){{
黄色の背景の枠です
}}
#bs_box(panel,danger){{
赤色の背景の枠です
}}
#html2(
)
2020/07/12
パネル系統にdefaultと同じ色のsecondaryをクラス追記、新色light、darkを追加
2020/07/13
背景色つき枠のデザインを変える
#html2(
)で囲まなくても良いように
bs_boxのクラス指定でも書けるようにした。
ただ、引数が複数あると混乱するので予備・隠し機能とする
#bs_box(class=panel-solid default)
{
クラス panel-solid default
}
2020/08/01
border-radius: 0px;の削除忘れを消す
グレーの枠が他の枠と角丸めが異なっていた事を修正
2020/08/15
.panel-solid-bright セクション内で自動適用されるスタイルを追加
2020/08/15
.panel-solid-brightの用途がはっきりしない似たクラスが複数あると引数指定で混乱するのでまとめる
2020/10/03
.panel-solid-bright ヘッダフッタ装飾を追加
色の調整中
2021/01/31
outline-color属性の追加
拡大した時に間ができないようにするため
====================================*/
.panel-solid-bright,
.panel-solid-bright.default,
.panel-solid-bright.secondary{
color: #333;
background-color: #d9d9d9;
border-color: #d9d9d9;
}
.panel-solid-bright>.panel-heading,
.panel-solid-bright.default>.panel-heading,
.panel-solid-bright.secondary>.panel-heading,
.panel-solid-bright>.panel-footer,
.panel-solid-bright.default>.panel-footer,
.panel-solid-bright.secondary>.panel-footer {
color: #fff;
background-color: #8e8e8e;
outline-color:#8e8e8e;
border-color: #f5f5f5;
}
.panel-solid-bright.info{
color: #fff;
background-color: #109eb3;
border-color: #109eb3;
}
.panel-solid-bright.info>.panel-heading,
.panel-solid-bright.info>.panel-footer {
color: #fff;
background-color: #1d7c8a;
outline-color:#1d7c8a;
border-color: #89e4ef;
}
.panel-solid-bright.danger{
color: #fff;
background-color: #fc5f62;
border-color: #fc5f62;
}
.panel-solid-bright.danger>.panel-heading,
.panel-solid-bright.danger>.panel-footer {
color: #fff;
background-color: #ca3c3e;
outline-color:#ca3c3e;
border-color: #f5f5f5;
}
.panel-solid-bright.primary{
color: #fff;
background-color: #308bda;
border-color: #308bda;
}
.panel-solid-bright.primary>.panel-heading,
.panel-solid-bright.primary>.panel-footer {
color: #fff;
background-color: #1066b1;
outline-color:#1066b1;
border-color: #90ccff;
}
.panel-solid-bright.success{
color: #fff;
background-color: #00A784;
border-color: #00A784;
}
.panel-solid-bright.success>.panel-heading,
.panel-solid-bright.success>.panel-footer {
color: #fff;
background-color: #02886c;
outline-color:#02886c;
border-color: #8cffc2;
}
.panel-solid-bright.warning{
color: #111;
background-color: #ffc818;
border-color: #ffc818;
}
.panel-solid-bright.warning>.panel-heading,
.panel-solid-bright.warning>.panel-footer {
color: #111;
background-color: #f3b900;
outline-color:#f3b900;
border-color: #2b2b2b;
}
.panel-solid-bright.light {
color: #111;
background-color: #fcfcfc;
border-color: #999;
}
.panel-solid-bright.light>.panel-heading,
.panel-solid-bright.light>.panel-footer {
color: #111;
background-color: #f5f5f5;
outline-color:#f5f5f5;
border-color: #999;
}
.panel-solid-bright.dark{
color: #fff;
background-color: #111;
border-color: #777;
}
.panel-solid-bright.dark>.panel-heading,
.panel-solid-bright.dark>.panel-footer {
color: #fff;
background-color: #333;
outline-color:#333;
border-color: #ffc818;
}
/*
セクション内での背景色つき枠,背景に色がかかっているパネル表示
2020/10/03
.panel-solid-bright ヘッダフッタを追加
*/
section .panel-solid-bright,
section .panel-solid-bright.default,
section .panel-solid-bright.secondary {
color: #111;
background-color: #d9d9d99c;
border-color: #d9d9d99c;
}
section .panel-solid-bright.info {
color: #fff;
background-color: #109eb39c;
border-color: #109eb39c;
}
section .panel-solid-bright.danger {
color: #fff;
background-color: #fc5f629c;
border-color: #fc5f629c;
}
section .panel-solid-bright.primary {
color: #fff;
background-color: #308bda9c;
border-color: #308bda9c;
}
section .panel-solid-bright.success {
color: #fff;
background-color: #00A7849c;
border-color: #00A7849c;
}
section .panel-solid-bright.warning {
color: #111;
background-color: #ffc8189c;
border-color: #ffc8189c;
}
section .panel-solid-bright.light {
color: #111;
background-color: #fcfcfc9c;
border-color: #fcfcfc9c;
}
section .panel-solid-bright.dark {
color: #fff;
background-color: #1111119c;
border-color: #1111119c;
}
section .panel-solid-bright>.panel-heading,
section .panel-solid-bright.default>.panel-heading,
section .panel-solid-bright.secondary>.panel-heading,
section .panel-solid-bright>.panel-footer,
section .panel-solid-bright.default>.panel-footer,
section .panel-solid-bright.secondary>.panel-footer {
color: #333;
background-color: #d9d9d99c;
outline-color:#d9d9d99c;
}
section .panel-solid-bright.info>.panel-heading,
section .panel-solid-bright.info>.panel-footer {
color: #e9e9e9;
background-color: #109eb39c;
outline-color:#109eb39c;
}
section .panel-solid-bright.danger>.panel-heading,
section .panel-solid-bright.danger>.panel-footer {
color: #e9e9e9;
background-color: #fc5f629c;
outline-color:#fc5f629c;
}
section .panel-solid-bright.primary>.panel-heading,
section .panel-solid-bright.primary>.panel-footer {
color: #e9e9e9;
background-color: #308bda9c;
outline-color:#308bda9c;
}
section .panel-solid-bright.success>.panel-heading,
section .panel-solid-bright.success>.panel-footer {
color: #e9e9e9;
background-color: #00A7849c;
outline-color:#00A7849c;
}
section .panel-solid-bright.warning>.panel-heading,
section .panel-solid-bright.warning>.panel-footer {
background-color: #ffc8189c;
outline-color:#ffc8189c;
}
section .panel-solid-bright.light>.panel-heading,
section .panel-solid-bright.light>.panel-footer {
background-color: #fcfcfc9c;
outline-color:#fcfcfc9c;
}
section .panel-solid-bright.dark>.panel-heading,
section .panel-solid-bright.dark>.panel-footer {
color: #e9e9e9;
background-color: #1111119c;
outline-color:#1111119c;
}
/* ======================
2019.04.02
見出しがついたパネルのヘッドの色が明るいクラス
div要素でクラスとして呼び出せるようにした、オリジナルのパーツ。
以下のようにして書くと手間をかけず切り替えられるカスタマイズできる。
#html2(
)
#panel(色){{
見出し
====
内容
}}
#html2(
)
#html2(
)で囲むのを忘れると、オーバーライドが続く事になる。
色は標準の色（default、info、danger、primary、success、warning）
2020/01/04
panel-brightの見出しがついたパネルのヘッドとフッターの修正
border-color、outline-colorを透明に修正
2020/07/12
パネル系統にdefaultと同じ色のsecondaryをクラス追記、新色light、darkを追加
2020/08/15
.panel-brightクラス セクション内での調整を追加
2020/10/02
panel-brightクラスに見出しつきパネル指定時の見出し装飾クラスを追加
panel関数で引数指定ができるようにする
2021/01/31
outline-color属性の追加
拡大した時に間ができないようにするため
======================*/
.panel-bright .panel-heading,
.panel-bright .panel-footer {
background-color: #c4c4c4;
border-color: transparent;
outline-color: transparent;
}
.panel-bright>.panel-heading,
.panel-bright>.panel-footer,
.panel-bright.secondary >.panel-heading,
.panel-bright.secondary >.panel-footer,
.panel-bright.default>.panel-heading,
.panel-bright.default>.panel-footer,
.panel-bright .panel-secondary .panel-heading,
.panel-bright .panel-secondary .panel-footer,
.panel-bright .panel-default .panel-heading,
.panel-bright .panel-default .panel-footer {
color:#fff;
background-color: #999;
outline-color: #999;
}
.panel-bright.info>.panel-heading,
.panel-bright.info>.panel-footer,
.panel-bright .panel-info>.panel-heading,
.panel-bright .panel-info>.panel-footer {
color:#fff;
background-color: #109eb3;
outline-color: #109eb3;
}
.panel-bright.danger>.panel-heading,
.panel-bright.danger>.panel-footer,
.panel-bright .panel-danger>.panel-heading,
.panel-bright .panel-danger>.panel-footer {
color:#fff;
background-color: #fc5f62;
outline-color: #fc5f62;
}
.panel-bright.primary>.panel-heading,
.panel-bright.primary>.panel-footer,
.panel-bright .panel-primary>.panel-heading,
.panel-bright .panel-primary>.panel-footer {
color:#fff;
background-color: #308bda;
outline-color: #308bda;
}
.panel-bright.success>.panel-heading,
.panel-bright.success>.panel-footer,
.panel-bright .panel-success>.panel-heading,
.panel-bright .panel-success>.panel-footer {
color:#fff;
background-color: #00A784;
outline-color: #109eb3;
}
.panel-bright.warning>.panel-heading,
.panel-bright.warning>.panel-footer,
.panel-bright .panel-warning>.panel-heading,
.panel-bright .panel-warning>.panel-footer {
color:#333;
background-color: #fdc100;
outline-color: #fdc100;
}
.panel-bright.light>.panel-heading,
.panel-bright.light>.panel-footer,
.panel-bright .panel-light>.panel-heading,
.panel-bright .panel-light>.panel-footer {
color:#333;
background-color: #efefef;
outline-color: #efefef;
}
.panel-bright.dark>.panel-heading,
.panel-bright.dark>.panel-footer,
.panel-bright .panel-dark>.panel-heading,
.panel-bright .panel-dark>.panel-footer {
color:#fff;
background-color: #555555;
outline-color: #555555;
}
/*
先に引いたパネルの種類別に線の色を指定する
2020/07/12
パネル系統にdefaultと同じ色のsecondaryをクラス追記、新色light、darkを追加
2020/07/29
パネル系統darkの色合い調整
2020/08/12
panel-brightクラス指定なしを追加、
.panel-brightクラスが複数あるのでこれを統合へ
先にあった分をここに統合。
2020/10/03
.panel-bright クラスのshadowオプションを外して指定できるようにする
2021/01/31
outline-color属性の追加
拡大した時に間ができないようにするため
*/
.panel-bright .panel {
color: #333;
border-color: #c4c4c4;
background-color: #c4c4c417;
}
.panel-bright,
.panel-bright.default,
.panel-bright.secondary {
color: #333;
border-color: #aaaaaa;
background-color: #aaaaaa17;
}
.panel-bright.info {
color: #333;
border-color: #109eb3;
background-color: #64b1ba17;
}
.panel-bright.danger {
color: #333;
border-color: #fc5f62;
background-color: #db686817;
}
.panel-bright.primary {
color: #333;
border-color: #308bda;
background-color: #337ab717;
}
.panel-bright.success {
color: #333;
border-color: #00A784;
background-color: #5BB18417;
}
.panel-bright.warning {
color: #333;
border-color: #fdc100;
background-color: #EBA65B17;
}
.panel-bright.light {
color: #333;
border-color: #efefef;
background-color: #efefef17;
}
.panel-bright.dark {
color: #333;
border-color: #555555;
background-color: #1b1e2117;
}
/* .panel-brightクラス セクション内での調整 */
section .panel-bright,
section .panel-bright.default,
section .panel-bright.secondary {
color: #f3f3f3;
border-color: #aaaaaa70;
}
section .panel-bright.info {
color: #f3f3f3;
border-color: #109eb370;
}
section .panel-bright.danger {
color: #f3f3f3;
border-color: #fc5f6270;
}
section .panel-bright.primary {
color: #f3f3f3;
border-color: #308bda70;
}
section .panel-bright.success {
color: #f3f3f3;
border-color: #00A78470;
}
section .panel-bright.warning {
color: #f3f3f3;
border-color: #fdc10070;
}
section .panel-bright.light {
color: #f3f3f3;
border-color: #efefef70;
}
section .panel-bright.dark {
color: #f3f3f3;
border-color: #55555570;
}
section .panel-bright .panel-heading,
section .panel-bright .panel-footer {
background-color: #c4c4c4;
outline-color: #c4c4c4;
border-color: transparent;
}
section .panel-bright .panel-secondary .panel-heading,
section .panel-bright .panel-secondary .panel-footer,
section .panel-bright .panel-default .panel-heading,
section .panel-bright .panel-default .panel-footer {
background-color: #aaaaaa70;
outline-color: #aaaaaa70;
}
section .panel-bright .panel-info>.panel-heading,
section .panel-bright .panel-info>.panel-footer {
background-color: #109eb370;
outline-color: #109eb370;
}
section .panel-bright .panel-danger>.panel-heading,
section .panel-bright .panel-danger>.panel-footer {
background-color: #fc5f6270;
outline-color: #fc5f6270;
}
section .panel-bright .panel-primary>.panel-heading,
section .panel-bright .panel-primary>.panel-footer {
background-color: #308bda70;
outline-color: #308bda70;
}
section .panel-bright .panel-success>.panel-heading,
section .panel-bright .panel-success>.panel-footer {
background-color: #00A78470;
outline-color: #00A78470;
}
section .panel-bright .panel-warning>.panel-heading,
section .panel-bright .panel-warning>.panel-footer {
background-color: #fdc10070;
outline-color: #fdc10070;
}
section .panel-bright .panel-light>.panel-heading,
section .panel-bright .panel-light>.panel-footer {
background-color: #efefef70;
outline-color: #efefef70;
}
section .panel-bright .panel-dark>.panel-heading,
section .panel-bright .panel-dark>.panel-footer {
background-color: #55555570;
outline-color: #55555570;
}
/* ======================
以上
.panel-brightクラス パネル設定
2019.04.02
======================*/
/* ======================
枠線外見出しつきパネル
panel-title-outer
2020/10/06
panel関数でクラス名が利用できるようになったので#html2関数で使ってきた枠線の外にタイトルが出るpanel-title-square-border-overを原型に改修して、新たに作成した
考え方は従来の見出しつきパネルの見出しとパネル枠が別別に連動する形
下フッタは1行のみ。
2020/10/07
枠線の太さ可変、陰を追加できるように設定
文字の大きさを可変できるように調整
2021/01/29
枠線外見出しつきパネル
outline: 0px;を追加
======================*/
/*
周囲の枠線、背景色を消す
下ヘッダを右に寄せられるように相対設定
*/
.panel-title-outer {
position: relative;
margin: 2.5em 0.5em;
/* padding-bottom: 1.7em; */
border: none;
}
@media (min-width: 568px) {
.panel-title-outer {
margin: 2.5em 1em;
}
}
/* 枠の太さ可変 */
.panel-title-outer>.panel-body {
border-width:2px;
border-style: solid;
border-color: #999;
border-radius:4px;
}
@media (min-width: 992px){
.panel-title-outer>.panel-body {
border-width:3px;
}
}
@media (min-width: 1500px){
.panel-title-outer>.panel-body {
border-width:4px;
}
}
/*
枠の太さ可変
2020/10/07
引数とpanelクラス内での切り換えが複雑になるので
枠線外見出しつきパネルでの実装は見送る
*/
.panel-title-outer>.panel-body.bold {
border-width: 4px;
}
@media (min-width: 992px){
.panel-title-outer>.panel-body.bold {
border-width:6px;
}
}
@media (min-width: 1500px){
.panel-title-outer>.panel-body.bold {
border-width:8px;
}
}
.panel-title-outer>.panel-body.shadow{
box-shadow: 3px 3px 4px #a7a7a7;
}
@media (min-width:768px) {
.panel-title-outer>.panel-body.shadow{
box-shadow: 3px 3px 6px #a7a7a7;
}
}
/*枠内のマージン可変*/
.panel-title-outer>.panel {
margin: 1.875em 0.5em;
border-color: transparent;
background-color: inherit;
}
@media (min-width: 568px) {
.panel-title-outer>.panel {
margin: 1.875em 1em;
}
}
.panel-title-outer .qhm-bs-block>p {
margin-bottom: 0em;
margin-top: 0em;
}
/*
見出しヘッダの装飾調整
2021/09/04
見出しヘッダ、見出しフッタの左右位置の調整
1emから.5emへ
2021/09/06
外部見出しつきパネル（.panel-title-outer ）の見出しヘッダ、フッタの角丸めを8pxから4pxへ修正
2021/09/06
見出しヘッダ、見出しフッタの左右位置の調整を可変に切り替える
モバイル画面と768px以上で位置が変わる。
英語では気づきにくいが日本語では画面全体が広く場合は字下げが大きい方がわかりやすいため。
*/
.panel-title-outer .panel-heading {
position: relative;
width: fit-content;
padding: 0.2em 0.5em 0.1em 0.5em;
margin: 0em .5em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-color: transparent;
outline: 0px;
}
@media (min-width:768px) {
.panel-title-outer .panel-heading {
margin: 0em 1em;
}
}
/*
見出しフッタの装飾調整 右に寄せるように絶対値設定
フッタはCSSの仕様上高さは1行のみ。
2021/09/04
見出しヘッダ、見出しフッタの左右位置の調整
1emから.5emへ
2021/09/04
見出しフッタ（.panel-title-outer .panel-footer ）の大きさがAndroid端末では正常に出ないので調整。
2021/09/06
外部見出しつきパネル（.panel-title-outer ）の見出しヘッダ、フッタの角丸めを8pxから4pxへ修正
2021/09/06
見出しヘッダ、見出しフッタの左右位置の調整を可変に切り替える
モバイル画面と768px以上で位置が変わる。
英語では気づきにくいが日本語では画面全体が広く場合は字下げが大きい方がわかりやすいため。
*/
.panel-title-outer .panel-footer {
position: absolute;
width: fit-content;
right: 0em;
padding: 0.1em 0.5em 0.2em 0.5em;
margin: 0em .5em;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-color: transparent;
overflow: hidden;
outline: 0px;
}
@media (min-width:768px) {
.panel-title-outer .panel-footer {
margin: 0em 1em;
}
}
/*見出し部分の陰*/
.panel-title-outer .panel-heading.shadow{
box-shadow: 3px 0px 4px #a7a7a7;
}
@media (min-width:768px) {
.panel-title-outer .panel-heading.shadow{
box-shadow: 3px 0px 6px #a7a7a7;
}
}
.panel-title-outer .panel-footer.shadow{
box-shadow: 3px 3px 4px #a7a7a7;
}
@media (min-width:768px) {
.panel-title-outer .panel-footer.shadow{
box-shadow: 3px 3px 6px #a7a7a7;
}
}
/*
2020/10/07
パネル見出しの大きさを変える（試験）
panel [large|lg] [色名]
panel [small|sm] [色名]
panel [mini|xs] [色名]
元のpanelが大きさが固定なのでpanel関数自体にいれるか、それともクラスだけにしてしまうか
*/
.panel.large .panel-heading,
.panel.large .panel-footer,
.panel.lg .panel-heading,
.panel.lg .panel-footer{
font-size:130%;
}
.panel.small .panel-heading,
.panel.small .panel-footer,
.panel.sm .panel-heading,
.panel.sm .panel-footer{
font-size:85%;
}
.panel.mini .panel-heading,
.panel.mini .panel-footer,
.panel.xs .panel-heading,
.panel.xs .panel-footer{
font-size: 70%;
}
.panel-title-outer>.panel-heading,
.panel-title-outer>.panel-footer,
.panel-title-outer.default>.panel-heading,
.panel-title-outer.default>.panel-footer,
.panel-title-outer.secondary>.panel-heading,
.panel-title-outer.secondary>.panel-footer{
color: #fff;
background-color: #999;
}
.panel-title-outer>.panel-body,
.panel-title-outer.default>.panel-body,
.panel-title-outer.secondary>.panel-body{
border-color:#999;
}
.panel-title-outer.info>.panel-heading,
.panel-title-outer.info>.panel-footer{
color: #fff;
background-color: #109eb3;
}
.panel-title-outer.info>.panel-body{
border-color:#109eb3;
}
.panel-title-outer.danger>.panel-heading,
.panel-title-outer.danger>.panel-footer{
color: #fff;
background-color: #db6868;
}
.panel-title-outer.danger>.panel-body{
border-color:#db6868;
}
.panel-title-outer.primary>.panel-heading,
.panel-title-outer.primary>.panel-footer{
color: #fff;
background-color: #337ab7;
}
.panel-title-outer.primary>.panel-body{
border-color:#337ab7;
}
.panel-title-outer.success>.panel-heading,
.panel-title-outer.success>.panel-footer{
color: #fff;
background-color: #409668;
}
.panel-title-outer.success>.panel-body{
border-color:#409668;
}
.panel-title-outer.warning>.panel-heading,
.panel-title-outer.warning>.panel-footer{
color: #333;
background-color: #ffc818;
}
.panel-title-outer.warning>.panel-body{
border-color:#ffc818;
}
.panel-title-outer.light>.panel-heading,
.panel-title-outer.light>.panel-footer{
color: #333;
background-color: #f5f5f5;
}
.panel-title-outer.light>.panel-body{
border-color:#f5f5f5;
}
.panel-title-outer.dark>.panel-heading,
.panel-title-outer.dark>.panel-footer{
color: #fff;
background-color: #353535;
}
.panel-title-outer.dark>.panel-body{
border-color:#353535;
}
/* ======================
角ボーダーオーバー見出し枠パネル
角の見出し枠がボーダーをまたいでいる枠パネル
2019/09/18
【使い方】
#html2(
)
#panel(色オプション){{
タイトル
====
本文
}}
#html2(
)
#bs_accordion(色オプション)にも使える
必ず#html2(
)で閉じる。画面がおかしくなった時はたいていが閉じていない。
2019/09/19
クラス
panel-title-square-border-over
panel-title-radius-border-over
panel-title-nobackcolor-border-over
2020/01/07
（略称）
panel-title-sb-over
panel-title-rb-over
panel-title-nbckclrb-over
max-width: 85%;だけでなく、min-width: 4em;で最小幅を用意した。
タイトルが「解説」のように2文字だとスマホでは行送りが起こってしまう。
min-width:は最初は15%としていたが、スマホでは小さくなりすぎるので文字数emで代用
2019/09/21
角ボーダーオーバー見出し枠パネルの背景色をつける
アコーディオンパネルでは背景色が出ないようクラス指定を直下限定とする
2020/01/07
スマホ時のアコーディオンパネルの操作性を良くするため
角ボーダーオーバー見出し枠アコーディオンパネル時のヘッダとフッタをモバイル端末画面（767px未満時）では全幅を自動的に広げる。
2020/01/07
角ボーダーオーバー見出し枠パネルの上下マージンを3em、4emに拡大して見やすくする
2020/01/16
角ボーダーオーバー見出し枠パネルの最小幅を4emから3emに
2020/07/12
パネル系統にdefaultと同じ色のsecondaryをクラス追記、新色light、darkを追加
2020/10/06
#html2関数で使ってきた枠線の外にタイトルが出るpanel-title-square-border-over
panel関数でクラス名が利用できるようになったので原型に改修して、新たなクラスを作成する
考え方は従来の見出しつきパネルの見出しとパネル枠が別別に連動する形
======================*/
/* 周囲の枠線、背景色を消す */
.panel-title-square-border-over {
margin: 1.5em 0.5em;
border: none;
background-color: transparent;
}
@media (min-width: 568px) {
.panel-title-square-border-over {
margin: 1.5em 1em;
}
}
/* 枠の太さ可変 */
.panel-title-square-border-over>.panel-body {
border-width:2px;
border-style: solid;
border-color: #999;
border-radius:4px;
}
@media (min-width: 992px){
.panel-title-square-border-over>.panel-body {
border-width:3px;
}
}
@media (min-width: 1500px){
.panel-title-square-border-over>.panel-body {
border-width:4px;
}
}
/*枠内のマージン可変*/
.panel-title-square-border-over>.panel {
margin: 1.875em 0.5em;
border-color: transparent;
background-color: inherit;
}
@media (min-width: 568px) {
.panel-title-square-border-over>.panel {
margin: 1.875em 1em;
}
}
.panel-title-square-border-over .qhm-bs-block>p {
margin-bottom: 0em;
margin-top: 0em;
}
/*見出しの装飾調整*/
.panel-title-square-border-over .panel-heading {
position: relative;
width: fit-content;
max-width: 85%;
min-width: 3em;
padding: 0.2em 0.5em 0.1em 0.5em;
margin: 0em 1em;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.panel-title-square-border-over .panel-footer {
position: relative;
width: fit-content;
max-width: 85%;
min-width: 3em;
padding: 0.2em 0.7em;
margin: 0em 1em;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.panel-title-square-border-over>.panel-heading,
.panel-title-square-border-over>.panel-footer{
background-color: transparent;
}
.panel-title-square-border-over>.panel-info {
background-color: #e7fcff;
}
.panel-title-square-border-over>.panel-danger {
background-color: #ffecec;
}
.panel-title-square-border-over>.panel-primary {
background-color: #e0f6ff;
}
.panel-title-square-border-over>.panel-success {
background-color: #e7fff3;
}
.panel-title-square-border-over>.panel-warning {
background-color: #fff5e9;
}
.panel-title-square-border-over>.panel-light {
background-color: #efefef;
}
.panel-title-square-border-over>.panel-dark {
background-color: #d6d8d9;
}
/*
モバイル端末画面（767px未満時）のアコーディオンパネルでは全幅を自動的に広げる
2020/10/06
クラス
panel-title-square-border-over
panel-title-sb-over
アコーディオンパネルの表示は崩れることが判明、廃止
*/
/*
@media (max-width: 767px) {
.panel-title-square-border-over .orgm-accordio.panel-heading,
.panel-title-square-border-over .orgm-accordion.panel-footer,
.panel-title-sb-over .panel-heading,
.panel-title-sb-over .panel-footer {
width: auto;
}
}
*/
/*
角ボーダーオーバー見出し枠パネルの背景色をつける
アコーディオンパネルでは背景色が出ないようクラス指定を直下限定とする
2020/09/07
パネル関数改修に伴い、クラス指定の修正
*/
/*
2020/10/06
より改良するため凍結
*/
/*
.panel-title-square-border-over,
.panel-title-sb-over{
background-color: #eee;
}
.panel-title-square-border-over>.panel-info,
.panel-title-sb-over>.panel-info {
background-color: #e7fcff;
}
.panel-title-square-border-over>.panel-danger,
.panel-title-sb-over>.panel-danger {
background-color: #ffecec;
}
.panel-title-square-border-over>.panel-primary,
.panel-title-sb-over>.panel-primary {
background-color: #e0f6ff;
}
.panel-title-square-border-over>.panel-success,
.panel-title-sb-over>.panel-success {
background-color: #e7fff3;
}
.panel-title-square-border-over>.panel-warning,
.panel-title-sb-over>.panel-warning {
background-color: #fff5e9;
}
.panel-title-square-border-over>.panel-light,
.panel-title-sb-over>.panel-light {
background-color: #efefef;
}
.panel-title-square-border-over>.panel-dark,
.panel-title-sb-over>.panel-dark {
background-color: #d6d8d9;
}
*/
/* ======================
角丸ボーダーオーバー見出し枠パネル
角丸の見出し枠がボーダーをまたいでいる枠パネル
2019/09/18
【使い方】
#html2(
)
#panel(色オプション){{
タイトル
====
本文
}}
#html2(
)
#bs_accordion(色オプション)にも使える
必ず#html2(
)で閉じる。画面がおかしくなった時はたいていが閉じていない。
2019/09/19
クラス
panel-title-square-border-over
panel-title-radius-border-over
panel-title-nobackcolor-border-over
2020/01/07
（略称）
panel-title-sb-over
panel-title-rb-over
panel-title-nbckclrb-over
max-width: 85%;だけでなく、min-width: 4em;で最小幅を用意した。
タイトルが「解説」のように2文字だとスマホでは行送りが起こってしまう。
min-width:は最初は15%としていたが、スマホでは小さくなりすぎるので文字数emで代用
2019/09/21
角丸ボーダーオーバー見出し枠パネルの背景色をつける
アコーディオンパネルでは背景色が出ないようクラス指定を直下限定とする
2020/01/07
スマホ時のアコーディオンパネルの操作性を良くするため
角丸ボーダーオーバー見出し枠アコーディオンパネル時のヘッダとフッタをモバイル端末画面（767px未満時）では全幅を自動的に広げる。
2020/01/07
角丸ボーダーオーバー見出し枠パネルの上下マージンを3em、4emに拡大して見やすくする
2020/01/16
角丸ボーダーオーバー見出し枠パネルの最小幅を4emから3emに
2020/07/12
パネル系統にdefaultと同じ色のsecondaryをクラス追記、新色light、darkを追加
2020/10/06
角丸ボーダーオーバー見出し枠パネル
panel-title-radius-border-over
panel-title-rb-overはレイアウト崩れが多いのと
新しい機能でカバーできるので廃止する
======================*/
/*
.panel-title-radius-border-over,
.panel-title-rb-over {
border-color: #999;
box-shadow: none;
margin-top: 3em;
margin-bottom: 4em;
border-radius: 10px;
}
.panel-title-radius-border-over .panel-heading,
.panel-title-radius-border-over .panel-footer, .panel-title-rb-over .panel-heading, .panel-title-rb-over .panel-footer {
outline: 0px;
border-radius: 25px !important;
text-shadow: none;
}
.panel-title-radius-border-over .panel-heading,
.panel-title-rb-over .panel-heading {
position: relative;
top: -0.8em;
width: fit-content;
max-width: 85%;
min-width: 3em;
left: 0.5em;
padding: 0.2em 0.7em;
margin: 0em 0.7em;
}
.panel-title-radius-border-over .panel-footer,
.panel-title-rb-over .panel-footer {
position: relative;
bottom: -0.8em;
left: 0.5em;
width: fit-content;
max-width: 85%;
min-width: 3em;
padding: 0.2em 0.7em;
margin: 0em 0.7em;
}
/* モバイル画面では（767px未満）アコーディオンパネルでは幅を自動的に広げる*/
/*
@media (max-width: 767px) {
.panel-title-radius-border-over .orgm-accordion
.panel-heading, .panel-title-radius-border-over .orgm-accordion .panel-footer, .panel-title-rb-over .orgm-accordion .panel-heading, .panel-title-rb-over .orgm-accordion .panel-footer {
width: auto;
}
}
.panel-title-radius-border-over .qhm-bs-block>p,
.panel-title-rb-over .qhm-bs-block>p {
margin-bottom: 1em;
margin-top: 0em;
}
*/
/*
角丸ボーダーオーバー見出し枠パネルの背景色
アコーディオンパネルでは背景色が出ないようクラス指定を直下限定とする
2020/10/06
角丸ボーダーオーバー見出し枠パネル
panel-title-radius-border-over
panel-title-rb-overはレイアウト崩れが多いのと
新しい機能でカバーできるので廃止する
*/
/*
.panel-title-radius-border-over>.panel-default,
.panel-title-rb-over>.panel-default,
.panel-title-radius-border-over>.panel-secondary,
.panel-title-rb-over>.panel-secondary {
background-color: #eee;
}
.panel-title-radius-border-over>.panel-info,
.panel-title-rb-over>.panel-info {
background-color: #e7fcff;
}
.panel-title-radius-border-over>.panel-danger,
.panel-title-rb-over>.panel-danger {
background-color: #ffecec;
}
.panel-title-radius-border-over>.panel-primary,
.panel-title-rb-over>.panel-primary {
background-color: #e0f6ff;
}
.panel-title-radius-border-over>.panel-success,
.panel-title-rb-over>.panel-success {
background-color: #e7fff3;
}
.panel-title-radius-border-over>.panel-warning,
.panel-title-rb-over>.panel-warning {
background-color: #ffe284;
}
.panel-title-radius-border-over>.panel-light,
.panel-title-rb-over>.panel-light {
background-color: #efefef;
}
.panel-title-radius-border-over>.panel-dark,
.panel-title-rb-over>.panel-dark {
background-color: #d6d8d9;
}
*/
/* ======================
ボーダーオーバー見出し枠背景色なしパネル
背景色なし見出し枠がボーダーをまたいでいる枠パネル
2019/09/19
【使い方】
#html2でクラスを指定する
#html2(
)
#panel(色オプション){{
タイトル
====
本文
}}
#html2(
)
#bs_accordion(色オプション)にも使える
必ず#html2(
)で閉じる。画面がおかしくなった時はたいていが閉じていない。
なお、タイトル文字の色は色弱で見えない事があるのでやや黒くしてある。（よくみて気づくレベル）
パネルのみ、アコーディオンパネルには使えない
アコーディオンパネルはHTMLタグに記述されているクラス構成が共通ではないため、使えない
代替で角ボーダーオーバー見出し枠パネルが出る。
panel-title-square-border-over
panel-title-radius-border-over
との違いは文字色を指定する必要がある。
このため、アコーディオンパネルでは使えなくなっている。
黒だけなら使えるようにできたが、汎用性がなくなるので断念。
2019/09/19
クラス
panel-title-square-border-over
panel-title-radius-border-over
panel-title-nobackcolor-border-over
2020/01/07
（略称）
panel-title-sb-over
panel-title-rb-over
panel-title-nbkclrb-over
max-width: 85%;だけでなく、min-width: 4em;で最小幅を用意した。
タイトルが「解説」のように2文字だとスマホでは行送りが起こってしまう。
min-width:は最初は15%としていたが、スマホでは小さくなりすぎるので文字数emで代用
黒縁取りを採用
2020/01/07
スマホ時のアコーディオンパネルの操作性を良くするため
ボーダーオーバー見出し枠背景色なしアコーディオンパネル時のヘッダとフッタをモバイル端末画面（767px未満時）では全幅を自動的に広げる。
2020/01/07
ボーダーオーバー見出し枠背景色なしパネルの上下マージンを3em、4emに拡大して見やすくする
2020/01/07
ボーダーオーバー見出し枠背景色なしパネルのタイトル書体を太字にする
2020/01/16
ボーダーオーバー見出し枠背景色なしパネルの最小幅を4emから3emに
2020/07/12
パネル系統にdefaultと同じ色のsecondaryをクラス追記、新色light、darkを追加
2020/10/06
panel-title-nobackcolor-border-over
panel-title-nbkclrb-over はレイアウト崩れが多いのと
新しい機能でカバーできるので廃止する
======================*/
/*
.panel-title-nobackcolor-border-over,
.panel-title-nbkclrb-over {
border-color: #999;
box-shadow: none;
margin-top: 3em;
margin-bottom: 4em;
border-radius: 10px;
}
.panel-title-nobackcolor-border-over .panel-heading,
.panel-title-nobackcolor-border-over .panel-footer,
.panel-title-nbkclrb-over .panel-heading,
.panel-title-nbkclrb-over .panel-footer {
background-color: white;
border: 0;
outline: 0px;
box-shadow: none;
text-shadow: none;
}
.panel-title-nobackcolor-border-over .panel .panel-heading,
.panel-title-nbkclrb-over .panel .panel-heading {
position: relative;
top: -0.8em;
width: fit-content;
max-width: 85%;
min-width: 3em;
left: 0.5em;
padding: 0.2em 0.7em;
margin: 0em 0.7em;
text-shadow: none;
background-color: white;
border-color: white;
color: inherit;
}
.panel-title-nobackcolor-border-over .panel .panel-footer,
.panel-title-nbkclrb-over .panel .panel-footer {
position: relative;
bottom: -0.8em;
left: 0.5em;
width: fit-content;
max-width: 85%;
min-width: 3em;
padding: 0.2em 0.7em;
margin: 0em 0.7em;
text-shadow: none;
background-color: white;
border-color: white;
color: inherit;
}
*/
/* モバイル画面では（767px未満）アコーディオンパネルでは幅を自動的に広げる*/
/*
@media (max-width: 767px) {
.panel-title-nobackcolor-border-over .orgm-accordion .panel-heading,
.panel-title-nobackcolor-border-over .orgm-accordion .panel-footer,
.panel-title-nbkclrb-over .orgm-accordion .panel-heading,
.panel-title-nbkclrb-over .orgm-accordion .panel-footer {
width: auto;
}
}
.panel-title-nobackcolor-border-over .qhm-bs-block>p,
.panel-title-nbkclrb-over .qhm-bs-block>p {
margin-bottom: 1em;
margin-top: 0em;
}
*/
/*
先に引いたパネル見出し背景色なしのタイトル文字の色を指定する
non（該当無し・透明はパネルでは引数がないので使えない）
*/
/*
.panel-title-nobackcolor-border-over .panel .panel-heading,
.panel-title-nobackcolor-border-over .panel .panel-footer,
.panel-title-nbkclrb-over .panel .panel-heading,
.panel-title-nbkclrb-over .panel .panel-footer {
color: #999;
}
.panel-title-nobackcolor-border-over .panel-default .panel-heading,
.panel-title-nobackcolor-border-over .panel-default .panel-footer,
.panel-title-nbkclrb-over .panel-default .panel-heading,
.panel-title-nbkclrb-over .panel-default .panel-footer,
.panel-title-nobackcolor-border-over .panel-secondary .panel-heading,
.panel-title-nobackcolor-border-over .panel-secondary .panel-footer,
.panel-title-nbkclrb-over .panel-secondary .panel-heading,
.panel-title-nbkclrb-over .panel-secondary .panel-footer {
color: #646768;
}
.panel-title-nobackcolor-border-over .panel-info .panel-heading,
.panel-title-nobackcolor-border-over .panel-info .panel-footer,
.panel-title-nbkclrb-over .panel-info .panel-heading,
.panel-title-nbkclrb-over .panel-info .panel-footer {
color: #4d99a2;
}
.panel-title-nobackcolor-border-over .panel-danger .panel-heading,
.panel-title-nobackcolor-border-over .panel-danger .panel-footer,
.panel-title-nbkclrb-over .panel-danger .panel-heading,
.panel-title-nbkclrb-over .panel-danger .panel-footer {
color: #c35656;
}
.panel-title-nobackcolor-border-over .panel-primary .panel-heading,
.panel-title-nobackcolor-border-over .panel-primary .panel-footer,
.panel-title-nbkclrb-over .panel-primary .panel-heading,
.panel-title-nbkclrb-over .panel-primary .panel-footer {
color: #337ab7;
}
.panel-title-nobackcolor-border-over .panel-success .panel-heading,
.panel-title-nobackcolor-border-over .panel-success .panel-footer,
.panel-title-nbkclrb-over .panel-success .panel-heading,
.panel-title-nbkclrb-over .panel-success .panel-footer {
color: #449e6f;
}
.panel-title-nobackcolor-border-over .panel-warning .panel-heading,
.panel-title-nobackcolor-border-over .panel-warning .panel-footer,
.panel-title-nbkclrb-over .panel-warning .panel-heading,
.panel-title-nbkclrb-over .panel-warning .panel-footer {
color: #ab8300;
}
.panel-title-nobackcolor-border-over .panel-light .panel-heading,
.panel-title-nobackcolor-border-over .panel-light .panel-footer,
.panel-title-nbkclrb-over .panel-light .panel-heading,
.panel-title-nbkclrb-over .panel-light .panel-footer {
color: #818182;
}
.panel-title-nobackcolor-border-over .panel-dark .panel-heading,
.panel-title-nobackcolor-border-over .panel-darkg .panel-footer,
.panel-title-nbkclrb-over .panel-dark .panel-heading,
.panel-title-nbkclrb-over .panel-dark .panel-footer {
color: #353535;
}
*/
/* ======
2020/10/03
見出しつきpanelのヘッダーフッター内でleft,center,rightを指定した時、マージンが増えるのを防ぐ
======*/
.panel .panel-heading .qhm-align-left p,
.panel .panel-heading .qhm-align-center p,
.panel .panel-heading .qhm-align-right p,
.panel .panel-footer .qhm-align-left p,
.panel .panel-footer .qhm-align-center p,
.panel .panel-footer .qhm-align-right p {
line-height: 1.3em;
margin: 0px;
}
/* ======
コピー防止確認用ダミー
====== */
.nagamira-title-border-over .panel-warning .panel-heading, .nagamira-title-border-over .panel-warning .panel-footer {
color: red;
}