カスタムCSSの小ネタ
-
こんばんわ。
カスタムCSSを使った小ネタをいくつか投稿したいと思います。カスタムCSSについては、コチラをご参照ください。
・【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう！ | ナポリタン寿司のPC日記
・Guide: Customizing Vivaldi’s UI with CSS mods一応気を付けてるつもりですが、既存のネタと被ってましたらすいません
ご意見ご感想ご質問等ございましたらお気軽にどうぞ。
また、個別にスレ立てるまでもないかなーというネタをお持ちの方、乗っかっていただけると幸いです
でわ。
◆ 背景画像をテーマに馴染ませる
背景画像をテーマの色で染めて、ついでにテキストを表示します。
コントラストがかなり下がるので写真画像などを背景として使いやすくなると思います。使用する色は「テーマ > エディター > 背景 > 種類:カラー」で指定した色、不透明度・表示するテキストは CSSを直接編集 する形になってます。
/* adjust Background-Image to Theme colar */ #app:not(.dev) #browser::before { content: ''; position: absolute; box-sizing: border-box; pointer-events: none; width: 100%; height: 100%; padding: 23.6% 0 0; display: flex; justify-content: center; align-items: center; color: var(--colorAccentBg); background-color: var(--colorWindowBg); font-family: sans-serif; white-space: pre-wrap; opacity: .8; /* Change the following to Your liking... when write `\A ` in content: will new line. */ content: 'VIVALDI'; color: var(--colorAccentBg); font-family: serif; font-size: min(10vw, 20vh); font-style: normal; font-weight: 400; letter-spacing: .2em; text-shadow: 1px 3px 8px #0003; opacity: 80%; }不透明度とか設定に有っても良さそうなんですけどねー
◆ ブレイクモード解除ボタンを全体化
ブラウザ画面のドコ押しても解除できるようになります。
/* full sized Break-mode Cancel-button */ #app:not(.dev) .break-mode button.HUD { z-index: 64; &:hover {color: var(--colorHighlightBg)} &::after { content: ''; background-color: transparent; position: absolute; cursor: pointer; width: 100vw; height: 100vh; left: calc(100px - 50vw); top: calc(100px - 50vh); z-index: -1; } }マウスジェスチャとか使ってると、ボタン押しに行くの面倒になりました
-
かっこいいですね！
tips系ポストは便利情報板に貼ると新しく来た人も見てくれそうな気がします
https://forum.vivaldi.net/category/143/便利情報 -
ありがとうございます
カスタムCSS自体一応隠し機能ですし内容的に便利とは言えないのもあると思うので、マニア向け雑談 て感じでこちらに投稿してみましたw個人的に気軽に投稿できるので、しばらくコッチでやってみようかなって思ってます。
という事で・・・
◆ 矢羽根タブ
好きな人は好きそうなやつです
/* arrow Tabs */ #app:not(.dev) #browser { --tmpArrowTab: skewX(-30deg); --tmpArrowTabIn: skewX(30deg); .tab-position:not(.toolbar) { transform-origin: left; transform: translate(var(--PositionX), var(--PositionY)) var(--tmpArrowTab); .tab-header {transform: var(--tmpArrowTabIn); transform-origin: left} &.accordion-toggle-arrow span { --tmpRot: 0deg; --tmpMov: 0px; transform: var(--tmpArrowTabIn) rotate(var(--tmpRot)) translateX(var(--tmpMov)); &.left {--tmpRot: 180deg; --tmpMov: 3px} &.down {--tmpRot: 90deg; --tmpMov: -1px} &.up {--tmpRot: -90deg; --tmpMov: 2px} } } /* for Vertical */ &:is(.tabs-left, .tabs-right) .tab-position:not(.toolbar) { transform: translate(8px, var(--PositionY)) var(--tmpArrowTab); width: calc(100% - 15px); z-index: 1; .svg-tab-stack { left: -50%; width: 200%; z-index: -2; .stack-frame {fill: var(--colorAccentBg); fill-opacity: .4; height: calc(100% - 2px)} } } &:is(.tabs-left, .tabs-right).color-behind-tabs-on .tab-position:not(.toolbar) .svg-tab-stack .stack-frame { fill: var(--colorBg); } }これ以上傾けると、中身はみ出て調整大変になると思います
◆ Vivaldiアイコン・ワークスペースの「▼」を消す
複合機能がある訳でもないんで、要らないかなーて思いました。/* sweep Dropdown-Mark */ #app:not(.dev) #browser:has(.vivaldi-v) :is(#header, .mainbar) { --menuWidth: 34px; .vivaldi .expand-arrow {display: none} } #app:not(.dev) .button-toolbar.workspace-popup button:has(.button-icon) { padding: 0 6px; .button-toolbar-menu-indicator {display: none} }メニューボタン だと解りにくいってクレームでもあったんですかね
-
おはようございます、今回は地味なネタです。
◆ バックグラウンドのカラーをもっと和らげる
通常 (Inactive) だと 背景 と 前景 の色しか変化しませんが、ハイライト と アクセント の色も和らげます。
また、和らげ度(?)も調整可能となってます。(faded ratio のトコです)/* fade-colors More in Inactive-Window */ #app:not(.dev) #browser.isblurred.dim-blurred { --tmpBlrRaito: 30%; /* faded ratio */ --tmpBlrColorBF: color-**bolded text**mix(in srgb, #777 var(--tmpBlrRaito), var(--colorFg)); --tmpBlrColorBB: color-mix(in srgb, #777 var(--tmpBlrRaito), var(--colorBg)); --tmpBlrColorBD: color-mix(in srgb, #777 var(--tmpBlrRaito), var(--colorBgDarker)); --tmpBlrColorBA: color-mix(in srgb, #777c var(--tmpBlrRaito), var(--colorBg)); --tmpBlrColorAF: color-mix(in srgb, #777 var(--tmpBlrRaito), var(--colorAccentFg)); --tmpBlrColorAB: color-mix(in srgb, #777 var(--tmpBlrRaito), var(--colorAccentBg)); --tmpBlrColorAD: color-mix(in srgb, #777 var(--tmpBlrRaito), var(--colorAccentBgDark)); --tmpBlrColorHF: color-mix(in srgb, #777 var(--tmpBlrRaito), var(--colorHighlightFg)); --tmpBlrColorHB: color-mix(in srgb, #777 var(--tmpBlrRaito), var(--colorHighlightBg)); & :is(header, footer, #panels-container, .bookmark-bar, .manager-editor, .vivaldi-settings, .toolbar, .mainbar, #switch, .tabbar-wrapper), &:not(.is-settingspage) #header { --colorFgFadedMore: var(--tmpBlrColorBF); --colorBgLight: var(--tmpBlrColorBB); --colorBgDark: var(--tmpBlrColorBD); --colorBgAlphaBlur: var(--tmpBlrColorBA); --colorAccentFg: var(--tmpBlrColorAF); --colorAccentBg: var(--tmpBlrColorAB); --colorAccentBgFaded: var(--tmpBlrColorAB); --colorAccentBgDarker: var(--tmpBlrColorAD); --colorHighlightFg: var(--tmpBlrColorHF); --colorHighlightBg: var(--tmpBlrColorHB); } }Vivaldi設定: 外観 「バックグラウンドのカラーを和らげる」が有効な時だけ機能します
-
【メールパネル】未読要素にカラーを充て、ちょっとだけ視認性を上げる
こんばんは。
@HongKong3 さんの立ち上げたスレではありますが、議論板という事なので、ちょっとだけ間借りして、こちらも小ネタをあげてみます
ネタがかぶってたらすみません。さて、↓の画像の様に未読要素の色を変えてみました。視認性が少しはアップすると思います。
変更色に関しては、テーマのハイライト関連を使ってますが、各自環境に合わせ、お好きな色にしてもらえばよいと思います。
#mail_panel span.item-count.counter-unseen{ background-color: var(--colorHighlightBgFaded); } #mail_panel span.item-count.counter-unread { background-color: var(--colorHighlightBg); } #mail_panel svg:has(+ span.title + span.item-count), #mail_panel span.title:has(+ span.item-count) { color: var(--colorHighlightBgFaded); }SVGに関しては、colorじゃなくてfillでもいいのかな～？まあ、好みですかね～？
尚、CSSの記述方法間違ってるよとか、他に効率的なやり方があるよなどありましたら、遠慮なくご指摘下さいませ。
勉強させてください
-
@quake2moon
こんばんわ。どんどん使っちゃてください
他の方がどんな風にカスタムCSS利用してるか知りたいたいな～てのがスレ立てた主な動機で、呼び水として自分で投稿してるだけだったりしますｗ
SVGに関しては、colorじゃなくてfillでもいいのかな～？まあ、好みですかね～？
結論から言わせていただくと、カスタムCSSで使うなら fill はNGですね。
SVGの基本的な着色として
fill(領域を塗りつぶし)とstroke(輪郭線を描画)の２種類があります。
fill で色指定すると stroke 部分の色が変わらなかったり、本来塗らない部分を塗っちゃったりします。
（デフォルトアイコンだと リーディングリスト のが stroke のみで構成されてるので、試してみると解りやすいと思います）で、それぞれ着色する色が
currentColorや未指定ならcolorで指定された色を適用って仕様でして、これを利用してテーマに併せて色が変わるわけですね
この辺は配布されてるベクターアイコンなんかも大体そうなってると思います。逆に
colorでは色が変わらないSVGアイコンでもfill&strokeを上書きしちゃえば大体変更できます。
以上、豆知識系の小ネタでしたｗ
-
@HongKong3
こんばんは。
いつもありがとうございます色が変わらなかったり、本来塗らない部分を塗っちゃったり
stroke のみで構成されてる
colorでは色が変わらないSVGアイコン
個人的にはSVGの中身を見ても分からず、（っていうかそもそも見ない）結局の所こういった部分に関しては、colorやfillで試してみて好みの着色具合を探して、とりあえず色が変わったからこれでオッケ～ってなる気がします。
したがいまして、
カスタムCSSで使うなら fill はNG
という部分に関しては、自分的にはあまり良く理解が出来ませんでした。恐らく、別の観点から NG とされてると思うのですけどね。実力不足ですみません
ただ今回は、自分の手違いでSVGがcolorで着色できることが分かったので、これはこれでﾖｼｯ、ケガの功名とかいうヤツでしょうか？
-
@quake2moon
この辺は出来合いの使うだけだと解りにくいかもですね
要約すると、SVGアイコンは color で着色する前提なので color 使いましょう。て感じですｗ
color で変わらないヤツは、そもそも着色を想定してないって事ですね。で、アイコン で思い出したネタを・・・
◆ コマンドチェイン用アイコンをでっちあげる
カスタムCSSを適用すると、コマンドチェイン名の先頭数文字 が表示されるようになります。
ひとまずこれで判別しやすくはなるのですが……コマンドチェイン名の末尾に「
*」、先頭に絵文字を付け足して「☕コマンドチェイン名 *」のように変更すると、
絵文字(１文字目)をアイコンとして表示します
(変更後「ツールバーをカスタマイズ」を開くと更新されます)ちなみに末尾が「
**」なら左右反転表示します。/* makeshift Icon for Command-Chain */ #app:not(.dev) button[name^="COMMAND_"]:has(span.button-icon path[d^="M6.207 9.207a"]) { position: relative; &::before { content: attr(title); position: absolute; box-sizing: border-box; overflow: hidden; width: 22px; height: 22px; left: calc(50% - 11px); top: calc(50% - 11px); padding: 2px; font-size: 10px; line-height: 1em; text-align: center; white-space: normal; transform-origin: center; /* Change the following to Your liking... */ color: var(--colorHighlightFg); background-color: var(--colorHighlightBg); border-radius: var(--radiusHalf); /* box-shadow: inset 0 0 1px #fff3, 0 1px 3px #0004; /**/ transition: none 0s; } & span.button-icon:has(path[d^="M6.207 9.207a"]) { display: none; /* hidden default-icon */ } /* Pictograph Icon [ex: "😀 CmdChain-Name *"] */ &:is([title$=" *"],[title$=" **"])::before { font-weight: 700; color: inherit; background-color: transparent; box-shadow: none; white-space: nowrap; font-size: 16px; letter-spacing: 2em; padding: 3px 0 0; } .button-toolbar:active &::before {transform: scale(.9)} &[title$=" **"]::before {transform: scaleX(-1)} /* L-R flip [ex: "😀 CmdChain-Name **"] */ .button-toolbar:active &[title$=" **"]::before {transform: scaleX(-.9) scaleY(.9)} } #app:not(.dev) #browser.isblurred.dim-blurred button[name^="COMMAND_"]:has(span.button-icon path[d^="M6.207 9.207a"])::before { opacity: .65; }デフォルトのコマンドチェインアイコンを対象としてるので、既にアイコンを割り当ててるものには影響ありません。
但し今後アイコンが刷新されると、そのままでは使えなくなります
-
@HongKong3
こんばんは。SVGアイコンは colorで着色する前提なので color使いましょう。
とりあえず、中の詳しい事はまだよく分からないので、言われたとおりcolorから使っていくスタンスで行きますね！
でも、↓で載せてるヤツは、ブックマークのフォルダアイコンがcolorでは色がつかなかったので、fillを使いました、許してください
【色相角グラデーション】for ブックマークバーフォルダアイコン
filterのhue-rotate(色相)を使い、 ブックマークバーのフォルダアイコンを、↓の画像の様にグラデーションさせます。
※ブックマーク編集、及びブックマークパネルには未対応です。↓ カスタムCSS
/*---★1 変数定義 ------*/ #main { --first-color: var(--colorHighlightBg); /*---初期カラー、好みで変更可 ---*/ --palette-angle: 22deg; /*---色相の変化角、好みで調整可 ---*/ } /*---★2 child_1の位 変数代入 ------*/ #main > div.bookmark-bar button.bookmarkbarItem:nth-child(10n + 1) { --x1-num: 1; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(10n + 2) { --x1-num: 2; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(10n + 3) { --x1-num: 3; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(10n + 4) { --x1-num: 4; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(10n + 5) { --x1-num: 5; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(10n + 6) { --x1-num: 6; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(10n + 7) { --x1-num: 7; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(10n + 8) { --x1-num: 8; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(10n + 9) { --x1-num: 9; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(10n) { --x1-num: 0; } /*---★3 child_10の位 変数代入 ------*/ #main > div.bookmark-bar button.bookmarkbarItem:nth-child(n + 1):nth-child(-n + 9) { --x10-num: 0; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(n + 10):nth-child(-n + 19) { --x10-num: 10; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(n + 20):nth-child(-n + 29) { --x10-num: 20; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(n + 30):nth-child(-n + 39) { --x10-num: 30; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(n + 40):nth-child(-n + 49) { --x10-num: 40; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(n + 50):nth-child(-n + 59) { --x10-num: 50; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(n + 60):nth-child(-n + 69) { --x10-num: 60; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(n + 70):nth-child(-n + 79) { --x10-num: 70; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(n + 80):nth-child(-n + 89) { --x10-num: 80; } #main > div.bookmark-bar button.bookmarkbarItem:nth-child(n + 90):nth-child(-n + 99) { --x10-num: 90; } /*---★4 カラー変更計算 ------*/ #main > div.bookmark-bar button.bookmarkbarItem > svg > g > svg { fill: var(--first-color); filter: hue-rotate(calc(var(--palette-angle) * (var(--x10-num) + var(--x1-num)))); }でもこれ、変化角の出方が変なんですよね…
--palette-angleの値を 180deg にした時、想定では180deg→0deg→180deg→0deg→…なのに実際は0deg→0deg→0deg→0deg→…となっている？
変化角が 想定の2倍 で出てる気がする？
cssの記述ミスか、なにか勘違いしてるか？
おれ、また何かやらかしちゃった？
まあ、--palette-angleの値を想定の1/2で設定すればいいので何とか成るは成るが、どうも気持ち悪いな…
※追記：コードを1部変更しましたので、現在は正常に作動します。 -
◆ コマンドチェイン用アイコンをでっちあげる
コレ、使い勝手いいですね！試験中のコマンドチェインを各バーに入れて試すことが多いんですが、一目で試験中なのが分かるし、文字でおおよそのコマンド名が分かるしｗ
レギュラーチェインの1つとして使わせてもらおう
-
@quake2moon
こんばんわ。でも、↓で載せてるヤツは、ブックマークのフォルダアイコンがcolorでは色がつかなかったので、fillを使いました、許してください
「fill だと上手く着色できない時もある」と頭の隅っこに置いとくくらいで良いと思います。
問題なければとりあえずそれでOKですｗ
（最終的に全部 fill 化しちゃうケース多そうですし…）
で今回のフォルダアイコンですが、SVGの中にさらにSVGを内蔵してます。
なのでフィルター二重に掛かって色相1周してるのかな～と・・・
最後のセレクタに>追加して
#main > div.bookmark-bar button.bookmarkbarItem > svg {
にしてみるとかどうですかね。
◆ コマンドチェイン用アイコンをでっちあげる
コレ、使い勝手いいですね！ありがとうございます
たぶん持ちネタで一番有用そうなヤツです。絵文字状態で馴染み過ぎて忘れかけてたんですけどねｗ
-
SVGの中にさらにSVGを内蔵
まさかそんなことになっていたとは…
っていうか、別件で他のSVGを見ていた時に、確かに svg > g > svg となっていて、コレはなんじゃろ？と思った事がありました。そうだそうだ、思い出しましたわ。で、解決案についてですが、
> svg > g > svgとすることで解決できました。今回も手際のよい迅速な対応、ありがとうございました
-
@quake2moon
CSS側のチェックはしっかりやってそうですし「SVGの中身は見ない」と仰ってたので、ソッチから調べてみたらビンゴだったって感じですｗ既存のSVGからインポートしてそのまま書き出しちゃった。とかでしょうか。
普通にブラウザとして使う分にはまったく問題ない部分ですしね -
nth-child(〇)
この「〇」を、数値として取り出してcalc()などで使えれば、何の問題もないのに…
変数も変にスコープがかかっちゃって思うようにいかないな～… -
@quake2moon
--X: calc(var(--X) + 1);とか使えないですしねぇ…
だからこそ後から設定して結果変えたりもできるんですけどｗ現状だと
counter()は取り出した時点で文字列扱いなのか使えないですけど、そのうちcalc()で使えるようにならないかな～と期待してます
-
@HongKong3
期待は、メチャクチャありますねぇ～【色相角グラデーション】for ブックマークバーフォルダアイコン だって、
calc()で計算したいばっかりに、nth-child(〇)の〇を無理やり変数に入れてますからね、あれだけで何行使っているか… -
こんばんわ。
今回は以前別スレの回答で使ったネタの発展型です。
◆ ファビコンにステータスバッジ
ファビコンにタブの状態を示すバッジ（小さいアイコン）を表示します。バッジの内容はこんな感じです。
状態 バッジ 通常 (なし) ピン留め 三角形 (白) 休止状態 灰色 音声再生中 赤 ミュート 青 - 休止状態 は Vivaldi設定:タブ > タブ表示 > タブ設定 > 「休止状態のときにアイコンを暗くする」が ON の時に表示されます
- タブ設定 > 「閉じるボタンを表示」＆「タブの左側に表示」がONだとファビコン自体無いので表示できません
色は最初のCSS変数で指定可能です。
/* add Status-Badge on Tabs Favicon */ #app:not(.dev) #tabs-container .tab { --tmpBdgPinned: #eee; /* pinned (default) */ --tmpBdgSleep: #889; /* sleep */ --tmpBdgAudio: #f30; /* audio playing */ --tmpBdgMute: #16f; /* muted audio */ --tmpBdgEdge: #000; /* edge-color */ .tab-header .favicon { position: relative; &::after { /* default (circle) */ color: var(--tmpBdgPinned); position: absolute; box-sizing: border-box; width: 6px; height: 6px; right: 0; top: 0; pointer-events: none; border-radius: 50%; background-color: currentColor; filter: drop-shadow(0px 0px 1px var(--tmpBdgEdge)) drop-shadow(0px 0px 1px var(--tmpBdgEdge)); } } /* pinned (Triangle) */ &.pinned .tab-header .favicon::after { content: ''; background-color: transparent; height: 12px; border-radius: 0; border: solid 0 transparent; border-width: 6px 3px 6px; border-top-color: currentColor; background-clip: content-box; } /* Sleep, Audio, Mute */ &.isdiscarded .tab-header .favicon::after {content: ''; color: var(--tmpBdgSleep)} &.audio-on .tab-header .favicon::after {content: ''; color: var(--tmpBdgAudio)} &.audio-muted .tab-header .favicon::after {color: var(--tmpBdgMute)} /* restore Audio-Tabs Favicon. (animated Audio-Icon be invisible) */ &.audio-on .tab-header .favicon {transform: none !important} /** / &.audio-on .tab-header .tab-audio {opacity: 0} /* enable Audio-Toggle on Favicon */ /**/ &.audio-on .tab-header .tab-audio {display: none} /* disable Audio-Toggle on Favicon */ } #app:not(.dev) .break-mode #tabs-container .tab .tab-header .favicon::after {visibility: hidden}ついでにデフォルトの再生中アイコン（スピーカーぽいヤツ）をファビコンに戻してます。
restore Audio-Tabs Favicon.辺りで操作できるので、お好みで調整してください -
ブックマークパネルの真ん中の表示領域を広めに確保してみようと思ったため、適当に 成型してみました。
色々なものを非表示にしましたが、自分は ブックマークパネルを全く使っていない ため、機能的に重要な物も非表示にしてしまってるかもしれません。
動かなかったらゴメンナサイ
【中間ヒロメッター】for ブックマークパネル
/*------【中間ヒロメッター】for ブックマークパネル ------*/ /*---★1 パネルタイトル部、非表示 ---*/ #panels div.panel.panel-bookmarks > header > h1 { display: none; } /*---★2 toolbar部、非表示 ---*/ #panels div.panel.panel-bookmarks > header div.toolbar-group { display: none; } /*---★3 ソートセレクター部、非表示 ---*/ #panels div.panel.panel-bookmarks > div { display: none; } /*---★4 header部を丸ごと非表示 ---*/ /* #panels div.panel.panel-bookmarks > header { display: none; } */ /*---★5 偽header ---*/ /*---☆5-1 ::before部 ---*/ #panels div.panel.panel-bookmarks > header > div::before { content: '★ブクマ v 1.3'; color: rgba(250,255,253,0.8); background-color:rgba(200,50,30,0.5); border-radius: 4px 4px 4px 4px; display: block; padding: 1px 2px 1px 2px; } /*---☆5-2 フォルダアイコン幅調整 ---*/ #panels div.panel.panel-bookmarks > header div.button-toolbar > button { height: 23px; } /*---☆5-3 検索バーmin-width調整 ---*/ #panels > div.panel-group header input[type=search], #panels > div.panel-group header input[type=text] { flex: 1 0 50px; min-width: 50px; height: 23px; } #panels > div.panel-group div.panel.panel-bookmarks { padding-top: 3px; } /*---★6 下部section調整 ---*/ /*---☆6-1 「説明」「日付」非表示 ---*/ #panels div.panel.panel-bookmarks > section.panel-bookmarks-edit.limited div.lower-half > div.fieldset.resizable, #panels > div.panel-group > div > div.panel.panel-bookmarks > section.panel-bookmarks-edit.limited div.lower-half > div.fieldset { display: none; } /*---☆6-2 文字書き換え（左右幅確保のため） ---*/ #panels div.panel.panel-bookmarks > section.panel-bookmarks-edit.limited div.lower-half > div.speeddial-bookmarksbar > div:nth-child(1) span, #panels div.panel.panel-bookmarks > section.panel-bookmarks-edit.limited div.lower-half > div.speeddial-bookmarksbar > div:nth-child(2) span { font-size: 0px; } #panels div.panel.panel-bookmarks > section.panel-bookmarks-edit.limited div.lower-half > div.speeddial-bookmarksbar > div:nth-child(1) span::before { font-size:14px; content:'スピ－ダ'; align-text:center; } #panels div.panel.panel-bookmarks > section.panel-bookmarks-edit.limited div.lower-half > div.speeddial-bookmarksbar > div:nth-child(2) span::before { font-size:14px; content:'ブクマバー'; align-text:center; } /*---☆6-3 セパレータ固定 ---*/ #panels div.panel.panel-bookmarks > section.panel-bookmarks-edit.limited { flex-basis: 134px!important; }
くっ、これで後は、ネーミングセンス、色彩センス、行間を狭めた時に空白が出来なければ…
