『ピクトセンス』において、表示領域の高さが小さい場合でも、必要な情報が表示領域内に入るようにします。
/* ==UserStyle==
@name ピクトセンス 七六八
@description 『ピクトセンス』において、表示領域の高さが小さい場合でも、必要な情報が表示領域内に入るようにします。
@namespace https://greasyfork.org/users/137
@version 2.0.1
@license CC-BY-4.0
@contributionURL https://www.amazon.co.jp/registry/wishlist/E7PJ5C3K7AM2
@compatible Edge
@compatible Firefox 推奨 (Recommended)
@compatible Opera
@compatible Chrome
@author 100の人
@homepageURL https://greasyfork.org/users/137
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("pictsense.com") {
/*------------------------------------
ページ全体
*/
#base {
display: inline-block;
width: auto !important;
min-width: 825px !important; /* 全体の初期幅 */
margin-left: 175px !important; /* 左側の広告の幅 */
margin-right: 175px !important; /* 右側の広告の幅 */
}
#gameScreen {
/* 入室後のページ */
width: 100vw !important;
max-width: 1450px !important; /* キャンバス・パレットの幅 ＋ 全体の初期幅 */
margin-top: 45px !important; /* 各設定ボタンの高さ */
position: relative !important;
/* 人数が増えた時に参加者名が広告に隠れないように */
z-index: 1;
}
#gameScreen::after {
/* clearfix */
content: "";
display: block;
clear: both;
}
/*------------------------------------
設定
*/
#messageScrollModeSelect,
#roomDataButton,
#muteButton,
#tweetButton,
#leaveButton,
#joinButton,
#gameStartButton {
position: absolute;
top: -45px; /* －（各設定ボタンの高さ） */
}
#messageScrollModeSelect {
/* コメントのマーキーに関する設定 */
left: 0;
}
#roomDataButton {
/* 「部屋情報」ボタン */
left: 150px; /* ボタンの幅 */
margin-top: 5px !important;
}
#muteButton {
/* 「音声ミュート」ボタン */
left: 300px; /* ボタンの幅×2 */
}
#tweetButton {
/* 「部屋をツイート」ボタン */
left: 450px; /* ボタンの幅×3 */
}
#leaveButton {
/* 「退室」ボタン */
left: 600px; /* ボタンの幅×4 */
}
#joinButton,
#gameStartButton {
/* 「ゲームに参加する」、または「ゲームスタート」ボタン */
left: 800px; /* ボタンの幅×4 ＋ 左マージン */
margin-top: 5px !important;
}
#gameStart > p {
/* 「ゲームスタート」ボタンの説明文 */
display: none;
}
/*------------------------------------
残り時間とお題
*/
#gameScreenTitle {
max-width: 825px; /* 全体の初期幅 */
position: absolute !important;
left: 625px; /* キャンバス・パレットの幅 */
right: 30px; /* スクロールバーの幅 */
text-align: left;
}
#countDown {
/* 残り時間 */
margin-left: 10px;
text-align: center;
}
/*------------------------------------
チャット
*/
#chatField {
width: auto !important;
max-width: 824px; /* 全体の初期幅 */
position: absolute;
top: 42px; /* お題の高さ */
left: 625px; /* キャンバス・パレットの幅 */
right: 30px; /* スクロールバーの幅 */
}
/*------------------------------------
コメント送信フォーム
*/
#chatForm {
padding-left: 10px !important;
text-align: left;
}
#chatText {
/* コメント入力欄 */
max-width: calc(100% - 100px); /* コメント送信フォームの幅 － 「回答/発言」ボタンの幅 */
}
#chatSubmitButton {
/* 「回答/発言」ボタン */
width: auto !important;
}
/*------------------------------------
参加者数・閲覧者数
*/
#userListField > h2 {
position: absolute;
left: 625px;
top: 300px;
}
/*------------------------------------
参加者一覧
*/
#userList {
width: auto !important;
display: block;
max-width: 825px; /* 全体の初期幅 */
position: absolute;
top: 320px; /* お題の高さ ＋ チャット欄の高さ + count height */
left: 625px; /* キャンバス・パレットの幅 */
right: 30px; /* スクロールバーの幅 */
margin-left: 0 !important;
border: none !important;
text-align: left;
}
#userList tbody {
display: block;
}
#userList tr {
/* 参加者 */
width: 200px; /* 右カラムの初期幅 */
display: inline-table;
margin-right: 4px !important;
margin-bottom: 4px !important;
}
}