peertube-plugin-admin-message/dist/admin-message-styles.css

動画・配信ページの説明欄下にインスタンス管理者からのメッセージを表示するプラグインです。

.admin-message {
  margin: 15px 0;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid;
  font-size: 16px; /* 14px から 16px に変更 */
  line-height: 1.6; /* 1.5 から 1.6 に変更で読みやすさ向上 */
  position: relative;
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Light theme styles */
.admin-message-info {
  background-color: #e3f2fd;
  border-left-color: #2196f3;
  color: #0d47a1;
}

.admin-message-warning {
  background-color: #fff3e0;
  border-left-color: #ff9800;
  color: #e65100;
}

.admin-message-success {
  background-color: #e8f5e8;
  border-left-color: #4caf50;
  color: #2e7d32;
}

.admin-message-error {
  background-color: #ffebee;
  border-left-color: #f44336;
  color: #c62828;
}

.admin-message-default {
  background-color: #f5f5f5;
  border-left-color: #757575;
  color: #424242;
}

/* 新規追加: 透明スタイル */
.admin-message-transparent {
  background-color: transparent;
  border-left-color: transparent;
  color: inherit; /* 親要素の文字色を継承 */
  border-left: none; /* 左の境界線を完全に削除 */
  padding-left: 0; /* 左パディングも調整 */
}

/* Dark theme styles */
body.dark .admin-message-info {
  background-color: #1a237e;
  border-left-color: #64b5f6;
  color: #bbdefb;
}

body.dark .admin-message-warning {
  background-color: #e65100;
  border-left-color: #ffb74d;
  color: #ffe0b2;
}

body.dark .admin-message-success {
  background-color: #1b5e20;
  border-left-color: #81c784;
  color: #c8e6c9;
}

body.dark .admin-message-error {
  background-color: #b71c1c;
  border-left-color: #e57373;
  color: #ffcdd2;
}

body.dark .admin-message-default {
  background-color: #424242;
  border-left-color: #bdbdbd;
  color: #e0e0e0;
}

/* ダークテーマでも透明スタイルは透明のまま */
body.dark .admin-message-transparent {
  background-color: transparent;
  border-left-color: transparent;
  color: inherit;
  border-left: none;
  padding-left: 0;
}

/* Responsive design */
@media (max-width: 768px) {
  .admin-message {
    margin: 10px 0;
    padding: 12px;
    font-size: 15px; /* モバイルでも 13px から 15px に変更 */
  }
  
  /* モバイルでの透明スタイル調整 */
  .admin-message-transparent {
    padding-left: 0;
  }
}

/* Links styling */
.admin-message a {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}

.admin-message a:hover {
  opacity: 0.8;
}

/* 透明スタイルでのリンク調整 */
.admin-message-transparent a {
  color: #007bff; /* 透明背景の場合はリンク色を明示的に設定 */
}

body.dark .admin-message-transparent a {
  color: #64b5f6; /* ダークテーマでのリンク色 */
}

/* Lists styling */
.admin-message ul,
.admin-message ol {
  margin: 8px 0;
  padding-left: 20px;
}

.admin-message li {
  margin: 4px 0;
}

/* Headers styling */
.admin-message h1,
.admin-message h2,
.admin-message h3,
.admin-message h4,
.admin-message h5,
.admin-message h6 {
  margin: 10px 0 8px 0;
  font-weight: 600;
}

.admin-message h1 { font-size: 1.6em; } /* 1.5em から 1.6em に */
.admin-message h2 { font-size: 1.5em; } /* 1.4em から 1.5em に */
.admin-message h3 { font-size: 1.4em; } /* 1.3em から 1.4em に */
.admin-message h4 { font-size: 1.3em; } /* 1.2em から 1.3em に */
.admin-message h5 { font-size: 1.2em; } /* 1.1em から 1.2em に */
.admin-message h6 { font-size: 1.1em; } /* 1em から 1.1em に */

/* 文字の太さをオプションで調整可能にする追加クラス */
.admin-message-bold {
  font-weight: 600;
}

.admin-message-normal {
  font-weight: 400;
}

/* 追加: より大きな文字サイズオプション */
.admin-message-large {
  font-size: 18px;
}

.admin-message-extra-large {
  font-size: 20px;
}