userChrome.css・userContent.cssスレ Part7
レス数が950を超えています。1000を超えると書き込みができなくなります。
0001名無しさん@お腹いっぱい。
垢版 |
2017/11/11(土) 18:54:58.08ID:hti5ZF6m0
●前スレ
userChrome.css・userContent.cssスレ Part6
http://egg.2ch.net/test/read.cgi/software/1438959541/

●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
User Style Manager
https://addons.mozilla.org/ja/firefox/addon/user-style-manager/

●スクリプト
userChromeJS/UserCSSLoader at master キ Griever/userChromeJS
https://github.com/Griever/userChromeJS/tree/master/UserCSSLoader

●CSS(ユーザースタイルを記入するべきファイル)
userChrome.css(UI) / userContent.css(Web Site)

●関連サイト
userstyles.org
http://userstyles.org/

MDN - CSS
https://developer.mozilla.org/ja/docs/Web/CSS

とほほのスタイルシート入門
http://www.tohoho-web.com/css/
0878名無しさん@お腹いっぱい。
垢版 |
2017/12/10(日) 19:32:33.94ID:yFQ14LRd0
>>868

ありがとうございます、助かります。
半透明と言うか・・・すべて開いた後の複数のタブで
開いてないその他のタブの色は上手く出来ないのですが

開く前のタブの色(赤色)はまさにそれをしようと思ってたのでホントありがたいです。
御礼申し上げます <(_ _)>
0879名無しさん@お腹いっぱい。
垢版 |
2017/12/10(日) 20:28:21.15ID:U1kw5ij70
豆腐さんの多段タブを使ってる時に、新規タブが一切開けなくなる現象は自分だけですかね?
ブラウザ起動から30分以上経過、ポップアップをブロックしてる がトリガーになってる気がしないでも無い・・・
タブ絡みで関係ありそうなのはOpenNewTab.uc.jsと拡張の「新しいタブでリンクを開く」をfx57.0.2で導入しています
再起動で直るけど不便なのでよろしくお願いします
0880名無しさん@お腹いっぱい。
垢版 |
2017/12/10(日) 20:36:50.64ID:i+b2rAR60
>>879
多分OpenNewTab.uc.jsの方
先日試したらお気に入りの新規タブが開かなくなったり、ページ移動が強制的にカレントタブになるバグあったと思う
0881名無しさん@お腹いっぱい。
垢版 |
2017/12/10(日) 20:39:35.89ID:QEi7fmOb0
>>878
半透明になるのは起動時に複数タブ開いててアクティブになってないタブ
ブラウザが読み込みを保留(pending)している
リンクとかで開いたものはブラウザが読み込みにいってるので半透明にはならない
0882名無しさん@お腹いっぱい。
垢版 |
2017/12/10(日) 21:16:48.36ID:yFQ14LRd0
>>881
たしかにそういう設定してます・・・納得できました
ご指摘ありがとうございました <(_ _)>
0883名無しさん@お腹いっぱい。
垢版 |
2017/12/10(日) 22:14:02.74ID:7P4t8m/A0
>>855
このCSSはFrefox45にぴったりだわ、少し数字弄る必要あったけど
タイトルバーを非表示にしないと、たとえば5chの速報headlineがクリックしてウィンドウが最大化して
開かないバグがあるから
タブは使わずCRTで旧来通りのウィンドウ使いなんで
0885名無しさん@お腹いっぱい。
垢版 |
2017/12/10(日) 22:36:26.93ID:7P4t8m/A0
>>855
ありがたいけど不満を言えばFirefoxアイコンとタイトルバーとバーの青色の上下位置の
バランスが思うようにならんところかな
0886885
垢版 |
2017/12/10(日) 23:01:27.11ID:7P4t8m/A0
タイトルバー → タイトル文字 に訂正
0887名無しさん@お腹いっぱい。
垢版 |
2017/12/10(日) 23:12:10.14ID:VlBbvPy00
>>883
カソード・レイ・チューブ?どうやってPCと接続してんの、D端子とか付いてるやつかな?
と訊こうとしたけどCTRの事か;
0888名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 00:28:27.70ID:Cc2hiq8Q0
>>885-886
アイコンを背景画像にしたら文字とそれぞれ個別に位置指定できた
うちの環境ではとりあえずウィンドウ最大化状態なら
カスタマイズの画面でタイトルバーのチェックをオンオフしても全く同じ座標にできた

