TokynoSora.css

/* 
   Tokyono-Sora v1.4.1
   Design by Chiaki.C https://plurk.com/akira02
   https://github.com/akira02/Tokyono-Sora/
*/

._lch_,
._lch_ ~ .pop-window,
._lch_ ~ .pop-view {
  /* 主題色 */
  --theme-main-color: rgba(255, 87, 77, 1);
  /* 副主題色(文字顏色) */
  --theme-sub-color: rgba(255, 255, 255, 1);
  /* 未讀通知色 */
  --theme-notify-color: rgba(255, 87, 77, 1);
  /* 噗文字體大小 */
  --plurk-font-size: 14px;
  /* 噗文背景色 */
  --plurk-bg-color: rgba(251, 251, 253, 0.8);
  /* 自介欄位背景色 */
  --dashboard-bg-color: rgba(29, 29, 31, 0.72);
  /* top_bar文字顏色 */
  --top-bar-text-color: rgba(255, 255, 255, 1);
  /* top_bar背景色 */
  --top-bar-bg-color: rgba(29, 29, 31, 0.72);
  /* 模糊程度 */
  --blur-px: 30px;
  /* 模糊背景飽和度補償 */
  --blur-saturate: 180%;
  /* 噗文高度 */
  --plurk-max-height: calc(8vh - 30px);
  /* 噗文寬度 */
  --plurk-max-width: 350px;
}

/*   整體控制   */
._lch_,
._lch_ ~ .pop-window,
._lch_ ~ .pop-view {
  font-family: 'M 翔鶴黑體 TC', 'PingFang TC', 'LiHei Pro', 'Heiti TC', 'Source Han Sans TC', 'Noto Sans TC',
    'Hiragino Sans', 'Century Gothic', 'Microsoft Jhenghei', '微軟正黑體', sans-serif !important;
}
._lch_,
._lch_ .text_holder,
._lch_ ~ .pop-window,
._lch_ ~ .pop-view,
._lch_ ~ .pop-window .divplurk .content {
  line-height: 1.5em;
}
._lc_#layout_content {
  min-height: 100vh;
}
:is('{'),
body,
:is([}]) {
  overflow-y: auto;
}

/*修正過高的噗載入回應錯位*/
._lc_#layout_content:has(#form_holder .loading:not(.hide)) {
  height: 150vh;
}

/*捲軸調整*/
._lch_ ::-webkit-scrollbar {
  width: 5px;
}
._lch_ ::-webkit-scrollbar-track {
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
._lch_ ::-webkit-scrollbar-thumb {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: #9c9c9c;
}
._lch_ ~ .pop-window {
  overflow: hidden;
}

/*載入動畫*/
.loading > img {
  background: url(https://raw.githubusercontent.com/akira02/Tokyono-Sora/main/loading.svg) no-repeat;
  width: 90px;
  height: 90px;
  background-size: 90px;
  padding-left: 90px;
  margin-top: 17px;
}
.loading-div {
  background: url(https://raw.githubusercontent.com/akira02/Tokyono-Sora/main/loading.svg) no-repeat;
  background-size: 120px;
  width: 120px;
  height: 120px;
  left: 50%;
}
.loading-div > .cnt {
  display: none;
}
._lch_ ~ .pop-window .loading > img {
  display: none;
}
._lch_ ~ .pop-window .loading::after {
  content: ' ';
  display: block;
  position: relative;
  background: url(https://raw.githubusercontent.com/akira02/Tokyono-Sora/main/loading.svg) no-repeat;
  background-size: 90px;
  width: 90px;
  height: 90px;
  left: calc(50% - 45px);
}

/*彈出視窗模糊*/
._lch_ ~ .pop-window .divplurk,
._lch_ ~ .pop-window .pop-window-view,
._lch_ ~ .pop-window .response_box,
._lch_ ~ .pop-window .mini_form,
._lch_ ~ .pop-window .img-holder {
  background: none !important;
}
._lch_ ~ .pop-window .pop-window-view {
  border-radius: 7px !important;
  font-size: var(--plurk-font-size);
}
._lch_ ~ .pop-window .cbox_left {
  background: black !important;
}
._lch_ ~ .pop-window .pop-window-content {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
}
._lch_ ~ .pop-window .pop-window-view iframe {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
}
._lch_ ~ .pop-view {
  background: var(--plurk-bg-color);
  color: var(--plurk-text-color);
  backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
}
._lch_ ~ .pop-menu .pop-view-content li a:not(.no-hover):hover {
  color: white;
  background: var(--theme-main-color);
}
._lch_ ~ .pop-view#noti-list li.new-noti {
  background: transparent;
  font-weight: 800;
}
._lch_ ~ .pop-view#noti-list .pop-view-content,
#noti-list ul,
.pop-window .pop-window-view .user_list .title {
  background: none;
}
._lch_ ~ .pop-menu li.sep {
  background: rgba(223, 223, 223, 1);
}
._lch_ ~ #noti-list li {
  border: none;
}
._lch_ ~ #noti-list li:hover {
  background: rgba(0, 0, 0, 0.1);
}
/*彈出視窗輸入框圓角*/
._lch_ ~ .pop-window .plurkForm.mini-mode .input_holder,
._lch_ ~ .pop-window .mini_form .input_holder {
  border-radius: 10px;
}
._lch_ ~ .pop-window .m_qualifier {
  border-radius: 10px;
}

/*   河道調整   */
#timeline_cnt {
  height: calc(100% + 70px) !important;
  z-index: 1000;
}
.block_cnt {
  top: -20px;
}
#timeline_holder {
  height: calc(100vh - 150px) !important;
  background: none;
  font-size: var(--plurk-font-size);
}
/*河道前後箭號*/
.browse_button .cmp_arrow_right,
.browse_button .cmp_arrow_left {
  color: var(--theme-main-color);
}
.browse_button .cmp_back_to_today {
  color: var(--theme-sub-color);
  background: var(--theme-main-color);
}
.cmp_back_to_today:before {
  color: var(--theme-main-color);
}

