diff options
Diffstat (limited to 'design')
-rw-r--r-- | design/style.css | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/design/style.css b/design/style.css new file mode 100644 index 0000000..d186eda --- /dev/null +++ b/design/style.css @@ -0,0 +1,204 @@ +body { + background: #eeeeee; + padding: 0px; + margin: 0px; + width: 400px; +} + +@media (min-device-width: 400px) and (min-width: 400px) { + body { + width: 100%; + } +} + +a { + color: #007; + text-decoration: none; +} + +h1 { + clear: both; + margin: 0px; + padding: 0px; + font-size: 1.2em; + text-align: center; + text-transform: uppercase; +} + +.menu { + padding: 4px; + margin-bottom: 8px; + background: #ddd; + border-bottom: 1px solid #ccc; +} + +.menu .right { + float: right; +} + +.menu .right a { + text-align: right; +} + +.menu a { + display: inline-block; + padding: 8px; +} + +@media (min-device-width: 400px) and (min-width: 400px) { + .menu { + padding-left: 20px; + padding-right: 20px; + } + + .menu a { + min-width: 100px; + padding: 4px; + } +} + +.contents-left, .contents-right { + padding: 2px; +} + +@media (min-device-width: 400px) and (min-width: 400px) { + .contents-left { + position: absolute; + top: 50px; + left: 0px; + bottom: 16px; + width: 300px; + border-right: 1px solid #ccc; + overflow: auto; + padding: 16px; + } + + .contents-right { + position: absolute; + top: 50px; + left: 332px; + bottom: 16px; + right: 0px; + overflow: auto; + padding: 16px; + } +} + +dt { + font-weight: bold; +} + +iframe, textarea { + width: 98%; + min-height: 200px; +} + +@media (min-device-width: 400px) and (min-width: 400px) { + label { + border-bottom: 1px dashed gray; + } + + label, .empty_label { + display: inline-block; + width: 200px; + margin-right: 8px; + } + + form { + padding-left: 8px; + padding-bottom: 8px; + border: 1px solid #ccc; + border-top: 0px; + border-right: 0px; + margin-top: 16px; + } + + input[type=submit], button { + width: 100px; + margin-right: 8px; + } + + input[type=text], input[type=password] { + width: 300px; + } + + iframe, textarea { + border: 1px solid gray; + width: 98%; + height: 400px; + } + + textarea { + margin: 8px; + } +} + +.error { + margin-top: 8px; + margin-bottom: 8px; + padding: 8px; + border: 1px solid red; + color: red; + background-color: #FCC; +} + +.message { + margin-top: 8px; + margin-bottom: 8px; + padding: 8px; + border: 1px solid green; + background-color: #CFC; + color: green; +} + +.tree_branch { + border-left: 1px solid #ddd; + padding-left: 16px; + margin-bottom: 4px; +} + +.tree_root p { + margin: 0px; + padding: 1px; + padding-top: 8px; +} + +.tree_branch p { + margin: 0px; + padding: 1px; +} + +.small_right { + float: right; +} + +.small_right, .tool_link { + font-size: 0.8em; + font-style: italic; +} + +table { + margin: 8px; + width: 99%; + border-collapse: collapse; +} + +td, th { + border: 1px solid #bbb; +} + +td { + background-color: #eee; + padding: 6px; + vertical-align: top; +} + +th { + background-color: #ddd; + padding: 2px; + text-align: center; +} + +abbr { + border-bottom: 1px dashed #999; +} |