.font-ys { font-family: YS; } .font-number { font-family: Number, YS; } * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } body { font-size: 18px; color: #1e1f20; font-family: PingFangSC-Medium, PingFang SC, sans-serif; transform: scale(1); transform-origin: 0 0; width: 996px; } .container { width: 996px; padding: 10px 0px 10px 0px; background-size: 100% 100%; } .logo { font-size: 18px; text-align: center; color: #fff; margin: 20px 0 10px 0; font-family: Number, YS; } .calendar { min-height: 400px; position: relative; padding: 1px 0; width: 956px; margin: 20px; box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.6); border-radius: 10px; } .cal-bg { position: absolute; width: 956px; top: 0; left: 0; right: 0; bottom: 0; text-align: center; border-collapse: collapse; height: 100%; box-shadow: 0 0 1px 0 #fff inset; border-radius: 10px; overflow: hidden; } .cal-bg table { height: 100%; } .cal-bg .tr.thead { background: rgba(0, 0, 0, 0.8); height: 40px; } .cal-bg .tr.thead td { font-family: YS; } .cal-bg td { box-shadow: 0 0 1px 0 #fff; } .cal-bg td.date { width: 7.692%; } .cal-bg td.date.current-date { background: #d3bc8e; border: 1px solid #d3bc8e; color: #000; } .cal-bg td.line { background: rgba(0, 0, 0, 0.4); } .cal-bg td.line.current-date { background: rgba(211, 188, 142, 0.4); } .cal-list { position: relative; padding-top: 80px; } .cal-list .cal-item { margin-bottom: 15px; border-radius: 5px; white-space: nowrap; text-overflow: ellipsis; position: relative; overflow: hidden; background: #e8e2d8; z-index: 1; } .cal-list .cal-item:after { content: ""; display: block; position: absolute; left: 3px; top: 3px; right: 4px; bottom: 4px; box-shadow: 0 0 1px 0 #000 inset, 0 0 2px 0 #222a3b; border-radius: 4px; } .cal-list .cal-item .info { position: relative; display: inline-block; padding: 15px 50px 15px 55px; min-width: calc(100% - 400px); border-radius: 5px; background-image: linear-gradient(to right, #E8E2D8, #E8E2D8 80%, rgba(232, 226, 216, 0) 100%); } .cal-list .cal-item .banner { position: absolute; width: 100%; max-width: 500px; top: 0; bottom: 0; right: 0; background-size: 100% auto; background-position: left 40%; } .cal-list .cal-item strong { display: block; font-family: YS; font-weight: normal; } .cal-list .cal-item span { display: block; font-size: 12px; font-family: Number, YS; } .cal-list .cal-item.type-character { overflow: visible; margin-top: 20px; } .cal-list .cal-item.type-character .info { padding-left: 65px; } .cal-list .cal-item.type-character .character-img { width: 65px; position: absolute; bottom: 0; left: 0; z-index: 10; } .cal-list .cal-item.type-normal { margin-top: 5px; margin-bottom: 5px; } .cal-list .cal-item.type-normal:last-child { margin-bottom: 15px; } .cal-list .cal-item.type-normal:after { display: none; } .cal-list .cal-item.type-normal:first-of-type { margin-top: 20px; } .cal-list .cal-item.type-normal .info { padding: 8px 20px 8px 15px; line-height: 16px; color: #4b5366; } .cal-list .cal-item.type-normal .cal-icon { width: 23px; height: 23px; top: 6px; margin-left: -3px; margin-right: 5px; } .cal-list .cal-item.type-normal strong { font-size: 16px; } .cal-list .cal-item.type-normal .info { padding-left: 38px; } .cal-list .cal-item.type-normal strong, .cal-list .cal-item.type-normal span { display: inline; } .cal-list .cal-item.type-normal.small-mode span { display: block; margin-left: 0; } .cal-list .cal-item .cal-icon { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; } .calendar .now-line { position: absolute; top: 86px; bottom: -18px; width: 2px; box-shadow: 0 0 5px 0 #fff; background: #fff; opacity: 0.8; } .calendar .now-line:after { content: ""; display: block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #fff; position: absolute; bottom: -8px; left: -9px; transform: scaleY(0.7); transform-origin: bottom center; } .calendar .now-line.line2 { z-index: 3; opacity: 0.5; background: #d3bc8d; width: 2px; box-shadow: none; } .now-time { text-align: center; padding-top: 5px; margin-bottom: 5px; } .now-time span { color: #fff; font-family: Number, YS; background: rgba(0, 0, 0, 0.6); border-radius: 30px; padding: 10px 15px; border: 1px solid #fff; display: inline-block; } .cal-abyss-cont { padding-top: 15px; height: 80px; position: relative; } .cal-abyss-cont .cal-item { border-radius: 0; background: url("./imgs/abyss.jpg") #333465 top right no-repeat; position: absolute; } .cal-abyss-cont .cal-item .info { background: none; color: #d3bc8d; background-image: linear-gradient(to right, #333465, #333465 80%, rgba(51, 52, 101, 0) 100%); } .cal-abyss-cont .cal-item:before { content: ""; display: block; width: 3px; left: 0; top: 1px; bottom: 1px; position: absolute; background: #d3bc8d; z-index: 8; } .cal-abyss-cont .cal-item:after { box-shadow: 0 0 1px 0 #fff; border-radius: 0; } .calendar-mode .for-list-mode { display: none; } .list-mode .container { width: 740px; } .list-mode .for-calendar-mode { display: none; } .list-mode .cal-bg { width: initial; } .list-mode .cal-list { padding: 45px 10px 0; } .list-mode .calendar { width: 700px; } .list-mode .cal-abyss-cont { height: initial !important; } .list-mode .cal-item { position: relative; margin-left: 0 !important; width: initial !important; left: 0 !important; } .list-mode .now-line { display: none; } /*# sourceMappingURL=calendar.css.map */