/* 偽タイトルバー領域にページタイトルを表示 */
#main-window[tabsintitlebar]::before {
position: absolute;
margin: -20px 0 0 0;
padding: 2px 130px 0 23px;
width: 100%;
height: 18px;
font-size: 12px;
overflow: hidden;
content: attr(title);
background: url("chrome://branding/content/icon16.png") no-repeat fixed 2px 5px;
display: inline-block;
vertical-align: baseline;
}
0889名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 03:46:29.41ID:cBeDnGqZ0
多段タブ色々ある中から自分用に必要な部分だけ不具合出ないようにつぎはぎしてみた
段数制限しないでタブバーにタブ以外表示させないなら結構短くなるね

/* 多段タブ */
:root {
--multirowtab-height: 24px; /* タブの高さ */
--multirowtab-width: 113px; /* タブの横幅 */
}
.tabbrowser-arrowscrollbox scrollbox,
.tabbrowser-arrowscrollbox scrollbox > box {
display: block !important;
overflow: visible !important;
}
#tabbrowser-tabs .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow: auto !important;
}
.tabbrowser-tab {
vertical-align: top !important;
height: var(--multirowtab-height) !important;
}
.tabbrowser-tab:not([pinned]) {
width: var(--multirowtab-width) !important;
}
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--multirowtab-height) !important;
}
0890名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 10:00:12.50ID:6w4IyPbA0
マルチスマソ

検索バーをタブバーと同じ段に移動させたとき検索バーの幅が長くなりすぎるのを調節するのって

#nav-bar,
#nav-bar-customization-target {
ma-width: 300px !important;
}

これではダメだったから助言頼む
0892名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 10:23:48.75ID:gUY6jWO10
最新版は検索バーからショートカットキー検索が使えなくなってしまったので
検索バーは消してロケーションバー一本にしようか試行錯誤しています
ロケーションバーに検索履歴を見られるようにする↓ボタンをつける事は難しいのでしょうか
0896名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 10:50:52.41ID:EkzmtfiL0
>>892
すみません、>>895は不完全でした。
以下のコードに訂正。

.urlbar-history-dropmarker {
visibility:visible !important;
}

#nav-bar:not([customizing="true"]) > #nav-bar-customization-target > #urlbar-container:not(:hover) > #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
opacity:1 !important;
}
0897名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 10:55:17.90ID:6w4IyPbA0
.searchbar-textbox {
min-width: 380px !important;
max-width: 380px !important;

にしたらタブが一番右にいってしまいました
何が足りないでしょうか?
0901名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 11:28:09.65ID:6w4IyPbA0
現在のCSSの設定

/* 多段タブ設定 */
#titlebar-buttonbox {
vertical-align: top !important;
display: block !important;
}
.tabbrowser-arrowscrollbox scrollbox {
overflow: visible !important;
}
.tabbrowser-arrowscrollbox scrollbox > box {
display: block !important;
}
/* タイトルバーの縦幅・高さ */
toolbarbutton.titlebar-button {
min-height: 31px !important;
}
/* タブバーの横幅・長さ */
.tabbrowser-tabs {
margin-right: -41px !important;
}
/* タブの幅・高さ */
.tabbrowser-tab:not([pinned]) {
min-height: 32px !important;
max-height: 32px !important;
}
.tabbrowser-tabs .tabbrowser-tab {
vertical-align: top !important;
-moz-box-sizing: border-box !important;
min-height: 32px !important;
max-height: 32px !important;
}
0902名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 11:29:06.45ID:6w4IyPbA0
/* 新しいタブボタン */
.tabs-newtab-button {
vertical-align: bottom !important;
height: 30px !important;
}
#nav-bar { /* main toolbar */
-moz-box-ordinal-group: 1 !important;
border-top-width: 0 !important;
}

#PersonalToolbar { /* bookmarks toolbar */
-moz-box-ordinal-group: 2 !important;
}

#TabsToolbar { /* tab bar */
-moz-box-ordinal-group: 3 !important;
}
/* 検索バーの幅変更 */
#searchbar{
min-width: 380px !important;
max-width: 380px !important;
}

