OSDN Git Service

BugTrack/2387 Improve tracker form table border
[pukiwiki/pukiwiki.git] / skin / pukiwiki.css
index 58b2dca..9f1b7b2 100644 (file)
@@ -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;
@@ -22,31 +24,31 @@ body,td {
   font-size:90%;
   font-family:verdana, arial, helvetica, Sans-Serif;
 }
+textarea {
+  box-sizing:border-box;
+  max-width:99.5%;
+}
 
 a:link {
   color:#215dc6;
   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,46 +59,45 @@ 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;
-  border-bottom:  3px solid #DDEEFF;
-  border-top:     1px solid #DDEEFF;
-  border-left:   10px solid #DDEEFF;
-  border-right:   5px solid #DDEEFF;
+  border-bottom:3px solid #DDEEFF;
+  border-top:1px solid #DDEEFF;
+  border-left:10px solid #DDEEFF;
+  border-right:5px solid #DDEEFF;
 
   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;
-  border-left:   18px solid #DDEEFF;
+  border-left:18px solid #DDEEFF;
 
   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-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 +131,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 +150,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,39 +171,54 @@ 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;
-  margin-left: 16px
+  padding-left:16px;
+  margin-left:16px;
 }
 /* list-indent2,3,4 are used for leaping list level indentation */
 .list-indent2 {
-  padding-left: 32px;
-  margin-left: 32px
+  padding-left:32px;
+  margin-left:32px;
 }
 .list-indent3 {
-  padding-left: 48px;
-  margin-left: 48px
+  padding-left:48px;
+  margin-left:48px;
 }
 .list-indent4 {
-  padding-left: 64px;
-  margin-left: 64px
+  padding-left:64px;
+  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 +244,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 +258,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 +341,131 @@ strong.word9 {
 }
 
 /* html.php/edit_form() */
-.edit_form { clear:both; }
+.edit_form {
+  clear:both;
+}
+.edit_form textarea,.edit_form select {
+  width:95%;
+}
 
 /* pukiwiki.skin.php */
 div#header {
-  padding:0px;
-  margin:0px;
+  padding:0;
+  margin:0;
+  word-break:break-all;
 }
 
 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;
+  word-break:break-all;
+  overflow-wrap:break-word;
+  word-wrap:break-word;
 }
 
 div#menubar {
-  width:9em;
-  padding:0px;
+  min-width:9em;
+  max-width:15em;
+  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;
+  max-width:98%;
+  order:2;
+  flex-grow:1;
+}
+
+@media (max-width:767px) {
+  div#contents {
+    flex-flow:column wrap;
+  }
+  div#menubar {
+    width:auto;
+    max-width:none;
+    font-size:100%;
+    order:2;
+  }
+  div#body {
+    order:1;
+  }
+  div#body img {
+    max-width:95%;
+    height:auto;
+  }
 }
 
 div#note {
   clear:both;
-  padding:0px;
-  margin:0px;
+  padding:0;
+  margin:0;
+  word-break:break-all;
 }
-
 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;
@@ -427,16 +473,13 @@ img#logo {
 
 /* list.inc.php */
 .page_passage {
-  font-size: small;
+  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 +559,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 +584,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 +614,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 +628,38 @@ 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;
+  max-width:90%;
 }
 
-/* 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;
-*/
+/* article.inc.php */
+._p_article_name {
+  width:15em;
+}
+._p_article_subject {
+  width:35em;
+}
+._p_article_msg {
+  width:38em;
+  height:5em;
+}
+@media (max-width:767px) {
+  ._p_article_subject {
+    width:82%;
+  }
+  ._p_article_msg {
+    width:90%;
+  }
+}
+
+/* popular.inc.php */
+span.counter {
+  font-size:70%;
 }
 
 /* ref.inc.php */
@@ -625,65 +684,97 @@ td.vote_td2 {
 
 /* topicpath.inc.php */
 span.topicpath-slash {
-  margin: 0 0.4em;
+  margin:0 0.2em;
 }
 span.topicpath-top {
-  user-select: none;
+  user-select:none;
 }
 
 /* bugtrack.inc.php */
 tr.bugtrack_list_header th {
-  background-color: #ffffcc;
+  background-color:#ffffcc;
 }
 tr.bugtrack_state_proposal td {
-  background-color: #ccccff;
+  background-color:#ccccff;
 }
 tr.bugtrack_state_accept td {
-  background-color: #ffcc99;
+  background-color:#ffcc99;
 }
 tr.bugrack_state_resolved td {
-  background-color: #ccffcc;
+  background-color:#ccffcc;
 }
 tr.bugtrack_state_pending td {
-  background-color: #ffccff;
+  background-color:#ffccff;
 }
 tr.bugtrack_state_cancel td {
-  background-color: #cccccc;
+  background-color:#cccccc;
 }
 tr.bugtrack_state_undef td {
-  background-color: #ff3333;
+  background-color:#ff3333;
 }
-
-/* search2.inc.php  */
-input#_plugin_search2_detail:checked ~ ul > div.search-result-detail {
-  display: block;
+._p_bugtrack_form_summary {
+  width:35em;
+}
+._p_bugtrack_form_body {
+  width:35em;
 }
-input#_plugin_search2_detail ~ ul > div.search-result-detail {
-  display: none;
+@media (max-width:767px) {
+  ._p_bugtrack_form th,._p_bugtrack_form td {
+    display:block;
+    text-align:left !important;
+    margin-left:2%;
+    margin-right:2%;
+  }
+}
+
+/* tracker.inc.php */
+._p_tracker_form th {
+  min-width:5em;
 }
-._plugin_search2_search_status {
-  min-height: 1.5em;
+@media (max-width:767px) {
+  ._p_tracker_form th,._p_tracker_form td {
+    display:block;
+    text-align:left !important;
+    width:auto !important;
+    margin:0;
+  }
+  ._p_tracker_form td input[type=text] {
+    box-sizing:border-box;
+    max-width:100%;
+    width:99.5%;
+  }
+  ._p_tracker_form td textarea {
+    width:99.5%;
+  }
+  ._p_bugtrack_form_summary {
+    width:95%;
+  }
+  ._p_bugtrack_form_body {
+    width:95%;
+    height:6em;
+  }
 }
+
+/* search2.inc.php  */
 .search-result-page-summary {
-  font-size: 70%;
-  color: gray;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  font-size:70%;
+  color:gray;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 
 @media print {
   a:link,
   a:visited {
-    text-decoration: underline;
+    text-decoration:underline;
   }
   img#logo,
   div#navigator,
   div#menubar,
-  td.menubar,
   div#related,
   div#attach,
   div#toolbar {
-    display: none;
+    display:none;
   }
 }