BugTrack/2387 comment plugin for Smartphone layout

[pukiwiki/pukiwiki.git] / skin / pukiwiki.css

diff --git a/skin/pukiwiki.css b/skin/pukiwiki.css
index e9a39b2..c36c5ea 100644 (file)
--- a/skin/pukiwiki.css
+++ b/skin/pukiwiki.css
@@ -3,17 +3,19 @@
 /*!
  * PukiWiki - Yet another WikiWikiWeb clone.
  * Copyright
- *   2002-2017 PukiWiki Development Team
+ *   2002-2020 PukiWiki Development Team
  *   2001-2002 Originally written by yu-ji
  * License: GPL v2 or (at your option) any later version
  *
  * Default CSS
  */
 
-pre, dl, ol, p, blockquote { line-height:130%; }
-
-blockquote { margin-left:32px; }
-
+pre, dl, ol, p, blockquote {
+  line-height:130%;
+}
+blockquote {
+  margin-left:32px;
+}
 body,td {
   color:black;
   background-color:white;
@@ -28,25 +30,21 @@ a:link {
   background-color:inherit;
   text-decoration:none;
 }
-
 a:active {
   color:#215dc6;
   background-color:#CCDDEE;
   text-decoration:none;
 }
-
 a:visited {
   color:#a63d21;
   background-color:inherit;
   text-decoration:none;
 }
-
 a:hover {
   color:#215dc6;
   background-color:#CCDDEE;
   text-decoration:underline;
 }
-
 a.external-link:not(.external-link-silent)::after {
   content:url(../image/external-link.png);
   margin:3px;
@@ -57,8 +55,8 @@ h1, h2 {
   color:inherit;
   background-color:#DDEEFF;
   padding:.3em;
-  border:0px;
-  margin:0px 0px .5em 0px;
+  border:0;
+  margin:0 0 .5em 0;
 }
 h3 {
   font-family:verdana, arial, helvetica, Sans-Serif;
@@ -70,7 +68,7 @@ h3 {
   color:inherit;
   background-color:#FFFFFF;
   padding:.3em;
-  margin:0px 0px .5em 0px;
+  margin:0 0 .5em 0;
 }
 h4 {
   font-family:verdana, arial, helvetica, Sans-Serif;
@@ -79,24 +77,23 @@ h4 {
   color:inherit;
   background-color:#FFFFFF;
   padding:.3em;
-  margin:0px 0px .5em 0px;
+  margin:0 0 .5em 0;
 }
 h5, h6 {
   font-family:verdana, arial, helvetica, Sans-Serif;
   color:inherit;
   background-color:#DDEEFF;
-   padding:.3em;
-   border:0px;
-   margin:0px 0px .5em 0px;
+  padding:.3em;
+  border:0;
+  margin:0 0 .5em 0;
 }
-
 h1.title {
   font-size:30px;
   font-weight:bold;
   background-color:transparent;
-  padding:12px 0px 0px 0px;
-  border:0px;
-  margin:12px 0px 0px 0px;
+  padding:12px 0 0 0;
+  border:0;
+  margin:12px 0 0 0;
 }
 
 dt {
@@ -130,9 +127,13 @@ ul {
   line-height:130%;
 }
 
-em { font-style:italic; }
+em {
+  font-style:italic;
+}
 
-strong { font-weight:bold; }
+strong {
+  font-weight:bold;
+}
 
 thead td.style_td,
 tfoot td.style_td {
@@ -145,8 +146,8 @@ tfoot th.style_th {
   background-color:#E0E8F0;
 }
 .style_table {
-  padding:0px;
-  border:0px;
+  padding:0;
+  border:0;
   margin:auto;
   text-align:left;
   color:inherit;
@@ -166,12 +167,24 @@ tfoot th.style_th {
   background-color:#EEF5FF;
 }
 
-ul.list1 { list-style-type:disc; }
-ul.list2 { list-style-type:circle; }
-ul.list3 { list-style-type:square; }
-ol.list1 { list-style-type:decimal; }
-ol.list2 { list-style-type:lower-roman; }
-ol.list3 { list-style-type:lower-alpha; }
+ul.list1 {
+  list-style-type:disc;
+}
+ul.list2 {
+  list-style-type:circle;
+}
+ul.list3 {
+  list-style-type:square;
+}
+ol.list1 {
+  list-style-type:decimal;
+}
+ol.list2 {
+  list-style-type:lower-roman;
+}
+ol.list3 {
+  list-style-type:lower-alpha;
+}
 
 .list-indent1 {
   padding-left:16px;
@@ -191,14 +204,17 @@ ol.list3 { list-style-type:lower-alpha; }
   margin-left:64px;
 }
 
-div.ie5 { text-align:center; }
-
+div.ie5 {
+  text-align:center;
+}
 span.noexists {
   color:inherit;
   background-color:#FFFACC;
 }
 
-.small { font-size:80%; }
+.small {
+  font-size:80%;
+}
 
 .super_index {
   color:#DD3333;
@@ -224,13 +240,13 @@ div.jumpmenu {
 hr.full_hr {
   border-style:ridge;
   border-color:#333333;
-  border-width:1px 0px;
+  border-width:1px 0;
 }
 hr.note_hr {
   width:90%;
   border-style:ridge;
   border-color:#333333;
-  border-width:1px 0px;
+  border-width:1px 0;
   text-align:center;
   margin:1em auto 0em auto;
 }
@@ -238,43 +254,43 @@ hr.note_hr {
 span.size1 {
   font-size:xx-small;
   line-height:130%;
-  text-indent:0px;
+  text-indent:0;
   display:inline;
 }
 span.size2 {
   font-size:x-small;
   line-height:130%;
-  text-indent:0px;
+  text-indent:0;
   display:inline;
 }
 span.size3 {
   font-size:small;
   line-height:130%;
-  text-indent:0px;
+  text-indent:0;
   display:inline;
 }
 span.size4 {
   font-size:medium;
   line-height:130%;
-  text-indent:0px;
+  text-indent:0;
   display:inline;
 }
 span.size5 {
   font-size:large;
   line-height:130%;
-  text-indent:0px;
+  text-indent:0;
   display:inline;
 }
 span.size6 {
   font-size:x-large;
   line-height:130%;
-  text-indent:0px;
+  text-indent:0;
   display:inline;
 }
 span.size7 {
   font-size:xx-large;
   line-height:130%;
-  text-indent:0px;
+  text-indent:0;
   display:inline;
 }
 
@@ -321,105 +337,117 @@ strong.word9 {
 }
 
 /* html.php/edit_form() */
-.edit_form { clear:both; }
+.edit_form {
+  clear:both;
+}
 
 /* pukiwiki.skin.php */
 div#header {
-  padding:0px;
-  margin:0px;
+  padding:0;
+  margin:0;
 }
 
 div#navigator {
   clear:both;
-  padding:4px 0px 0px 0px;
-  margin:0px;
+  padding:4px 0 0 0;
+  margin:0;
 }
 
-td.menubar {
-  width:9em;
-  vertical-align:top;
+div#contents {
+  display:flex;
+  flex-flow:row nowrap;
 }
 
 div#menubar {
   width:9em;
-  padding:0px;
+  padding:0;
   margin:4px;
   word-break:break-all;
   font-size:90%;
   overflow:hidden;
+  order:1;
+  flex-grow:0;
 }
-
 div#menubar ul {
-  margin:0px 0px 0px .5em;
-  padding:0px 0px 0px .5em;
+  margin:0 0 0 .5em;
+  padding:0 0 0 .5em;
+}
+div#menubar ul li {
+  line-height:110%;
+}
+div#menubar h4 {
+  font-size:110%;
 }
-
-div#menubar ul li { line-height:110%; }
-
-div#menubar h4 { font-size:110%; }
 
 div#body {
-  padding:0px;
-  margin:0px 0px 0px .5em;
+  padding:0;
+  margin:0 0 0 .5em;
+  order:2;
+  flex-grow:1;
+}
+
+@media (max-width:767px) {
+  div#contents {
+    flex-flow:column wrap;
+  }
+  div#menubar {
+    width:auto;
+    font-size:100%;
+    order:2;
+  }
+  div#body {
+    order:1;
+  }
 }
 
 div#note {
   clear:both;
