1 files changed, 198 insertions, 0 deletions
diff --git a/res/styles.css b/res/styles.css
new file mode 100644
index 0000000..92fdd2d
--- /dev/null
+++ b/res/styles.css
@@ -0,0 +1,198 @@
+body{
+    /*  
+    background-image: url(bg.jpg);
+    background-repeat: repeat;
+    */
+    background-color: #3a3a3a;
+    margin-top: 0;
+}
+
+#header{
+}
+
+#dachai_logo{
+    width:100px;
+    float: left;
+}
+
+#site_title{
+    font-size:12px;
+}
+
+#container {
+    margin:0 auto; 
+    max-width: 720px;
+    background-color: #fff;
+    min-height: 100%;
+}
+
+#music_inner { 
+    float: left;
+    position: relative;
+    left: 50%;
+  /*  background: #FDD;*/
+}
+
+#music_outer { 
+    overflow: hidden;
+/*    background: #FFC;*/
+}
+
+#music_list {
+    float: left;
+    position: relative;
+    left: -50%;
+  /*  background: #080;*/
+}
+
+.music_container { 
+    width: 100px; 
+    height: 150px;
+    background-color: #e9e9e9;
+    margin: 10px;
+    float:left;
+    position:relative;
+}
+
+.music_container .cover_img { 
+    width: 100px; 
+    left: 0px;
+}
+
+.music_container .play_img{ 
+    object-fit: cover;
+    position: absolute;
+    left: 0px;
+    width: 100px;
+    z-index: 10;
+    display: none;
+}
+
+.music_container .music_title { 
+    display: block;
+    height: 45px;
+    font-size:10px;
+    padding: 3px;
+    text-align: center;
+    overflow:hidden;
+    line-height: 40px;
+    text-decoration-line: none;
+    font-weight:bold;
+    background:#000;
+    color:#fff;
+}
+
+.music_container .music_title:hover{
+    background:#ffffffff;
+    color:#3a3a3a;
+}
+
+.music_container .music_image_root { 
+    width: 100px; 
+    height: 100px;
+}
+
+.tags_container {
+     width:80%;
+     margin-top: 10px;
+}
+
+.tag_link {
+    font-size: 80%;
+    color: #fff;
+    background: #ccc;
+    text-decoration: none;
+    padding: 3px 5px;
+    border: 0px solid;
+    border-radius: 4px;
+    margin-right: 7px;
+    font-family: serif, monospace, cursive;
+    font-size:15px;
+}
+
+.tag_link:hover{
+    background: rgb(0, 0, 0);
+    color: #fff;
+}
+
+#titlebar {
+    padding:6px;
+    border-top:1px solid #000;
+    border-bottom:1px solid #000;
+}
+
+#titlebar  .title_link{
+    text-decoration-line: none;
+    color:#000;
+    float: left;
+    display: block;
+    padding: 2px 5px;
+    margin-right: 10px;
+}
+
+#titlebar  .title_link:hover{
+    color:#fff;
+    background-color: #000;
+}
+
+#titlebar .search{
+    float: right;
+    height: auto;
+}
+
+#seach_form{
+    margin: 0;
+}
+
+#searchbar_input {
+    max-width: 150px;
+}
+
+#music_player_container {
+    max-width: 95%;
+    margin: 0 auto;
+}
+
+#music_player_container .music_cover{
+    width: 300px;
+    margin: 0 auto;
+    margin-bottom: 10px;
+    display: block;
+}
+
+#music_player { 
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+#music_player_container label {
+    font-size: 12px;
+}
+
+#music_player_container a {
+    font-size: 12px;
+}
+
+#music_player_container .key {
+    margin-right: 5px;
+    line-height: 20px;
+}
+
+#music_player_container .value {
+    font-weight: bold;
+}
+
+#search-condition { 
+    width: 100%;
+    padding: 10px;
+}
+
+#search-condition .search-hint {
+
+}
+
+#search-condition .search-value {
+    font-weight:bold;
+}
+
+