/*時間標籤*/
.bottom_start {
  position: absolute;
  height: 18px;
  background: black !important;
  color: white !important;
}
#bottom_line {
  display: none !important;
}
/*通知器*/
#timeline_control_holder a {
  border-radius: 25px;
}
.unread_generic {
  border-radius: 12px;
  background-color: var(--theme-notify-color);
}
#filter_tab a.filter_selected {
  color: var(--theme-sub-color);
  background: var(--theme-main-color);
}
#updater,
#updater .item,
#updater .item a {
  color: var(--theme-main-color);
}
#filter_tab a,
#updater .item a {
  background: var(--theme-sub-color);
}
#updater .item a:hover {
  color: var(--theme-sub-color);
  background: var(--theme-main-color);
}
/*右下浮動發噗時間*/
#time_show {
  top: auto !important;
  right: 1%;
  bottom: 5%;
  left: auto !important;
  z-index: 1200;
  padding: 10px !important;
  background-color: var(--dashboard-bg-color) !important;
  backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
}
#time_show span {
  color: #fff !important;
  font-size: 2em !important;
  font-weight: bold;
}
/*右邊捲動箭頭*/
.browse_button {
  z-index: 1100;
}
/*調整噗浪獸位置*/
#dynamic_logo {
  position: fixed;
  bottom: 110px;
  right: 60px;
}
.snowflake {
  z-index: 1100;
}

/*   噗調整   */

/*噗本體*/
.block_cnt .cboxAnchor:not(.response) .plurk_cnt {
  border-radius: 8px;
  background: var(--plurk-bg-color) !important;
  backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
}

/*噗文展開時覆蓋其他物件*/
#timeline_holder:has(.link_extend.plurk_box),
#timeline_cnt:has(.cboxAnchor.link_extend:hover) {
  z-index: 1200;
}