-  padding:0px;
-  margin:0px;
+  padding:0;
+  margin:0;
 }
-
 div#attach {
   clear:both;
-  padding:0px;
-  margin:0px;
+  padding:0;
+  margin:0;
 }
-
 div#toolbar {
   clear:both;
-  padding:0px;
-  margin:0px;
+  padding:0;
+  margin:0;
   text-align:right;
 }
-
 div#lastmodified {
   font-size:80%;
-  padding:0px;
-  margin:0px;
+  padding:0;
+  margin:0;
 }
-
 div#related {
   font-size:80%;
-  padding:0px;
-  margin:16px 0px 0px 0px;
+  padding:0;
+  margin:16px 0 0 0;
 }
 div#related .page_passage {
   font-size:60%;
 }
-
 div#footer {
   font-size:70%;
-  padding:0px;
-  margin:16px 0px 0px 0px;
+  padding:0;
+  margin:16px 0 0 0;
 }
-
 div#banner {
   float:right;
   margin-top:24px;
 }
-
 div#preview {
   color:inherit;
   background-color:#F5F8FF;
 }
-
 img#logo {
   float:left;
   margin-right:20px;
 }
 
 /* aname.inc.php */
-.anchor {}
 .anchor_super {
   font-size:xx-small;
   vertical-align:super;
@@ -430,13 +458,10 @@ img#logo {
   font-size:small;
 }
 
