Difference between revisions of "MediaWiki:Common.css"

From The Mastodon Wiki
Jump to: navigation, search
(Created page with "CSS placed here will be applied to all skins: @charset "utf-8"; ---------------------------------- 全体定義 ----------------------------------: html { width...")
(No difference)

Revision as of 09:43, 27 April 2017

/* CSS placed here will be applied to all skins */

@charset "utf-8";

/*----------------------------------
  全体定義
----------------------------------*/

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: #191B22;
  background-image: url("https://mastodon.social/assets/mastodon-getting-started-a6f485964e4d4e5e51c3ba82d65e9a3017e85543cc14d7e7e8d622234a1930e0.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.rootpage-メインページ #content h1 {
display: none;
}

/*------------------------------
  ヘッダー
------------------------------*/
#header_wrapper {
  background-image: url('https://mstdn.wiki/images/7/77/Fluffy_elephant_friend.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: auto;
  background-color: rgb(25,27,34);
  padding: 16px;
}

#header_wrapper .wiki_title {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-left: 128px;
  border: none;
}

#header_wrapper .wiki_sub_title {
  font-size: 16px;
  color: #fff;
  margin-left: 128px;
}

#header_wrapper .wiki_desc {
  color: #bbb;
  display: block;
  margin-left: 128px;
}

/*------------------------------
  UI 装飾
------------------------------*/

#p-personal * {
  color: #CDDBE2!important;
}

#mw-panel {
  background-color: #444B5D;
  width: 100%;
}

#left-navigation * , #right-navigation * {
  background-color: transparent!important;
  background-image: none!important;
  color: #9BAEC8!important;
}

#left-navigation, #right-navigation {
  background-color: #313543;
}

#right-navigation #searchform {
  background-color: #282C37!important;
  color: #657184;
  border-radius: 5px;
}

#right-navigation #searchform #simpleSearch {
  border: none;
}

#mw-page-base {
  background-color: #191B22;
  background-image: none;
}

#mw-panel * {
  color: #fff!important;
}

#mw-panel a, #mw-panel a:visited {
  color: rgb(217, 225, 232)!important;
  text-decoration: none;
}

#footer a, #footer a:visited  {
  color: rgb(217, 225, 232)!important;
}

div#footer ul li {
  color: #fff!important;
}

/*---------------------------------
  各要素
---------------------------------*/

/* 引用文 */
blockquote {
  border-left: 3px solid #939598;
  padding: 8px 16px;
  margin-bottom: 10px;
  margin-left: 24px;
}

/* アンカーリンク 擬似クラスホバー */
a:hover {
  text-decoration: underline!important;
}

/*------------------------------
  テンプレート全体定義 テーブル
------------------------------*/

table.infobox {
  margin: 0 24px;
  width: 382px;
  float: right;
}

table.infobox p {
  line-height: 1;
}

#content #mw-content-text table.infobox {
  border-collapse: collapse;
  border-spacing: 0px 0px;
  border: 1px solid #393F4F;
  font-size: 12px;
  line-height: 17px;
  margin-bottom: 24px;
}

#content #mw-content-text:not(#mw-changeslist) table.infobox th {
  font-weight: bold;
  color: #fff;
  background-color: #313543;
}

#content #mw-content-text:not(#mw-changeslist) table.infobox td,
#content #mw-content-text:not(#mw-changeslist) table.infobox th {
  padding: 5px;
  border: 1px solid rgb(102, 102, 102);
}

/*------------------------------
  トップページ カラム
------------------------------*/

#top_main_wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#top_main_column {
  flex: 2;
  padding: 16px;
}

#top_aside_column {
  flex: 1;
  padding: 16px;
}

/*------------------------------
  秀逸な記事
------------------------------*/

/* 親要素Wrapper */
#great_entry {
  /*color: #fff;*/
  box-sizing: border-box;
  /*border: 1px solid #232230;*/
  background-color: #e8eaf6;
}

/* 入れ子Wrapper */
#great_entry .great_entry_wrap {
  width: auto;
  padding: 8px;
  margin: auto;
}

/* 画像ボックス */
#great_entry .thumb_box {
  width: 100px;
  height: 100px;
  float: left;
  /*background-color: #191B22;*/
  overflow: hidden;
  margin-right: 16px;
}

/* 画像 */
#great_entry .thumb_box img {
  max-width: 100%;
  max-height: 100%;
}

/* タイトル */
#great_entry .great_entry_wrap h3 a {
  font-size: 18px;
  display: block;
  background-color: #3f51b5;
  color: #fff;
  padding: 3px 16px;
}

/* 抜粋文 */
#great_entry .great_entry_wrap > p {
  text-indent: 1em;
}

/* リンク */
#great_entry .great_entry_wrap .great_entry_anchor p {
  text-align: right;
}

/* リンク */
#great_entry .great_entry_wrap .great_entry_anchor a {
  /*color: #199DFA;*/
}

/*------------------------------
  新しい記事
------------------------------*/

#new_entrys {
  /*color: #fff;*/
  box-sizing: border-box;
  /*border: 1px solid #232230;*/
  background-color: #E0F2F1;
}

/* 入れ子Wrapper */
#new_entrys .new_entrys_wrap {
  width: auto;
  padding: 8px;
  margin: auto;
}

#new_entrys .new_entrys_wrap h3 {
  font-size: 18px;
  display: block;
  background-color: #4caf50;
  color: #fff;
  padding: 3px 16px;
}

#new_entrys .new_entrys_wrap .entry {
  margin-bottom: 8px;
}

#new_entrys .new_entrys_wrap .entry a {
  /*color: #199DFA;*/
}

/*------------------------------
  右カラム
------------------------------*/

#before_edit {
  background-color: #e0f7fa;
  padding: 8px;
}

#before_edit h3.child_title {
  font-size: 18px;
  display: block;
  background-color: #009688;
  color: #fff;
  padding: 3px 16px;
}

/*-----------------------------
  for_other_contrys_people
-----------------------------*/
.for_other_contrys_people {
  background-color: #fff8e1;
  padding: 8px;
}

.for_other_contrys_people h3 {
  font-size: 18px;
  display: block;
  background-color: #ffc107;
  color: #000;
  padding: 3px 16px;
}