としています。
0903名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 11:30:12.16ID:EkzmtfiL0
>>899
Firefox57で検証済み。
おマカンでしょう。


>>900
余計なコードを記述しすぎておかしくなっている可能性大。
>>897だけ記述して、余計なコードは全て削除。
それで駄目なら、自分が書いた全てのコードをここに書き出さないと検証不可能。
0904名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 11:40:38.02ID:hTfmxjFA0
下のような形で使っている
ブックマークツールバーは隠してマウスオーバーで表示される

これでも、サイトの表示領域が縦が低くのは否めない
全画面で表示ではまずい場面があるので
全画面表示と同じように、アプリケーションウィンドウを同じようでありたい
キー打鍵のトグルスィッチとアイコンがあると助かる

全画面モードの時の様にツールバーがヌルヌルと降りてこなくても良いけど
降りてくると、もっとよい

なかなか出てこないなぁ

1) https://i.imgur.com/puj5xOX.png
2) https://i.imgur.com/BgdQRqo.png
0907名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 11:44:33.94ID:EkzmtfiL0
Firefox57からサイドバーの背景色が白色になったけど。
これを56以前のようにブックマークツールバーと同じ色に戻したので、おすそ分けします。
尚、Firefox57でテーマをデフォルトで使用している人向けです。


/* Firefox57 サイドバーの背景色をブックマークツールバーと同色にする*/
#sidebar-box {
background-color: var(--toolbar-bgcolor) !important;
}
0908名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 11:45:28.83ID:6w4IyPbA0
>>903
#searchbar{
min-width: 380px !important;
max-width: 380px !important;
}

これだけ記述しても特に変わりはなかった。
ただタブがアドレスバーの上にいっただけだった。
0911名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 12:43:07.79ID:gUY6jWO10
>>896
すいません、57.0.2でuserchrome.cssに書き込んだのですがうちの環境でも表示されません
まっさらなプロファイルで試してcssだけ入れても駄目でした
0919名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 14:27:02.49ID:WXp2Sjgn0
>>916はmaxじゃなくてminだからじゃね

#search-container{
min-width: 380px !important;
max-width: 380px !important;
}

ウチはこれでいけたが
好みでmin-width消したり値小さくしたりしたらいいんじゃないか
0920名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 14:43:51.19ID:0UaOUc3k0
>>919
タブいっぱい出したまま試したのでminだけで行けたつもりでいましたw
最小値の固定だけだったみたいですw
maxで固定しないと横幅無制限みたいですねw
0921名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 14:47:16.85ID:qcwRiOrE0
枠の幅変更はURLバーでちょっとやってたけどmaxmin両方設定してもブラウザの大きさ変えると挙動がちょっと変なので俺は弄るのやめちゃったな
0922名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 14:49:24.08ID:6w4IyPbA0
>>919
いけました!ありがとうございます

ついでで申し訳ないんですがその右にホームボタンを置こうと思って
margin-right: 20px などを指定してみたんですがこれは置けないのでしょうか?
0928次スレテンプレ >>1 案
垢版 |
2017/12/11(月) 21:30:33.48ID:GoiMplwR0
●前スレ
userChrome.css・userContent.cssスレ Part7
https://egg.5ch.net/test/read.cgi/software/1510394098/

●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
Stylus
https://addons.mozilla.org/ja/firefox/addon/styl-us/
User Style Manager
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
https://greasyfork.org/scripts/35880

●CSS(ユーザースタイルを記入するべきファイル)
userChrome.css(UI) / userContent.css(Web Site)

●関連サイト
userstyles.org
https://userstyles.org/

MDN - CSS
https://developer.mozilla.org/ja/docs/Web/CSS

