- 1 名前：名無しさん＠お腹いっぱい。 mailto:sage [2022/04/21(木) 23:24:46.59 ID:h1cG3tIy0.net]
- !extend:checked:vvvvv:1000:512
次スレを立てる方は↑を二行重ねて書いてください
●※前スレ
userChrome.css・userContent.cssスレ Part11
https://egg.5ch.net/test/read.cgi/software/1584753386/
●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
Stylus
https://addons.mozilla.org/ja/firefox/addon/styl-us/
User Style Manager (レガシーアドオン・要Classic Add-ons Archive)
https://addons.mozilla.org/ja/firefox/addon/user-style-manager/
●スクリプト
userChromeJS/UserCSSLoader at master ・ Griever/userChromeJS
https://github.com/Griever/userChromeJS/tree/master/UserCSSLoader
UserCSSManager (要userChromeES)
https://greasyfork.org/scripts/35880
●CSS（ユーザースタイルを記入するべきファイル）
userChrome.css（UI） / userContent.css（Web Site）
●関連サイト
Userstyles.org
https://userstyles.org/
CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS
とほほのスタイルシート入門
www.tohoho-web.com/css/
VIPQ2_EXTDAT: checked:vvvvv:1000:512:: EXT was configured
- 603 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ d3ad-Q0z2) mailto:sage [2023/10/30(月) 13:54:38.64 ID:JtHnNYR10.net]
- >>587
ありがとうございます、でもhas使いこなせず結局うまくいかなかったので
以下を参考にしてタブバー隠せました
https://support.mozilla.org/en-US/questions/1394300
tab:only-of-type, tab:only-of-type + #tabbrowser-arrowscrollbox-periphery
{ display: none !important; }
- 604 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 29cf-n4SB) [2023/10/30(月) 20:37:26.66 ID:RGZ6UolO0.net]
- つべの投稿が何日前とかじゃなく投稿日で見えるようにするやつ
前は後者だけだったのだがhoverするまでの位置が安定しなかった
背景はダーク用な
/* 次のの直前:最初からサイズ0なのだが次のの位置決定に悪さする対策 */
tp-yt-paper-tooltip.style-scope.ytd-watch-info-text
{left: 0px !important; top: 0px !important;}
/* 有効になったときに動くと鬱陶しいので元の位置も変えておく */
div#description div#tooltip.style-scope.tp-yt-paper-tooltip,
div#description div#tooltip.style-scope.tp-yt-paper-tooltip.hidden
{display:block !important; width:621px; height:13px;
position:absolute; top:-3px; left:-5px;
background:#282828; font-size:13px !important;}
- 605 名前：名無しさん＠お腹いっぱい。 (中止 13f4-XVKo) mailto:sage [2023/10/31(火) 00:32:26.75 ID:iqpOrJ4W0HLWN.net]
- 119、visuallyselected使えなくなってる？
- 606 名前：名無しさん＠お腹いっぱい。 [2023/11/01(水) 15:34:22.06 ID:KThtrPBO0.net]
- >>0588
横から Many thanks!
- 607 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/01(水) 15:53:27.22 ID:AjY8Q9D10.net]
- アドレスバーの候補表示設定を全てチェックを外すとポップアップで候補が表示されなくなりますが
URLをクリックすると青い枠が表示されます
目障りなので青い枠を表示させないようにするcssを教えてください
以下はだめでした
#urlbar:-moz-focusring {
outline: none !important;
}
- 608 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/01(水) 16:26:18.91 ID:8JmZmfoZ0.net]
- 以下が効かなくなったのですが修正方法を教えてください
img:-moz-loading{visibility:hidden!important;}
- 609 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ d335-Q0z2) mailto:sage [2023/11/01(水) 20:23:59.23 ID:AjY8Q9D10.net]
- ブラウザツールボックス内のコンテキストメニューの縦幅サイズが大きいのですが
ここはuserChrome.cssでのカスタムはムリでしょうか？
以下は効きませんでした
menuitem, menu
{ padding: 2px 5px 2px 5px !important; }
- 610 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 1397-c8RC) mailto:sage [2023/11/01(水) 21:48:46.01 ID:wAXBWz1U0.net]
- >>594
ブラウザツールボックス用のcssはchrome_debugger_profile\chromeの中に置く
- 611 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ d335-Q0z2) mailto:sage [2023/11/01(水) 22:01:33.38 ID:AjY8Q9D10.net]
- >>595
できました！ありがとうございます
- 612 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/02(木) 14:09:26.40 ID:m2u+gzLF0.net]
- >>592のやつですが以下で青色が出ないようにはできました
ただ、枠外のボーダーかシャドウがまだ出てしまうので、それも出ないようにしたいです
（つまりURLバーをクリックしても見た目が変わらないようにしたい）
現状以下です、よろしくお願いします
/* アドレスバーにフォーカスしても見た目を変えない */
#urlbar {
--toolbar-field-focus-border-color: var(--toolbar-field-border-color) !important;
--toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
box-shadow: 0px !important;
border: 0px !important;
}
- 613 名前：名無しさん＠お腹いっぱい。 [2023/11/02(木) 17:28:01.25 ID:D5QlkTpH0.net]
- >>597
#urlbar-background {
outline: none !important;
box-shadow: none !important;
}
- 614 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ d3ba-Q0z2) mailto:sage [2023/11/02(木) 19:16:48.26 ID:m2u+gzLF0.net]
- >>598
ありがとうございます！
- 615 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/07(火) 21:42:22.00 ID:c+tTtFER0.net]
- UIのポップアップメニューのマウスオーバー色は変えたいけど
コンテンツ内のプルダウンメニューのマウスオーバー色はデフォルトにしたいです
以下ではblueにはなりませんでしたが、デフォルトのマウスオーバー色にもなりませんでした
ご教示のほどお願いします
/* ポップアップメニューアイテムのマウスオーバー色 */
menuitem:hover {
background-color: blue !important;
}
/* コンテンツ内プルダウンメニューアイテムのマウスオーバー色 */
.ContentSelectDropdown-item-0:hover {
background-color: initial !important;
}
- 616 名前：名無しさん＠お腹いっぱい。 [2023/11/08(水) 07:06:08.77 ID:+nsDVE5s0.net]
- >>600
menupopup:not(#ContentSelectDropdownPopup) :is(menu, menuitem):not([disabled])[_moz-menuactive] {
background-color: blue !important;
}
- 617 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/08(水) 10:11:01.21 ID:oaEIXEKj0.net]
- >>601
menuitem:not(.ContentSelectDropdown-item-0):hover
で除外できました。ありがとうございます。
後方でinitial等で初期値を上書きできればと思ったんですが、うまくいかないものですね。
- 618 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/09(木) 14:55:57.94 ID:mKBsKUDr0.net]
- >>560
557じゃないけどありがとうございます
- 619 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/09(木) 16:55:27.65 ID:xJjECzt90.net]
- :where(.aaa, .bbb)
がなんとなく調子悪いので
:is(.aaa, .bbb)
を使ってる
:whereって複数選択できないのかな？
- 620 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/09(木) 17:17:51.52 ID:lYn3aIN50.net]
- :whereは詳細度上がらないから有無を言わさずルール上書きしたい場合に向かない
- 621 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/09(木) 19:02:11.37 ID:xJjECzt90.net]
- なるほど、やっぱり:isを使うべきか
- 622 名前：名無しさん＠お腹いっぱい。 (ｽｯﾌﾟｰT Sdc2-jfG6) mailto:sage [2023/11/10(金) 15:40:27.75 ID:voYkgPVmd.net]
- Chromeだったらアドオンでいくつかあるのだけど、Firefoxには見当たらないので、
YouTubeのコントロールバーをプレイヤーの下に表示するCSSを作りました。
標準プレイヤーのみの対応ですが、よければ使ってください。
/* 標準プレイヤーの高さをコントロールバーの分増やす */
ytd-watch-flexy:not([theater]) #player-container-inner {
height: 51px !important
}
/* プレイヤーバックの色変更 */
ytd-watch-flexy:not([theater]) #movie_player {
background-color: #000000 !important
}
なお、コントロールバーは一定時間経てば消えますが、
常時表示したい場合は、次のスクリプトをインストールしてください。
YouTube Permanent ProgressBar
https://greasyfork.org/ja/scripts/426283-youtube-permanent-progressbar
このCSS、シネマモードでも使えるようにしたいのですが、どうもうまく行きません。
もしいい方法があれば、助言お願いします。
- 623 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 194f-jfG6) mailto:sage [2023/11/10(金) 20:24:32.44 ID:f3pKcrn20.net]
- Firefoxのポップアップの背景色だけ有効にしたいでのですが
どのようにすれば良いですか
/* ポップアップ */
.menupopup-arrowscrollbox{
background-color: Pink !important;
}
- 624 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/10(金) 21:03:58.18 ID:WOCSS5Dk0.net]
- Pinkじゃなくてとりあえずredで試してみたら？
俺は以下で変えられてる
/* ポップアップメニューの背景色 */
.menupopup-arrowscrollbox {
background-color: #F2F2F2 !important;
}
- 625 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/10(金) 23:08:12.50 ID:f3pKcrn20.net]
- FirefoxのUI以外はどのように除外すればよいのでしょう？
一部のサイトで色が変わってしまいます
- 626 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 1f5e-gzdM) mailto:sage [2023/11/11(土) 06:02:19.50 ID:DRpcqQZc0.net]
- >>607
:root {
--controller-height: 51px;
}
#full-bleed-container {
margin-bottom: var(--controller-height) !important;
}
ytd-watch-flexy[theater] {
z-index: 0 !important;
}
ytd-watch-flexy[theater] .html5-video-player {
overflow: visible !important;
}
ytd-watch-flexy[theater] .ytp-chrome-bottom {
margin-bottom: calc(var(--controller-height) * -1) !important;
}
ytd-watch-flexy[theater] #player-container::after {
content: '';
position: absolute;
width: 100%;
height: var(--controller-height);
margin-bottom: calc(var(--controller-height) * -1);
background: #000;
z-index: -1;
}
--controller-heightでコントローラー位置を調節できる
- 627 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 1f5e-gzdM) mailto:sage [2023/11/11(土) 08:01:50.19 ID:DRpcqQZc0.net]
- >>611
横着したら普通の方のデザインが崩れてたので訂正
:root {
--controller-height: 51px;
}
ytd-watch-flexy[theater] #full-bleed-container {
margin-bottom: var(--controller-height) !important;
}
ytd-watch-flexy[theater] {
z-index: 0 !important;
}
ytd-watch-flexy[theater] .html5-video-player {
overflow: visible !important;
}
ytd-watch-flexy[theater] .ytp-chrome-bottom {
margin-bottom: calc(var(--controller-height) * -1) !important;
}
ytd-watch-flexy[theater] #player-container::after {
content: '';
position: absolute;
width: 100%;
height: var(--controller-height);
margin-bottom: calc(var(--controller-height) * -1);
background: #000;
z-index: -1;
}
ついでにツールチップの位置を下げるやつ
.ytp-tooltip {
margin-top: var(--controller-height) !important;
}
- 628 名前：607 mailto:sage [2023/11/11(土) 21:50:24.44 ID:iFV/7D8Nd1111.net]
- >>612
うまく行きました。
本当にありがとうございます。
このCSSを見ると、自分のスキルではまだまだ無理だと実感しましたw
個人的に、コントロールバーを下にずらしたので、
バーを覆っていた影が気になるため、非表示にしました。
/* プレイヤー下部の影の非表示 */
ytd-watch-flexy .ytp-gradient-bottom {
display: none !important
}
- 629 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 1f58-kIyz) mailto:sage [2023/11/15(水) 00:03:48.32 ID:6c0l3urr0.net]
- >>593
削除されてました
1850342 - Remove :-moz-loading, and avoid exposing :-moz-broken pseudo-class to content.
ttps://bugzilla.mozilla.org/show_bug.cgi?id=1850342
- 630 名前：名無しさん＠お腹いっぱい。 [2023/11/16(木) 15:55:02.31 ID:GAfZis5L0.net]
- ここにある
https://www.userchrome.org/firefox-89-styling-proton-ui.html
↓のように、アクティブタブの上部に青線、だけほしいので書式お願いします。
Container/Active Tab color line:
+Blue Line on active tab
- 631 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/16(木) 16:39:40.94 ID:dwMVWCtr0.net]
- /* タブの上部のライン */
.tab-background[multiselected],
.tab-background[selected] {
background: linear-gradient(to bottom, #0A84FF 2px, var(--toolbar-bgcolor) 0px) !important;
outline: none !important;
}
- 632 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/16(木) 20:15:35.11 ID:GAfZis5L0.net]
- >>615
ありがとうございます。試したのですが出来ないみたいですので
とりあえずは、そこのCSS based on above options:
での書式で行きます。
- 633 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 1f66-gzdM) mailto:sage [2023/11/16(木) 21:16:15.52 ID:9vD6Cyf/0.net]
- /* アクティブタブの上に青い線 */
.tab-background:is([selected], [multiselected]) {
border-top: 1px solid Blue !important;
}
- 634 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 7f76-Zoup) mailto:sage [2023/11/16(木) 21:48:31.17 ID:GAfZis5L0.net]
- >>618
ありがとうございます。出来ました。
- 635 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 9f58-Zoup) mailto:sage [2023/11/17(金) 19:08:03.92 ID:OXKGruvy0.net]
- /* アクティブタブの文字色 */
label
- 636 名前：.tab-text.tab-label[selected="true"]{font-weight: bold !important;}
これが119で動かないんだけどどこを修正すれば動きますか？ [] - [ここ壊れてます]
- 637 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ ffb8-gzdM) mailto:sage [2023/11/17(金) 19:33:17.61 ID:xX6UYbsC0.net]
- ="true"
を削除
- 638 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 1f4f-gzdM) mailto:sage [2023/11/17(金) 20:32:00.21 ID:UwG7SfoR0.net]
- /* アクティブタブの背景色 */
.tab-background:is([selected], [multiselected])
/* アクティブタブの文字色 */
.tabbrowser-tab:is([visuallyselected], [multiselected])
/* 非アクティブタブの背景色 */
.tab-background:not([selected], [multiselected])
/* 非アクティブタブの文字色 */
.tabbrowser-tab:not([visuallyselected], [multiselected])
/* アクティブにマウスオンしたときの背景色 */
.tabbrowser-tab:hover > .tab-stack > .tab-background:is([selected], [multiselected])
/* アクティブにマウスオンしたときの文字色 */
.tabbrowser-tab:hover > .tab-stack >:is([selected], [multiselected])
/* 非アクティブにマウスオンしたときの背景色 */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected])
/* 非アクティブにマウスオンしたときの文字色 */
.tabbrowser-tab:hover > .tab-stack >:not([selected], [multiselected])
- 639 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/18(土) 19:17:35.84 ID:cgw9DvTW0.net]
- firefoxでstylus更新したらCSS効かなくなったんだけどなんで？
- 640 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ a503-hO6y) mailto:sage [2023/11/18(土) 22:56:43.75 ID:XB8apQtC0.net]
- >>623
バージョンは？
1.5.37 はバグありで取り下げられた
- 641 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/20(月) 23:52:25.21 ID:9MiWme6b0HAPPY.net]
- 現バージョンでの音が出ているタブの色を変える方法が判明したら教えていただけますか
- 642 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ e92d-rrr/) mailto:sage [2023/11/21(火) 02:53:40.34 ID:PceYQi9w0.net]
- >>625
.tabbrowser-tab:is([soundplaying], [muted]) .tab-background {
background-color: #f00 !important;
}
- 643 名前：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ 520c-hO6y) mailto:sage [2023/11/21(火) 04:15:33.59 ID:MY2f9Xb80.net]
- >>626
ほんと助かります、どうもありがとう
- 644 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/21(火) 18:02:55.23 ID:KzKE9Xic0.net]
- >>626
動くアイコンより見やすくていいね
- 645 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/21(火) 19:20:04.63 ID:YsTcpB/K0.net]
- 俺はアイコンで音のオンオフするから全部乗せにてるわ
普通に見やすい
/* サウンドタブをアニメーション化 (赤) */
/* ミュートアイコンに色を付ける (黒) */
/* サウンドタブのファビコンを復活 */
/* サウンドタブの背景色+半透明化 */
- 646 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/22(水) 16:28:41.22 ID:5dG5VQLh0.net]
- Firefox 120で結構変更入ったっぽい？
まあESR使ってるからあんまり関係ないけど
- 647 名前：名無しさん＠お腹いっぱい。 mailto:sage [2023/11/22(水) 16:45:50.24 ID:DbYbpYZP0.net]
- アクティブタブ上部に線をつけたいです
- 648 名前：過去ログ ★ [[過去ログ]]
- ■ このスレッドは過去ログ倉庫に格納されています
|
 |