/*噗文寬度*/
.block_cnt .plurk.cboxAnchor:not(.response):not(.bigplurk) {
  max-width: var(--plurk-max-width);
}
/*噗文邊界*/
.block_cnt .cboxAnchor:not(.response) .tr_cnt {
  display: block;
  margin: 5px;
}
/*噗文工具列*/
.manager > a {
  color: #afb8cc;
  display: inline-flex;
  align-items: center;
}
/*噗文暱稱*/
.block_cnt .cboxAnchor:not(.response) .td_qual {
  display: inline-block;
  position: relative;
  top: 0px;
  left: 30px;
}
.name {
  font-size: 1.1em;
  font-weight: 800;
  text-shadow: #fff 0px 0px 1px, #fff 0px 0px 1px, #fff 0px 0px 1px, #fff 0px 0px 1px, #fff 0px 0px 1px,
    #fff 0px 0px 1px;
}
/*噗文大頭貼*/
.td_img {
  position: absolute;
  top: 6px;
  left: 10px;
  z-index: 100;
}
.p_img img {
  border-radius: 50%;
  width: 25px;
  height: 25px;
}
/*動詞*/
.qualifier {
  padding: 0 3px 0 3px;
}
/*噗文與頂部邊界*/
.block_cnt .cboxAnchor:not(.response) .td_cnt {
  display: inline-block;
  margin-top: 25px;
}
.block_cnt .cboxAnchor:not(.response) .text_holder {
  width: 100%;
}
.block_cnt .cboxAnchor:not(.response):not(.display):not(.bigplurk) .text_holder {
  max-height: var(--plurk-max-height) !important;
}
/*選中的噗文*/
.block_cnt .cboxAnchor:not(.response).link_extend {
  z-index: 2000;
}
.block_cnt .cboxAnchor:not(.response).display .plurk_cnt {
  min-width: 430px;
}
.block_cnt .cboxAnchor:not(.response).display .tr_cnt {
  min-width: 430px;
}
.block_cnt .cboxAnchor:not(.response).display .text_holder {
  margin-bottom: 15px;
}
.block_cnt .cboxAnchor:not(.response).display .manager {
  margin-top: -15px;
}
/*展開噗文*/
.block_cnt .cboxAnchor:not(.response).plurk_box .plurk_cnt {
  border-radius: 7px 7px 0 0;
  box-shadow: 0 0px 35px rgba(29, 29, 31, 0.4);
}
.plurk_editor_form {
  order: 4;
}
/*重設回應欄位背景*/
.response_box {
  background: none !important;
  border: none;
}
.cboxAnchor.response .plurk_cnt {
  background: none;
}
.plurk_box .mini_form {
  background: none !important;
  border: none;
}
#form_holder {
  background: var(--plurk-bg-color) !important;
  backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  box-shadow: 0px 30px 35px rgba(29, 29, 31, 0.4);
  clip-path: inset(0px -50px -50px -50px);
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  border-radius: 0 0 7px 7px;
  margin-top: -1px;
  font-size: var(--plurk-font-size);
}
._lch_ .plurkForm.mini-mode .textarea_holder textarea,
._lch_ .mini_form .textarea_holder textarea {
  font-size: var(--plurk-font-size);
}
.icons_holder .pif-emoticon:after {
  display: none;
}
.response-manager {
  border-radius: 7px;
  background: var(--plurk-bg-color);
  border-color: transparent;
}
.response-manager .edit:hover,
.response-manager .mention:hover,
.response-manager .option:hover,
.response-manager .edit.popview-targeting,
.response-manager .mention.popview-targeting,
.response-manager .option.popview-targeting {
  background: var(--theme-main-color);
  border-radius: 7px;
}
/*未讀噗邊框*/
.new .plurk_cnt {
  box-shadow: 0px 0px 9px 0px rgba(200, 50, 0, 0.74);
}
/*避免噗文展開後被切掉*/
#timeline_cnt,
.block_cnt {
  overflow-y: visible !important;
}
.div_inner {
  height: auto !important;
  position: absolute;
  top: 0;
  bottom: 0;
}
/*回應計數*/
.td_response_count {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 25px;
  font-weight: 100;
  font-size: 12px;
  transform: scale(0.8);
}
.response_count {
  padding: 0;
  border-radius: 50%;
  background: none;
}
/*回應計數(未讀)*/
.new .response_count {
  position: relative !important;
  background-color: var(--theme-notify-color);
  top: -13px;
  left: -15px;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  width: 25px;
  height: 25px;
}
/*回覆框*/
.plurkForm.mini-mode .input_holder,
.mini_form .input_holder {
  border-radius: 10px;
}
.plurkForm.mini-mode .icons_holder {
  margin: 0;
}
.plurkForm.mini-mode.plurk_editor .input_holder {
  width: 100%;
}
.input_holder .m_qualifier {
  border-radius: 10px;
}
/*icon*/
.plurk_icon {
  margin: -25px 0 0 18px;
}
.pinned_plurk_icon {
  left: -10px;
}
.plurk_icon.coin {
  margin-left: 15px;
}