とほほのスタイルシート入門
http://www.tohoho-web.com/css/
0929928
垢版 |
2017/12/11(月) 21:30:54.28ID:GoiMplwR0
Stylusと拙作のUserCSSManagerを追加し、UserCSSLoaderのタイトルとuserstyles.orgのURLを微修正しました
0930名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 22:34:32.09ID:1thkh/1c0
>>907
これ文字色も一緒にできないでしょうか?
0932883
垢版 |
2017/12/11(月) 22:40:59.79ID:1LjYTeCB0
>>888
margin: -23px にして color: #fff !important; 追加して
/* 各種バーの並び順(タイトルバーが最上段と明示) */と
/* 偽タイトルバーの配置 */の
#main-window[tabsintitlebar] #titlebar {
margin-bottom: 4px !important;
height: 20px !important;
}
#main-window[tabsintitlebar] #titlebar-buttonbox {
height: 19px !important;
}
の3種でほぼ解決したわありがとう
0934名無しさん@お腹いっぱい。
垢版 |
2017/12/11(月) 22:52:39.62ID:1thkh/1c0
>>933
テーマをDarkでつかってるんですが
>>907で背景色がDarkになったのは最高なんですが
字が黒色で見にくいんです
なんとか白色とかに変更したいのです
0936名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 00:27:32.45ID:LNNzru7O0
>>934
#sidebar-box {
background-color: var(--toolbar-bgcolor) !important;
color: #00ffff !important;
}
.sidebar-placesTree {
color: #00ffff !important;
}

934さんの環境でどう見えるかわからんけど
白文字じゃなくてシアンにしてみた
0937名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 01:07:17.18ID:LNNzru7O0
#viewButton の color も変更が必要だった
フォルダの色とかテキストボックスと文字色とかは
ブラウザーツールボックス使って余裕がある時に頑張ってみてください
0938名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 01:28:09.14ID:LHN0J4Vc0
>>936
ありがとうございます、見やすくなりました
これで十分満足ですm(_ _)m
0939名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 09:23:03.57ID:5pn8+ym80
>>934
自分はデフォルトでないテーマに >>907 に教えていただいたのを書き込んだら
半透明化しました
もともとサイドバーもポップアップ化してるので、むしろこの方が便利で重宝してます。

>>907 さん、感謝です! <(_ _)>
0940名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 09:56:53.39ID:5pn8+ym80
/* ページ内検索バーを上に*/
findbar {
-moz-box-ordinal-group: 0 !important;
margin-top: -1px !important;
transition: none !important;
}

ココまでは何とか出来たとして・・・
ページ内検索バーの入力窓(?)が左にあるのが不便なので
何とか右に移動させたいのですが誰かご存じの方いますか?

良ければ教えていただけたらアリがたいです <(_ _)>
0941名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 11:20:27.88ID:dUsLhERv0
>>940
「ページ内検索バーをChrome風にする.css」
ページ内検索バーを右上に持っていきます
URLがNGになるので
ページ内検索バーをChrome風にする.css でgoogle検索すれば見つかります

お仕着せっぽいですが
以下のもあるとけっこう便利です
global_FindTerm.uc.js
ページ内検索バーに表示される「Find」を右クリックするとページ内検索バーの文字列が消去される
https://github.com/alice0775/userChrome.js/blob/master/global_FindTerm.uc.js

toggleFindbar by DoubleClick.uc.js
ダブルクリックで検索バーをトグル
ページ領域をダブルクリックでページ内検索バーの開閉をトグル
closeOnly = true → 閉じる機能のみ
closeOnly = false → 開閉機能を両立
https://u6.getuploader.com/script/download/1286

toggle-findbar.uc.xul
Ctrl+Fでページ内検索バーをトグルする
https://oflow.me/archives/256
0942名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 12:16:28.85ID:5pn8+ym80
>>941
ご丁寧にありがとうございます <(_ _)>

「uc.js」も早速試させていただきます。
0943名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 12:49:05.91ID:cI3FOK950
「ページ内検索バーをChrome風にする.css」
なんかボテっとしてるんでいじってみた

findbarに追加 (ちょっと細く)
height: 30px !important;

findbar-textboxを変更 (文字ちょっと小さく)
font-size: 15px !important;
0949943
垢版 |
2017/12/12(火) 15:03:44.94ID:cI3FOK950
>>948
いいのがあったらまた教えてね
0956名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 15:57:02.87ID:LN4K6BWt0
>>954
これ入れてみたのですが、ロケーションバーの左側ではなく、タブバーの左側に移動させる事はcssではできませんか?
0960名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 17:25:16.78ID:5pn8+ym80
>>951

お気遣いありがとうです <(_ _)>

以前はアドオンの「FindBar Tweak」を入れてたのですが使えなくなったので
これを機に一念発起してココも見ながら "userChrome.css" の勉強してる最中です
現状は全くの素人ながら少しでも "userChrome.css" の設定になれたらと思い頑張りたいです。