-/* br.inc.php */
-br.spacer {}
-
 /* calendar*.inc.php */
 .style_calendar {
-  padding:0px;
-  border:0px;
+  padding:0;
+  border:0;
   margin:3px;
   color:inherit;
   background-color:#CCD5DD;
@@ -516,19 +541,20 @@ span.calendar_viewer_right {
 
 /* clear.inc.php */
 .clear {
-  margin:0px;
+  margin:0;
   clear:both;
 }
 
 /* counter.inc.php */
-div.counter { font-size:70%; }
+div.counter {
+  font-size:70%;
+}
 
 /* diff.inc.php */
 span.diff_added {
   color:blue;
   background-color:inherit;
 }
-
 span.diff_removed {
   color:red;
   background-color:inherit;
@@ -540,16 +566,18 @@ hr.short_line {
   width:80%;
   border-style:solid;
   border-color:#333333;
-  border-width:1px 0px;
+  border-width:1px 0;
 }
 
 /* include.inc.php */
-h5.side_label { text-align:center; }
+h5.side_label {
+  text-align:center;
+}
 
 /* navi.inc.php */
 ul.navi {
-  margin:0px;
-  padding:0px;
+  margin:0;
+  padding:0;
   text-align:center;
 }
 li.navi_none {
@@ -568,7 +596,9 @@ li.navi_right {
 }
 
 /* new.inc.php */
-span.comment_date { font-size:x-small; }
+span.comment_date {
+  font-size:x-small;
+}
 span.new1 {
   color:red;
   background-color:transparent;
@@ -580,27 +610,23 @@ span.new5 {
   font-size:xx-small;
 }
 
-/* popular.inc.php */
-span.counter { font-size:70%; }
-ul.popular_list {
-/*
-  padding:0px;
-  border:0px;
-  margin:0px 0px 0px 1em;
-  word-wrap:break-word;
-  word-break:break-all;
-*/
+/* comment.inc.php */
+._p_comment_name {
+  width: 9em;
+}
+._p_comment_msg {
+  width: 38em;
 }
 
-/* recent.inc.php,showrss.inc.php */
-ul.recent_list {
-/*
-  padding:0px;
-  border:0px;
-  margin:0px 0px 0px 1em;
-  word-wrap:break-word;
-  word-break:break-all;
-*/
+@media (max-width:767px) {
+  ._p_comment_msg {
+    width: 90%;
+  }
+}
+
+/* popular.inc.php */
+span.counter {
+  font-size:70%;
 }
 
 /* ref.inc.php */
@@ -655,15 +681,6 @@ tr.bugtrack_state_undef td {
 }
 
 /* search2.inc.php  */
-input#_plugin_search2_detail:checked ~ ul > div.search-result-detail {
-  display:block;
-}
-input#_plugin_search2_detail ~ ul > div.search-result-detail {
-  display:none;
-}
-._plugin_search2_search_status {
-  min-height:1.5em;
-}
 .search-result-page-summary {
   font-size:70%;
   color:gray;
@@ -680,7 +697,6 @@ input#_plugin_search2_detail ~ ul > div.search-result-detail {
   img#logo,
   div#navigator,
   div#menubar,
-  td.menubar,
   div#related,
   div#attach,
   div#toolbar {