/*   面板設定   */

/*重置背景*/
.dash-segment .segment-content {
  background: none;
  margin: 0;
}
#plurk-dashboard {
  background: none;
  border: none;
}

/*發文面板*/
#dashboard_holder {
  padding: 0;
  padding-top: 75px;
}
#plurk-dashboard .dash-group-form {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(100vw - 120px) !important;
  max-width: 1000px !important;
  border-radius: 30px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.8);
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  z-index: 1100;
}

/*發文面板尺寸控制*/
#plurk-dashboard .dash-group-form .segment-content {
  min-height: 55px;
}
.dash-group-form:hover {
  z-index: 1100;
}
/*發文工具列排列設定*/
#main_poster .plurkForm {
  display: flex;
  align-items: flex-end;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
/*發文選項動詞*/
#main_poster .m_qualifier {
  border-radius: 15px;
  padding: 3px 11px 4px 10px;
}
/*發文輸入欄位*/
#main_poster .input_holder {
  order: 1;
  flex-grow: 1;
  border-radius: 20px;
  min-width: 200px;
  margin: 3px 0px 3px 4px;
}
/*發文選項icons*/
#main_poster .icons_holder {
  order: 2;
  min-width: 190px;
  margin: 3px 0px 3px 10px;
}
/*發文按鈕*/
#main_poster .submit_img {
  order: 3;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  padding: 0 15px 0 15px;
  line-height: 35px;
  margin: 3px 2px;
}
.submit_img_color {
  background: var(--theme-main-color);
}
/*發文設定提示字*/
#main_poster .plurk_to {
  order: 4;
  margin-right: 2px;
}
/*字數提示字*/
#main_poster .char_updater {
  order: 5;
  padding-left: 5px;
  flex-basis: 100%;
  color: black;
}
.plurkForm * {
  order: 10;
}

/*自介面板*/
.dash-group-left {
  position: fixed !important;
  top: 70px;
  right: 0px;
  color: white;
  padding: 10px;
  width: 350px !important;
  background: none;
  border-radius: 150px;
  max-height: 115px;
  transition: max-height 1s, transform 1s, background 0.5s, border-radius 0.3s 1s;
  overflow: hidden;
  color: var(--theme-sub-color);
  background-color: var(--dashboard-bg-color);
  backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  transform: translate(230px, 0);
  z-index: 1300;
}
#dash-profile {
  margin-left: 3px;
}
.dash-group-left:hover {
  max-height: 100vh;
  transform: translate(0);
  border-radius: 7px;
  transition: max-height 1s, transform 1s, background 0.5s, border-radius 0.3s;
}
#full_name,
.profile-info {
  margin-left: 110px !important;
}
.dash-group-left #dash-additional-info {
  width: 320px;
}
/*自介連結顏色*/
#plurk-dashboard #about_me a {
  color: var(--theme-main-color);
}
/*噗幣位置*/
#plurk-dashboard .profile-icons {
  display: inline-block;
  left: 67px;
  bottom: 3px !important;
}
#plurk-dashboard .profile-info {
  padding-top: 5px;
  position: static !important;
}
/*他人編輯你暱稱的欄位*/
#dash-profile .profile-info {
  display: flex;
}
#plurk-dashboard .dash-segment-profile #dash-profile .profile-info .edit-alias,
#plurk-dashboard .dash-segment-profile #dash-profile .profile-info .remove-alias {
  max-width: 0px;
  transition: all 0.3s;
  margin-right: 0px;
}
#plurk-dashboard .dash-segment-profile #dash-profile:hover .profile-info .edit-alias,
#plurk-dashboard .dash-segment-profile #dash-profile:hover .profile-info .remove-alias {
  max-width: 10px;
  display: block;
  margin-right: 8px;
}
#dash-profile .profile-info #alias {
  transition: all 0.5s;
}
#dash-profile .profile-info #alias[contenteditable='true'] {
  color: black;
  background-color: white;
  padding: 0 8px;
  min-width: 100px;
  border-radius: 999px;
}

