demo/calendar/style.css

   1 @charset "utf-8";
   2 /* CSS Document */
   3 body {
   4         font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
   5         word-wrap:break-word;
   6 }
   7 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure,time {
   8         margin:0;
   9         padding:0;
  10         -webkit-text-size-adjust:none
  11 }
  12 table {
  13         border-collapse:collapse;
  14         border-spacing:0
  15 }
  16 fieldset,img {
  17         border:0
  18 }
  19 address,caption,cite,code,dfn,em,strong,th,var {
  20         font-style:normal;
  21         font-weight:normal
  22 }
  23 ol,ul,li {
  24         list-style:none
  25 }
  26 caption,th {
  27         text-align:left
  28 }
  29 h1,h2,h3,h4,h5,h6 {
  30         font-size:100%;
  31         font-weight:normal
  32 }
  33 q:before,q:after {
  34         content:''
  35 }
  36 abbr,acronym {
  37         border:0
  38 }
  39 section,aside,article,nav {
  40         display:block
  41 }
  42 a{
  43         color:#246183;
  44         text-decoration:none
  45 }
  46 html {
  47         font-size:100%;
  48         -webkit-text-size-adjust:100%;
  49         -ms-text-size-adjust:100%
  50 }
  51 body {
  52         margin:0;
  53         font-size:14px;
  54         line-height:1.231;
  55         height:100%;
  56         width:100%;
  57         background:#e8e8e8;
  58         padding-bottom:30px;
  59 }
  60 input,button {
  61         -webkit-tap-highlight-color:rgba(0,0,0,0)
  62 }
  63 input,input:focus,select:focus {
  64         border:none;
  65         outline:none;
  66         background-color:#fff
  67 }
  68 .org{ color: #ee4e00;}
  69 .blue{ color: #1a3181;}
  70 .red{ color:#F00;}
  71 .rred{ color:#aa0112;}
  72 .green{ color:#090;}
  73 .hide{ display:none;}
  74 .show{ display:block;}
  75
  76 .icon{ background:url(http://cdn.tuijs.com/upload/icon.png) no-repeat; width:36px; height:36px; display:block;}
  77 .icon_set{ background-position:0 -64px;}
  78
  79 .toolbar{
  80         overflow:hidden;
  81         width:100%;
  82         position:relative;
  83         left:0px;
  84         top:0px;
  85         z-index:999;
  86         height: 46px;
  87         background-image: -webkit-gradient(linear,center top,center bottom,from(#df481a), to(#c82713));
  88         background-color:#d33716;
  89         border-bottom:1px solid #ec6624;
  90         display: -webkit-box;
  91     display: box;
  92 }
  93 .toolbar h1{
  94         margin:5px 0 0 10px;
  95         height:36px;
  96         line-height:36px;
  97         font-size:22px;
  98         color:#FFF;
  99         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
 100         font-weight:bold;
 101         -webkit-box-flex: 2;
 102     box-flex: 2;
 103 }
 104 .toolbar .icon_calendar{
 105         margin:5px 0 0 10px;
 106 }
 107 .toolbar .action{
 108         margin:5px 10px;
 109         display:block;
 110         height:36px;
 111         line-height:36px;
 112         font-size:20px;
 113         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
 114         font-weight:bold;
 115         color:#FFF;
 116         text-align:right;
 117         -webkit-box-flex: 1;
 118     box-flex: 1;
 119 }
 120 .toolbar .action .today{
 121         color:#FFF;
 122 }
 123
 124 .wrapper{
 125         width:100%;
 126 }
 127 .slide_wrap{
 128         width:100%;
 129         height:320px;
 130         overflow:hidden;
 131 }
 132 .date_slide{
 133         position:relative;
 134         left:0px;
 135         top:0px;
 136         transform-origin:0 0;
 137         -webkit-transform-origin:0 0;
 138         /*-webkit-animation-timing-function: ease-in-out;
 139         -webkit-transition-duration: 300ms;*/
 140 }
 141 .date_list{
 142         font-family: "Courier New", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
 143         position:absolute;
 144         top:0px;
 145         left:0px;
 146         -webkit-transform-origin:0 0;
 147 }
 148 .date_row{
 149         display: -webkit-box;
 150     display: box;
 151         width:100%;
 152 }
 153 .date_row .date_item{
 154         -webkit-box-flex: 1;
 155     box-flex: 1;
 156         border-color:#cecece;
 157         border-style:solid;
 158         border-width:0 1px 1px 0;
 159         color:#5b5b5b;
 160         position:relative;
 161         text-align:right;
 162         overflow:hidden;
 163         width: 0%;
 164         padding:6px 5px;
 165         height:40px;
 166 }
 167 .date_item:last-child{
 168         border-right:none;
 169 }
 170 .date_item .date_day{
 171         font-size:20px;
 172         display:block;
 173 }
 174 .date_item .date_lunar{
 175         height:16px;
 176         line-height:16px;
 177         font-size:12px;
 178         color:#8a8a8a;
 179         display:block;
 180         overflow: hidden;
 181     text-overflow: ellipsis;
 182     white-space: nowrap;
 183     word-wrap: normal;
 184 }
 185 .date_item .lunar_fetv{
 186         color:#14a700;
 187 }
 188 .date_item .solar_fetv{
 189         color:#d43111;
 190 }
 191 .date_item .date_icon{
 192         position:absolute;
 193         left:0px;
 194         top:0px;
 195         padding:2px 3px;
 196         color:#FFF;
 197         font-size:12px;
 198         display:none;
 199 }
 200 .date_item .holiday{
 201         background-color:#cd3a37;
 202         border:1px solid #a82220;
 203         display:block;
 204 }
 205 .date_item .worktime{
 206         background-color:#289ac9;
 207         border:1px solid #87c7e2;
 208         display:block;
 209 }
 210 .date_row .date_today{
 211         background-color:#b8bdbf;
 212         color:#FFF;
 213 }
 214 .date_row .date_today .date_lunar{
 215         color:#FFF;
 216 }
 217 .date_row .date_current{
 218         background-color:#c82713;
 219         color:#FFF;
 220 }
 221 .date_row .date_current .date_lunar{
 222         color:#FFF;
 223 }
 224 .date_row .date_other{
 225         opacity:0.4;
 226 }
 227 .date_week .date_item{
 228         line-height:30px;
 229         height:30px;
 230         border-right:none;
 231         text-align:center;
 232         font-size:16px;
 233         padding:0px;
 234 }
 235
 236 /*指定日期详情*/
 237 .date_info{
 238         padding:10px;
 239 }
 240 .date_lunar_info{
 241         color:#d96b6b;
 242         font-size:24px;
 243         line-height:38px;
 244         text-align:center;
 245 }
 246 .date_fetv{
 247         color:#666666;
 248         line-height:22px;
 249         font-size:16px;
 250         margin-bottom:5px;
 251 }
 252 .date_gan_zhi{
 253         line-height:30px;
 254         background-color:#e68383;
 255         text-align:center;
 256         color:#FFF;
 257         font-size:16px;
 258 }
 259 .date_hl{
 260         display:none;
 261 }
 262 .date_hl_item{
 263         margin-top:5px;
 264         line-height:24px;
 265 }
 266 .circle {
 267         width: 24px;
 268         height: 24px;
 269         background-color: transparent;
 270         border: 1px #14a700 solid;
 271         -webkit-border-radius: 13px;
 272         text-align:center;
 273         line-height:26px;
 274         font-size:16px;
 275         display:inline-block;
 276         margin-right:5px;
 277 }
 278 .hl_y{
 279         color:#14a700;
 280 }
 281 .hl_j{
 282         color:#d43111;
 283         border: 1px #d43111 solid;
 284 }
 285 .hl_y_content{
 286         color:#14a700;
 287 }
 288 .hl_j_content{
 289         color:#d43111;
 290 }