@font-face { font-family: "Roboto"; src: url("//plays.b0.upaiyun.com/v2ex-material-theme2/font/Roboto-Thin.ttf"); font-weight: 200; } @font-face { font-family: "Roboto"; src: url("//plays.b0.upaiyun.com/v2ex-material-theme2/font/Roboto-Light.ttf"); font-weight: 300; } @font-face { font-family: "Roboto"; src: url("//plays.b0.upaiyun.com/v2ex-material-theme2/font/Roboto-Regular.ttf"); font-weight: 400; } @font-face { font-family: "Roboto"; src: url("//plays.b0.upaiyun.com/v2ex-material-theme2/font/Roboto-Medium.ttf"); font-weight: 500; } @font-face { font-family: "Roboto"; src: url("//plays.b0.upaiyun.com/v2ex-material-theme2/font/Roboto-Bold.ttf"); font-weight: 700; } html, body { font-family: "Roboto", sans-serif; font-weight: normal; } *:focus { outline: none; } a:link, a:visited, a:active { color: #778087; } .cell, .header { border-bottom: 1px solid #eaeaea; } .cell, .item, .inner { padding: 20px; } .avatar { border-radius: 100%!important; } #Top { background-image: none; background-color: #4285f4; height: 56px; font-size: 16px; position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); padding: 0 20px; z-index: 99; } #Top a { color: #fff; } #Top .content { padding-top: 4px; } #Top td:first-child a { position: fixed; left: 76px; padding-top: 4px; width: 94px; height: 30px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/img/logo@2x.png") no-repeat 0 4px; background-size: 94px 30px; user-modify: read-only; -moz-user-modify: read-only; -webkit-user-modify: read-only; } #Top a[name='top'] img { opacity: 0; } #Top td:last-child { position: fixed; right: 20px; } #Search form div { background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/search.svg") no-repeat 10px center rgba(255, 255, 255, 0.15) !important; border-radius: 2px; height: 36px!important; width: 820px!important; } #Search form div:hover { background-color: rgba(255, 255, 255, 0.25) !important; } #Search form input { color: #fff; height: 36px; width: 760px; margin-left: 40px; } #Top td:first-child { position: fixed; left: 20px; top: 10px; width: 36px; height: 36px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/menu_grey.svg") no-repeat center; cursor: pointer; user-modify: read-write; -moz-user-modify: read-write; -webkit-user-modify: read-write; } #Top td:first-child:focus { background-color: rgba(0, 0, 0, 0.1); border-radius: 100%; } #Top td:first-child:focus ~ td:last-child { left: 0; transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1); } #Top td:first-child:focus ~ td:last-child a[href='https://workspace.v2ex.com/'], #Top td:first-child:focus ~ td:last-child a[href='/notes'], #Top td:first-child:focus ~ td:last-child a[href='/t'], #Top td:first-child:focus ~ td:last-child a[href='/events'], #Top td:first-child:focus ~ td:last-child a[href^='/place/'], #Top td:first-child:focus ~ td:last-child a[href='/settings'], #Top td:first-child:focus ~ td:last-child a:last-child { left: 0; transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1); } #Top td:last-child { position: fixed; left: -227px; top: 0; bottom: 0; width: 217px; background-color: #fff; user-modify: read-write; -moz-user-modify: read-write; -webkit-user-modify: read-write; box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 2px 4px 8px rgba(0, 0, 0, 0.28); transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.1s; cursor: default; } #Top td:last-child a[href='https://workspace.v2ex.com/'], #Top td:last-child a[href='/notes'], #Top td:last-child a[href='/t'], #Top td:last-child a[href='/events'], #Top td:last-child a[href^='/place/'], #Top td:last-child a[href='/settings'], #Top td:last-child a:last-child { user-modify: read-only; -moz-user-modify: read-only; -webkit-user-modify: read-only; } #Top td:last-child:focus { left: 0; } #Top td:last-child:focus a[href='https://workspace.v2ex.com/'], #Top td:last-child:focus a[href='/notes'], #Top td:last-child:focus a[href='/t'], #Top td:last-child:focus a[href='/events'], #Top td:last-child:focus a[href^='/place/'], #Top td:last-child:focus a[href='/settings'], #Top td:last-child:focus a:last-child { left: 0; transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1); } #Top td:last-child a[href='https://workspace.v2ex.com/'], #Top td:last-child a[href='/notes'], #Top td:last-child a[href='/t'], #Top td:last-child a[href='/events'], #Top td:last-child a[href^='/place/'], #Top td:last-child a[href='/settings'], #Top td:last-child a:last-child { position: fixed; left: -227px; color: #757575; line-height: 48px; width: 145px; text-align: left; padding-left: 72px; transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.1s; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #Top td:last-child a[href='https://workspace.v2ex.com/']:hover, #Top td:last-child a[href='/notes']:hover, #Top td:last-child a[href='/t']:hover, #Top td:last-child a[href='/events']:hover, #Top td:last-child a[href^='/place/']:hover, #Top td:last-child a[href='/settings']:hover, #Top td:last-child a:last-child:hover { background-color: rgba(0, 0, 0, 0.03); } #Top td:last-child a[href='https://workspace.v2ex.com/'] { top: 24px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/group_work.svg") no-repeat 24px center; } #Top td:last-child a[href='/notes'] { top: 72px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/book.svg") no-repeat 24px center; } #Top td:last-child a[href='/t'] { top: 120px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/access_time.svg") no-repeat 24px center; } #Top td:last-child a[href='/events'] { top: 168px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/event.svg") no-repeat 24px center; } #Top td:last-child a[href^='/place/'] { top: 216px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/explore.svg") no-repeat 24px center; } #Top td:last-child a[href='/settings'] { bottom: 72px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/settings.svg") no-repeat 24px center; } #Top td:last-child a:last-child { bottom: 24px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/exit_to_app.svg") no-repeat 24px center; } #Rightbar { visibility: hidden; position: fixed; z-index: 999; } #Rightbar .inner > a[href='/notifications'], #Rightbar .inner > strong > a[href='/notifications'], #Rightbar > .box:nth-child(2) td:first-child a[href^='/member/'], #Rightbar a[href='/mission/daily'], #Rightbar > .box:nth-last-of-type(10) .gray { visibility: visible; position: fixed; top: 10px; color: rgba(255, 255, 255, 0); width: 36px; height: 36px; border-radius: 100%; overflow: hidden; padding: 0!important; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #Rightbar .inner > a[href='/notifications']:focus, #Rightbar .inner > strong > a[href='/notifications']:focus, #Rightbar a[href='/mission/daily']:focus, #Rightbar > .box:nth-last-of-type(10) .gray:focus { background-color: rgba(0, 0, 0, 0.1); } #Rightbar .inner > a[href='/notifications'] { right: 74px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/notifications_none.svg") no-repeat center; } #Rightbar .inner > strong > a[href='/notifications'] { right: 74px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/notifications_none_hl.svg") no-repeat center; } #Rightbar > .box:nth-child(2) td:first-child a[href^='/member/'] { right: 26px; pointer-events: none; } #Rightbar > .box:nth-child(2) td:first-child a[href^='/member/'] .avatar { width: 36px; height: 36px; } #Rightbar a[href='/mission/daily'] { right: 170px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/wallet_giftcard_hl.svg") no-repeat center; } #Rightbar .sep20:first-child { visibility: visible; position: fixed; top: 10px; right: 26px; width: 36px; height: 36px; border-radius: 100%; cursor: pointer; user-modify: read-write; -moz-user-modify: read-write; -webkit-user-modify: read-write; } #Rightbar .sep20:first-child ~ .box:nth-of-type(2) { user-modify: read-write; -moz-user-modify: read-write; -webkit-user-modify: read-write; cursor: default; position: fixed; right: 26px; top: 56px; background: #fff; margin: 0; height: 147px; width: 228px; padding: 20px 10px 0 10px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); border-radius: 2px; transition-delay: 0.1s; } #Rightbar .sep20:first-child ~ .box:nth-of-type(2):focus { visibility: visible; } #Rightbar .sep20:first-child ~ .box:nth-of-type(2) > div { user-modify: read-only; -moz-user-modify: read-only; -webkit-user-modify: read-only; padding: 0!important; border: none; } #Rightbar .sep20:first-child ~ .box:nth-of-type(2) td:nth-child(3) a[href^='/member/'] { position: fixed; right: 56px; top: 183px; z-index: 999; background: #f8f8f8; border: 1px solid #c6c6c6; line-height: 28px; padding: 0 12px; border-radius: 2px; text-decoration: none; text-align: center; color: #666; font-size: 13px; } #Rightbar .sep20:first-child ~ .box:nth-of-type(2) table:nth-child(3) td { border: none!important; } #Rightbar .sep20:first-child ~ .box:nth-of-type(2) .cell:nth-child(2) { position: fixed; top: 221px; margin-left: -11px; } #Rightbar .sep20:first-child ~ .box:nth-of-type(2) .cell:nth-child(3) { position: fixed; top: 132px; } #Rightbar .sep20:first-child ~ .box:nth-of-type(2) .cell:nth-child(4) { visibility: hidden; } #Rightbar .sep20:first-child ~ .box:nth-of-type(2) #money { position: fixed; right: 52px; top: 138px; } #Rightbar .sep20:first-child ~ .box:nth-of-type(2) .inner { background: #f5f5f5; border-top: 1px solid #ccc; border-color: rgba(0, 0, 0, 0.2); width: 248px; height: 46px; position: fixed; right: 27px; top: 174px; } #Rightbar .sep20:first-child:focus ~ .box:nth-of-type(2) { visibility: visible; } #MyNodes { position: fixed; right: 26px; top: 56px; background: #fff; margin: 0; min-height: 100px; max-height: 420px; overflow-y: scroll; padding: 28px 10px 28px 28px; text-align: left; white-space: normal; width: 281px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); border-radius: 2px; font-size: 0; user-modify: read-write; -moz-user-modify: read-write; -webkit-user-modify: read-write; cursor: default; transition-delay: 0.1s; } #MyNodes:focus { visibility: visible; } #MyNodes::-webkit-scrollbar { width: 15px; height: 15px; } #MyNodes::-webkit-scrollbar-button { height: 0; width: 0; } #MyNodes::-webkit-scrollbar-thumb { background-clip: padding-box; background-color: rgba(0, 0, 0, 0.3); border: 5px solid transparent; border-radius: 10px; min-height: 20px; min-width: 20px; height: 5px; width: 5px; } #MyNodes::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.38); } #Rightbar > .box:nth-last-of-type(10) .gray { right: 122px; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/apps.svg") no-repeat center; user-modify: read-write; -moz-user-modify: read-write; -webkit-user-modify: read-write; cursor: pointer; } #Rightbar > .box:nth-last-of-type(10) .gray:focus ~ #MyNodes { visibility: visible; } #MyNodes .node { font-size: 14px; border: 1px solid #fff; border-radius: 2px; display: inline-block; vertical-align: top; height: 98px; width: 86px; padding: 0; text-align: center; position: relative; cursor: pointer; user-modify: read-only; -moz-user-modify: read-only; -webkit-user-modify: read-only; } #MyNodes .node:hover { background-color: #fff; box-shadow: none; border: 1px solid #e5e5e5; } #MyNodes .node .node_compose { display: none; } #MyNodes .node img { width: 42px; height: 42px; padding: 20px 22px 10px 22px; } #MyNodes .node a:last-child { line-height: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-decoration: none; position: absolute; width: 86px; left: 0; } @media only screen and (max-width: 1508px) { #Top form div { width: 676px!important; } #Top form input { width: 636px; } #Search { position: fixed; left: 196px; } } @media only screen and (max-width: 1140px) { #Top form div { width: 476px!important; } #Top form input { width: 436px; } } @media only screen and (max-width: 940px) { #Top form div { width: 276px!important; } #Top form input { width: 236px; } } #Wrapper { background-color: #ececec; padding-top: 80px; } #Rightbar table td:nth-of-type(3) a[href='/new'] { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; color: rgba(255, 255, 255, 0); visibility: visible; background: url("//plays.b0.upaiyun.com/v2ex-material-theme2/icon/add.svg") no-repeat center #db4437; z-index: 99; cursor: pointer; border-radius: 100%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); transition: all 150ms cubic-bezier(0.25, 0.25, 0, 1); -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #Rightbar table td:nth-of-type(3) a[href='/new']:hover { box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32); transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1); } #Rightbar table td:nth-of-type(3) a[href='/new']:active { box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36); } #Main { margin: 0; } #Main > .box { border-radius: 0; box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); border-bottom: none; background-color: #fff; color: #212121; } #Main > .box:nth-child(2) .cell { padding: 10px 20px; position: relative; } #Main > .box:nth-child(2) .cell.item > div { position: absolute; right: 0; top: 0; margin: 0!important; } #Main > .box:nth-child(2) .cell .small.fade { visibility: hidden; } #Main > .box:nth-child(2) .cell .small.fade strong:nth-of-type(1) { visibility: visible; position: absolute; left: 72px; font-size: 14px; } #Main > .box:nth-child(2) .cell .item_title { position: absolute; left: 236px; right: 60px; height: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #Main > .box:nth-child(2) .cell .vote { display: none; } #Main > .box:nth-child(2) .cell .avatar { width: 28px; height: 28px; } .header { padding: 20px; } .topic_buttons { border-radius: 0; line-height: 36px; background: #e8e9ed; } .topic_buttons > div { line-height: 36px!important; } .topic_content, .reply_content, .inner, .payload { color: #212121; font: 400 14px/1.8 "Roboto", Avenir, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; } .mll, .sll, .mle { background-color: #fff; color: #212121; border: 1px solid #ddd; border-radius: 0; padding: 10px; width: 908px!important; } .no { background-color: #f0f0f0; color: #ccc; } .cell .avatar, .inner:last-child .avatar { width: 40px; height: 40px; } .subtle { padding: 20px; } .super.button { background-color: #4285f4; background-image: none; text-shadow: none; color: #fff; border: none!important; box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); border-radius: 2px; line-height: 2.5; margin: 4px 0; padding: 0 16px; letter-spacing: 0.5px; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .super.button:hover { background-color: #3a76e5!important; color: #fff!important; border: none!important; text-shadow: none!important; box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28) !important; } .super.button:active { background-color: #3367d6!important; color: #fff!important; border: none!important; text-shadow: none!important; box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32) !important; } .super.button[disabled], .super.button.disable_now, .super.button[disabled]:hover, .super.button.disable_now:hover, .super.button[disabled]:active, .super.button.disable_now:active { background-color: rgba(0, 0, 0, 0.12) !important; color: rgba(0, 0, 0, 0.26) !important; box-shadow: none!important; text-shadow: none!important; } .page_current, .page_normal { border: none!important; box-shadow: none!important; border-radius: 2px!important; line-height: 2.5!important; margin: 4px 0!important; padding: 0 10px!important; letter-spacing: 0.5px; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 13px!important; } .page_input { line-height: 30px!important; padding: 0 0 0 8px!important; width: 60px!important; box-shadow: none!important; } a[onclick^='deleteNotification'] { float: right; } .payload { background-color: rgba(255, 255, 255, 0); padding-top: 15px; } .msl { width: 950px; }