|
/* LINE風Redmineテーマ - responsive.css */
|
|
/* レスポンシブデザイン用CSS */
|
|
|
|
/* タブレット - 1024px以下 */
|
|
@media screen and (max-width: 1024px) {
|
|
/* サイドバーを少し狭くする */
|
|
#main-menu {
|
|
width: 220px;
|
|
}
|
|
|
|
/* コンテンツの余白を調整 */
|
|
#main {
|
|
padding: 15px;
|
|
}
|
|
|
|
#content {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* 検索ボックスの幅調整 */
|
|
#top-menu #q {
|
|
width: 180px;
|
|
}
|
|
}
|
|
|
|
/* タブレット - 899px以下 */
|
|
@media screen and (max-width: 899px) {
|
|
/* ヘッダーの調整 */
|
|
#top-menu form {
|
|
display: none; /* 検索ボックスを非表示 */
|
|
}
|
|
|
|
/* テーブルの調整 */
|
|
table.list.issues th,
|
|
table.list.issues td {
|
|
padding: 8px 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 一部の列を非表示に */
|
|
table.list.issues .due_date,
|
|
table.list.issues .created_on,
|
|
table.list.issues .tracker,
|
|
table.list.issues .priority {
|
|
display: none;
|
|
}
|
|
|
|
/* チケット詳細の調整 */
|
|
div.issue .issue-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
div.issue .issue-actions {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
div.issue .attributes th {
|
|
width: 120px;
|
|
}
|
|
|
|
/* ページネーションの調整 */
|
|
.pagination {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.pagination .items,
|
|
.pagination .per-page {
|
|
margin-top: 10px;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* モバイル - 768px以下 */
|
|
@media screen and (max-width: 768px) {
|
|
/* 基本レイアウト */
|
|
body, html {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ヘッダーの調整 */
|
|
#top-menu {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
#top-menu ul {
|
|
gap: 10px;
|
|
}
|
|
|
|
/* メインメニュー調整 */
|
|
#main-menu {
|
|
position: fixed;
|
|
width: 250px;
|
|
left: -250px;
|
|
top: 56px;
|
|
transition: left var(--transition-speed) ease;
|
|
box-shadow: var(--shadow-medium);
|
|
z-index: 1000;
|
|
}
|
|
|
|
#main-menu.open {
|
|
left: 0;
|
|
}
|
|
|
|
/* トグルボタンの表示 */
|
|
#main-menu .main-menu-toggle {
|
|
display: block;
|
|
position: fixed;
|
|
top: 56px;
|
|
left: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: var(--line-primary);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 1001;
|
|
border-radius: 0 0 var(--border-radius-small) 0;
|
|
box-shadow: var(--shadow-small);
|
|
}
|
|
|
|
/* メインコンテンツ調整 */
|
|
#main {
|
|
padding: 10px;
|
|
margin-top: 40px; /* トグルボタンの高さ分 */
|
|
}
|
|
|
|
#content {
|
|
padding: 15px;
|
|
}
|
|
|
|
/* チケット一覧 */
|
|
table.list.issues {
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* チケット詳細 */
|
|
div.journal h4 {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
div.journal h4 .journal-link {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* フォーム要素 */
|
|
select, input[type="text"] {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* ボタングループ */
|
|
.buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.buttons input, .buttons a {
|
|
margin: 0;
|
|
flex: 1;
|
|
min-width: 120px;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* モバイル - 599px以下 */
|
|
@media screen and (max-width: 599px) {
|
|
/* ヘッダー調整 */
|
|
#top-menu .home-text {
|
|
display: none; /* ロゴのテキスト部分を非表示 */
|
|
}
|
|
|
|
/* テーブル調整 */
|
|
table.list.issues th,
|
|
table.list.issues td {
|
|
padding: 6px 3px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* さらに列を非表示に */
|
|
table.list.issues .assigned_to,
|
|
table.list.issues .status,
|
|
table.list.issues .project {
|
|
display: none;
|
|
}
|
|
|
|
/* チケット詳細 */
|
|
div.issue .attributes {
|
|
display: block;
|
|
}
|
|
|
|
div.issue .attributes tr {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
div.issue .attributes th,
|
|
div.issue .attributes td {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 3px 0;
|
|
}
|
|
|
|
/* ページネーション */
|
|
.pagination ul.pages li.page:not(.current) {
|
|
display: none;
|
|
}
|
|
|
|
/* 履歴 */
|
|
div.journal ul.details li {
|
|
flex-direction: column;
|
|
}
|
|
|
|
div.journal ul.details li .label {
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* コメントフォーム */
|
|
#update .input-group {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
#update .input-group label {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* 添付ファイル */
|
|
div.attachments ul li {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
/* フォームのレスポンシブ対応 */
|
|
@media screen and (max-width: 480px) {
|
|
input, select, textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.splitcontent {
|
|
display: block;
|
|
}
|
|
|
|
.splitcontent > * {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.splitcontentleft, .splitcontentright {
|
|
width: 100%;
|
|
float: none;
|
|
}
|
|
|
|
.filter {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.filter .field,
|
|
.filter .operator,
|
|
.filter .values {
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
/* ダークモードサポート（オプション） */
|
|
@media (prefers-color-scheme: dark) {
|
|
/* ダークモード用の変数を上書き */
|
|
:root {
|
|
--line-background: #121212;
|
|
--line-secondary: #FFFFFF;
|
|
--line-light-gray: #2C2C2E;
|
|
--line-mid-gray: #3A3A3C;
|
|
--line-dark-gray: #8E8E93;
|
|
--line-white: #1C1C1E;
|
|
--line-sidebar-bg: #000000;
|
|
--line-panel-bg: #2C2C2E;
|
|
--line-border: #3A3A3C;
|
|
}
|
|
|
|
/* テキスト色の調整 */
|
|
body {
|
|
color: #E5E5E7;
|
|
}
|
|
|
|
/* リンク色の調整 */
|
|
a {
|
|
color: #0A84FF;
|
|
}
|
|
|
|
a:hover {
|
|
color: #5AC8FA;
|
|
}
|
|
|
|
/* コントラスト調整 */
|
|
#top-menu #q {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
div.issue .issue-header {
|
|
background-color: rgba(6, 199, 85, 0.2);
|
|
}
|
|
|
|
table.list.issues tbody tr:nth-child(even) {
|
|
background-color: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
table.list.issues tbody tr:hover {
|
|
background-color: rgba(6, 199, 85, 0.1);
|
|
}
|
|
}
|