/*大頭貼圓角*/
#profile_pic {
  border-radius: 50% !important;
}

/*統計面板*/
.dash-group-right {
  position: fixed !important;
  top: 190px;
  right: 0px;
  color: white;
  padding: 10px;
  border-radius: 40px;
  max-height: 60px;
  width: 700px !important;
  transition: max-height 1s, background 0s, transform 1s, border-radius 0.3s 1s;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  -webkit-backdrop-filter: saturate(var(--blur-saturate)) blur(var(--blur-px));
  transform: translate(540px, 0);
  z-index: 1500;
}
.dash-group-right:hover {
  max-height: 100vh;
  border-radius: 7px;
  transition: max-height 1s, background 0s, transform 1s, border-radius 0.3s;
  transform: translate(0);
}
.dash-group-left:hover + .dash-group-right {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translate(540px, -50px);
  pointer-events: none;
}
.dash-segment-stats .segment-content {
  height: 100px;
}
#plurk-dashboard #dash-stats-table {
  position: absolute;
  right: 0px;
  width: 400px !important;
  overflow: auto;
}
#dash-stats h2 {
  display: none;
}
#plurk-dashboard .dash-segment #dash-stats table td {
  color: white;
}
#plurk-dashboard a {
  color: var(--theme-main-color);
}
/*按鈕*/
#plurk-dashboard a.friend_man {
  border-radius: 15px;
  transition: background-color 0.6s ease, color 0.6s ease;
}

/* Karma值 */
.dash-stats-karma {
  width: auto !important;
}
/*在展開前避免出現karma資訊*/
.dash-stats-karma:before {
  content: '';
  position: absolute;
  width: 250px;
  height: 100px;
  left: 0;
  z-index: 1;
  top: -10px;
  transition: width 0s 0.5s;
}
.dash-group-right:hover .dash-stats-karma:before {
  width: 0px;
}

@font-face {
  font-family: nixie;
  src: url('https://chiaki.uk/assets/AkiNixieNumber-Regular.woff2') format('woff2'),
    url('https://chiaki.uk/assets/AkiNixieNumber-Regular.woff') format('woff');
}

.karma_hover {
  display: flex;
  margin: 0;
  left: 7px;
  text-indent: -300px;
}
#karma_holder {
  display: contents;
  text-indent: 0px;
}
/*karma箭頭*/
#karma_arrow {
  text-indent: 0px;
  opacity: 0;
  transition: opacity 0.5s 0.5s;
}
.dash-group-right:hover #karma_arrow,
#layout_body:has(.karma_tooltip:hover) .dash-group-right #karma_arrow {
  opacity: 1;
}
#karma_arrow.pif-arrow-up {
  text-shadow: 0px 0px 6px rgba(121, 219, 34, 1);
}
#karma_arrow.pif-arrow-down {
  text-shadow: 0px 0px 6px rgba(240, 87, 44, 1);
}
#karma {
  position: relative;
  display: inline-block;
  text-align: right;
  font-family: nixie;
  font-size: 35px;
  top: -10px;
  left: -5px;
  padding: 0.2em;
  padding-bottom: 0.4em;
  color: #ff9b28;
  text-shadow: 0px 0px 6px rgba(255, 65, 0, 0.7), 0px 0px 20px #ff8000, 0px 0px 10px rgb(118, 18, 3) !important;
  transition: transform 1s, font-size 1s;
}
.dash-stats-karma .help {
  display: none;
}
.karma-tooltip {
  pointer-events: none;
}

/*背景燈絲*/
#karma::after {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  opacity: 0.4;
  color: #de8159;
  content: '$$$$$$';
}
.dash-stats-karma {
  margin: 0 !important;
}

.dash-group-right:hover #karma {
  transform: translate(20px, 20px);
  font-size: 50px;
}

/*   底部設定   */

/*底部連結*/
#footer {
  padding: 0;
  position: fixed;
  bottom: 0px;
  right: 10px;
  height: 30px;
  width: auto;
}
#footer .copyright {
  display: none;
}

/* ---------------------------
  主CSS結束～☆
  產生器及其他CSS請插入在下方
-----------------------------*/