/
design.css
129 lines (120 loc) · 4.64 KB
/
design.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
@charset "utf-8";
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,font,img,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td{margin: 0;padding: 0;}
img,div{border-width:0px;}
a{text-decoration: none;}
img{vertical-align: bottom;}
textarea {resize: none;}
body {
font-family:'Helvetica Neue', Helvetica,'Hiragino Kaku Gothic Pro', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}
/* default */
input:focus{outline:none;}
button:focus{outline:none;}
textarea:focus{outline:none;}
textarea{resize:none;}
:placeholder-shown {color: #c4cbd0;font-weight: 400;}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder{color: #c4cbd0;font-weight: 400;}
/* Firefox 18- */
:-moz-placeholder {color: #c4cbd0;opacity: 1;font-weight: 400;}
/* Firefox 19+ */
::-moz-placeholder{color: #c4cbd0;opacity: 1;font-weight: 400;}
/* IE 10+ */
:-ms-input-placeholder{color: #c4cbd0;font-weight: 400;}
/* header */
#modal-back{
width: 100%;position: fixed;height: 100%;z-index: 100;display: none;cursor: pointer;
}
#modal{
position: fixed;z-index: 101;left: 50%;width: 80%;display: none;
}
#modal-area{
width: 80%;background: rgba(37, 43, 46, 0.7);height:300px;margin-top:80px;left: -40%;position: absolute;
}
#modal-area-title{
font-size: 24px;text-align: center;padding-top:40px;color: #fff;
}
#modal-area-subtitle{
font-size: 24px;text-align: center;padding-top:20px;color: #fff;
}
#modal-area-input-back{
text-align: center;
}
#modal-area-input{
margin-top:30px;width: 80%;height:45px;line-height:45px;border:none;font-size: 16px;padding:0px 5px;box-sizing: border-box;
}
#modal-area-button{
background: #e35656;border-radius: 50px;margin:20px auto 0px;color: #fff;width: 80%;height:45px;line-height:45px;text-align: center;cursor: pointer;
}
/* header */
#header{
height:50px;line-height:50px;border-bottom: 1px solid #E8E8E8;position: relative;
}
.header-title{
position: absolute;width:165px;color: #5C9EE9;font-size:20px;text-align: center;font-weight: 400;
}
.header-newapp-button{
position: absolute;right:10px; background: #36A2F9;font-size: 12px;color:#fff;border-radius: 20px;text-align: center;width:80px;height:30px;line-height:30px;margin-top: 10px;cursor: pointer;
}
/* sideBar */
#sidebar{
position: absolute;background: #4A586A;width:165px;height:100%;z-index: 3;box-shadow: -2px 2px 3px 0px rgba(0, 0, 0, 0.24) inset;font-size: 14px;
}
.sidebar-tag{
margin-top: 10px;color:#fff;padding-left:5px;border-radius: 0px 40px 40px 0px / 0px 40px 40px 0px;width:155px;height:35px;line-height:35px;box-sizing: border-box;font-weight: 300;cursor: pointer;
}
.sidebar-tag-title{
color: #fff;opacity: 0.56;font-weight: 300;margin-top:40px;padding-left:5px;
}
.sidebar-tag-on{
background: #6B96C3;
}
.sidebar-tag-off{
background: rgba(217, 235, 240, 0.29);
}
/* sideBarRight */
#sidebar-right{
position: absolute;right:0;width: 240px;height:100%;border-left:1px solid #d8d8d8;background: #fff;z-index: 2;padding:10px;box-sizing: border-box;
}
/* contens */
#contens{
position: absolute;background: #F1F4F5;width: 100%;height:100%;z-index: 2;
}
.contens-in{
padding:12px 240px 10px 165px;
}
.contens-sendarea-padding{
padding:0px 12px;
}
#contens-input-text{
border:1px solid #DEE3E5;height:35px;line-height:35px;font-size:16px;width: 100%;box-sizing: border-box;padding:0px 8px;
}
#contens-input-textarea{
border:1px solid #DEE3E5;height:125px;font-size:16px;width: 100%;box-sizing: border-box;padding:8px 8px;margin-top: 10px;
}
.contens-sendarea{
background: #fff;padding:10px;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.21);
}
.contens-input-area{
padding-top: 8px;
}
.contens-input-sendbutton{
background:none;width:70px;border:1px solid #DEE3E5;border-radius: 50px;text-align: center;height:30px;line-height:23px;font-size:14px;color: #707070;float:left;cursor: pointer;
}
.contens-input-sendbutton-marginleft{
margin-left: 5px;
}
.contens-input-savebutton{
width:60px;border:none;border-radius: 50px;text-align: center;height:30px;line-height:25px;font-size:12px;color: #ffffff;float:right;margin-left: 5px;cursor: pointer;background: #b5c6cb;
}
.contens-input-saveinput{
background:none;width:140px;border:1px solid #DEE3E5;border-radius: 50px;height:28px;line-height:18px;font-size:12px;float:right;margin-left: 5px;padding-left: 10px;
}
#contens-logarea{
background: #fff;position: fixed;bottom: 0;width: 100%;border-top: 1px solid #B4BCC1;
}
#contens-logarea-textarea{
border:none;height:180px;font-size:16px;width: 100%;box-sizing: border-box;padding:10px 10px;
}
/*クラス*/
.clear-fix{clear:both;}