まだまだペーペーですがここのベテランの方にも色々と教えていただきたく
ヨロシクお願いします。
0961名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 17:26:20.70ID:8YuU4UTr0
>>956
ツールバーで良いなら
document.getElementById("menubar-items").setAttribute("removable", "true");
var box = document.getElementById("nav-bar-customization-target");
box.appendChild(document.getElementById("menubar-items"));

var box = document.getElementById("nav-bar-customization-target");
box.insertBefore(document.getElementById("menubar-items"),box.childNodes[0]);
0962名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 17:34:40.34ID:LN4K6BWt0
>>959
ありがとうございます
思い通りになりました!

>>961
わざわざありがとうございます。
ですが、ウィンドの一番左上、タブバーの左側に表示したかったので、>>959さんのを使わせていただきます
中国語が気になるので、できたらMedleyMenuでやってみたかったのですが
やはりタブバーの左上は出来ないんでしょうかね
0963名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 17:50:57.08ID:dUsLhERv0
>>962
中国語は翻訳サイトで翻訳して日本語に記述しなおせばいいですよ
アイコンも16×16のを準備し64行目 data:image 以降 SuQmCC までの部分を書き換えれば変更できます
アイコンを文字列に変換するサイトがあります
https://hamayapp.appspot.com/static/data_uri_conv.html

アイコンはこんなサイトからもらって来るとか
http://www.iconarchive.com/show/oxygen-icons-by-oxygen-icons.org.html
アイコン抽出ソフトでFirefox.exeなどから取り出せたりできます
http://www.towofu.net/soft/aicon.php
0965名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 18:05:12.35ID:LN4K6BWt0
>>963
64行目のアイコンってなんですかね?
SuQmCCまでと書いてありましたが、エディタで検索しても引っかからないので、後回しにして142行目だけアイコンを変更したのですが
一応目に付くアイコンは自分の想像通りのものなのですが、64行目のアイコンだけなんなのか分からなくて
地球のアイコンではないですよね?
0966名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 18:24:36.58ID:dUsLhERv0
>>965
またごめん
勘違いしてた
自分64行目も142行目と同じだと思いこんでぱっぱと変更してしまってたんだよね
64行目のはなんなのかわからなかったです
とりあえず良しとしましょうか(´・ω・`)
0967名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 18:38:18.67ID:dUsLhERv0
>>965
64行目と142行目の違い分かりました
同じデフォの四角オレンジFirefoxアイコンなんですが
64行目のは16×16
142行目のは32×32のアイコンでした
32×32のアイコンがどこで使われているのかはまだ不明です

こちらのData URI Scheme逆変換できるサイトで確認できます
http://jsdo.it/blades/datauriplayground
0970名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 19:26:48.72ID:LN4K6BWt0
>>968
すみませんでした

>>969
長々とスレチでお付き合いさせてしまってどうもすみませんでした
そしていろいろありがとうございました
0971名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 19:34:19.51ID:VJy8JhvO0
 まっそう気にするなって…
.       ∧__∧
      ( ´・ω・)∧∧l||l >>969-970
       /⌒ ,つ⌒ヽ )
       (___  (   _)
"''"" "'゙''` '゙ ゙゚' ''' '' ''' ゚`
0974名無しさん@お腹いっぱい。
垢版 |
2017/12/12(火) 22:06:24.57ID:vlxtPHp10
いい奴らだな。
0977名無しさん@お腹いっぱい。
垢版 |
2017/12/13(水) 08:59:30.26ID:Ct4aHsXm0
読み込み中のアニメーションを変更したくて
手始めにsvgを外部に移動しようと次のようにしましたが
色が黒になってしまいます
元のように色が変わるようにはできないんでしょうか

browser.cssの記述から元のファイル(chrome://browser/skin/tabbrowser/loading.svg)を見つけて
プロファイルフォルダ内chrome/img/に保存
userChrome.cssに下記のみを記述
:root[sessionrestored] .tab-throbber[busy]::before {
background-image: url("./img/loading.svg") !important;
}
レス数が950を超えています。1000を超えると書き込みができなくなります。

ニューススポーツなんでも実況