├── .gitignore
├── image
    ├── award.png
    ├── github.png
    ├── loading.gif
    ├── premium.png
    ├── creatures.png
    ├── save.svg
    └── load.svg
├── sass
    ├── _mediaquery.scss
    ├── _default.scss
    ├── base
    │   ├── _variable.scss
    │   ├── _layout.scss
    │   └── _mixin.scss
    ├── main.scss
    ├── components
    │   ├── _component.scss
    │   ├── _tools.scss
    │   ├── _export.scss
    │   ├── _generator.scss
    │   └── _header.scss
    └── partials
    │   ├── _review_tc.scss
    │   ├── _review.scss
    │   ├── _review_fh.scss
    │   ├── _review_th.scss
    │   └── _review_dh.scss
├── .vscode
    └── settings.json
├── pug
    ├── partial
    │   ├── review_tc.pug
    │   ├── review_fh.pug
    │   ├── review_dh.pug
    │   └── review_th.pug
    └── components
    │   ├── inputs.pug
    │   └── lists.pug
├── index.pug
├── script
    └── script.js
└── style
    └── main.min.css


/.gitignore:
--------------------------------------------------------------------------------
1 | pug/*/*.html


--------------------------------------------------------------------------------
/image/award.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hoshikata/PlurkCSSGenerator/HEAD/image/award.png


--------------------------------------------------------------------------------
/image/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hoshikata/PlurkCSSGenerator/HEAD/image/github.png


--------------------------------------------------------------------------------
/image/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hoshikata/PlurkCSSGenerator/HEAD/image/loading.gif


--------------------------------------------------------------------------------
/image/premium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hoshikata/PlurkCSSGenerator/HEAD/image/premium.png


--------------------------------------------------------------------------------
/image/creatures.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hoshikata/PlurkCSSGenerator/HEAD/image/creatures.png


--------------------------------------------------------------------------------
/image/save.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M13 5v6h1.17L12 13.17 9.83 11H11V5h2m2-2H9v6H5l7 7 7-7h-4V3zm4 15H5v2h14v-2z"/></svg>


--------------------------------------------------------------------------------
/sass/_mediaquery.scss:
--------------------------------------------------------------------------------
 1 | @include breakpoint(lg) {
 2 |   @include headerLG;
 3 |   @include navLG;
 4 |   @include sidebarLG;
 5 | }
 6 | @include breakpoint(sm) {
 7 |   @include navSM;
 8 |   @include toolsSM;
 9 |   @include exportSM;
10 |   @include reviewSM;
11 |   @include review_dh_SM;
12 | }


--------------------------------------------------------------------------------
/image/load.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM6 6h9v4H6z"/></svg>


--------------------------------------------------------------------------------
/sass/_default.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |   height: 100vh;
 3 |   overflow: hidden;
 4 |   background-image: linear-gradient(-160deg, #fdfbfb, #ebedee);
 5 |   color: color(Black);
 6 |   transition: 0.5s;
 7 |   &.dark-mode {
 8 |     color: color(White);
 9 |   }
10 | }
11 | 
12 | .wrapper {
13 |   display: flex;
14 |   flex-direction: row-reverse;
15 |   position: relative;
16 |   @include size(100%);
17 |   box-sizing: border-box;
18 | }
19 | 
20 | //- usability
21 | .no-display {
22 |   display: none;
23 | }
24 | 


--------------------------------------------------------------------------------
/sass/base/_variable.scss:
--------------------------------------------------------------------------------
 1 | //- Var
 2 | $color: (
 3 |   Primary: #1b262c,
 4 |   Secondary: #0f4c81,
 5 |   Success: #18b0b0,
 6 |   Warning: #ffa372,
 7 |   Danger: #ed6663,
 8 |   Sun: yellow,
 9 |   PureBlack: black,
10 |   Black: lighten(black, 20), //#333333
11 |   BlackGray: lighten(black, 33), //#545454
12 |   DarkGray: lighten(black, 45), //#737373
13 |   Gray: lighten(black, 58), //#949494
14 |   LightGray: lighten(black, 71), //#B5B5B5
15 |   WhiteGray: lighten(black, 84), //#D6D6D6
16 |   White: lighten(black, 96), //#F5F5F5
17 |   PureWhite: white,
18 | );
19 | 
20 | $z-index: (
21 |   header: 100,
22 | );
23 | 
24 | $font-color: color(Black);
25 | $header-height: 45px;
26 | $nav-height-sm: 30px;
27 | 
28 | $timeline-cnt-width: 2500px;
29 | 
30 | 


--------------------------------------------------------------------------------
/sass/main.scss:
--------------------------------------------------------------------------------
 1 | //- Font import
 2 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
 3 | @import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;600&display=swap');
 4 | @import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');
 5 | 
 6 | @import 'base/mixin';
 7 | @import 'base/variable';
 8 | @import 'base/layout';
 9 | @import 'components/component';
10 | @import 'components/header';
11 | @import 'components/tools';
12 | @import 'components/generator';
13 | @import 'components/export';
14 | @import 'partials/review';
15 | @import 'partials/review_th';
16 | @import 'partials/review_tc';
17 | @import 'partials/review_dh';
18 | @import 'partials/review_fh';
19 | @import 'default';
20 | @import 'mediaquery';


--------------------------------------------------------------------------------
/sass/components/_component.scss:
--------------------------------------------------------------------------------
 1 | .customization-scroll {
 2 |   scrollbar-width: thin;
 3 |   scrollbar-color: color(Secondary) rgba(color(WhiteGray), 0.5);
 4 |   &::-webkit-scrollbar {
 5 |     width: 6px;
 6 |   }
 7 |   &::-webkit-scrollbar-track {
 8 |     background-color: rgba(color(WhiteGray), 0.5);
 9 |     border-radius: 5px;
10 |   }
11 |   
12 |   &::-webkit-scrollbar-thumb {
13 |     background-color: color(Secondary);
14 |     border-radius: 5px;
15 |   }
16 |   &::-webkit-scrollbar-thumb:hover {
17 |     background-color: lighten(color(Secondary), 10);
18 |   }
19 | }
20 | 
21 | .cross_btn {
22 |   position: relative;
23 |   @include size(15px);
24 |   &::before,
25 |   &::after {
26 |     content: '';
27 |     display: block;
28 |     position: absolute;
29 |     top: 50%;
30 |     left: 0;
31 |     @include size(100%, 3px);
32 |     transform: translateY(-50%) rotate(45deg);
33 |     border-radius: 5px;
34 |     background-color: currentColor;
35 |   }
36 |   &::after {
37 |     transform: translateY(-50%) rotate(-45deg);
38 |   }
39 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.tokenColorCustomizations" : { "semanticHighlighting" : true }, 
 3 |   "editor.rulers": [80, 120], // 編輯器參考線
 4 |   "editor.wordWrap": "on", // 編輯視窗自動換行
 5 |   "editor.tabSize": 2, // TAB的大小
 6 |   "editor.minimap.maxColumn": 90, // 迷你地圖的大小
 7 |   "editor.minimap.renderCharacters": false, // 迷你地圖要不要真實渲染
 8 |   "editor.fontSize": 13.5, // 字形大小
 9 |   "editor.fontFamily": "'Fira Code', 'Source Code Pro'", // 字形設定
10 |   "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05'", // Fira Code 的連號符設定
11 |   "emmet.triggerExpansionOnTab": true,
12 |   "liveServer.settings.port": 8080, // 及時預覽的PORT
13 |   "liveSassCompile.settings.generateMap": false, // 要不要轉譯出MAP
14 |   // 轉譯SCSS的位置
15 |   "liveSassCompile.settings.formats": [
16 |     // This is Default.
17 |     {
18 |       "format": "expanded",
19 |       "extensionName": ".css",
20 |       "savePath": "/dist"
21 |     },
22 |     // You can add more
23 |     {
24 |       "format": "compressed",
25 |       "extensionName": ".min.css",
26 |       "savePath": "/style"
27 |     }
28 |   ],
29 |   // CSS自動前綴
30 |   "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"],
31 |   // Pug 相關
32 |   "livePugCompiler.savePath": "./", // 轉譯PUG的位置
33 |   "pugbeautify.fillTab": false, // pug beautify 是否把tab變成space(true為tab)
34 |   "pugbeautify.omitDiv": true, // pug beautify 是否自動把有class的div標籤隱藏
35 |   "pugbeautify.tabSize": 2, // pug beautify tab的大小
36 |   // prettier 的設定
37 |   "editor.defaultFormatter": "esbenp.prettier-vscode", // 是否用 prettier
38 |   "editor.formatOnSave": false, // 要不要儲存時自動prettier
39 |   "prettier.tabWidth": 2, // prettier tab的大小
40 |   "prettier.printWidth": 200, // prettier 超過多少字要換行
41 |   "prettier.singleQuote": true, // prettier JS是否為單引號
42 |   "prettier.semi": true, // prettier 是否加上分號
43 |   // "html.format.wrapAttributes": "force-expand-multiline" // html屬性設定換行
44 | }
45 | 


--------------------------------------------------------------------------------
/sass/base/_layout.scss:
--------------------------------------------------------------------------------
  1 | //- Grid
  2 | // $gridNumber: 12;
  3 | // $gridGutter: 30px;
  4 | // .container {
  5 | //   padding-left: 15px;
  6 | //   padding-right: 15px;
  7 | //   box-sizing: border-box;
  8 | // }
  9 | // .row {
 10 | //   display: flex;
 11 | //   flex-wrap: wrap;
 12 | //   margin-left: -15px;
 13 | //   margin-right: -15px;
 14 | // }
 15 | // %col-gutter {
 16 | //   box-sizing: border-box;
 17 | //   padding-left: ($gridGutter / 2);
 18 | //   padding-right: ($gridGutter / 2);
 19 | // }
 20 | // @for $i from 1 through $gridNumber {
 21 | //   .col-#{$i} {
 22 | //     width: (100% * ($i / $gridNumber));
 23 | //     @extend %col-gutter;
 24 | //   }
 25 | // }
 26 | 
 27 | // 文字選擇時的樣式
 28 | ::selection {
 29 |   background-color: color(Secondary);
 30 |   color: color(White);
 31 | }
 32 | //- Tag
 33 | html,
 34 | body {
 35 |   scroll-behavior: smooth; //卷軸平滑捲動
 36 |   width: 100%;
 37 |   margin: 0;
 38 |   padding: 0;
 39 |   font-family: 'Noto Sans TC', sans-serif;
 40 |   font-size: 14px;
 41 |   font-weight: 300;
 42 |   letter-spacing: 0.1em;
 43 |   background-color: color(White);
 44 | }
 45 | h1,
 46 | h2,
 47 | h3,
 48 | h4,
 49 | h5,
 50 | h6,
 51 | p {
 52 |   margin: 0;
 53 |   padding: 0;
 54 | }
 55 | h1 {
 56 |   font-size: 1.9rem;
 57 |   font-weight: 900;
 58 | }
 59 | h2 {
 60 |   font-size: 1.65rem;
 61 |   font-weight: 700;
 62 | }
 63 | h3 {
 64 |   font-size: 1.5rem;
 65 |   font-weight: 700;
 66 | }
 67 | h4 {
 68 |   font-size: 1.3rem;
 69 |   font-weight: 500;
 70 | }
 71 | h5 {
 72 |   font-size: 1.2rem;
 73 |   font-weight: 500;
 74 | }
 75 | h6 {
 76 |   font-size: 1.1rem;
 77 |   font-weight: 500;
 78 | }
 79 | p {
 80 |   font-size: 1rem;
 81 | }
 82 | img {
 83 |   vertical-align: middle;
 84 | }
 85 | ul,
 86 | ol {
 87 |   margin: 0;
 88 |   padding: 0;
 89 |   list-style: none;
 90 | }
 91 | input,
 92 | select,
 93 | textarea,
 94 | button {
 95 |   margin: 0;
 96 |   padding: 0;
 97 |   outline: none;
 98 | }
 99 | button {
100 |   cursor: pointer;
101 |   border: none;
102 | }
103 | 


--------------------------------------------------------------------------------
/sass/base/_mixin.scss:
--------------------------------------------------------------------------------
 1 | // 可以判斷然後看要不要加上vw/vh
 2 | @mixin size($w, $h: $w) {
 3 |   @if ($w == auto or $h == auto) {
 4 |     width: $w;
 5 |     height: $h;
 6 |   } @else if (unit($w) == 'v' and $h == $w) {
 7 |     width: $w + w;
 8 |     height: $h + h;
 9 |   } @else if (unit($w) == 'vw' and $h == $w) {
10 |     width: $w;
11 |     height: ($h / 1vw) + vh;
12 |   } @else if (unit($w) == 'vh' and $h == $w) {
13 |     width: ($w / 1vh) + vw;
14 |     height: $h;
15 |   } @else {
16 |     width: $w;
17 |     height: $h;
18 |   }
19 | }
20 | 
21 | // Media
22 | @mixin breakpoint($point) {
23 |   @if ($point == sm) {
24 |     @media only screen and (max-width: 576px) {
25 |       @content;
26 |     }
27 |   }
28 |   @if ($point == md) {
29 |     @media only screen and (max-width: 768px) {
30 |       @content;
31 |     }
32 |   }
33 |   @if ($point == lg) {
34 |     @media only screen and (max-width: 992px) {
35 |       @content;
36 |     }
37 |   }
38 | }
39 | 
40 | // 三角形的作法
41 | @mixin triangle($color, $angle: right, $w: 10px, $h: $w * 0.58) {
42 |   width: 0;
43 |   height: 0;
44 |   @if ($angle == right) {
45 |     border-top: $h solid transparent;
46 |     border-bottom: $h solid transparent;
47 |     border-left: $w solid $color;
48 |   } @else if ($angle == left) {
49 |     border-top: $h solid transparent;
50 |     border-bottom: $h solid transparent;
51 |     border-right: $w solid $color;
52 |   } @else if ($angle == top) {
53 |     border-right: $h solid transparent;
54 |     border-left: $h solid transparent;
55 |     border-bottom: $w solid $color;
56 |   } @else if ($angle == bottom) {
57 |     border-right: $h solid transparent;
58 |     border-left: $h solid transparent;
59 |     border-top: $w solid $color;
60 |   }
61 | }
62 | 
63 | // 拿取顏色群組的方法
64 | @function color($name, $theme: false, $group: $color) {
65 |   @if $theme == false {
66 |     @return map-get($group, $name);
67 |   } @else if $theme != false {
68 |     @return map-get(map-get($group, $theme), $name);
69 |   }
70 | }
71 | 
72 | // 字體
73 | @mixin Noto {
74 |   font-family: 'Noto Sans TC', sans-serif;
75 | }
76 | 


--------------------------------------------------------------------------------
/pug/partial/review_tc.pug:
--------------------------------------------------------------------------------
 1 | 
 2 | //- 控制列
 3 | .timeline_control
 4 |   #timeline_control_holder
 5 | 
 6 |     //- 頻道
 7 |     ul#filter_tab
 8 |       li
 9 |         a#favorite_plurks_tab_btn.off_tab.has_unread(title='瀏覽您按過喜歡的訊息')
10 |           i.pif-like
11 |           | 喜歡的訊息
12 |           span#count_favorite_plurks
13 |             span.unread_generic 12
14 |       li
15 |         a#replurked_plurks_tab_btn.off_tab.no_unread(title='瀏覽您轉噗過的訊息')
16 |           i.pif-replurk
17 |           | 轉噗的訊息
18 |           span#count_replurked_plurks
19 |       li
20 |         a#responded_plurks_tab_btn.off_tab.has_unread(title='瀏覽您回應過的訊息')
21 |           i.pif-message
22 |           | 回應過的訊息
23 |           span#count_responded_plurks
24 |             span.unread_generic 6
25 |       li
26 |         a#private_plurks_tab_btn.off_tab.no_unread(title='瀏覽您的私人訊息')
27 |           i.pif-message-private
28 |           | 私人訊息
29 |           span#count_private_plurks
30 |       li
31 |         a#own_plurks_tab_btn.off_tab.no_unread(title='瀏覽您發表的訊息')
32 |           i.pif-message-my
33 |           | 我發表的訊息
34 |           span#count_my_plurks
35 |       li
36 |         a#all_plurks.filter_selected.bottom_line_bg.has_unread(title='瀏覽所有訊息')
37 |           i.pif-messages
38 |           | 所有訊息
39 |           span#count_all_plurk
40 |             span.unread_generic 192
41 | 
42 |     //- 更新
43 |     #updater(style="visibility: visible;")
44 |       //- 新訊息
45 |       #noti_np.item
46 |         a
47 |           i.pif-message-new
48 |           span#noti_np_text 新訊息
49 |           span#noti_np_count.unread_generic 15
50 |       //- 檢視訊息
51 |       #noti_re.item
52 |         #noti_re_view.item
53 |           a
54 |             i.pif-message-new
55 |             span#noti_re_text 檢視未讀訊息
56 |             span#noti_re_count.unread_generic 80
57 |         #noti_re_actions.item(style="display: none;")
58 |           a#mark_all_link.updater_link
59 |             i.pif-check
60 |             span 全部標為已讀
61 |           a#view_all_plurk.updater_link
62 |             i.pif-cancel
63 |             span 顯示所有訊息
64 |       //- 查看置頂訊息
65 |       #noti_pp.item(style="display:none")
66 |         a
67 |           i.pif-message-new
68 |           span#noti_pp_text 查看置頂訊息


--------------------------------------------------------------------------------
/pug/partial/review_fh.pug:
--------------------------------------------------------------------------------
 1 | 
 2 | //- 噗內回應
 3 | #form_holder.plurk_box(style=`left: ${plurk_cut_left}px; top: ${plurk_cut_top}px; width: 450px;`)
 4 |   //- 最上方資訊列 
 5 |   .response_box(style='max-height: 200px;')
 6 |     .response_info.clearfix
 7 |       .favorite_count.button.small-button 1 喜歡
 8 |       .replurk_count.button.small-button 1 轉噗
 9 |       .bookmark_info.button.small-button 書籤
10 |       .private_info.pif-privacy.button.small-button 所有朋友
11 |       .response-status
12 |         span.response-count.pif-message 2 則回應
13 |         .response-only-owner.button.small-button(style='display: inline-block;') 只顯示原作者的回應
14 |     //- 回應內容
15 |     .list
16 |       .plurk.cboxAnchor.response.highlight_owner
17 |         table
18 |           tbody
19 |             tr
20 |               td
21 |                 .plurk_cnt
22 |                   table
23 |                     tbody
24 |                       tr.tr_cnt
25 |                         td.td_qual
26 |                           span
27 |                             a.name(href='javascript:;') 噗主
28 |                             span
29 |                         td.td_cnt
30 |                           .text_holder 噗主留言
31 |       .plurk.cboxAnchor.response
32 |         table
33 |           tbody
34 |             tr
35 |               td
36 |                 .plurk_cnt
37 |                   table
38 |                     tbody
39 |                       tr.tr_cnt
40 |                         td.td_qual
41 |                           span
42 |                             a.name(href='javascript:;') 暱稱
43 |                             span
44 |                         td.td_cnt
45 |                           .text_holder 留言
46 | 
47 |   //- 有新回應
48 |   .new_response_hint(style="display:none; opacity:0;") 有新回應
49 | 
50 |   //- 打字區
51 |   .poster_holder(style='display: block;')
52 |     .mini_form
53 |       .plurkForm.mini-mode
54 |         .input_holder
55 |           .qual_holder(style='float: left;')
56 |             .dd_img.m_qualifier.q_freestyle
57 |               span(style='display: none;')
58 |               i.pif-dropdown
59 |           .textarea_holder
60 |             textarea#input_small.content(style='height: 19px; color: black;')
61 |         ul.icons_holder
62 |           li.cmp_emoticon_mini_off.pif-emoticon
63 |           li.cmp_media_mini_off.pif-media
64 |         .plurk_schedule
65 |         .plurk_to
66 |         .char_updater 按 Enter 送出


--------------------------------------------------------------------------------
/sass/components/_tools.scss:
--------------------------------------------------------------------------------
  1 | $tools-bar-width: 75px;
  2 | $tools-bar-width-sm: 50px;
  3 | $tools-main-width: 320px;
  4 | $tools-container-pr: 10px;
  5 | $tools-padding-tb: 15px;
  6 | 
  7 | .tools {
  8 |   flex-shrink: 0;
  9 |   display: flex;
 10 |   width: 0;
 11 |   height: 100%;
 12 |   padding-top: $header-height;
 13 |   box-sizing: border-box;
 14 |   overflow: hidden;
 15 |   transition: 0.5s;
 16 |   &-open {
 17 |     width: $tools-bar-width + $tools-main-width;
 18 |   }
 19 |   &_main {
 20 |     flex-shrink: 0;
 21 |     position: relative;
 22 |     @include size($tools-main-width, 100%);
 23 |     background-color: color(PureWhite);
 24 |   }
 25 |   &_container {
 26 |     position: absolute;
 27 |     top: 0;
 28 |     right: 0;
 29 |     @include size(100%);
 30 |     padding: $tools-padding-tb 0;
 31 |     padding-left: 0;
 32 |     padding-right: $tools-container-pr;
 33 |     box-sizing: border-box;
 34 |     transform: translateX(100%);
 35 |     background-color: color(PureWhite);
 36 |     transition: 0.5s;
 37 |     &-open {
 38 |       transform: translateX(0);
 39 |     }
 40 |   }
 41 |   &_generator {
 42 |     @include size(100%);
 43 |     overflow-y: auto;
 44 |   }
 45 |   &_bar {
 46 |     flex-shrink: 0;
 47 |     position: relative;
 48 |     @include size($tools-bar-width, 100%);
 49 |     padding: $tools-padding-tb 0;
 50 |     box-sizing: border-box;
 51 |     background-color: lighten(color(Primary), 5);
 52 |     color: color(White);
 53 |   }
 54 | }
 55 | @mixin toolsSM {
 56 |   .tools {
 57 |     z-index: 10;
 58 |     position: absolute;
 59 |     top: 0;
 60 |     left: 0;
 61 |     width: 100%;
 62 |     padding-top: $header-height + $nav-height-sm;
 63 |     transform: translateY(-100%);
 64 |     &-open {
 65 |       width: 100%;
 66 |       transform: translateY(0);
 67 |     }
 68 |     &_main {
 69 |       flex-grow: 1;
 70 |       width: auto;
 71 |     }
 72 |     &_bar {
 73 |       width: $tools-bar-width-sm;
 74 |     }
 75 |   }
 76 | }
 77 | 
 78 | .menu {
 79 |   &_list {
 80 |     display: flex;
 81 |     flex-direction: column;
 82 |     height: 100%;
 83 |   }
 84 |   &_item {
 85 |     flex: 1;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     padding: 0 10px;
 89 |     cursor: pointer;
 90 |     writing-mode: vertical-lr;
 91 |     border-left: 5px solid transparent;
 92 |     & + & {
 93 |       margin-top: 10px;
 94 |     }
 95 |     &-active,
 96 |     &:hover {
 97 |       border-left-color: color(Success);
 98 |       background-color: color(Primary);
 99 |     }
100 |   }
101 | }


--------------------------------------------------------------------------------
/sass/partials/_review_tc.scss:
--------------------------------------------------------------------------------
  1 | $tc-index: (
  2 |   timeline_control: 10,
  3 | );
  4 | 
  5 | //----- 控制列
  6 | .review {
  7 |   .timeline_control {
  8 |     z-index: map-get($tc-index, timeline_control);
  9 |     position: absolute;
 10 |     width: 100%;
 11 |     height: 25px;
 12 |     margin-left: 16px;
 13 |     margin-top: -46px;
 14 |     pointer-events: none;
 15 |   }
 16 |   .timeline_control a {
 17 |     border-radius: 5px;
 18 |     padding: 0 8px;
 19 |     text-decoration: none;
 20 |     text-align: center;
 21 |     line-height: 25px;
 22 |     white-space: nowrap;
 23 |   }
 24 |   .timeline_control a i {
 25 |     opacity: 0.8;
 26 |     width: 18px;
 27 |     margin-right: 4px;
 28 |   }
 29 |   #timeline_control_holder {
 30 |     position: absolute;
 31 |     bottom: 0;
 32 |   }
 33 | 
 34 |   #updater {
 35 |     position: absolute;
 36 |     bottom: 0;
 37 |     left: 100%;
 38 |     pointer-events: auto;
 39 |   }
 40 |   #updater,
 41 |   #updater .item,
 42 |   #updater .item a {
 43 |     white-space: nowrap;
 44 |     display: inline-block;
 45 |     height: 25px;
 46 |     line-height: 25px;
 47 |   }
 48 |   #updater .item a {
 49 |     background: #fff;
 50 |     margin-left: 8px;
 51 |     cursor: pointer;
 52 |   }
 53 |   #updater .item a:hover {
 54 |     background: #ff574d;
 55 |     color: #fff;
 56 |   }
 57 | 
 58 |   #filter_tab {
 59 |     float: right;
 60 |     pointer-events: auto;
 61 |   }
 62 |   #filter_tab::after {
 63 |     content: '';
 64 |     clear: both;
 65 |     display: block;
 66 |     height: 0;
 67 |   }
 68 |   #filter_tab li {
 69 |     list-style: none;
 70 |     float: right;
 71 |     clear: both;
 72 |     width: 100%;
 73 |   }
 74 |   #filter_tab a {
 75 |     display: block;
 76 |     height: 0;
 77 |     margin-top: 0;
 78 |     padding: 0 12px;
 79 |     overflow: hidden;
 80 |     cursor: pointer;
 81 |     opacity: 0.9;
 82 |     transition: height 200ms ease-in, margin-top 200ms ease-in;
 83 |     background: #fff;
 84 |     color: #999;
 85 |   }
 86 |   #filter_tab a:hover {
 87 |     opacity: 1;
 88 |   }
 89 |   #filter_tab a.filter_selected {
 90 |     color: #fff;
 91 |     background: #ff574d;
 92 |   }
 93 |   #filter_tab:hover a,
 94 |   #filter_tab a.filter_selected,
 95 |   #filter_tab a.has_unread,
 96 |   #filter_tab:hover a.filter_selected,
 97 |   #filter_tab:hover a.has_unread {
 98 |     height: 25px;
 99 |     margin-top: 6px;
100 |   }
101 | 
102 |   .unread_generic {
103 |     padding: 2px 4px 1px;
104 |     margin-left: 5px;
105 |     background-color: #f83010;
106 |     color: #fff !important;
107 |     border-radius: 4px;
108 |     font-family: arial, sans-serif;
109 |     font-size: 12px;
110 |   }
111 | }
112 | 


--------------------------------------------------------------------------------
/sass/partials/_review.scss:
--------------------------------------------------------------------------------
  1 | .review {
  2 |   flex-grow: 1;
  3 |   position: relative;
  4 |   width: 100%;
  5 |   height: 100vh;
  6 |   padding-top: $header-height;
  7 |   box-sizing: border-box;
  8 |   &_container {
  9 |     width: 100%;
 10 |     height: 100%;
 11 |     overflow-y: auto;
 12 |     z-index: 0 !important;
 13 |     position: relative;
 14 |     top: auto !important;
 15 |     bottom: auto !important;
 16 |     width: 100%;
 17 |     min-height: 100%;
 18 |     margin: 0 !important;
 19 |   }
 20 | }
 21 | @mixin reviewSM {
 22 |   .review {
 23 |     padding-top: $header-height + $nav-height-sm;
 24 |   }
 25 | }
 26 | 
 27 | .review {
 28 |   div,
 29 |   dl,
 30 |   dt,
 31 |   dd,
 32 |   ul,
 33 |   ol,
 34 |   li,
 35 |   h1,
 36 |   h2,
 37 |   h3,
 38 |   h4,
 39 |   h5,
 40 |   h6,
 41 |   pre,
 42 |   code,
 43 |   form,
 44 |   fieldset,
 45 |   legend,
 46 |   input,
 47 |   textarea,
 48 |   p,
 49 |   blockquote,
 50 |   th,
 51 |   td {
 52 |     margin: 0;
 53 |     padding: 0;
 54 |   }
 55 |   h1,
 56 |   h2,
 57 |   h3,
 58 |   h4,
 59 |   h5,
 60 |   h6 {
 61 |     font-size: 100%;
 62 |     font-weight: normal;
 63 |   }
 64 |   h2 {
 65 |     font-family: Arial, Verdana, sans-serif;
 66 |   }
 67 |   p {
 68 |     margin-bottom: 18px;
 69 |   }
 70 |   a {
 71 |     cursor: pointer;
 72 |     text-decoration: none;
 73 |     color: #ff574d;
 74 |   }
 75 |   a img {
 76 |     border: none;
 77 |   }
 78 |   table {
 79 |     border-collapse: collapse;
 80 |     border-spacing: 0;
 81 |   }
 82 |   th {
 83 |     font-style: normal;
 84 |   }
 85 | 
 86 |   .clearfix {
 87 |     clear: both;
 88 |     &::after {
 89 |       content: '';
 90 |       clear: both;
 91 |       display: block;
 92 |       width: 0px;
 93 |       height: 0px;
 94 |       font-size: 0px;
 95 |       line-height: 0px;
 96 |     }
 97 |   }
 98 |   [class^='pif-']::before,
 99 |   [class*=' pif-']::before {
100 |     position: relative;
101 |     display: inline-block;
102 |     top: 1px;
103 |     font-family: 'PlurkIconFont' !important;
104 |     font-style: normal;
105 |     font-weight: normal;
106 |     font-variant: normal;
107 |     text-transform: none;
108 |     line-height: 1;
109 |     text-rendering: auto;
110 |     -webkit-font-smoothing: antialiased;
111 |     -moz-osx-font-smoothing: grayscale;
112 |   }
113 |   [class^='pif-']::before,
114 |   .pif-emoticon::before,
115 |   .pif-user-add::before,
116 |   .pif-follow_add::before,
117 |   .pif-follow::before,
118 |   .pif-volume::before,
119 |   .pif-media::before {
120 |     content: '❅';
121 |     font-size: 18px;
122 |     margin-right: 0;
123 |   }
124 | 
125 |   #layout_content {
126 |     position: relative;
127 |     top: auto !important;
128 |     bottom: auto !important;
129 |     // padding-top: 42px;
130 |     width: 100%;
131 |     min-height: 100%;
132 |     margin: 0 !important;
133 |     overflow-x: hidden;
134 |     font-size: 13px;
135 |     background-color: #eeebf0;
136 |     color: #333;
137 | 
138 |     // 預覽背景設定 **
139 |     background-position: center center;
140 |     background-size: cover;
141 |     background-attachment: fixed;
142 |   }
143 | }
144 | 


--------------------------------------------------------------------------------
/index.pug:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | html(lang="zh-Hant-TW")
 3 |   head
 4 |     meta(charset="UTF-8")
 5 |     meta(name="viewport", content="width=device-width, initial-scale=1.0")
 6 |     title Plurk CSS Generator
 7 |     link(rel="stylesheet", href="style/main.min.css")
 8 |     style#reviewStyle
 9 |   body
10 |     include pug/components/inputs.pug
11 |     include pug/components/lists.pug
12 | 
13 |     .wrapper
14 |       header.header
15 |         .logo
16 |           span.logo_main P
17 |           span.logo_sub css.
18 |           a.logo_cover(href="index.html")
19 |         h1.header_title Plurk CSS Generator
20 |           spam.header_title-small v.2
21 |         nav.nav
22 |           ul.plurkbg_list
23 |             li.plurkbg_item
24 |               label(for="plurkbg_color").plurkbg_label 背景顏色
25 |                 input#plurkbg_color.no-display(type="color")
26 |                 .plurkbg_preview.plurkbg_color
27 |             li.plurkbg_item
28 |               label(for="plurkbg_image").plurkbg_label 背景圖片
29 |                 input#plurkbg_image.no-display(type="file" accept="image/*")
30 |                 .plurkbg_preview.plurkbg_image
31 |               span.plurkbg_clear.cross_btn
32 |           button.nav_btn.plurkbg_button 預覽背景
33 |           button.nav_btn.plurkbox_button 隱藏噗內回應
34 |           button.nav_btn.reset_button 清空設定
35 |           button.nav_btn.export_button 輸出
36 |           //- button.nav_btn.tip_button Tip
37 |           a.nav_btn.github_button(href="https://github.com/hoshikata" target="_blank")
38 |         //- .mode
39 |           input#mode_switch.mode_input(type="checkbox")
40 |           label.mode_label(for="mode_switch")
41 |           .mode_sun
42 |         .sidebar.sidebar-active
43 |       .tools.tools-open
44 |         .tools_main
45 |           each list, index in contentList
46 |             .tools_container(id=`${areaList[index]}_area`, class=index===0?'tools_container-open':'')
47 |               .tools_generator.customization-scroll
48 |                 +generator(list)
49 |         .tools_bar.menu
50 |           ul.menu_list
51 |             each item, index in menuList
52 |               li.menu_item(id=`${areaList[index]}_button`, class=index===0?'menu_item-active':'')=item
53 |       #review.review
54 |         .review_container.customization-scroll
55 |           #layout_content.clearfix
56 |             - const plurk_box_width = 450
57 |             - const plurk_cut_left = 80
58 |             - const plurk_cut_width = 500
59 |             - const plurk_cut_top = 50
60 |             - const plurk_cut_height = 70
61 |             include pug/partial/review_th.pug
62 |             include pug/partial/review_tc.pug
63 |             include pug/partial/review_dh.pug
64 |             include pug/partial/review_fh.pug
65 |       .export
66 |         .export_control
67 |           button.export_btn.create_button 生成
68 |             .export_icon
69 |           button.export_btn.select_button 全選
70 |             .export_icon
71 |           button.export_btn.clear_button 清除
72 |             .export_icon
73 |           button.export_btn.save_button 儲存
74 |             .export_icon
75 |           label.export_btn.load_button 載入
76 |             .export_icon
77 |             input.load_input.no-display(type="file", accept=".json")
78 |         .export_container
79 |           textarea.export_code.customization-scroll(spellcheck="false")
80 | 
81 | 
82 |     script(src="script/script.js")
83 | 


--------------------------------------------------------------------------------
/sass/components/_export.scss:
--------------------------------------------------------------------------------
  1 | .export {
  2 |   display: flex;
  3 |   position: fixed;
  4 |   top: 0;
  5 |   right: 10%;
  6 |   @include size(90%, 100%);
  7 |   max-width: 600px;
  8 |   max-height: 400px;
  9 |   padding: 20px;
 10 |   padding-top: $header-height + 20px;
 11 |   box-sizing: border-box;
 12 |   transform: translateY(-100%);
 13 |   border-radius: 0 0 10px 10px;
 14 |   background-color: color(PureWhite);
 15 |   box-shadow: 0 0 6px rgba(color(Black), 0.2);
 16 |   transition: 0.5s;
 17 |   &-open {
 18 |     transform: translateY(0);
 19 |   }
 20 |   &_control {
 21 |     display: flex;
 22 |     flex-direction: column;
 23 |     padding: 10px 0;
 24 |     margin-right: 20px;
 25 |   }
 26 |   &_btn {
 27 |     display: block;
 28 |     position: relative;
 29 |     padding: 5px 12px;
 30 |     padding-left: 25px + 12px;
 31 |     margin-bottom: 15px;
 32 |     border-radius: 3px;
 33 |     @include Noto;
 34 |     font-weight: 300;
 35 |     background-color: transparent;
 36 |     color: color(Black);
 37 |     box-shadow: 0 0 2px rgba(color(Black), 0.2);
 38 |     transition: 0.3s;
 39 |     &::before {
 40 |       content: '';
 41 |       z-index: -1;
 42 |       position: absolute;
 43 |       top: 0;
 44 |       left: 0;
 45 |       @include size(25px, 100%);
 46 |       border-radius: 3px 0 0 3px;
 47 |       background-color: color(Secondary);
 48 |       transition: 0.3s;
 49 |     }
 50 |     &:hover {
 51 |       color: color(White);
 52 |       &::before {
 53 |         width: 100%;
 54 |         border-radius: 3px;
 55 |       }
 56 |     }
 57 |   }
 58 |   &_icon {
 59 |     position: absolute;
 60 |     top: 50%;
 61 |     left: 6px;
 62 |     @include size(13px);
 63 |     box-sizing: border-box;
 64 |     transform: translateY(-50%);
 65 |     color: color(White);
 66 |     &::before,
 67 |     &::after {
 68 |       content: '';
 69 |       display: block;
 70 |       position: absolute;
 71 |       top: 50%;
 72 |       left: 50%;
 73 |       width: 100%;
 74 |       transform: translate(-50%, -50%);
 75 |       border-top: 2px solid currentColor;
 76 |     }
 77 |     &::after {
 78 |       transform: translate(-50%, -50%) rotate(90deg);
 79 |     }
 80 |   }
 81 |   &_container {
 82 |     flex-grow: 1;
 83 |     height: 100%;
 84 |     padding: 10px;
 85 |     box-sizing: border-box;
 86 |     border-radius: 10px;
 87 |     border: 1px solid color(LightGray);
 88 |   }
 89 |   &_code {
 90 |     @include size(100%);
 91 |     resize: none;
 92 |     border: none;
 93 |     @include Noto;
 94 |     font-size: 1rem;
 95 |     letter-spacing: 0.05em;
 96 |     background-color: transparent;
 97 |     color: color(Black);
 98 |   }
 99 | }
100 | 
101 | .select_button {
102 |   .export_icon {
103 |     border: 2px dashed currentColor;
104 |     &::before,
105 |     &::after {
106 |       content: none;
107 |     }
108 |   }
109 | }
110 | .clear_button {
111 |   &::before {
112 |     background-color: color(Danger);
113 |   }
114 |   .export_icon {
115 |     transform: translateY(-50%) rotate(45deg);
116 |   }
117 | }
118 | .save_button,
119 | .load_button {
120 |   margin-top: 50px;
121 |   &::before {
122 |     background-color: color(LightGray);
123 |   }
124 |   .export_icon {
125 |     left: 3px;
126 |     @include size(20px);
127 |     box-sizing: content-box;
128 |     background-image: url('../image/save.svg');
129 |     background-size: 20px;
130 |     background-repeat: no-repeat;
131 |     background-position: center center;
132 |     &::before,
133 |     &::after {
134 |       content: none;
135 |     }
136 |   }
137 | }
138 | .load_button {
139 |   margin-top: 0;
140 |   .export_icon {
141 |     background-image: url('../image/load.svg');
142 |   }
143 | }
144 | 
145 | @mixin exportSM {
146 |   .export {
147 |     flex-direction: column;
148 |     right: auto;
149 |     left: 0;
150 |     width: 100%;
151 |     max-height: 80%;
152 |     padding-top: $header-height + $nav-height-sm + 10px;
153 |     &_control {
154 |       display: flex;
155 |       flex-direction: row;
156 |       flex-wrap: wrap;
157 |       margin-right: 0;
158 |     }
159 |     &_btn {
160 |       margin-bottom: 10px;
161 |       margin-right: 10px;
162 |     }
163 |     .save_button {
164 |       margin-top: 0;
165 |     } 
166 |   }
167 | }


--------------------------------------------------------------------------------
/pug/partial/review_dh.pug:
--------------------------------------------------------------------------------
  1 | //- 主控台
  2 | #dashboard_holder
  3 |   #plurk-dashboard.own
  4 | 
  5 |     //- 發噗區
  6 |     .dash-group-form
  7 |       .dash-segment.dash-segment-post
  8 |         .segment-content
  9 |           #plurk_form(style="display: block;")
 10 |             form#pane_plurk.plurkaction.pane
 11 |               #main_poster
 12 |                 .plurkForm
 13 |                   .drop_indicator(style="display: none;") 拖放圖片到此上傳
 14 |                   .click.submit_img.submit_img_color Plurk
 15 |                   .input_holder
 16 |                     .qual_holder(style="float: left;")
 17 |                       .dd_img.m_qualifier.q_freestyle
 18 |                         i.pif-dropdown
 19 |                     .textarea_holder
 20 |                       textarea#input_big.content(style="height: 37px; color: black;")
 21 |                     .share_holder
 22 |                       .share_list(style="display: none;")
 23 |                         ul
 24 |                           li.add_photo +
 25 |                         input(style="opacity: 0; visibility: hidden; display: none;")
 26 |                   ul.icons_holder
 27 |                     li.cmp_emoticon_off.pif-emoticon
 28 |                     li.pif-media.cmp_media_off
 29 |                     li.pif-sync.cmp_sync_off
 30 |                     li.pif-anynomous.cmp_anynomous_off
 31 |                     li.pif-privacy.cmp_privacy_off
 32 |                   //- .plurk_schedule
 33 |                   .plurk_to
 34 |                   .char_updater
 35 | 
 36 |     //- 個人資訊區
 37 |     .dash-group-left
 38 |       .dash-segment.dash-segment-profile
 39 |         .segment-content
 40 |           #dash-profile
 41 |             //- 大頭貼
 42 |             a(href="javascript:;")
 43 |               img#profile_pic.profile-pic(src="https://picsum.photos/86/86?random=1")
 44 |             //- 暱稱
 45 |             #full_name
 46 |               span.display_name 使用者名稱
 47 |               span.nick_name @帳號
 48 |             //- 年齡性別
 49 |             .profile-info
 50 |               span#span_years 年齡, 
 51 |               span#m_or_f 性別
 52 |             //- 噗幣圖示
 53 |             .profile-icons
 54 |               .premium
 55 |                 img#premium-icon(src="image/premium.png")
 56 |         .segment-content
 57 |           #dash-additional-info
 58 |             //- 私噗按鈕
 59 |             #private_plurk
 60 |               span#render_private_plurk
 61 |                 a.friend_man.private_plurk.hideBlock 傳送私人訊息
 62 |               span#render_send_gift
 63 |                 a.friend_man.send_gift.hideBlock  送禮物
 64 |             //- 自介
 65 |             p#about_me.aboutme.cboxAnchor 自介
 66 |             //- 地區
 67 |             p#location_container
 68 |               span#location 地區
 69 | 
 70 |     //- 卡瑪
 71 |     .dash-group-right
 72 |       .dash-segment.dash-segment-stats
 73 |         .segment-content
 74 |           #dash-stats
 75 |             h2 統計
 76 |             .dash-stats-karma
 77 |               .karma_hover
 78 |                 | Karma:
 79 |                 span#karma_holder
 80 |                   span#karma_div
 81 |                     span#karma.karma_red.karma_green 88.88
 82 |                 span#karma_arrow.show.pif-arrow-down
 83 |               .help
 84 |                 a(href="javascript:;") 假期模式已啟用，Karma 值已凍結.
 85 |             table#dash-stats-table
 86 |               tbody
 87 |                 tr
 88 |                   th 人氣指數
 89 |                   td#profile_views 100
 90 |                   th 成功募集人數
 91 |                   td 1
 92 |                 tr
 93 |                   th Plurks
 94 |                   td#plurks_count 100
 95 |                   th 回應數
 96 |                   td#response_count 1000
 97 |                 tr
 98 |                   th 註冊日期
 99 |                   td#join_date(title="已經使用噗浪 10 年了。") 2020-4-1
100 |                   th 上次登入
101 |                   td#last_visit 2020-4-1
102 |       //- 朋友
103 |       .dash-segment.dash-segment-friends
104 |         .segment-content
105 |           #dash-friends
106 |             h2 朋友
107 |             #friend_managment
108 |               span#render_friend
109 |                 a.friend_man.friend-editor.pif-user-add.add_friend 加為朋友
110 |             #dash-friends-pics
111 |               .show_all_friends
112 |                 a(href="javascript:;")
113 |                   | 所有朋友 (
114 |                   span#num_of_friends 10
115 |                   | )
116 |               .show_mutual_friends
117 |                 a(href="javascript:;")
118 |                   | 共同好友 (
119 |                   span#num_of_mutual_friends 1
120 |                   | )
121 |               #friend_holder.friend_holder
122 |                 ul.clearfix
123 |                   li
124 |                     a.user_link.name(href="javascript:;")
125 |                       img(src="https://picsum.photos/35/35?random=10")
126 |                   li
127 |                     a.user_link.name(href="javascript:;")
128 |                       img(src="https://picsum.photos/35/35?random=11")
129 |       //- 粉絲
130 |       .dash-segment.friendsList.dash-segment-fans
131 |         .segment-content
132 |           #dash-fans
133 |             h2#h2_fans 粉絲
134 |             #fan_managment
135 |               span#render_follow
136 |                 a.friend_man.follow-editor.pif-follow.unfollow 關注中
137 |             #dash-fans-pics
138 |               .show_all_friends
139 |                 a(href="javascript:;")
140 |                   | 所有粉絲 (
141 |                   span#num_of_fans 10
142 |                   | )
143 |               #fan_holder.friend_holder
144 |                 ul.clearfix
145 |                   li
146 |                     a.user_link.name(href="javascript:;")
147 |                       img(src="https://picsum.photos/35/35?random=12")
148 |                   li
149 |                     a.user_link.name(href="javascript:;")
150 |                       img(src="https://picsum.photos/35/35?random=13")
151 |       //- 徽章
152 |       .dash-segment.dash-segment-award
153 |         .segment-content
154 |           #dash-award
155 |             .award_bar.clearfix
156 |               .cmp_9
157 |             a.link_arrow
158 |               i.pif-arrow-points
159 |               | 如何獲得徽章？


--------------------------------------------------------------------------------
/sass/components/_generator.scss:
--------------------------------------------------------------------------------
  1 | @mixin generatorStatus($status) {
  2 |   @at-root .generator_container#{$status} & {
  3 |     @content;
  4 |   }
  5 | }
  6 | @mixin generatorTitle {
  7 |   color: $font-color;
  8 |   &::after {
  9 |     @content;
 10 |     font-size: 0.7em;
 11 |     font-weight: 300;
 12 |     color: color(Gray);
 13 |   }
 14 | }
 15 | @mixin rangeThumb {
 16 |   @include size(15px);
 17 |   border-radius: 50%;
 18 |   border: none;
 19 |   background-color: color(Success);
 20 | }
 21 | @mixin radioStyle {
 22 |   color: color(White);
 23 |   &::before {
 24 |     height: 100%;
 25 |     border-radius: 3px;
 26 |     @content;
 27 |   }
 28 | }
 29 | 
 30 | .generator {
 31 |   width: 100%;
 32 |   padding: 0 10px;
 33 |   padding-left: 35px;
 34 |   box-sizing: border-box;
 35 |   &_container {
 36 |     position: relative;
 37 |     margin-bottom: 10px;
 38 |     padding: 5px 10px;
 39 |     cursor: pointer;
 40 |     border-radius: 5px;
 41 |     background-color: rgba(color(Black), 0.08);
 42 |     &::before {
 43 |       content: '+';
 44 |       display: inline-block;
 45 |       position: absolute;
 46 |       top: 0;
 47 |       left: 0;
 48 |       width: 20px;
 49 |       padding-right: 5px;
 50 |       box-sizing: border-box;
 51 |       transform: translate(-100%, -2px);
 52 |       font-size: 1.8rem;
 53 |       font-weight: 700;
 54 |       line-height: 37px;
 55 |       text-align: center;
 56 |       color: color(Success);
 57 |     }
 58 |     &:hover {
 59 |       background-color: color(Success);
 60 |     }
 61 |     &-open {
 62 |       margin-bottom: 25px;
 63 |       cursor: auto;
 64 |       background-color: transparent;
 65 |       &::before {
 66 |         content: '-';
 67 |       }
 68 |       &:hover {
 69 |         background-color: transparent;
 70 |       }
 71 |     }
 72 |   }
 73 |   &_title {
 74 |     border-bottom: 2px solid transparent;
 75 |     @include generatorTitle {
 76 |       content: attr(data-selector);
 77 |       display: none;
 78 |     }
 79 |     @at-root .generator_container-apply & {
 80 |       color: color(Success);
 81 |     }
 82 |     @at-root .generator_container-open.generator_container-apply & {
 83 |       color: $font-color;
 84 |       border-bottom-color: color(Success);
 85 |     }
 86 |     @include generatorStatus(':hover') {
 87 |       color: color(White);
 88 |     }
 89 |     @include generatorStatus('-open:hover') {
 90 |       color: $font-color;
 91 |     }
 92 |     @include generatorStatus('-open') {
 93 |       padding-bottom: 10px;
 94 |       cursor: pointer;
 95 |       border-bottom-color: color(WhiteGray);
 96 |       &::after {
 97 |         display: block;
 98 |       }
 99 |       &:hover {
100 |         color: color(Success);
101 |       }
102 |     }
103 |   }
104 |   &_body {
105 |     display: none;
106 |     flex-wrap: wrap;
107 |     margin: 0 -10px;
108 |     @include generatorStatus('-open') {
109 |       display: flex;
110 |     }
111 |   }
112 |   &_box {
113 |     width: 220px;
114 |     margin-top: 15px;
115 |     padding: 0 10px;
116 |     box-sizing: border-box;
117 |   }
118 |   &_subtitle {
119 |     @include generatorTitle {
120 |       content: attr(data-css);
121 |       margin-left: 5px;
122 |     }
123 |   }
124 |   &_group {
125 |     display: flex;
126 |     align-items: center;
127 |     width: 100%;
128 |     margin-top: 5px;
129 |   }
130 |   &_input {
131 |     flex: 1 1 auto;
132 |     @include size(0, 25px);
133 |     padding: 2px 5px;
134 |     box-sizing: border-box;
135 |     @include Noto;
136 |     font-size: 1rem;
137 |     font-weight: 300;
138 |     letter-spacing: 0.05em;
139 |     border-radius: 3px;
140 |     border: 1px solid color(Gray);
141 |     background-color: transparent;
142 |     color: $font-color;
143 |     &::placeholder {
144 |       opacity: 0.3;
145 |       color: $font-color;
146 |     }
147 |     &:focus {
148 |       border-color: $font-color;
149 |     }
150 |     &-no-empty {
151 |       border-color: $font-color;
152 |     }
153 |   }
154 |   &_input-color {
155 |     @include size(25px);
156 |     margin-left: 5px;
157 |     cursor: pointer;
158 |     overflow: hidden;
159 |     border-radius: 3px;
160 |     border: none;
161 |     &::-moz-color-swatch,
162 |     &::-webkit-color-swatch {
163 |       border-radius: 3px;
164 |       border: 1px solid rgba(color(Gray), 0.2);
165 |     }
166 |     &::-webkit-color-swatch-wrapper {
167 |       padding: 0;
168 |     }
169 |   }
170 |   &_input-range {
171 |     @include size(150px, 5px);
172 |     margin-left: 5px;
173 |     padding: 0 3px;
174 |     box-sizing: border-box;
175 |     cursor: pointer;
176 |     appearance: none;
177 |     border-radius: 5px;
178 |     border: none;
179 |     background-color: rgba(color(WhiteGray), 0.5);
180 |     // 其他瀏覽器的滑桿頭設定
181 |     &::-webkit-slider-thumb {
182 |       appearance: none;
183 |       @include rangeThumb;
184 |     }
185 |     // 火狐的滑桿頭設定
186 |     &::-moz-range-thumb {
187 |       @include size(15px);
188 |       @include rangeThumb;
189 |     }
190 |     // 去除 focus 時候的外框虛線
191 |     &::-moz-focus-outer {
192 |       border: none;
193 |     }
194 |   }
195 |   &_input-checkbox,
196 |   &_input-radio {
197 |     display: none;
198 |   }
199 |   &_label-checkbox {
200 |     position: relative;
201 |     height: 22px;
202 |     padding-left: 50px;
203 |     cursor: pointer;
204 |     line-height: 22px;
205 |     &::before {
206 |       content: '';
207 |       position: absolute;
208 |       display: block;
209 |       top: 0;
210 |       left: 0;
211 |       @include size(40px, 100%);
212 |       border-radius: 3px;
213 |       background-color: color(WhiteGray);
214 |       box-shadow: inset 0 0 2px rgba(color(Primary), 0.3);
215 |       transition: 0.3s;
216 |     }
217 |     &::after {
218 |       content: '';
219 |       position: absolute;
220 |       display: block;
221 |       top: 0;
222 |       left: 0;
223 |       @include size(18px);
224 |       margin-left: 2px;
225 |       margin-top: 2px;
226 |       box-sizing: border-box;
227 |       border-radius: 3px;
228 |       background-color: color(White);
229 |       transition: all 0.3s, box-shadow 0.1s;
230 |     }
231 |     &:hover::after {
232 |       box-shadow: 0 0 3px 1px rgba(color(Primary), 0.3);
233 |     }
234 |     .generator_text-yes {
235 |       display: none;
236 |     }
237 |     @at-root .generator_input-checkbox:checked + & {
238 |       &::before {
239 |         background-color: color(Success);
240 |       }
241 |       &::after {
242 |         margin-left: 20px;
243 |       }
244 |       .generator_text-yes {
245 |         display: inline;
246 |       }
247 |       .generator_text-no {
248 |         display: none;
249 |       }
250 |     }
251 |   }
252 |   &_label-radio {
253 |     z-index: 0;
254 |     position: relative;
255 |     padding: 3px 10px;
256 |     cursor: pointer;
257 |     transition: 0.3s;
258 |     & ~ & {
259 |       margin-left: 10px;
260 |     }
261 |     &::before {
262 |       content: '';
263 |       z-index: -1;
264 |       position: absolute;
265 |       bottom: 0;
266 |       left: 0;
267 |       @include size(100%, 1px);
268 |       border-radius: 0;
269 |       background-color: color(WhiteGray);
270 |       transition: 0.3s;
271 |     }
272 |     &:hover::before {
273 |       background-color: color(Black);
274 |     }
275 |     @at-root .generator_input-radio:checked + & {
276 |       @include radioStyle {
277 |         background-color: color(Success);
278 |       }
279 |     }
280 |     @at-root .generator_input-radio:disabled + & {
281 |       @include radioStyle {
282 |         background-color: color(WhiteGray);
283 |       }
284 |     }
285 |   }
286 |   &_text-unit {
287 |     flex-grow: 1;
288 |     margin: 0 5px;
289 |     font-size: 1.05rem;
290 |     text-align: right;
291 |   }
292 | }
293 | 


--------------------------------------------------------------------------------
/sass/components/_header.scss:
--------------------------------------------------------------------------------
  1 | $mode-label-width: 32px;
  2 | $mode-label-height: 16px;
  3 | $mode-circle-width: $mode-label-height - 4px;
  4 | $sidebar-height: 21px;
  5 | 
  6 | .header {
  7 |   display: flex;
  8 |   align-items: center;
  9 |   z-index: map-get($z-index, header);
 10 |   position: fixed;
 11 |   top: 0;
 12 |   left: 0;
 13 |   @include size(100%, $header-height);
 14 |   padding: 0;
 15 |   padding-left: 40px;
 16 |   box-sizing: border-box;
 17 |   background-image: linear-gradient(160deg, rgba(color(Secondary), 0.9), rgba(color(Primary), 0.9) 300%);
 18 |   color: color(White);
 19 |   &_title {
 20 |     flex-grow: 1;
 21 |     padding-left: 20px;
 22 |     font-family: 'Baloo Da 2', cursive;
 23 |     font-size: 1.5rem;
 24 |     font-weight: 500;
 25 |     text-transform: uppercase;
 26 |     letter-spacing: 0;
 27 |     color: currentColor;
 28 |     &-small {
 29 |       padding-left: 5px;
 30 |       font-size: 0.5em;
 31 |       font-weight: 300;
 32 |     }
 33 |   }
 34 | }
 35 | @mixin headerLG {
 36 |   .header {
 37 |     padding-left: 15px;
 38 |     &_title {
 39 |       padding-left: 0;
 40 |       font-size: 0;
 41 |     }
 42 |   }
 43 | }
 44 | 
 45 | .logo {
 46 |   flex-shrink: 0;
 47 |   position: relative;
 48 |   @include size(40px);
 49 |   box-sizing: border-box;
 50 |   overflow: hidden;
 51 |   transform: scale(0.8);
 52 |   border-radius: 5px;
 53 |   border: 3px solid currentColor;
 54 |   letter-spacing: 0;
 55 |   &_main,
 56 |   &_sub {
 57 |     position: absolute;
 58 |     top: -1px;
 59 |     right: 2px;
 60 |     font-family: 'Baloo Da 2', cursive;
 61 |     font-size: 16px;
 62 |     font-weight: 600;
 63 |     line-height: 16px;
 64 |     color: currentColor;
 65 |   }
 66 |   &_main {
 67 |     top: -1px;
 68 |     left: -1px;
 69 |     @include size(35px);
 70 |     transform: rotate(-90deg);
 71 |     font-size: 35px;
 72 |     line-height: 35px;
 73 |     color: currentColor;
 74 |   }
 75 |   &_cover {
 76 |     position: absolute;
 77 |     top: 0;
 78 |     left: 0;
 79 |     @include size(100%);
 80 |   }
 81 | }
 82 | 
 83 | .nav {
 84 |   display: flex;
 85 |   position: relative;
 86 |   height: 100%;
 87 |   margin-right: 10px;
 88 |   &_btn {
 89 |     display: flex;
 90 |     justify-content: center;
 91 |     align-items: center;
 92 |     height: 100%;
 93 |     margin-right: 5px;
 94 |     padding: 0 10px;
 95 |     @include Noto;
 96 |     font-size: 1.1rem;
 97 |     font-weight: 400;
 98 |     background-color: transparent;
 99 |     color: color(White);
100 |     &-active,
101 |     &:hover {
102 |       &.plurkbg_button,
103 |       &.plurkbox_button {
104 |         background-color: rgba(color(Warning), 0.5);
105 |       }
106 |       &.reset_button {
107 |         background-color: rgba(color(Danger), 0.5);
108 |       }
109 |       &.export_button {
110 |         background-color: rgba(color(Success), 0.5);
111 |       }
112 |       &.tip_button,
113 |       &.github_button {
114 |         background-color: rgba(color(LightGray), 0.5);
115 |       }
116 |     }
117 |   }
118 | }
119 | .load_button {
120 |   cursor: pointer;
121 | }
122 | .github_button {
123 |   width: 20px;
124 |   margin-right: 0;
125 |   background: url('../image/github.png') no-repeat center center;
126 |   background-size: 20px;
127 | }
128 | .plurkbg {
129 |   &_list {
130 |     position: absolute;
131 |     bottom: 0;
132 |     left: 0;
133 |     padding: 10px 20px;
134 |     visibility: hidden;
135 |     transform: translateY(100%);
136 |     border-radius: 0 0 5px 5px;
137 |     background-color: rgba(color(PureWhite), 1);
138 |     color: color(Black);
139 |     box-shadow: 3px 3px 6px rgba(color(Black), 0.2);
140 |     @at-root .plurkbg-open & {
141 |       visibility: visible;
142 |     }
143 |   }
144 |   &_item {
145 |     font-size: 1.1rem;
146 |     font-weight: 500;
147 |     text-align: left;
148 |     white-space: nowrap;
149 |     &:hover {
150 |       opacity: 0.8;
151 |     }
152 |     & + & {
153 |       margin-top: 10px;
154 |     }
155 |   }
156 |   &_label {
157 |     cursor: pointer;
158 |     display: inline-flex;
159 |     align-items: center;
160 |   }
161 |   &_preview {
162 |     display: inline-block;
163 |     @include size(20px);
164 |     margin-left: 5px;
165 |     border-radius: 3px;
166 |     background: color(Black);
167 |   }
168 |   &_image {
169 |     @include size(60px, 40px);
170 |     background-position: center center;
171 |     background-size: cover;
172 |   }
173 |   &_clear {
174 |     display: inline-block;
175 |     cursor: pointer;
176 |     margin-left: 5px;
177 |     color: color(Gray);
178 |     &:hover {
179 |       color: color(BlackGray);
180 |     }
181 |   }
182 | }
183 | @mixin navLG {
184 |   .nav {
185 |     &_btn {
186 |       margin-right: 0;
187 |     }
188 |   }
189 | }
190 | @mixin navSM {
191 |   .nav {
192 |     position: absolute;
193 |     justify-content: space-evenly;
194 |     bottom: 0;
195 |     left: 0;
196 |     width: 100%;
197 |     height: 30px;
198 |     margin-right: 0;
199 |     transform: translateY(100%);
200 |     font-size: 1rem;
201 |     background-image: linear-gradient(160deg, rgba(color(Secondary), 0.9), rgba(color(Primary), 0.9) 300%);
202 |     &_btn {
203 |       flex-grow: 1;
204 |       padding: 0;
205 |     }
206 |   }
207 |   .github_button {
208 |     display: none;
209 |   }
210 | }
211 | 
212 | .sidebar {
213 |   @include size(25px, $sidebar-height);
214 |   align-self: flex-start;
215 |   margin-left: 20px;
216 |   padding: ($header-height - $sidebar-height) / 2 15px;
217 |   cursor: pointer;
218 |   color: color(White);
219 |   &::before {
220 |     content: '';
221 |     display: block;
222 |     @include size(100%, 3px);
223 |     transform: translateY(1px);
224 |     border-radius: 5px;
225 |     background-color: currentColor;
226 |     box-shadow: 0 8px 0 currentColor, 0 16px 0 currentColor;
227 |   }
228 |   &-active,
229 |   &:hover {
230 |     background-color: rgba(color(Primary), 0.5);
231 |   }
232 | }
233 | @mixin sidebarLG {
234 |   .sidebar {
235 |     margin-left: 0;
236 |   }
237 | }
238 | 
239 | // .mode {
240 | //   position: relative;
241 | //   &_input {
242 | //     display: none;
243 | //   }
244 | //   &_label {
245 | //     display: block;
246 | //     z-index: 1;
247 | //     position: relative;
248 | //     @include size($mode-label-width, $mode-label-height);
249 | //     margin: 0 20px;
250 | //     cursor: pointer;
251 | //     border-radius: 10px;
252 | //     background-color: color(White);
253 | //     transition: 0.5s;
254 | //     &::after {
255 | //       content: '';
256 | //       z-index: 2;
257 | //       position: absolute;
258 | //       top: 50%;
259 | //       left: $mode-label-width - $mode-circle-width - 2px;
260 | //       @include size($mode-circle-width);
261 | //       transform: translateY(-50%);
262 | //       border-radius: 50%;
263 | //       background-color: color(Primary);
264 | //       transition: all 0.5s, background-color 0s;
265 | //       @at-root .mode_input:checked + & {
266 | //         left: 2px;
267 | //       }
268 | //     }
269 | //     &:hover::after {
270 | //       background-color: color(Warning);
271 | //       @at-root .mode_input:checked + & {
272 | //         background-color: color(Warning);
273 | //       }
274 | //     }
275 | //   }
276 | //   &_sun {
277 | //     z-index: 0;
278 | //     position: absolute;
279 | //     top: 50%;
280 | //     left: 100%;
281 | //     @include size(16px);
282 | //     transform: translate(-80%, -50%);
283 | //     border-radius: 50%;
284 | //     background-color: currentColor;
285 | //     box-shadow: 0 0 6px currentColor;
286 | //     color: color(Sun);
287 | //     transition: 0.5s;
288 | //     @at-root .mode_input:checked ~ & {
289 | //       left: 0;
290 | //       transform: translate(-20%, -50%);
291 | //       background-color: transparent;
292 | //       box-shadow: inset 4px -4px 0 currentColor;
293 | //       color: color(White);
294 | //     }
295 | //   }
296 | // }
297 | 


--------------------------------------------------------------------------------
/pug/components/inputs.pug:
--------------------------------------------------------------------------------
  1 | //- 基本 input 種類
  2 | mixin title(type, title, css)
  3 |   .generator_box(data-type=type, data-apply="false")
  4 |     h6.generator_subtitle(data-css=css)=title
  5 |     block
  6 | 
  7 | mixin group
  8 |   .generator_group
  9 |     block
 10 | 
 11 | mixin colorInput(name, type, ph)
 12 |   - const cla = `${name}_${type}`
 13 |   - const attr = {}
 14 |   - attr['data-need'] = 'true'
 15 |   - if (ph) attr['placeholder'] = ph
 16 |   +group
 17 |     input.generator_input.color_box(type="text", class=cla, name=cla)&attributes(attr)
 18 |     input.generator_input-color.color_box(type="color")
 19 | 
 20 | mixin rangeInput(name, type, value, need, ph)
 21 |   - const cla = `${name}_${type}`
 22 |   - const attr = {}
 23 |   - if (need) attr['data-need'] = 'true'
 24 |   - if (ph) attr['placeholder'] = ph
 25 |   +group
 26 |     input.generator_input.range_box(type="text", class=cla, name=cla)&attributes(attr)
 27 |     input.generator_input-range.range_box(type="range", min=value[0], max=value[1], step=value[2], value="0")
 28 | 
 29 | mixin checkInput(name, type, change)
 30 |   - const cla = `${name}_${type}`
 31 |   - const attr = {}
 32 |   - if (change) attr['data-change'] = 'true'
 33 |   +group
 34 |     input.generator_input-checkbox(type="checkbox", id=cla, name=cla)&attributes(attr)
 35 |     label.generator_label-checkbox(for=cla)
 36 |       span.generator_text-no NO
 37 |       span.generator_text-yes YES
 38 | 
 39 | mixin radioInput(name, type, value, text, change)
 40 |   - const cla = `${name}_${type}`
 41 |   +group
 42 |     if (type === 'bdrs')
 43 |       span.generator_text-unit 單位
 44 |     - for (let i = 0; i < value.length; i++)
 45 |       - const attr = {}
 46 |       - if (change) attr['data-change'] = 'true'
 47 |       - if (i === 0) attr['checked'] = 'checked'
 48 |       input.generator_input-radio(type="radio", id=`${cla}_${i+1}`, class=cla, name=cla, value=value[i])&attributes(attr)
 49 |       label.generator_label-radio(for=`${cla}_${i+1}`)=text[i].toUpperCase()
 50 | 
 51 | mixin textInput(name, type, ph)
 52 |   - const cla = `${name}_${type}`
 53 |   - const attr = {}
 54 |   - attr['data-need'] = 'true'
 55 |   - if (ph) attr['placeholder'] = ph
 56 |   +group
 57 |     input.generator_input(type="text", class=cla, name=cla)&attributes(attr)
 58 | 
 59 | //- 通用 css type input
 60 | mixin typeBgc(name)
 61 |   - const type = 'bgc'
 62 |   +title(type, '背景顏色', 'background-color')
 63 |     +colorInput(name, type, '顏色')
 64 |     +rangeInput(name, type, [0, 1, 0.1], false, '透明')
 65 | 
 66 | mixin typeColor(name)
 67 |   - const type = 'c'
 68 |   +title(type, '文字顏色', 'color')
 69 |     +colorInput(name, type, '顏色')
 70 |     +rangeInput(name, type, [0, 1, 0.1], false, '透明')
 71 | 
 72 | mixin typeFz(name)
 73 |   - const type = 'fz'
 74 |   +title(type, '文字大小', 'font-size')
 75 |     +rangeInput(name, type, [10, 30, 1], true)
 76 | 
 77 | mixin typeOpacity(name)
 78 |   - const type = 'opa'
 79 |   +title(type, '透明度', 'opacity')
 80 |     +rangeInput(name, type, [0, 1, 0.1], true)
 81 | 
 82 | mixin typeBdrs(name)
 83 |   - const type = 'bdrs'
 84 |   +title(type, '圓角', 'border-radius')
 85 |     +rangeInput(name, type, [0, 50, 1], true, '左上')
 86 |     +rangeInput(name, type, [0, 50, 1], true, '右上')
 87 |     +rangeInput(name, type, [0, 50, 1], true, '右下')
 88 |     +rangeInput(name, type, [0, 50, 1], true, '左下')
 89 |     +radioInput(name, type, ['px', '%'], ['px', '%'])
 90 | 
 91 | mixin typeBorder(name)
 92 |   - const type = 'bd'
 93 |   +title(type, '邊框', 'border')
 94 |     +colorInput(name, type, '顏色')
 95 |     +rangeInput(name, type, [0, 1, 0.1], false, '透明')
 96 |     +rangeInput(name, type, [0, 5, 1], true, '粗細')
 97 | 
 98 | mixin typeShadow(name)
 99 |   - const type = 'sha'
100 |   +title(type, '陰影', 'box-shadow')
101 |     +colorInput(name, type, '顏色')
102 |     +rangeInput(name, type, [0, 1, 0.1], false, '透明')
103 |     +rangeInput(name, type, [-10, 10, 1], true, '水平')
104 |     +rangeInput(name, type, [-10, 10, 1], true, '垂直')
105 |     +rangeInput(name, type, [0, 20, 1], true, '模糊')
106 | 
107 | mixin typeDisplay(name)
108 |   - const type = 'dp'
109 |   +title(type, '隱藏區塊', 'display')
110 |     +checkInput(name, type, true)
111 | 
112 | mixin typeTransition(name)
113 |   - const type = 'transi'
114 |   +title(type, '變化時間', 'transition')
115 |     +rangeInput(name, type, [0, 1, 0.1], true, '秒')
116 | 
117 | //- 特殊 css type input
118 | mixin typeBlur(name)
119 |   - const type = 'blur'
120 |   +title(type, '模糊化', 'filter')
121 |     +rangeInput(name, type, [0, 5, 1], true)
122 | 
123 | mixin typePosition(name)
124 |   - const type = 'posi'
125 |   +title(type, '位置', 'top, left')
126 |     +rangeInput(name, type, [-300, 1000, 1], true, '上方')
127 |     +rangeInput(name, type, [-1000, 200, 1], true, '左方')
128 | 
129 | mixin typeSize(name)
130 |   - const type = 'size'
131 |   +title(type, '大小', 'width, height')
132 |     +textInput(name, type, '寬度')
133 |     +textInput(name, type, '高度')
134 | 
135 | mixin typeImage(name, type)
136 |   //- dcbgi, pcoinbgi, tlbgi, browsealbgi, browsearbgi
137 |   +title(type, '背景圖', 'background-image')
138 |     +textInput(name, type, '圖片網址')
139 | 
140 | mixin typeImgRepeat(name)
141 |   - const type = 'tlbgirep'
142 |   +title(type, '不要重複', 'background-repeat')
143 |     +checkInput(name, type, true)
144 | 
145 | mixin typeImgPosition(name)
146 |   - const type = 'tlbgiposi'
147 |   +title(type, '位置', 'background-position')
148 |     +rangeInput(name, type, [0, 100, 1], true, '下方')
149 |     +rangeInput(name, type, [0, 100, 1], true, '左方')
150 | 
151 | mixin typeCursor(name)
152 |   - const type = 'cursor'
153 |   +title(type, '游標圖', 'cursor')
154 |     +textInput(name, type, '圖片網址')
155 | 
156 | mixin typeUp(name, type)
157 |   //- up, boxup
158 |   +title(type, '上移', '')
159 |     +checkInput(name, type, true)
160 | 
161 | mixin typeOpen(name)
162 |   - const type = 'open'
163 |   +title(type, '頻道展開', '')
164 |     +radioInput(name, type, ['no', 'top', 'right'], ['不展開', '向上', '向右'], true)
165 | 
166 | mixin typeFTPosi(name)
167 |   - const type = 'ftposi'
168 |   +title(type, '頻道位置', '')
169 |     +radioInput(name, type, ['no', 'right'], ['原處', '往右放'], true)
170 | 
171 | mixin typeToIcon(name)
172 |   - const type = 'toicon'
173 |   +title(type, '圖示化', '')
174 |     +checkInput(name, type, true)
175 | 
176 | mixin typeCountPosi(name)
177 |   - const type = 'countposi'
178 |   +title(type, '圖示化的未讀位置', '')
179 |     +radioInput(name, type, ['right', 'left', 'top'], ['右邊', '左邊', '上面'])
180 | 
181 | //- 
182 | //- 按照 list 產出 input
183 | mixin createInputFromList(list, name)
184 |   each cssType in list
185 |     - const imageTypeList = ['dcbgi', 'pcoinbgi', 'tlbgi', 'browsealbgi', 'browsearbgi', 'browsettbgi', 'loadingbgi']
186 |     - const typeIsImage = imageTypeList.includes(cssType)
187 |     - const typeIsUp = cssType === 'up'|| cssType === 'boxup'
188 |     if (cssType === 'bgc')
189 |       +typeBgc(name)
190 |     if (cssType === 'c')
191 |       +typeColor(name)
192 |     if (cssType === 'fz')
193 |       +typeFz(name)
194 |     if (cssType === 'opa')
195 |       +typeOpacity(name)
196 |     if (cssType === 'bdrs')
197 |       +typeBdrs(name)
198 |     if (cssType === 'bd')
199 |       +typeBorder(name)
200 |     if (cssType === 'sha')
201 |       +typeShadow(name)
202 |     if (cssType === 'dp')
203 |       +typeDisplay(name)
204 |     if (cssType === 'transi')
205 |       +typeTransition(name)
206 |     if (cssType === 'blur')
207 |       +typeBlur(name)
208 |     if (cssType === 'posi')
209 |       +typePosition(name)
210 |     if (cssType === 'size')
211 |       +typeSize(name)
212 |     if (typeIsImage)
213 |       +typeImage(name, cssType)
214 |     if (cssType === 'tlbgirep')
215 |       +typeImgRepeat(name)
216 |     if (cssType === 'tlbgiposi')
217 |       +typeImgPosition(name)
218 |     if (cssType === 'cursor')
219 |       +typeCursor(name)
220 |     if (typeIsUp)
221 |       +typeUp(name, cssType)
222 |     if (cssType === 'open')
223 |       +typeOpen(name)
224 |     if (cssType === 'ftposi')
225 |       +typeFTPosi(name)
226 |     if (cssType === 'toicon')
227 |       +typeToIcon(name)
228 |     if (cssType === 'countposi')
229 |       +typeCountPosi(name)
230 | 
231 | //- 包裝
232 | mixin generator(list)
233 |   .generator
234 |     each item, index in list
235 |       - const { name, title, subtitle, csstype: list, hover } = item
236 |       - if (hover) list.push('transi')
237 |       .generator_container(id=name)
238 |         h5.generator_title(data-selector=subtitle)=title
239 |         .generator_body
240 |           +createInputFromList(list, name)
241 |       if (hover)
242 |         - const hasDp = list.indexOf('dp')
243 |         - if (hasDp !== -1) list.splice(hasDp, 1)
244 |         - const hasTransi = list.indexOf('transi')
245 |         - if (hasTransi !== -1) list.splice(hasTransi, 1)
246 |         .generator_container(id=`${name}_hover`)
247 |           h5.generator_title(data-selector=`${subtitle}:hover`)=`${title}：滑鼠移至`
248 |           .generator_body
249 |             +createInputFromList(list, `${name}_hover`)


--------------------------------------------------------------------------------
/sass/partials/_review_fh.scss:
--------------------------------------------------------------------------------
  1 | $fh-index: (
  2 |   plurk_box: 50,
  3 | );
  4 | 
  5 | //----- 噗內回應
  6 | .review {
  7 |   #form_holder {
  8 |     background: #fff;
  9 |     box-shadow: 1px 1px 3px -3px #000;
 10 |   }
 11 |   .plurk_box {
 12 |     z-index: map-get($fh-index, plurk_box);
 13 |     position: absolute;
 14 |   }
 15 |   .plurkForm::after,
 16 |   .input_holder::after,
 17 |   .share_list::after,
 18 |   .icons_holder::after {
 19 |     content: '';
 20 |     clear: both;
 21 |     height: 0;
 22 |     display: block;
 23 |   }
 24 | 
 25 |   // 迷你發噗區
 26 |   .plurk_box .mini_form {
 27 |     padding: 4px 3px 2px;
 28 |     font-weight: normal;
 29 |     border-top: #eee 1px solid;
 30 |     background-color: #fff;
 31 |   }
 32 |   .plurkForm {
 33 |     position: relative;
 34 |     padding: 3px 3px 0;
 35 |   }
 36 |   .plurkForm.mini-mode .input_holder,
 37 |   .mini_form .input_holder {
 38 |     border-radius: 6px;
 39 |   }
 40 |   .input_holder {
 41 |     float: none;
 42 |     width: auto;
 43 |     overflow: hidden;
 44 |     border: #eee 1px solid;
 45 |     border-color: rgba(0, 0, 0, 0.1);
 46 |     border-radius: 8px;
 47 |     background: #fff;
 48 |   }
 49 |   .qual_holder {
 50 |     position: relative !important;
 51 |     padding: 3px;
 52 |     font-size: 24px;
 53 |   }
 54 |   .plurkForm.mini-mode .qual_holder,
 55 |   .mini_form .qual_holder {
 56 |     padding: 1px 1px 0;
 57 |     font-size: 12px;
 58 |   }
 59 |   #form_holder .qual_holder {
 60 |     color: black;
 61 |   }
 62 |   .m_qualifier {
 63 |     position: relative;
 64 |     padding: 3px 6px 4px;
 65 |     line-height: 100%;
 66 |     border-radius: 5px;
 67 |     background-color: #ccc;
 68 |     color: #fff;
 69 |   }
 70 |   .dd_img {
 71 |     cursor: pointer;
 72 |   }
 73 |   .plurkForm.mini-mode .m_qualifier,
 74 |   .mini_form .m_qualifier {
 75 |     padding: 3px 6px 2px;
 76 |   }
 77 | 
 78 |   .pif-dropdown::before {
 79 |     content: '▼';
 80 |   }
 81 |   .m_qualifier i::before {
 82 |     top: 0;
 83 |     font-size: 16px;
 84 |     line-height: 16px;
 85 |   }
 86 |   .mini_form .m_qualifier i::before {
 87 |     top: 1px;
 88 |     font-size: 12px;
 89 |     line-height: 10px;
 90 |   }
 91 |   .textarea_holder {
 92 |     float: none;
 93 |     width: auto;
 94 |     overflow: hidden;
 95 |   }
 96 |   .textarea_holder textarea {
 97 |     display: block;
 98 |     clear: none;
 99 |     width: 100%;
100 |     height: 37px;
101 |     margin: 0 !important;
102 |     padding: 0 0 0 2px !important;
103 |     outline: none;
104 |     resize: none;
105 |     font-family: inherit;
106 |     font-size: 25px;
107 |     line-height: 37px;
108 |     border: 0;
109 |     border-radius: 7px;
110 |     background: #fff;
111 |     box-shadow: none;
112 |   }
113 |   .plurkForm.mini-mode .textarea_holder textarea,
114 |   .mini_form .textarea_holder textarea {
115 |     height: 19px;
116 |     font-size: 12px;
117 |     line-height: 19px;
118 |     border-radius: 4px;
119 |   }
120 |   .icons_holder {
121 |     float: left;
122 |     margin: 4px 0 4px;
123 |     overflow: hidden;
124 |     font-size: 12px;
125 |   }
126 |   .plurkForm.mini-mode .icons_holder,
127 |   .mini_form .icons_holder {
128 |     margin: 1px 0 3px;
129 |   }
130 |   .icons_holder li {
131 |     position: relative;
132 |     float: left;
133 |     width: 32px;
134 |     margin: 4px 6px 0 0;
135 |     cursor: pointer;
136 |     font-size: 26px;
137 |     line-height: 32px;
138 |     text-align: center;
139 |   }
140 |   .plurkForm.mini-mode .icons_holder li,
141 |   .mini_form .icons_holder li {
142 |     width: 26px;
143 |     margin: 1px 1px 0 0;
144 |     font-size: 16px;
145 |     line-height: 24px;
146 |   }
147 |   .plurkForm.mini-mode .icons_holder .pif-emoticon,
148 |   .mini_form .icons_holder .pif-emoticon {
149 |     &::after {
150 |       width: 12px;
151 |       height: 12px;
152 |       border-radius: 6px;
153 |       background: #333;
154 |       margin: -19px 0 0 7px;
155 |     }
156 |   }
157 |   .icons_holder .pif-emoticon {
158 |     color: #fcd254;
159 |   }
160 |   .icons_holder .pif-media {
161 |     color: #8bcfd6;
162 |   }
163 |   .plurkForm.mini-mode .icons_holder,
164 |   .mini_form .icons_holder {
165 |     .pif-emoticon,
166 |     .pif-media {
167 |       &::before {
168 |         font-size: 20px;
169 |       }
170 |     }
171 |   }
172 |   .plurk_to,
173 |   .plurkForm .whispers_hint,
174 |   .priv,
175 |   .plurk_schedule {
176 |     float: right;
177 |     margin-top: 6px;
178 |     opacity: 0.6;
179 |     font-size: 13px;
180 |     line-height: 17px;
181 |     text-align: right;
182 |   }
183 |   .char_updater {
184 |     clear: both;
185 |     display: block;
186 |     opacity: 0.75;
187 |     font-size: 12px;
188 |     line-height: 18px;
189 |   }
190 |   .plurkForm.mini-mode .char_updater,
191 |   .mini_form .char_updater {
192 |     clear: none;
193 |     float: right;
194 |     margin: 4px 5px 0;
195 |     color: #999;
196 |   }
197 | 
198 |   // 回應區
199 |   .response_box {
200 |     position: relative;
201 |     min-height: 260px;
202 |     overflow: auto;
203 |     overflow-x: hidden;
204 |     border-top: #eee 1px solid;
205 |     background: #fff;
206 |   }
207 | 
208 |   // 回應區上方的資訊列
209 |   .button,
210 |   .orange-but {
211 |     display: inline-block;
212 |     width: auto;
213 |     padding: 9px 13px;
214 |     cursor: pointer;
215 |     outline: none;
216 |     font-size: 13px;
217 |     font-weight: bold;
218 |     line-height: 1;
219 |     vertical-align: middle;
220 |     border: 0;
221 |     border-radius: 999px;
222 |     background: #ff574d;
223 |     color: #fff;
224 |     box-shadow: none;
225 |   }
226 |   .button.small-button {
227 |     font-size: 12px;
228 |     padding: 6px 10px;
229 |   }
230 |   .favorite_count,
231 |   .replurk_count,
232 |   .bookmark_info,
233 |   .private_info {
234 |     margin: 9px 0 4px 10px;
235 |     color: #fff;
236 |     float: left;
237 |   }
238 |   .favorite_count {
239 |     background: #54a4be;
240 |   }
241 |   .favorite_count:hover {
242 |     background: #4494ae;
243 |   }
244 |   .replurk_count {
245 |     background: #56b892;
246 |   }
247 |   .replurk_count:hover {
248 |     background: #46a882;
249 |   }
250 |   .bookmark_info {
251 |     background: #5abac5;
252 |   }
253 |   .bookmark_info:hover {
254 |     background: #4a9aa5;
255 |   }
256 |   .private_info {
257 |     background: #f4ca35;
258 |   }
259 |   .private_info:hover {
260 |     background: #e4ba25;
261 |   }
262 |   .response-status {
263 |     clear: both;
264 |     margin-top: 5px;
265 |     padding: 4px 0;
266 |     font-size: 12px;
267 |   }
268 |   .response-status .response-count {
269 |     height: 24px;
270 |     padding: 5px 0 0 10px;
271 |     font-weight: normal;
272 |     line-height: 24px;
273 |     background-color: transparent;
274 |     color: #afb8cc;
275 |   }
276 |   .response-status .response-only-owner {
277 |     margin-left: 10px;
278 |     opacity: 0;
279 |     transform: scale(0.9);
280 |     font-weight: normal;
281 |     vertical-align: top;
282 |     background: #f5f5f9;
283 |     color: #afb8cc;
284 |   }
285 |   .response-status:hover .response-only-owner {
286 |     opacity: 1;
287 |   }
288 |   .response-status .response-only-owner:hover {
289 |     background: #afb8cc;
290 |     color: #fff;
291 |   }
292 | 
293 |   // 回應區留言
294 |   .language-large-font .list {
295 |     font-size: 0.93em;
296 |   }
297 |   .plurk_box .list {
298 |     clear: both;
299 |     position: relative;
300 |     height: auto !important;
301 |     padding: 5px 5px;
302 |   }
303 |   .list .plurk {
304 |     position: relative;
305 |     margin: 3px 0;
306 |   }
307 |   .plurk {
308 |     white-space: nowrap;
309 |     color: #111;
310 |   }
311 |   .plurk_box table {
312 |     width: 100%;
313 |   }
314 |   .plurk td {
315 |     vertical-align: top;
316 |     white-space: nowrap !important;
317 |   }
318 |   .plurk_cnt {
319 |     position: relative;
320 |     padding: 2px 0 0;
321 |     // transition: background-color 5s;
322 |     font-weight: normal;
323 |     line-height: 1.3;
324 |     background-color: #fff;
325 |     color: #111;
326 |     box-shadow: 1px 1px 3px -3px #000;
327 |   }
328 |   .list .plurk_cnt {
329 |     padding-bottom: 0px;
330 |     transition: background-color 0s;
331 |     border: none;
332 |     box-shadow: none;
333 |   }
334 |   .list .td_qual {
335 |     width: 0%;
336 |   }
337 |   .plurk td {
338 |     vertical-align: top;
339 |     white-space: nowrap !important;
340 |   }
341 |   .td_qual {
342 |     width: 0%;
343 |     padding: 2px 0 2px 5px;
344 |   }
345 |   .name {
346 |     font-weight: bold;
347 |     text-decoration: none;
348 |   }
349 |   .td_cnt {
350 |     width: 100%;
351 |     padding: 2px 5px 5px 0;
352 |   }
353 |   .list .td_cnt {
354 |     width: 100%;
355 |   }
356 |   .text_holder {
357 |     position: relative;
358 |     min-width: 48px;
359 |     white-space: normal !important;
360 |     background: none;
361 |   }
362 |   .list .text_holder {
363 |     width: 100% !important;
364 |     margin-left: 5px;
365 |     margin-right: 5px;
366 |     white-space: normal !important;
367 |     word-break: break-word !important;
368 |   }
369 | }
370 | 


--------------------------------------------------------------------------------
/sass/partials/_review_th.scss:
--------------------------------------------------------------------------------
  1 | $th-index: (
  2 |   timeline-cnt: 2,
  3 |   timeline-bg: 1,
  4 |   timeline-timeshow: 1,
  5 |   time_show: 1,
  6 |   dynamic_logo: 1,
  7 |   bottom-line: -100,
  8 | );
  9 | 
 10 | //----- 河道
 11 | .review {
 12 |   #timeline_holder {
 13 |     background: none;
 14 |   }
 15 |   .timeline-holder {
 16 |     padding: 0 !important;
 17 |     overflow: visible;
 18 |     height: 386px;
 19 |     position: relative;
 20 |     width: 100%;
 21 |     cursor: move;
 22 |   }
 23 |   .timeline-cnt,
 24 |   .timeline-bg,
 25 |   .timeline-cnt .block_cnt,
 26 |   .timeline-bg .block_bg {
 27 |     position: absolute;
 28 |     height: 100% !important;
 29 |     width: 100%;
 30 |     left: 0;
 31 |     top: 0;
 32 |     overflow: visible !important;
 33 |   }
 34 |   // 讓預覽河道可以滑動 **
 35 |   .timeline-cnt .block_cnt {
 36 |     overflow-x: scroll !important;
 37 |     scrollbar-width: none;
 38 |     &::-webkit-scrollbar {
 39 |       width: 0;
 40 |     }
 41 |     &::after {
 42 |       content: '';
 43 |       display: block;
 44 |       @include size($timeline-cnt-width, 1px);
 45 |     }
 46 |   }
 47 | 
 48 |   // 河道噗
 49 |   .timeline-cnt {
 50 |     z-index: map-get($th-index, timeline-cnt);
 51 |   }
 52 |   .timeline-cnt .display {
 53 |     width: 380px;
 54 |   }
 55 |   .timeline-cnt .plurk {
 56 |     position: absolute;
 57 |     cursor: pointer;
 58 |   }
 59 |   .plurk {
 60 |     color: #111;
 61 |     white-space: nowrap;
 62 |   }
 63 |   .plurk td {
 64 |     vertical-align: top;
 65 |     white-space: nowrap !important;
 66 |   }
 67 |   // 頭像
 68 |   .td_img {
 69 |     width: 20px;
 70 |   }
 71 |   .p_img,
 72 |   .p_img img {
 73 |     width: 20px;
 74 |     height: 20px;
 75 |   }
 76 |   // 回應數
 77 |   .td_response_count {
 78 |     width: 15px;
 79 |     height: 30px !important;
 80 |   }
 81 |   .new .response_count {
 82 |     background: #fb0047;
 83 |     color: #fff;
 84 |   }
 85 |   .response_count {
 86 |     padding: 1px 4px;
 87 |     font-weight: bold;
 88 |     background-color: rgba(0, 0, 0, 0.1);
 89 |     color: #fff;
 90 |   }
 91 |   // 噗文內容
 92 |   .plurk_cnt {
 93 |     position: relative;
 94 |     padding: 2px 0 0;
 95 |     // transition: background-color 5s;
 96 |     font-weight: normal;
 97 |     line-height: 1.3;
 98 |     box-shadow: 1px 1px 3px -3px #000;
 99 |     background-color: #fff;
100 |     color: #111;
101 |   }
102 |   .plurk_cnt.new6 {
103 |     transition: background-color 0s;
104 |     background-color: #ffff99;
105 |   }
106 |   .plurk_cnt.new5 {
107 |     background-color: #ffffaa;
108 |   }
109 |   .plurk_cnt.new4 {
110 |     background-color: #ffffbb;
111 |   }
112 |   .plurk_cnt.new3 {
113 |     background-color: #ffffcc;
114 |   }
115 |   .plurk_cnt.new2 {
116 |     background-color: #ffffdd;
117 |   }
118 |   .plurk_cnt.new1 {
119 |     background-color: #ffffee;
120 |   }
121 |   .timeline-cnt .display table {
122 |     width: 100%;
123 |   }
124 |   // 發噗時間
125 |   .timeline-cnt .plurk .time {
126 |     position: absolute;
127 |     bottom: 7px;
128 |     left: 9px;
129 |     transform: scale(0.95);
130 |     transform-origin: left;
131 |     font-size: 12px;
132 |   }
133 |   .timeline-cnt .plurk .time a {
134 |     color: #afb8cc;
135 |   }
136 |   // 暱稱
137 |   .td_qual {
138 |     width: 0%;
139 |     padding: 2px 5px 2px 5px;
140 |   }
141 |   .name {
142 |     color: #111;
143 |     font-weight: bold;
144 |     text-decoration: none;
145 |   }
146 |   .name:hover {
147 |     text-decoration: underline;
148 |   }
149 |   .q_replurks {
150 |     background: #3b8610;
151 |   }
152 |   .qualifier {
153 |     padding: 0 3px 0 3px;
154 |     color: #fff;
155 |     margin: 0 3px 0 4px;
156 |     border-radius: 3px;
157 |   }
158 |   .q_replurks i {
159 |     font-size: 12px;
160 |     margin-left: 2px;
161 |   }
162 |   .porn-icon {
163 |     display: inline-block;
164 |     margin: 0 4px 0 1px;
165 |   }
166 |   .porn-icon::before {
167 |     content: '';
168 |     position: relative;
169 |     top: 6px;
170 |     left: 0;
171 |     @include size(20px);
172 |     margin-top: -6px;
173 |     line-height: 0;
174 |     border-radius: 50%;
175 |     background-color: #ff3600;
176 |   }
177 |   .porn-icon::after {
178 |     content: 'R18';
179 |     position: relative;
180 |     top: -1px;
181 |     left: -18px;
182 |     font-size: 9px;
183 |     letter-spacing: 0;
184 |     color: #fff;
185 |   }
186 |   // 噗文
187 |   .td_cnt {
188 |     width: 100%;
189 |     padding: 2px 5px 5px 0;
190 |   }
191 |   .text_holder {
192 |     position: relative;
193 |     min-width: 48px;
194 |     white-space: normal !important;
195 |     background: none;
196 |   }
197 |   .timeline-cnt .plurk .text_holder {
198 |     width: 180px;
199 |     height: auto;
200 |     min-height: 1.3em;
201 |     white-space: normal;
202 |     overflow: hidden !important;
203 |   }
204 |   .timeline-cnt .display .text_holder {
205 |     width: 100%;
206 |     max-width: 80vw;
207 |     min-width: 180px;
208 |     height: auto !important;
209 |     min-height: 2em;
210 |     max-height: none !important;
211 |     white-space: normal;
212 |   }
213 |   #timeline_holder .plurk .text_holder {
214 |     max-height: 37.210875px;
215 |   }
216 |   // Hashtag
217 |   .plurk_content a.hashtag,
218 |   .plurk .text_holder a.hashtag {
219 |     margin: 0 0.1em;
220 |     font-size: 0.9em;
221 |     border-radius: 4px;
222 |     color: #cf682f;
223 |   }
224 |   .plurk_content a.hashtag:hover,
225 |   .plurk .text_holder a.hashtag:hover {
226 |     margin: auto -0.1em;
227 |     padding: 0.05em 0.2em;
228 |     text-decoration: none;
229 |     background-color: #cf682f;
230 |     color: white;
231 |     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
232 |   }
233 |   // 表符
234 |   .emoticon,
235 |   .emoticon_my,
236 |   .emo_campaign,
237 |   .emoticons_campaign {
238 |     vertical-align: top;
239 |   }
240 |   // 連結
241 |   .plurk a.ex_link {
242 |     color: #0435d2;
243 |     text-decoration: none;
244 |   }
245 |   .plurk a.ex_link:hover {
246 |     text-decoration: underline;
247 |   }
248 |   // 有圖連結
249 |   .plurk a.meta {
250 |     position: relative;
251 |     display: block;
252 |     margin: 1px 4px 4px 0px;
253 |     padding: 4px;
254 |     cursor: pointer;
255 |     overflow: hidden;
256 |     border: none;
257 |     border: #e5ebfb 1px solid;
258 |     border: rgba(33, 83, 210, 0.08) 1px solid;
259 |     border-radius: 7px;
260 |     background: #f6f8fe;
261 |     background: rgba(33, 83, 210, 0.04);
262 |     color: #2153d2;
263 |   }
264 |   .plurk a.meta img {
265 |     float: left;
266 |     height: 48px;
267 |     max-width: 80px;
268 |     margin: 0 5px 0 0;
269 |     border-radius: 5px;
270 |   }
271 |   .plurk a.meta:hover {
272 |     text-decoration: none;
273 |     border: #d4dff7 1px solid;
274 |     border: rgba(33, 83, 210, 0.12) 1px solid;
275 |     background: #edf1fc;
276 |     background: rgba(33, 83, 210, 0.08);
277 |   }
278 |   // 圖片
279 |   .plurk a.pictureservices {
280 |     position: relative;
281 |     display: inline-block;
282 |     max-width: 200px;
283 |     margin: 1px 2px 4px 0px;
284 |     overflow: hidden;
285 |     cursor: pointer;
286 |     vertical-align: text-top;
287 |     border: none;
288 |     border-radius: 5px;
289 |   }
290 |   .plurk a.pictureservices:hover {
291 |     text-decoration: none;
292 |   }
293 |   .plurk a.pictureservices img {
294 |     display: block;
295 |     max-width: 240px;
296 |     height: 64px;
297 |   }
298 |   .plurk a.pictureservices:hover img {
299 |     filter: brightness(90%);
300 |   }
301 | 
302 |   // 控制列
303 |   .manager::after {
304 |     content: '';
305 |     clear: both;
306 |     display: block;
307 |     height: 0;
308 |   }
309 |   .timeline-cnt .plurk .manager {
310 |     display: none;
311 |   }
312 |   .link_extend .manager,
313 |   .plurk_box .manager {
314 |     display: block !important;
315 |   }
316 |   .manager {
317 |     float: right;
318 |     margin-top: 4px;
319 |     padding: 3px 4px 0;
320 |     color: #afb8cc;
321 |   }
322 |   .manager > a {
323 |     display: inline-block;
324 |     margin-left: 12px;
325 |     padding: 2px 5px 3px;
326 |     cursor: pointer;
327 |     text-decoration: none !important;
328 |     border-radius: 3px;
329 |     color: #afb8cc;
330 |   }
331 |   .manager > a.gift {
332 |     margin-left: 10px;
333 |   }
334 |   .manager > a:hover {
335 |     color: #fff !important;
336 |     background: #3667a5 !important;
337 |   }
338 |   .manager .mute-off:hover {
339 |     background: #000 !important;
340 |   }
341 |   .manager .replurk-off:hover {
342 |     background: #45b03f !important;
343 |   }
344 |   .manager .like-off:hover {
345 |     background: #e8443d !important;
346 |   }
347 |   .manager .mark-off:hover {
348 |     background: #5abac5 !important;
349 |   }
350 | 
351 |   // 時間軸
352 |   .timeline-bg .block_bg .bottom_start,
353 |   .timeline-timeshow {
354 |     position: absolute;
355 |     padding: 0 4px;
356 |     font-size: 12px;
357 |     bottom: -8px;
358 |     white-space: nowrap;
359 |   }
360 |   .timeline-bg {
361 |     z-index: map-get($th-index, timeline-bg);
362 |   }
363 |   .bottom-line {
364 |     z-index: map-get($th-index, bottom-line);
365 |     position: absolute;
366 |     bottom: -1px;
367 |     width: 100%;
368 |     height: 2px;
369 |     overflow: hidden;
370 |     background-color: #fff;
371 |   }
372 |   .bottom_start {
373 |     background: #fff;
374 |     color: #ccc;
375 |     border-radius: 5px;
376 |   }
377 | 
378 |   // loading
379 |   .timeline-holder .loading-div {
380 |     position: absolute;
381 |     top: 50%;
382 |     margin-top: -100px;
383 |     width: 100%;
384 |     text-align: center;
385 |     padding: 0;
386 |   }
387 |   .timeline-holder .loading-div .cnt {
388 |     padding: 0 !important;
389 |   }
390 |   .timeline-holder .timeline-bg .block_bg .loading-div {
391 |     width: auto;
392 |     right: 100px;
393 |   }
394 | 
395 |   // 噗下時間
396 |   .timeline-timeshow {
397 |     z-index: map-get($th-index, timeline-timeshow);
398 |     border-radius: 5px;
399 |     background: #ff574d;
400 |     color: #fff;
401 |   }
402 |   #time_show {
403 |     z-index: map-get($th-index, time_show);
404 |     position: absolute;
405 |     margin-top: -9px;
406 |     padding: 0 4px;
407 |     font-size: 11px;
408 |     white-space: nowrap;
409 |     border-radius: 5px;
410 |   }
411 |   #time_show span {
412 |     color: #fff;
413 |   }
414 |   .evening,
415 |   .night,
416 |   .day,
417 |   .morning {
418 |     background: #ff574d;
419 |   }
420 | 
421 |   // 往前往後按鈕
422 |   .browse_button {
423 |     position: absolute;
424 |     z-index: 5000;
425 |     top: 167px;
426 |   }
427 |   .browse_button_last {
428 |     opacity: 0 !important;
429 |     &:hover {
430 |       opacity: 1 !important;
431 |     }
432 |   }
433 |   .browse_button .cmp_arrow_right,
434 |   .browse_button .cmp_arrow_left {
435 |     color: #ff574d;
436 |     font-size: 56px;
437 |   }
438 |   .browse_button .cmp_arrow_right {
439 |     &::before {
440 |       content: '→';
441 |       font-family: 'Potta One', cursive !important;
442 |     }
443 |   }
444 |   .browse_button .cmp_arrow_left {
445 |     &::before {
446 |       content: '←';
447 |       font-family: 'Potta One', cursive !important;
448 |     }
449 |   }
450 |   .browse_button .cmp_back_to_today {
451 |     font-size: 12px;
452 |     line-height: 18px;
453 |     margin-top: 10px;
454 |     background: #ff574d;
455 |     color: #fff;
456 |     border-radius: 10px;
457 |     position: absolute;
458 |     margin-left: 11px;
459 |     padding: 0px 9px;
460 |   }
461 |   .cmp_back_to_today::before {
462 |     content: '←';
463 |     font-family: 'Potta One', cursive !important;
464 |     position: absolute;
465 |     color: #ff574d;
466 |     margin-left: -19px;
467 |     margin-top: 4px;
468 |   }
469 |   .browse_button div {
470 |     border: none !important;
471 |     cursor: pointer;
472 |   }
473 | 
474 |   // 噗浪生物
475 |   #dynamic_logo {
476 |     z-index: map-get($th-index, dynamic_logo);
477 |     display: inline-block;
478 |     position: absolute;
479 |     right: 10px;
480 |     margin-top: 12px;
481 |     cursor: move;
482 |     white-space: nowrap;
483 |   }
484 | }
485 | 


--------------------------------------------------------------------------------
/pug/partial/review_th.pug:
--------------------------------------------------------------------------------
  1 | - 
  2 |   const first_left = plurk_box_width + plurk_cut_left * 2
  3 |   const second_left = plurk_box_width + plurk_cut_left * 2 + plurk_cut_width
  4 |   const third_left = plurk_box_width + plurk_cut_left * 3 + plurk_cut_width * 2
  5 | 
  6 | - 
  7 |   const normal_left = first_left
  8 |   const normal_top = plurk_cut_top
  9 |   const extend_left = first_left
 10 |   const extend_top = plurk_cut_top + plurk_cut_height
 11 |   const box_left = second_left
 12 |   const box_top = plurk_cut_top
 13 |   const new_left = third_left
 14 |   const new_top = plurk_cut_top
 15 |   const muted_left = third_left
 16 |   const muted_top = plurk_cut_top + plurk_cut_height
 17 |   const anonymous_left = third_left
 18 |   const anonymous_top = plurk_cut_top + plurk_cut_height * 2
 19 |   const r18_left = third_left
 20 |   const r18_top = plurk_cut_top + plurk_cut_height * 3
 21 | 
 22 | 
 23 | //- 河道
 24 | #timeline_holder.timeline-holder(style="height: 450px;")
 25 |   //- 河道的噗
 26 |   #timeline_cnt.timeline-cnt(style="padding-bottom: 0px;")
 27 |     .block_cnt(style="height: 100% !important; width: 100% !important; left: 0px; transition: left 90ms linear 0s;")
 28 |       //- 普通新噗
 29 |       .plurk.cboxAnchor.new(style=`left: ${normal_left}px; top: ${normal_top}px;`)
 30 |         table
 31 |           tbody
 32 |             tr
 33 |               //- 噗頭像
 34 |               td.td_img
 35 |                 .p_img
 36 |                   a(href="javascript:;")
 37 |                     img(src="https://picsum.photos/20/20?random=21")
 38 |               //- 噗內容
 39 |               td
 40 |                 .plurk_cnt
 41 |                   table
 42 |                     tbody
 43 |                       tr.tr_cnt
 44 |                         //- 噗暱稱&轉噗標示
 45 |                         td.td_qual
 46 |                           span
 47 |                             a.name(href="javascript:;") 暱稱
 48 |                         //- 發噗內容
 49 |                         td.td_cnt
 50 |                           .text_holder
 51 |                             //- 轉噗人名
 52 |                             | 這是普通外觀
 53 |               //- 回應數
 54 |               td.td_response_count
 55 |                 a(href="javascript:;")
 56 |                   span.response_count 20
 57 |       //- 滑鼠移至噗
 58 |       .plurk.cboxAnchor.new.display.link_extend(style=`left: ${extend_left}px; top: ${extend_top}px;`)
 59 |         table
 60 |           tbody
 61 |             tr
 62 |               //- 噗頭像
 63 |               td.td_img
 64 |                 .p_img
 65 |                   a(href="javascript:;")
 66 |                     img(src="https://picsum.photos/20/20?random=21")
 67 |               //- 噗內容
 68 |               td
 69 |                 .plurk_cnt
 70 |                   table
 71 |                     tbody
 72 |                       tr.tr_cnt
 73 |                         //- 噗暱稱&轉噗標示
 74 |                         td.td_qual
 75 |                           span
 76 |                             a.name(href="javascript:;") 暱稱
 77 |                         //- 發噗內容
 78 |                         td.td_cnt
 79 |                           .text_holder
 80 |                             //- 轉噗人名
 81 |                             | 這是被滑鼠移至的外觀
 82 |                           //- 移至與展開才會出現
 83 |                           .manager
 84 |                             a.pif-edit.edit
 85 |                             a.mute.pif-volume.mute-off
 86 |                             a.pif-replurk.replurk.replurk-off
 87 |                               span 5
 88 |                             a.pif-like.like.like-off
 89 |                               span 10
 90 |                             a.pif-star.bookmark.mark-off
 91 |                             a.pif-bone.gift
 92 |                               span 1
 93 |                             a.pif-option.option
 94 |               //- 回應數
 95 |               td.td_response_count
 96 |                 a(href="javascript:;")
 97 |                   span.response_count 20
 98 |       //- 展開後的噗
 99 |       .plurk.cboxAnchor.display.link_extend.plurk_box(style=`left: ${box_left}px; top: ${box_top}px;`)
100 |         table
101 |           tbody
102 |             tr
103 |               //- 噗頭像
104 |               td.td_img
105 |                 .p_img
106 |                   a(href="javascript:;")
107 |                     img(src="https://picsum.photos/20/20?random=21")
108 |               //- 噗內容
109 |               td
110 |                 .plurk_cnt
111 |                   table
112 |                     tbody
113 |                       tr.tr_cnt
114 |                         //- 噗暱稱&轉噗標示
115 |                         td.td_qual
116 |                           span
117 |                             a.name(href="javascript:;") 暱稱
118 |                             span.qualifier.q_replurks
119 |                               | 轉噗
120 |                               i.pif-replurk
121 |                         //- 發噗內容
122 |                         td.td_cnt
123 |                           .text_holder
124 |                             //- 轉噗人名
125 |                             span
126 |                               a.name(href="javascript:;" style="color: #86CA6F;") 轉噗人名
127 |                             span.text_holder
128 |                               span.hashtag
129 |                                 a.hashtag(href="javascript:;") #Hashtag
130 |                               br
131 |                               | 這是被展開後的外觀
132 |                               br
133 |                               //- 普通連結
134 |                               a.ex_link(href="javascript:;") 普通連結
135 |                               br
136 |                               //- 有圖連結
137 |                               a.ex_link.meta(href="javascript:;")
138 |                                 img(src="https://picsum.photos/86/86?random=24" height="40px")
139 |                                 | 有圖連結
140 |                               //- 圖片
141 |                               a.ex_link.pictureservices(href="javascript:;")
142 |                                 img(src="https://picsum.photos/48/64?random=22" height="48")
143 |                               | 圖片
144 |                               br
145 |                             //- 表符
146 |                               | 表符
147 |                               br
148 |                               img.emoticon_my(src="https://picsum.photos/48/48?random=23" width="48" height="48")
149 |                           //- 移至與展開才會出現
150 |                           .manager
151 |                             a.pif-edit.edit
152 |                             a.mute.pif-volume.mute-off
153 |                             a.pif-replurk.replurk.replurk-off
154 |                               span 5
155 |                             a.pif-like.like.like-off
156 |                               span 10
157 |                             a.pif-star.bookmark.mark-off
158 |                             a.pif-bone.gift
159 |                               span 1
160 |                             a.pif-option.option
161 |                   //- 展開才會出現的時間
162 |                   .time
163 |                     a(href="javascript:;")
164 |                       span.posted
165 |                         time.timeago 發噗時間
166 |               //- 回應數
167 |               td.td_response_count
168 |                 a(href="javascript:;")
169 |                   span.response_count 20
170 |       //- 新訊息新噗
171 |       .plurk.cboxAnchor.new(style=`left: ${new_left}px; top: ${new_top}px;`)
172 |         table
173 |           tbody
174 |             tr
175 |               //- 噗頭像
176 |               td.td_img
177 |                 .p_img
178 |                   a(href="javascript:;")
179 |                     img(src="https://picsum.photos/20/20?random=21")
180 |               //- 噗內容
181 |               td
182 |                 .plurk_cnt.new1
183 |                   table
184 |                     tbody
185 |                       tr.tr_cnt
186 |                         //- 噗暱稱&轉噗標示
187 |                         td.td_qual
188 |                           span
189 |                             a.name(href="javascript:;") 暱稱
190 |                         //- 發噗內容
191 |                         td.td_cnt
192 |                           .text_holder
193 |                             //- 轉噗人名
194 |                             | 這是新訊息外觀
195 |       //- 消音噗
196 |       .plurk.cboxAnchor.muted(style=`left: ${muted_left}px; top: ${muted_top}px;`)
197 |         table
198 |           tbody
199 |             tr
200 |               //- 噗頭像
201 |               td.td_img
202 |                 .p_img
203 |                   a(href="javascript:;")
204 |                     img(src="https://picsum.photos/20/20?random=21")
205 |               //- 噗內容
206 |               td
207 |                 .plurk_cnt
208 |                   table
209 |                     tbody
210 |                       tr.tr_cnt
211 |                         //- 噗暱稱&轉噗標示
212 |                         td.td_qual
213 |                           span
214 |                             a.name(href="javascript:;") 暱稱
215 |                         //- 發噗內容
216 |                         td.td_cnt
217 |                           .text_holder
218 |                             //- 轉噗人名
219 |                             | 這是消音噗外觀
220 |       //- 偷偷說
221 |       .plurk.cboxAnchor(data-uid="99999" style=`left: ${anonymous_left}px; top: ${anonymous_top}px;`)
222 |         table
223 |           tbody
224 |             tr
225 |               //- 噗頭像
226 |               td.td_img
227 |                 .p_img
228 |                   a(href="javascript:;")
229 |                     img(src="https://picsum.photos/20/20?random=21")
230 |               //- 噗內容
231 |               td
232 |                 .plurk_cnt
233 |                   table
234 |                     tbody
235 |                       tr.tr_cnt
236 |                         //- 噗暱稱&轉噗標示
237 |                         td.td_qual
238 |                           span
239 |                             a.name(href="javascript:;") ಠ_ಠ
240 |                         //- 發噗內容
241 |                         td.td_cnt
242 |                           .text_holder
243 |                             //- 轉噗人名
244 |                             | 這是偷偷說外觀
245 |       //- R18噗
246 |       .plurk.cboxAnchor.porn(style=`left: ${r18_left}px; top: ${r18_top}px;`)
247 |         table
248 |           tbody
249 |             tr
250 |               //- 噗頭像
251 |               td.td_img
252 |                 .p_img
253 |                   a(href="javascript:;")
254 |                     img(src="https://picsum.photos/20/20?random=21")
255 |               //- 噗內容
256 |               td
257 |                 .plurk_cnt
258 |                   table
259 |                     tbody
260 |                       tr.tr_cnt
261 |                         //- 噗暱稱&轉噗標示
262 |                         td.td_qual
263 |                           span
264 |                             a.name(href="javascript:;") 暱稱
265 |                         //- 發噗內容
266 |                         td.td_cnt
267 |                           .text_holder
268 |                             span
269 |                               a.name(href="javascript:;" style="color:#E8AF37") 轉噗人名
270 |                               span.porn-icon.pif-porn
271 |                             .text_holder
272 |                               | 這是R18噗的外觀
273 | 
274 |   //- 時間軸
275 |   #timeline_bg.timeline-bg(style="padding-bottom: 0px;")
276 |     #bottom_line.bottom-line(style="display: block;")
277 |     .block_bg(style="height: 100% !important; width: 100% !important; left: 0px; transition: left 90ms linear 0s;")
278 |       .bottom_start.day_start.div_bottom(style="left: 15px;") 今天
279 |       .bottom_start.time_start.div_bottom(style="left: 300px;") 20:00
280 |       #div_loading.loading-div
281 |         .cnt
282 |           img(src="image/loading.gif")
283 | 
284 |   //- 噗下時間
285 |   #time_show.timeline-timeshow.morning(style=`left: ${plurk_cut_left}px;`)
286 |     span 今天 20:00
287 |   
288 |   //- 往前往後按鈕
289 |   .browse_button(style="right: 10px; top: 35%")
290 |     .cmp_arrow_right.pif-arrow-right
291 |     .cmp_back_to_today.pif-arrow-left Begin
292 |   .browse_button.browse_button_last(style="left: 10px; top: 35%;")
293 |     .cmp_arrow_left.pif-arrow-left
294 |     .cmp_back_to_today.pif-arrow-left Begin
295 | 
296 |   //- 噗浪生物
297 |   #dynamic_logo
298 |     img#creature(src="image/creatures.png")


--------------------------------------------------------------------------------
/sass/partials/_review_dh.scss:
--------------------------------------------------------------------------------
  1 | //----- 主控台
  2 | .review {
  3 |   #dashboard_holder {
  4 |     width: 98%;
  5 |     max-width: 980px;
  6 |     min-width: 580px;
  7 |     position: relative;
  8 |     margin: 0 auto 21px;
  9 |     padding: 35px 0 20px;
 10 |   }
 11 |   #plurk-dashboard {
 12 |     color: #666;
 13 |     overflow: visible;
 14 |     line-height: 15px;
 15 |     height: 1%;
 16 |   }
 17 |   #plurk-dashboard h2 {
 18 |     display: block;
 19 |     padding: 2px;
 20 |     font-size: 14px;
 21 |   }
 22 |   #plurk-dashboard p {
 23 |     margin: 0;
 24 |   }
 25 |   #plurk-dashboard a {
 26 |     color: #e88d43;
 27 |   }
 28 |   #dashboard_holder a:hover {
 29 |     text-decoration: underline;
 30 |   }
 31 |   #plurk-dashboard::after,
 32 |   .segment-content::after {
 33 |     content: '';
 34 |     clear: both;
 35 |     display: block;
 36 |     width: 0;
 37 |     height: 0;
 38 |     font-size: 0;
 39 |     line-height: 0;
 40 |   }
 41 |   #plurk-dashboard .dash-group-form,
 42 |   #plurk-dashboard .dash-group-right {
 43 |     position: relative;
 44 |     float: right;
 45 |     width: 67%;
 46 |   }
 47 |   #plurk-dashboard .dash-group-left {
 48 |     position: relative;
 49 |     float: left;
 50 |     width: 33%;
 51 |     padding-right: 10px;
 52 |     box-sizing: border-box;
 53 |   }
 54 |   #plurk-dashboard .dash-segment {
 55 |     float: left;
 56 |     position: relative;
 57 |   }
 58 |   .dash-segment .segment-content {
 59 |     margin-top: 10px;
 60 |     padding: 5px;
 61 |     border-radius: 10px;
 62 |     background: #fff;
 63 |   }
 64 |   #plurk-dashboard .dash-segment-post,
 65 |   #plurk-dashboard .dash-segment-stats {
 66 |     width: 100%;
 67 |   }
 68 |   .friend_man {
 69 |     display: inline-block;
 70 |     margin: 0 2px;
 71 |     padding: 6px 10px;
 72 |     overflow: hidden;
 73 |     cursor: pointer !important;
 74 |     transition: background-color 300ms;
 75 |     font-size: 12px;
 76 |     line-height: 15px;
 77 |     text-decoration: none !important;
 78 |     white-space: nowrap;
 79 |     border-radius: 5px;
 80 |     color: white !important;
 81 |   }
 82 |   .friend_man::before {
 83 |     width: 16px;
 84 |     margin-right: 5px;
 85 |     margin-left: -1px;
 86 |     font-size: 14px;
 87 |     line-height: 14px;
 88 |     text-align: center;
 89 |     vertical-align: top;
 90 |   }
 91 | 
 92 |   // 發噗區
 93 |   #plurk-dashboard .dash-group-form .segment-content {
 94 |     min-height: 96px;
 95 |     overflow: visible;
 96 |   }
 97 |   .plurkForm::after,
 98 |   .input_holder::after,
 99 |   .share_list::after,
100 |   .icons_holder::after {
101 |     content: '';
102 |     clear: both;
103 |     display: block;
104 |     height: 0;
105 |   }
106 |   .plurkForm {
107 |     position: relative;
108 |     padding: 3px 3px 0;
109 |   }
110 |   .submit_img_color {
111 |     background: #ff574d;
112 |   }
113 |   .submit_img {
114 |     float: right;
115 |     width: 80px;
116 |     height: 38px;
117 |     margin-left: 6px;
118 |     cursor: pointer;
119 |     font-size: 25px;
120 |     line-height: 38px;
121 |     text-align: center;
122 |     border: none;
123 |     border-radius: 5px;
124 |     color: #fff;
125 |   }
126 |   .input_holder {
127 |     float: none;
128 |     width: auto;
129 |     overflow: hidden;
130 |     border: #eee 1px solid;
131 |     border-color: rgba(0, 0, 0, 0.1);
132 |     border-radius: 8px;
133 |     background: #fff;
134 |   }
135 |   .qual_holder {
136 |     position: relative !important;
137 |     padding: 3px;
138 |     font-size: 24px;
139 |   }
140 |   .dd_img {
141 |     cursor: pointer;
142 |   }
143 |   .m_qualifier {
144 |     position: relative;
145 |     padding: 3px 6px 4px;
146 |     border-radius: 5px;
147 |     line-height: 100%;
148 |     background-color: #ccc;
149 |     color: #fff;
150 |   }
151 |   .m_qualifier i::before {
152 |     top: 0;
153 |     font-size: 16px;
154 |     line-height: 16px;
155 |   }
156 |   .pif-dropdown::before {
157 |     content: '▼';
158 |   }
159 |   .textarea_holder {
160 |     float: none;
161 |     width: auto;
162 |     overflow: hidden;
163 |   }
164 |   .textarea_holder textarea {
165 |     display: block;
166 |     clear: none;
167 |     width: 100%;
168 |     height: 37px;
169 |     padding: 0 0 0 2px !important;
170 |     margin: 0 !important;
171 |     resize: none;
172 |     outline: none;
173 |     font-family: inherit;
174 |     font-size: 25px;
175 |     font-weight: inherit;
176 |     line-height: 37px;
177 |     border: 0;
178 |     box-shadow: none;
179 |     border-radius: 7px;
180 |     background: #fff;
181 |   }
182 |   .icons_holder {
183 |     float: left;
184 |     margin: 4px 0 4px;
185 |     overflow: hidden;
186 |     font-size: 12px;
187 |   }
188 |   .icons_holder li {
189 |     position: relative;
190 |     float: left;
191 |     width: 32px;
192 |     margin: 4px 6px 0 0;
193 |     cursor: pointer;
194 |     font-size: 26px;
195 |     line-height: 32px;
196 |     text-align: center;
197 |   }
198 |   .icons_holder .pif-emoticon,
199 |   .icons_holder .pif-media,
200 |   .icons_holder .pif-sync,
201 |   .icons_holder .pif-anynomous,
202 |   .icons_holder .pif-privacy {
203 |     &::before {
204 |       font-size: 26px;
205 |     }
206 |   }
207 |   .icons_holder .pif-emoticon {
208 |     color: #fcd254;
209 |   }
210 |   .icons_holder .pif-emoticon:hover {
211 |     color: #e7b237;
212 |   }
213 |   .icons_holder .pif-media {
214 |     color: #8bcfd6;
215 |   }
216 |   .icons_holder .pif-media:hover {
217 |     color: #7ab1b7;
218 |   }
219 |   .icons_holder .pif-sync {
220 |     color: #96cb84;
221 |   }
222 |   .icons_holder .pif-sync:hover {
223 |     color: #81ac72;
224 |   }
225 |   .icons_holder .pif-anynomous {
226 |     color: #a98ab8;
227 |   }
228 |   .icons_holder .pif-anynomous:hover {
229 |     color: #997aa8;
230 |   }
231 |   .icons_holder .pif-privacy {
232 |     color: #f4cb35;
233 |   }
234 |   .icons_holder .pif-privacy:hover {
235 |     color: #e7b237;
236 |   }
237 |   .plurk_to,
238 |   .plurkForm .whispers_hint,
239 |   .priv,
240 |   .plurk_schedule {
241 |     float: right;
242 |     font-size: 13px;
243 |     line-height: 17px;
244 |     opacity: 0.6;
245 |     margin-top: 6px;
246 |     text-align: right;
247 |   }
248 |   .char_updater {
249 |     clear: both;
250 |     font-size: 12px;
251 |     display: block;
252 |     line-height: 18px;
253 |     opacity: 0.75;
254 |   }
255 | 
256 |   // 個人資訊區
257 |   #plurk-dashboard .dash-segment-profile {
258 |     width: 100%;
259 |   }
260 |   #plurk-dashboard .dash-segment-profile #dash-profile {
261 |     height: 86px;
262 |     position: relative;
263 |     text-align: left;
264 |   }
265 |   #plurk-dashboard .dash-segment-profile #dash-profile img.profile-pic {
266 |     position: absolute;
267 |     width: 86px;
268 |     height: 86px;
269 |     border-radius: 8px;
270 |   }
271 |   #plurk-dashboard.own img.profile-pic {
272 |     cursor: pointer;
273 |   }
274 |   #profile_pic {
275 |     margin-bottom: 5px;
276 |   }
277 |   #plurk-dashboard .dash-segment-profile #dash-profile #full_name {
278 |     margin-left: 92px;
279 |     padding-top: 1px;
280 |     font-size: 17px;
281 |   }
282 |   #plurk-dashboard .dash-segment-profile #dash-profile #full_name .display_name {
283 |     display: block;
284 |     margin-bottom: 1px;
285 |     line-height: 1.1em;
286 |   }
287 |   #plurk-dashboard .dash-segment-profile #dash-profile #full_name .nick_name {
288 |     display: block;
289 |   }
290 |   .nick_name {
291 |     opacity: 0.85;
292 |     font-size: 12px;
293 |   }
294 |   #plurk-dashboard .dash-segment-profile #dash-profile .profile-info {
295 |     position: absolute;
296 |     bottom: 0;
297 |     margin-left: 92px;
298 |     opacity: 0.85;
299 |   }
300 |   #plurk-dashboard .dash-segment-profile #dash-profile .profile-icons {
301 |     position: absolute;
302 |     bottom: 0;
303 |     height: 20px;
304 |     right: 2px;
305 |     font-size: 0;
306 |     white-space: nowrap;
307 |   }
308 |   #plurk-dashboard .dash-segment-profile #dash-profile .profile-icons .premium {
309 |     display: inline-block;
310 |     margin-left: 5px;
311 |   }
312 |   #plurk-dashboard .dash-segment-profile #dash-profile .profile-icons img {
313 |     width: auto;
314 |     height: 20px;
315 |   }
316 |   #plurk-dashboard .dash-segment-profile #dash-additional-info {
317 |     padding: 5px;
318 |   }
319 |   #plurk-dashboard .dash-segment-profile #dash-additional-info #about_me {
320 |     padding-bottom: 10px;
321 |     line-height: 1.4em;
322 |   }
323 |   #plurk-dashboard .dash-segment-profile #dash-additional-info #location_container,
324 |   #plurk-dashboard .dash-segment-profile #dash-additional-info #relationship_container {
325 |     margin-top: 10px;
326 |   }
327 |   #plurk-dashboard .dash-segment-profile #dash-additional-info #private_plurk {
328 |     margin-bottom: 10px;
329 |   }
330 |   .friend_man.private_plurk {
331 |     background-color: #207298;
332 |   }
333 |   .friend_man.send_gift {
334 |     background-color: #e8ad40;
335 |   }
336 | 
337 |   // 統計區
338 |   #plurk-dashboard #dash-stats .dash-stats-karma {
339 |     float: left;
340 |     width: 37%;
341 |     min-width: 210px;
342 |     margin: 15px 0;
343 |     text-align: center;
344 |   }
345 |   .karma_hover {
346 |     position: relative;
347 |     margin: 10px 0 10px 10px;
348 |     font-family: Georgia, 'Times New Roman', Times, serif;
349 |     font-size: 28px;
350 |     line-height: 30px;
351 |     white-space: nowrap;
352 |   }
353 |   .karma_hover .karma_red {
354 |     color: #c60900;
355 |   }
356 |   .karma_hover .karma_green {
357 |     color: #00ff24;
358 |   }
359 |   .karma_hover #karma_arrow {
360 |     display: none;
361 |     margin-top: -8px;
362 |     font-size: 12px;
363 |     vertical-align: top;
364 |   }
365 |   #plurk-dashboard #dash-stats table {
366 |     float: none;
367 |     width: auto;
368 |     height: 72px;
369 |     overflow: hidden;
370 |   }
371 |   #plurk-dashboard #dash-stats table th {
372 |     padding: 8px 3px 0 0;
373 |     opacity: 0.7;
374 |     font-size: 12px;
375 |     font-weight: normal;
376 |     text-align: center;
377 |     vertical-align: bottom;
378 |   }
379 |   #plurk-dashboard #dash-stats table td {
380 |     vertical-align: bottom;
381 |     padding: 8px 5px 0 0;
382 |     color: #333;
383 |     font-size: 15px;
384 |     width: 26%;
385 |     white-space: nowrap;
386 |   }
387 | 
388 |   // 徽章區
389 |   #plurk-dashboard .dash-segment-award {
390 |     clear: both;
391 |   }
392 |   #plurk-dashboard .dash-segment-award .segment-content {
393 |     background: none;
394 |   }
395 |   #plurk-dashboard .dash-segment-award .segment-content .award_bar div {
396 |     float: left;
397 |     width: 39px;
398 |     height: 39px;
399 |     margin: 0 8px 6px 0;
400 |     cursor: default;
401 |     font-weight: bold;
402 |     text-align: center;
403 |   }
404 |   .cmp_9 {
405 |     width: 39px;
406 |     height: 39px;
407 |     font-size: 1px;
408 |     background: transparent url('../image/award.png') 0 -2420px no-repeat;
409 |   }
410 |   #plurk-dashboard .link_arrow {
411 |     display: block;
412 |     margin-top: 10px;
413 |     margin-left: 10px;
414 |     font-size: 11px;
415 |     text-align: left;
416 |   }
417 |   #plurk-dashboard .link_arrow i {
418 |     margin-right: 5px;
419 |   }
420 |   .pif-arrow-points::before {
421 |     font-size: 15px;
422 |     margin-right: 0;
423 |   }
424 | 
425 |   // 好友粉絲區
426 |   #plurk-dashboard #dash-friends-pics,
427 |   #plurk-dashboard #dash-fans-pics {
428 |     margin: 10px 0 0 0;
429 |   }
430 |   .show_all_friends,
431 |   .show_mutual_friends {
432 |     float: left;
433 |     margin: 0 15px 5px 0;
434 |   }
435 |   .friend_holder {
436 |     clear: both;
437 |   }
438 |   .friend_holder ul li {
439 |     margin: 5px 2px;
440 |     float: left;
441 |   }
442 |   .friend_holder img {
443 |     width: 35px;
444 |     height: 35px;
445 |     border: 0;
446 |   }
447 | 
448 |   // 好友區
449 |   #plurk-dashboard .dash-segment-friends {
450 |     width: 49.3%;
451 |     margin-right: 1.4%;
452 |   }
453 |   #plurk-dashboard .dash-segment-friends #dash-friends #friend_managment {
454 |     margin-top: 5px;
455 |     text-align: center;
456 |   }
457 |   .friend_man.add_friend,
458 |   .friend_man.accpet {
459 |     background-color: #7aa716;
460 |   }
461 |   .friend_man.add_friend:hover,
462 |   .friend_man.accpet:hover {
463 |     background-color: #6a9706;
464 |   }
465 | 
466 |   // 粉絲區
467 |   #plurk-dashboard .dash-segment-fans {
468 |     width: 49.3%;
469 |   }
470 |   #plurk-dashboard .dash-segment-fans #dash-fans #fan_managment {
471 |     margin-top: 5px;
472 |     text-align: center;
473 |   }
474 |   .friend_man.unfollow,
475 |   .friend_man.add_follow,
476 |   .friend_man.add-as-fan {
477 |     background-color: #207298;
478 |   }
479 |   .friend_man.unfollow:hover,
480 |   .friend_man.add_follow:hover,
481 |   .friend_man.add-as-fan:hover {
482 |     background-color: #106288;
483 |   }
484 | }
485 | @mixin review_dh_SM {
486 |   .review {
487 |     #plurk-dashboard .dash-group-form,
488 |     #plurk-dashboard .dash-group-right {
489 |       width: 100%;
490 |       padding: 0 10px;
491 |       box-sizing: border-box;
492 |     }
493 |     #plurk-dashboard .dash-group-left {
494 |       width: 100%;
495 |       padding: 0 10px;
496 |       box-sizing: border-box;
497 |     }
498 |     #plurk-dashboard .dash-segment-friends {
499 |       width: 100%;
500 |       margin-right: 0;
501 |       box-sizing: border-box;
502 |     }
503 |     #plurk-dashboard .dash-segment-fans {
504 |       width: 100%;
505 |       box-sizing: border-box;
506 |     }
507 |   }
508 | }
509 | 


--------------------------------------------------------------------------------
/pug/components/lists.pug:
--------------------------------------------------------------------------------
  1 | - 
  2 |   const plurkCntList = [
  3 |     {
  4 |       title: '噗首外觀',
  5 |       subtitle: '.timeline-cnt .plurk',
  6 |       name: 'plurkcnt_normal',
  7 |       csstype: ['opa'],
  8 |     },
  9 |     {
 10 |       title: '噗首外觀：滑鼠移至',
 11 |       subtitle: '.timeline-cnt .link_extend',
 12 |       name: 'plurkcnt_hover',
 13 |       csstype: ['opa'],
 14 |     },
 15 |     {
 16 |       title: '噗首外觀：被展開',
 17 |       subtitle: '.timeline-cnt .plurk_box',
 18 |       name: 'plurkcnt_extend',
 19 |       csstype: ['opa'],
 20 |     },
 21 |     {
 22 |       title: '噗首外觀：消音',
 23 |       subtitle: '.timeline-cnt .muted',
 24 |       name: 'plurkcnt_muted',
 25 |       csstype: ['opa'],
 26 |     },
 27 |     {
 28 |       title: '噗首外觀：偷偷說',
 29 |       subtitle: '.timeline-cnt [data-uid="99999"]',
 30 |       name: 'plurkcnt_anonymous',
 31 |       csstype: ['opa'],
 32 |     },
 33 |     {
 34 |       title: '噗首內文',
 35 |       subtitle: '.timeline-cnt .plurk_cnt',
 36 |       name: 'plurkcnt_cnt',
 37 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
 38 |     },
 39 |     {
 40 |       title: '噗首內文：新訊息',
 41 |       subtitle: '.timeline-cnt .plurk_cnt[class*="new"]',
 42 |       name: 'plurkcnt_new',
 43 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
 44 |     },
 45 |     {
 46 |       title: '噗首內文：R18',
 47 |       subtitle: '.timeline-cnt .porn:not(.link_extend) .text_holder',
 48 |       name: 'plurkcnt_r18',
 49 |       csstype: ['blur'],
 50 |     },
 51 |     {
 52 |       title: '噗首的頭像',
 53 |       subtitle: '.timeline-cnt .p_img',
 54 |       name: 'plurkcnt_pimg',
 55 |       csstype: ['opa', 'bdrs', 'bd', 'sha'],
 56 |     },
 57 |     {
 58 |       title: '噗的回應數',
 59 |       subtitle: '.timeline-cnt .response_count',
 60 |       name: 'plurkcnt_count',
 61 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
 62 |     },
 63 |     {
 64 |       title: '噗的未讀回應數',
 65 |       subtitle: '.timeline-cnt .new .response_count',
 66 |       name: 'plurkcnt_newcount',
 67 |       csstype: ['bgc', 'c', 'opa'],
 68 |     },
 69 |     {
 70 |       title: '噗友暱稱',
 71 |       subtitle: '.timeline-cnt .td_qual > span',
 72 |       name: 'plurkcnt_pname',
 73 |       csstype: ['up'],
 74 |     },
 75 |     {
 76 |       title: '噗的Hashtag',
 77 |       subtitle: '.plurk .text_holder a.hashtag',
 78 |       name: 'plurkcnt_hash',
 79 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
 80 |       hover: true,
 81 |     },
 82 |     {
 83 |       title: '噗的圖片',
 84 |       subtitle: '.plurk a.pictureservices',
 85 |       name: 'plurkcnt_pic',
 86 |       csstype: ['opa', 'bdrs'],
 87 |       hover: true,
 88 |     },
 89 |     {
 90 |       title: '噗的有圖連結',
 91 |       subtitle: '.plurk a.meta',
 92 |       name: 'plurkcnt_piclink',
 93 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd'],
 94 |       hover: true,
 95 |     },
 96 |     {
 97 |       title: '噗的有圖連結內的圖片',
 98 |       subtitle: '.plurk a.meta img',
 99 |       name: 'plurkcnt_piclinkimg',
100 |       csstype: ['opa', 'bdrs'],
101 |     },
102 |     {
103 |       title: '噗的普通連結',
104 |       subtitle: '.plurk a.ex_link',
105 |       name: 'plurkcnt_link',
106 |       csstype: ['c', 'fz'],
107 |       hover: true,
108 |     },
109 |     {
110 |       title: '噗的編輯鈕',
111 |       subtitle: '.manager > a.edit',
112 |       name: 'manager_edit',
113 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
114 |       hover: true,
115 |     },
116 |     {
117 |       title: '噗的消音鈕',
118 |       subtitle: '.manager .mute-off',
119 |       name: 'manager_mute',
120 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
121 |       hover: true,
122 |     },
123 |     {
124 |       title: '噗的轉噗鈕',
125 |       subtitle: '.manager .replurk-off',
126 |       name: 'manager_replurk',
127 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
128 |       hover: true,
129 |     },
130 |     {
131 |       title: '噗的喜歡鈕',
132 |       subtitle: '.manager .like-off',
133 |       name: 'manager_like',
134 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
135 |       hover: true,
136 |     },
137 |     {
138 |       title: '噗的書籤鈕',
139 |       subtitle: '.manager .mark-off',
140 |       name: 'manager_mark',
141 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
142 |       hover: true,
143 |     },
144 |     {
145 |       title: '噗的噗幣鈕',
146 |       subtitle: '.manager > a.gift',
147 |       name: 'manager_gift',
148 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
149 |       hover: true,
150 |     },
151 |     {
152 |       title: '噗的選項鈕',
153 |       subtitle: '.manager > a.option',
154 |       name: 'manager_option',
155 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
156 |       hover: true,
157 |     },
158 |     {
159 |       title: '噗的時間顯示',
160 |       subtitle: '.timeline-timeshow',
161 |       name: 'timeline_plurktime',
162 |       csstype: ['bgc', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
163 |     },
164 |     {
165 |       title: '時間軸的時間',
166 |       subtitle: '.bottom_start',
167 |       name: 'timeline_time',
168 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
169 |     },
170 |     {
171 |       title: '時間軸的線',
172 |       subtitle: '#bottom_line',
173 |       name: 'timeline_line',
174 |       csstype: ['bgc', 'opa'],
175 |     },
176 |     {
177 |       title: '河道往前往後鈕',
178 |       subtitle: '.browse_button',
179 |       name: 'browse_btn',
180 |       csstype: ['opa'],
181 |       hover: true,
182 |     },
183 |   ];
184 | 
185 |   const plurkBoxList = [
186 |     {
187 |       title: '噗內整體調整',
188 |       subtitle: '#form_holder',
189 |       name: 'plurkbox_holder',
190 |       csstype: ['opa', 'bdrs', 'bd', 'sha'],
191 |     },
192 |     {
193 |       title: '噗內喜歡數',
194 |       subtitle: '.favorite_count',
195 |       name: 'plurkbox_favorite',
196 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
197 |       hover: true,
198 |     },
199 |     {
200 |       title: '噗內轉噗數',
201 |       subtitle: '.replurk_count',
202 |       name: 'plurkbox_replurk',
203 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
204 |       hover: true,
205 |     },
206 |     {
207 |       title: '噗內書籤標籤',
208 |       subtitle: '.bookmark_info',
209 |       name: 'plurkbox_bookmark',
210 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
211 |       hover: true,
212 |     },
213 |     {
214 |       title: '噗內私噗標籤',
215 |       subtitle: '.private_info',
216 |       name: 'plurkbox_private',
217 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
218 |       hover: true,
219 |     },
220 |     {
221 |       title: '噗內回應區',
222 |       subtitle: '.response_box',
223 |       name: 'plurkbox_resbox',
224 |       csstype: ['bgc'],
225 |       hover: true,
226 |     },
227 |     {
228 |       title: '回應內容',
229 |       subtitle: '.response_box .list .plurk_cnt',
230 |       name: 'plurkbox_reslist',
231 |       csstype: ['bgc', 'c', 'fz', 'bdrs', 'bd'],
232 |       hover: true,
233 |     },
234 |     {
235 |       title: '噗主回應內容',
236 |       subtitle: '.response_box .list .highlight_owner .plurk_cnt',
237 |       name: 'plurkbox_ownlist',
238 |       csstype: ['bgc', 'c', 'fz', 'bdrs', 'bd'],
239 |       hover: true,
240 |     },
241 |     {
242 |       title: '噗內暱稱上移',
243 |       subtitle: '#form_holder .plurk_cnt .td_qual',
244 |       name: 'plurkbox_listname',
245 |       csstype: ['boxup'],
246 |     },
247 |     {
248 |       title: '噗內輸入區',
249 |       subtitle: '.plurk_box .mini_form',
250 |       name: 'plurkbox_form',
251 |       csstype: ['bgc'],
252 |     },
253 |   ];
254 | 
255 |   const controlList = [
256 |     {
257 |       title: '更新的按鈕',
258 |       subtitle: '#updater .item a',
259 |       name: 'control_updatebtn',
260 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
261 |       hover: true,
262 |     },
263 |     {
264 |       title: '更新的未讀數字',
265 |       subtitle: '#updater .unread_generic',
266 |       name: 'control_updatecount',
267 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
268 |     },
269 |     {
270 |       title: '頻道的型態',
271 |       subtitle: '#filter_tab',
272 |       name: 'control_filterstyle',
273 |       csstype: ['open', 'ftposi', 'toicon', 'countposi'],
274 |     },
275 |     {
276 |       title: '頻道的普通按鈕',
277 |       subtitle: '#filter_tab a',
278 |       name: 'control_filterbtn',
279 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
280 |       hover: true,
281 |     },
282 |     {
283 |       title: '頻道的選中按鈕',
284 |       subtitle: '#filter_tab a.filter_selected',
285 |       name: 'control_filterselect',
286 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
287 |       hover: true,
288 |     },
289 |     {
290 |       title: '頻道的未讀數字',
291 |       subtitle: '#filter_tab a .unread_generic',
292 |       name: 'control_filtercount',
293 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
294 |     },
295 |   ];
296 | 
297 |   const dashboardLeftList = [
298 |     {
299 |       title: '主控台整體',
300 |       subtitle: '#plurk-dashboard',
301 |       name: 'dashboard_board',
302 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
303 |       hover: true,
304 |     },
305 |     {
306 |       title: '主控台內分區',
307 |       subtitle: '.dash-segment .segment-content',
308 |       name: 'dashboard_segment',
309 |       csstype: ['bgc', 'opa', 'bdrs', 'bd', 'sha'],
310 |       hover: true,
311 |     },
312 |     {
313 |       title: '個人資料區整體',
314 |       subtitle: '.dash-segment-profile .segment-content',
315 |       name: 'profile_segment',
316 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
317 |       hover: true,
318 |     },
319 |     {
320 |       title: '個人頭像',
321 |       subtitle: '#plurk-dashboard .dash-group-left #dash-profile img.profile-pic',
322 |       name: 'profile_img',
323 |       csstype: ['opa', 'bdrs', 'sha'],
324 |       hover: true,
325 |     },
326 |     {
327 |       title: '個人暱稱',
328 |       subtitle: '#plurk-dashboard .dash-group-left #dash-profile #full_name .display_name',
329 |       name: 'profile_name',
330 |       csstype: ['c', 'fz', 'opa'],
331 |       hover: true,
332 |     },
333 |     {
334 |       title: '私噗按鈕',
335 |       subtitle: '.friend_man.private_plurk',
336 |       name: 'profile_private',
337 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
338 |       hover: true,
339 |     },
340 |     {
341 |       title: '送禮按鈕',
342 |       subtitle: '.friend_man.send_gift',
343 |       name: 'profile_gift',
344 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
345 |       hover: true,
346 |     },
347 |   ];
348 | 
349 |   const dashboardRightList = [
350 |     {
351 |       title: '發噗區整體',
352 |       subtitle: '.dash-segment-post .segment-content',
353 |       name: 'post_segment',
354 |       csstype: ['bgc', 'opa', 'bdrs', 'bd', 'sha'],
355 |       hover: true,
356 |     },
357 |     {
358 |       title: '發噗鈕',
359 |       subtitle: '.submit_img_color',
360 |       name: 'post_submit',
361 |       csstype: ['bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
362 |       hover: true,
363 |     },
364 |     {
365 |       title: '發噗區表符鈕',
366 |       subtitle: '.dash-segment-post .icons_holder .pif-emoticon',
367 |       name: 'post_emoticon',
368 |       csstype: ['c', 'opa'],
369 |       hover: true,
370 |     },
371 |     {
372 |       title: '發噗區分享鈕',
373 |       subtitle: '.dash-segment-post .icons_holder .pif-media',
374 |       name: 'post_media',
375 |       csstype: ['c', 'opa'],
376 |       hover: true,
377 |     },
378 |     {
379 |       title: '發噗區同步鈕',
380 |       subtitle: '.dash-segment-post .icons_holder .pif-sync',
381 |       name: 'post_sync',
382 |       csstype: ['c', 'opa'],
383 |       hover: true,
384 |     },
385 |     {
386 |       title: '發噗區偷偷說鈕',
387 |       subtitle: '.dash-segment-post .icons_holder .pif-anynomous',
388 |       name: 'post_anynomous',
389 |       csstype: ['c', 'opa'],
390 |       hover: true,
391 |     },
392 |     {
393 |       title: '發噗區私人鈕',
394 |       subtitle: '.dash-segment-post .icons_holder .pif-privacy',
395 |       name: 'post_privacy',
396 |       csstype: ['c', 'opa'],
397 |       hover: true,
398 |     },
399 |     {
400 |       title: '卡碼資訊區整體',
401 |       subtitle: '.dash-segment-stats .segment-content',
402 |       name: 'stats_segment',
403 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
404 |       hover: true,
405 |     },
406 |     {
407 |       title: '統計資訊',
408 |       subtitle: '#plurk-dashboard .dash-segment #dash-stats table td',
409 |       name: 'stats_fzcolor',
410 |       csstype: ['c', 'fz'],
411 |     },
412 |     {
413 |       title: '卡碼區',
414 |       subtitle: '.dash-stats-karma',
415 |       name: 'stats_karma',
416 |       csstype: ['dp'],
417 |     },
418 |     {
419 |       title: '卡碼',
420 |       subtitle: '#karma',
421 |       name: 'karma_font',
422 |       csstype: ['c', 'fz', 'opa'],
423 |     },
424 |     {
425 |       title: '好友區整體',
426 |       subtitle: '.dash-segment-friends .segment-content',
427 |       name: 'friends_segment',
428 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
429 |       hover: true,
430 |     },
431 |     {
432 |       title: '紛絲區整體',
433 |       subtitle: '.dash-segment-fans .segment-content',
434 |       name: 'fans_segment',
435 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
436 |       hover: true,
437 |     },
438 |     {
439 |       title: '好友粉絲頭像',
440 |       subtitle: '.friend_holder img',
441 |       name: 'friends_img',
442 |       csstype: ['opa', 'bdrs', 'bd', 'sha'],
443 |       hover: true,
444 |     },
445 |     {
446 |       title: '好友按鈕',
447 |       subtitle: '#dash-friends .friend_man',
448 |       name: 'friends_friendbtn',
449 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
450 |       hover: true,
451 |     },
452 |     {
453 |       title: '好友連結',
454 |       subtitle: '#dash-friends .show_all_friends a, #dash-friends .show_mutual_friends a',
455 |       name: 'friends_friendlink',
456 |       csstype: ['dp', 'c', 'fz', 'opa'],
457 |       hover: true,
458 |     },
459 |     {
460 |       title: '好友頭像區',
461 |       subtitle: '#dash-friends .friend_holder',
462 |       name: 'friends_friendimg',
463 |       csstype: ['dp', 'bgc', 'opa', 'bdrs', 'bd', 'sha'],
464 |       hover: true,
465 |     },
466 |     {
467 |       title: '粉絲按鈕',
468 |       subtitle: '#dash-fans .friend_man',
469 |       name: 'fans_fanbtn',
470 |       csstype: ['dp', 'bgc', 'c', 'fz', 'opa', 'bdrs', 'bd', 'sha'],
471 |       hover: true,
472 |     },
473 |     {
474 |       title: '粉絲連結',
475 |       subtitle: '#dash-fans .show_all_friends a',
476 |       name: 'fans_fanlink',
477 |       csstype: ['dp', 'c', 'fz', 'opa'],
478 |       hover: true,
479 |     },
480 |     {
481 |       title: '粉絲頭像區',
482 |       subtitle: '#dash-fans .friend_holder',
483 |       name: 'fans_fanimg',
484 |       csstype: ['dp', 'bgc', 'opa', 'bdrs', 'bd', 'sha'],
485 |       hover: true,
486 |     },
487 |     {
488 |       title: '徽章區',
489 |       subtitle: '#plurk-dashboard .dash-segment-award',
490 |       name: 'award_segment',
491 |       csstype: ['dp', 'opa'],
492 |       hover: true,
493 |     },
494 |   ];
495 | 
496 |   const otherList = [
497 |     {
498 |       title: '噗浪生物',
499 |       subtitle: '#dynamic_logo::after',
500 |       name: 'dynamic_ori',
501 |       csstype: ['dcbgi', 'size', 'posi', 'opa'],
502 |     },
503 |     {
504 |       title: '官方生物',
505 |       subtitle: '#dynamic_logo #creature',
506 |       name: 'dynamic_creature',
507 |       csstype: ['opa'],
508 |     },
509 |     {
510 |       title: '時間軸生物',
511 |       subtitle: '.timeline-bg',
512 |       name: 'tl_bg',
513 |       csstype: ['tlbgi', 'tlbgirep', 'tlbgiposi'],
514 |     },
515 |     {
516 |       title: '噗幣旁生物',
517 |       subtitle: '.profile-icons::before',
518 |       name: 'p_coin',
519 |       csstype: ['pcoinbgi', 'size', 'opa'],
520 |     },
521 |     {
522 |       title: '往前按鈕',
523 |       subtitle: '.browse_button .cmp_arrow_left',
524 |       name: 'browse_al',
525 |       csstype: ['browsealbgi', 'size', 'opa'],
526 |     },
527 |     {
528 |       title: '往後按鈕',
529 |       subtitle: '.browse_button .cmp_arrow_right',
530 |       name: 'browse_ar',
531 |       csstype: ['browsearbgi', 'size', 'opa'],
532 |     },
533 |     {
534 |       title: '回到最前按鈕',
535 |       subtitle: '.browse_button .cmp_back_to_today',
536 |       name: 'browse_tt',
537 |       csstype: ['browsettbgi', 'size', 'bgc', 'opa', 'bdrs'],
538 |     },
539 |     {
540 |       title: 'Loading 圖示',
541 |       subtitle: '.loading-div .cnt',
542 |       name: 'loading_cut',
543 |       csstype: ['loadingbgi', 'size', 'opa'],
544 |     },
545 |     {
546 |       title: '官方 Loading',
547 |       subtitle: '.loading-div .cnt img',
548 |       name: 'loading_img',
549 |       csstype: ['opa'],
550 |     },
551 |     {
552 |       title: '游標更改',
553 |       subtitle: '*, body, a',
554 |       name: 'cursor_normal',
555 |       csstype: ['cursor'],
556 |     },
557 |     {
558 |       title: '游標更改：移到連結上',
559 |       subtitle: 'a:hover',
560 |       name: 'cursor_hover',
561 |       csstype: ['cursor'],
562 |     }
563 |   ];
564 | 
565 | - const contentList = [plurkCntList, plurkBoxList, controlList, dashboardLeftList, dashboardRightList, otherList];
566 | 
567 | - const areaList = ['th', 'fh', 'tc', 'dhl', 'dhr', 'other']
568 | 
569 | - const menuList = ['河道', '噗內回應', '控制列', '主控台左', '主控台右', '圖示更改']


--------------------------------------------------------------------------------
/script/script.js:
--------------------------------------------------------------------------------
  1 | {
  2 |   const noEmptyClass = 'generator_input-no-empty';
  3 |   const generatorApplyClass = 'generator_container-apply';
  4 |   const hasImportantList = {
  5 |     bgc: ['manager_edit_hover', 'manager_mute_hover', 'manager_replurk_hover', 'manager_like_hover', 'manager_mark_hover', 'manager_gift_hover', 'manager_option_hover'],
  6 |     c: ['manager_edit_hover', 'manager_gift_hover', 'manager_option_hover', 'control_updatecount', 'control_filtercount', 'profile_private', 'profile_gift', 'friends_friendbtn', 'fans_fanbtn'],
  7 |   };
  8 |   const hasOverflowList = { bdrs: ['plurkcnt_pimg', 'plurkbox_holder'] };
  9 |   const reviewStyleBlock = document.querySelector('#reviewStyle');
 10 |   const exportCode = document.querySelector('.export_code');
 11 |   const generatorOriginValueList = [];
 12 | 
 13 |   //========== header
 14 |   //== theme mode switch
 15 |   const themeNodeSwitch = () => {
 16 |     const modeButton = document.querySelector('#mode_switch');
 17 |     modeButton.addEventListener('click', () => {
 18 |       const status = modeButton.checked ? 'add' : 'remove';
 19 |       document.body.classList[status]('dark-mode');
 20 |     });
 21 |   };
 22 | 
 23 |   //== export switch
 24 |   const exportSwitch = () => {
 25 |     const exportButton = document.querySelector('.export_button');
 26 |     const exportArea = document.querySelector('.export');
 27 |     exportButton.addEventListener('click', () => {
 28 |       exportButton.classList.toggle('nav_btn-active');
 29 |       exportArea.classList.toggle('export-open');
 30 |     });
 31 |   };
 32 | 
 33 |   //== sidebar switch
 34 |   const sidebarSwitch = () => {
 35 |     const sidebarButton = document.querySelector('.sidebar');
 36 |     const tools = document.querySelector('.tools');
 37 |     const sidebarClass = 'sidebar-active';
 38 |     const toolsClass = 'tools-open';
 39 |     const isSmMedia = window.matchMedia('(max-width: 576px)');
 40 |     if (isSmMedia.matches) {
 41 |       sidebarButton.classList.remove(sidebarClass);
 42 |       tools.classList.remove(toolsClass);
 43 |     }
 44 |     sidebarButton.addEventListener('click', () => {
 45 |       sidebarButton.classList.toggle(sidebarClass);
 46 |       tools.classList.toggle(toolsClass);
 47 |     });
 48 |   };
 49 | 
 50 |   //== reset handler
 51 |   const inputsResetValue = (box, inputType, resetValue) => {
 52 |     const inputs = box.querySelectorAll(`input[type="${inputType}"]`);
 53 |     inputs.forEach((input) => {
 54 |       input.classList.remove(noEmptyClass);
 55 |       input.value = resetValue;
 56 |     });
 57 |   };
 58 |   const checkedResetValue = (box, inputType) => {
 59 |     const checkbox = box.querySelectorAll(`input[type="${inputType}"]`);
 60 |     checkbox.forEach((input) => (input.checked = false));
 61 |     if (inputType === 'radio') {
 62 |       if (checkbox.length) checkbox[0].checked = true;
 63 |       toIconAndCountPositionSync(false);
 64 |     }
 65 |   };
 66 |   const resetButtonClickHandler = () => {
 67 |     const generatorContainer = document.querySelectorAll('.generator_container');
 68 |     generatorContainer.forEach((container) => {
 69 |       container.classList.remove(generatorApplyClass);
 70 |       const generatorBox = container.querySelectorAll('.generator_box');
 71 |       generatorBox.forEach((box) => {
 72 |         box.dataset.apply = false;
 73 |         inputsResetValue(box, 'text', '');
 74 |         inputsResetValue(box, 'color', '#000000');
 75 |         inputsResetValue(box, 'range', 0);
 76 |         checkedResetValue(box, 'checkbox');
 77 |         checkedResetValue(box, 'radio');
 78 |         reviewStyleBlock.textContent = '';
 79 |       });
 80 |     });
 81 |   };
 82 |   const resetHandler = () => {
 83 |     const resetButton = document.querySelector('.reset_button');
 84 |     resetButton.addEventListener('click', () => {
 85 |       const isReset = confirm('確定要清空所有設定嗎？');
 86 |       if (!isReset) return;
 87 |       resetButtonClickHandler();
 88 |       exportCode.value = '';
 89 |     });
 90 |   };
 91 | 
 92 |   //== plurkbox no display
 93 |   const plurkboxNoDisplay = () => {
 94 |     const plurkboxButton = document.querySelector('.plurkbox_button');
 95 |     const plurkbox = document.querySelector('#form_holder');
 96 |     plurkboxButton.addEventListener('click', () => {
 97 |       plurkbox.classList.toggle('no-display');
 98 |       const newText = plurkboxButton.textContent === '隱藏噗內回應' ? '顯示噗內回應' : '隱藏噗內回應';
 99 |       plurkboxButton.textContent = newText;
100 |     });
101 |   };
102 | 
103 |   //== plurkbg handler
104 |   const plurkbgHandler = () => {
105 |     const plurkbgButton = document.querySelector('.plurkbg_button');
106 |     const plurkbgColor = document.querySelector('#plurkbg_color');
107 |     const plurkbgImage = document.querySelector('#plurkbg_image');
108 |     const colorPreview = document.querySelector(`.${plurkbgColor.id}`);
109 |     const imagePreview = document.querySelector(`.${plurkbgImage.id}`);
110 |     const plurkbgClear = document.querySelector('.plurkbg_clear');
111 |     const layoutContent = document.querySelector('#layout_content');
112 |     let src = null;
113 |     plurkbgButton.addEventListener('click', () => {
114 |       plurkbgButton.classList.toggle('nav_btn-active');
115 |       plurkbgButton.parentNode.classList.toggle('plurkbg-open');
116 |     });
117 |     plurkbgColor.addEventListener('change', () => {
118 |       const color = plurkbgColor.value;
119 |       colorPreview.style.backgroundColor = color;
120 |       layoutContent.style.backgroundColor = color;
121 |     });
122 |     plurkbgImage.addEventListener('change', (e) => {
123 |       URL.revokeObjectURL(src);
124 |       src = URL.createObjectURL(e.target.files[0]);
125 |       const image = `url('${src}')`;
126 |       imagePreview.style.backgroundImage = image;
127 |       layoutContent.style.backgroundImage = image;
128 |     });
129 |     plurkbgClear.addEventListener('click', (e) => {
130 |       e.preventDefault();
131 |       URL.revokeObjectURL(src);
132 |       imagePreview.style.backgroundImage = '';
133 |       layoutContent.style.backgroundImage = '';
134 |     });
135 |   };
136 | 
137 |   //========== header all handler
138 |   const headerAllHandler = () => {
139 |     // themeNodeSwitch();
140 |     sidebarSwitch();
141 |     exportSwitch();
142 |     resetHandler();
143 |     plurkboxNoDisplay();
144 |     plurkbgHandler();
145 |   };
146 |   headerAllHandler();
147 |   document.addEventListener('DOMContentLoaded', resetButtonClickHandler);
148 | 
149 |   //========== tools
150 |   //== tools container 開關
151 |   const toolsContainerSwitch = () => {
152 |     const toolsContainer = document.querySelectorAll('.tools_container');
153 |     const menuItem = document.querySelectorAll('.menu_item');
154 |     const menuClass = 'menu_item-active';
155 |     const toolsClass = 'tools_container-open';
156 |     menuItem.forEach((menu, i) => {
157 |       menu.addEventListener('click', () => {
158 |         const menuActive = document.querySelector(`.${menuClass}`);
159 |         const toolsOpen = document.querySelector(`.${toolsClass}`);
160 |         menuActive.classList.remove(menuClass);
161 |         toolsOpen.classList.remove(toolsClass);
162 |         menu.classList.add(menuClass);
163 |         toolsContainer[i].classList.add(toolsClass);
164 |       });
165 |     });
166 |   };
167 | 
168 |   //== generator container 開關
169 |   const generatorContainerClickHandler = (e, container) => {
170 |     const openClass = 'generator_container-open';
171 |     const isOpen = container.classList.contains(openClass);
172 |     if (isOpen) {
173 |       const isTitle = e.target.matches('.generator_title');
174 |       if (isTitle) container.classList.remove(openClass);
175 |     } else {
176 |       container.classList.add(openClass);
177 |     }
178 |   };
179 |   const generatorOpened = () => {
180 |     const generatorContainer = document.querySelectorAll('.generator_container');
181 |     generatorContainer.forEach((container) => {
182 |       container.addEventListener('click', (e) => generatorContainerClickHandler(e, container));
183 |     });
184 |   };
185 | 
186 |   //== 圖示化 作用後才開啟 圖示化的未讀位置
187 |   const radioDisable = (countPosition, toIcon) => {
188 |     countPosition.forEach((radio) => (radio.disabled = !toIcon.checked));
189 |   };
190 |   const toIconAndCountPositionSync = (whenClick = true) => {
191 |     const toIcon = document.querySelector('#control_filterstyle_toicon');
192 |     const countPosition = document.querySelectorAll('.control_filterstyle_countposi');
193 |     radioDisable(countPosition, toIcon);
194 |     if (whenClick) toIcon.addEventListener('change', () => radioDisable(countPosition, toIcon));
195 |   };
196 | 
197 |   //== input apply status
198 |   //== inputs apply
199 |   const generatorContainerIsApply = (container, boxes) => {
200 |     const hasApply = [...boxes].some((box) => box.dataset.apply === 'true');
201 |     const status = hasApply ? 'add' : 'remove';
202 |     container.classList[status](generatorApplyClass);
203 |   };
204 |   const isApplyByNeed = (inputs) => {
205 |     const hasNeed = [...inputs].filter((input) => input.dataset.need === 'true');
206 |     const isNeedApply = !!hasNeed.length && hasNeed.every((input) => input.classList.contains(noEmptyClass));
207 |     return isNeedApply;
208 |   };
209 |   const isApplyByCheckboxChange = (inputs) => {
210 |     const [hasChangeInCheckbox] = [...inputs].filter((input) => input.dataset.change === 'true' && input.type === 'checkbox');
211 |     const isCheckboxChangeApply = !!hasChangeInCheckbox && hasChangeInCheckbox.checked;
212 |     return isCheckboxChangeApply;
213 |   };
214 |   const isApplyByRadioChange = (inputs) => {
215 |     const hasChangeInRadio = [...inputs].filter((input) => input.dataset.change === 'true' && input.type === 'radio');
216 |     const isRadioChangeApply = !!hasChangeInRadio.length && !hasChangeInRadio[0].checked;
217 |     return isRadioChangeApply;
218 |   };
219 |   const inputGroupApplyConfirm = (box, inputs) => {
220 |     const isNeedApply = isApplyByNeed(inputs);
221 |     const isCheckboxChangeApply = isApplyByCheckboxChange(inputs);
222 |     const isRadioChangeApply = isApplyByRadioChange(inputs);
223 |     box.dataset.apply = isNeedApply || isCheckboxChangeApply || isRadioChangeApply;
224 |   };
225 |   //== input no empty
226 |   const inputNoEmptyChangeHandler = (input) => {
227 |     if (input.type !== 'text') return;
228 |     const status = input.value === '' ? 'remove' : 'add';
229 |     input.classList[status](noEmptyClass);
230 |   };
231 |   //== generator inputs handler
232 |   const generatorInputsHandler = () => {
233 |     const generatorContainer = document.querySelectorAll('.generator_container');
234 |     generatorContainer.forEach((container) => {
235 |       const generatorBox = container.querySelectorAll('.generator_box');
236 |       generatorBox.forEach((box) => {
237 |         const generatorInput = box.querySelectorAll('input');
238 |         generatorInput.forEach((input) => {
239 |           inputNoEmptyChangeHandler(input);
240 |           input.addEventListener('input', () => {
241 |             inputNoEmptyChangeHandler(input);
242 |             inputGroupApplyConfirm(box, generatorInput);
243 |             generatorContainerIsApply(container, generatorBox);
244 |           });
245 |         });
246 |         inputGroupApplyConfirm(box, generatorInput);
247 |       });
248 |       generatorContainerIsApply(container, generatorBox);
249 |     });
250 |   };
251 | 
252 |   //== input value 同步
253 |   const inputBoxClickHandler = (input, output) => {
254 |     input.addEventListener('input', () => {
255 |       output.value = input.value;
256 |       if (output.type === 'text') inputNoEmptyChangeHandler(output);
257 |     });
258 |   };
259 |   const inputValueSync = () => {
260 |     const generatorGroup = document.querySelectorAll('.generator_group');
261 |     generatorGroup.forEach((group) => {
262 |       const boxes = group.querySelectorAll('.color_box, .range_box');
263 |       if (!boxes.length) return;
264 |       const [input, box] = boxes;
265 |       inputBoxClickHandler(input, box);
266 |       inputBoxClickHandler(box, input);
267 |     });
268 |   };
269 | 
270 |   //========== generator basic handler
271 |   const generatorBasicHandler = () => {
272 |     toolsContainerSwitch();
273 |     generatorOpened();
274 |     toIconAndCountPositionSync();
275 |     inputValueSync();
276 |     generatorInputsHandler();
277 |   };
278 |   generatorBasicHandler();
279 | 
280 |   //========== get values function
281 |   const valueHasImportant = (value, type, areaName) => {
282 |     if (!hasImportantList[type]) return;
283 |     if (hasImportantList[type].includes(areaName)) {
284 |       value[0] += ' !important';
285 |     }
286 |   };
287 |   const valueHasOverflow = (value, type, areaName) => {
288 |     if (!hasOverflowList[type]) return;
289 |     if (hasOverflowList[type].includes(areaName)) {
290 |       value.push('overflow: hidden');
291 |     }
292 |   };
293 |   const valueHexToRgba = (hex, opacity = '') => {
294 |     const isHex = String(hex).match(/#(.{2})(.{2})(.{2})/);
295 |     const color = isHex ? isHex.slice(1).map((hex) => parseInt(hex, 16)) : [];
296 |     return opacity ? [`rgba(${color.join(', ')}, ${opacity})`] : [hex];
297 |   };
298 |   const valuePlusUnit = (value, unit = 'px') => {
299 |     return value.map((string) => string + unit);
300 |   };
301 |   const valueBdrs = (value) => {
302 |     const values = [...value];
303 |     const unit = values.splice(-1, 1);
304 |     const result = values.map((num) => num + unit);
305 |     return [result.join(' ')];
306 |   };
307 |   const valueDcbgi = (value) => {
308 |     return [`url('${value}')`, `content: ''`, 'position: absolute', 'display: block', 'background-repeat: no-repeat'];
309 |   };
310 |   const valuePcoinbgi = (value) => {
311 |     return [
312 |       `url('${value}')`,
313 |       `content: ''`,
314 |       'position: absolute',
315 |       'display: block',
316 |       'bottom: 0',
317 |       'left: 0',
318 |       'pointer-events: none',
319 |       'transform: translateX(-100%)',
320 |       'background-position: bottom right',
321 |       'background-repeat: no-repeat',
322 |     ];
323 |   };
324 |   const valueTlbgi = (value) => {
325 |     return [`url('${value}')`, 'position: relative', 'pointer-events: none', 'background-repeat: repeat-x', 'background-position: bottom left'];
326 |   };
327 |   const valueBrowsebgi = (value) => {
328 |     return [`url('${value}')`, 'padding: 0', 'font-size: 0', 'background-repeat: no-repeat'];
329 |   };
330 |   const valueLoadingbgi = (value) => {
331 |     return [`url('${value}')`, 'position: relative', 'margin: 0 auto', 'background-repeat: no-repeat', 'background-position: center center'];
332 |   };
333 |   const valueUp = () => {
334 |     const result = ['噗友暱稱', ['.timeline-cnt .td_qual > span', ['position: absolute', 'transform: translate(-25px, -150%)']]];
335 |     return [result];
336 |   };
337 |   const valueBoxup = () => {
338 |     const result = ['噗內暱稱上移', ['#form_holder .plurk_cnt .td_qual', ['position: absolute']], ['#form_holder .plurk_cnt .text_holder', ['margin-top: 1.5em', 'padding-left: 0.7em']]];
339 |     return [result];
340 |   };
341 |   const valueOpen = (value) => {
342 |     const top = ['頻道向上展開', ['#filter_tab a, #filter_tab:hover a.no_unread', ['height: 25px', 'margin-top: 6px', 'margin-right: 6px']]];
343 |     const right = ['頻道向右展開', ...top.slice(1), ['#filter_tab li', ['clear: none', 'width: auto']]];
344 |     const result = { top, right };
345 |     return [result[value]];
346 |   };
347 |   const valueFtposi = () => {
348 |     const result = ['頻道往右放', ['.timeline_control', ['margin-left: 0']], ['#timeline_control_holder', ['width: 100%']], ['#updater', ['left: 10px']], ['#filter_tab', ['padding-right: 20px']]];
349 |     return [result];
350 |   };
351 |   const valueToicon = () => {
352 |     const countposiValue = document.querySelector('.control_filterstyle_countposi:checked').value;
353 |     const top = [
354 |       '讓頻道未讀數字出現在上面',
355 |       [
356 |         '#filter_tab a .unread_generic',
357 |         ['position: absolute', 'left: 0', 'width: 30px', 'height: 20px', 'line-height: 20px', 'margin: 0', 'padding: 0', 'transform: translateY(-100%)', 'border-radius: 5px'],
358 |       ],
359 |     ];
360 |     const right = [
361 |       '讓頻道未讀數字出現在右邊',
362 |       ['#updater', ['margin-left: 35px']],
363 |       [
364 |         '#filter_tab a .unread_generic',
365 |         ['position: absolute', 'top: 0', 'left: 30px', 'width: 30px', 'height: 25px', 'line-height: 25px', 'margin-top: 6px', 'margin-left: 0', 'padding: 0 4px', 'border-radius: 5px'],
366 |       ],
367 |     ];
368 |     const left = [
369 |       '讓頻道未讀數字出現在左邊',
370 |       [
371 |         '#filter_tab a .unread_generic',
372 |         [
373 |           'position: absolute',
374 |           'top: 0',
375 |           'left: 0',
376 |           'width: 30px',
377 |           'height: 25px',
378 |           'line-height: 25px',
379 |           'margin-top: 6px',
380 |           'margin-left: 0',
381 |           'padding: 0 4px',
382 |           'transform: translateX(-100%)',
383 |           'border-radius: 5px',
384 |         ],
385 |       ],
386 |     ];
387 |     const countposi = { top, right, left };
388 |     const icon = [
389 |       '頻道圖示化',
390 |       ['#filter_tab li', ['position: relative']],
391 |       ['#filter_tab a', ['width: 30px', 'padding: 0', 'overflow: hidden']],
392 |       ['#filter_tab a i', ['float: left', 'width: 30px', 'line-height: 25px']],
393 |       ['#filter_tab a i::before', ['width: 30px']],
394 |     ];
395 |     return [icon, countposi[countposiValue]];
396 |   };
397 | 
398 |   //========== generator value catch and conversion
399 |   const generatorValuesGet = (box, generatorValues) => {
400 |     const boxType = box.dataset.type;
401 |     const inputs = [...box.querySelectorAll(`.generator_input, .generator_input-radio:checked, .generator_input-checkbox`)];
402 |     const values = inputs.map((input) => {
403 |       let result = null;
404 |       if (input.type === 'checkbox') result = input.checked;
405 |       else result = input.value;
406 |       return result;
407 |     });
408 |     generatorValues[boxType] = {
409 |       css: box.querySelector('.generator_subtitle').dataset.css,
410 |       value: values,
411 |     };
412 |   };
413 |   const generatorValueBasic = (generator, originValueList) => {
414 |     const generatorTitle = generator.querySelector('.generator_title');
415 |     const generatorValues = {
416 |       areaName: generator.id,
417 |       selector: generatorTitle.dataset.selector,
418 |       detail: generatorTitle.textContent,
419 |     };
420 |     const applyBoxes = [...generator.querySelectorAll('.generator_box')].filter((box) => box.dataset.apply === 'true');
421 |     applyBoxes.forEach((box) => generatorValuesGet(box, generatorValues));
422 |     originValueList.push(generatorValues);
423 |   };
424 |   const generatorValueTypeFilter = (valueList) => {
425 |     const typeFilterList = ['areaName', 'selector', 'detail'];
426 |     const valueTypes = Object.keys(valueList).filter((key) => {
427 |       if (!typeFilterList.includes(key)) return key;
428 |     });
429 |     return valueTypes;
430 |   };
431 |   const generatorValueConversion = (valueList, type) => {
432 |     const value = valueList[type].value;
433 |     const conversionFunction = {
434 |       bgc: valueHexToRgba(...value),
435 |       c: valueHexToRgba(...value),
436 |       fz: valuePlusUnit(value),
437 |       opa: value,
438 |       bdrs: valueBdrs(value),
439 |       bd: [`${value[2]}px solid ${valueHexToRgba(value[0], value[1])}`],
440 |       sha: [`${value[2]}px ${value[3]}px ${value[4]}px ${valueHexToRgba(value[0], value[1])}`],
441 |       dp: ['none'],
442 |       transi: [`${value[0]}s`],
443 |       blur: [`blur(${value[0]}px)`],
444 |       posi: valuePlusUnit(value, '%'),
445 |       size: valuePlusUnit(value),
446 |       dcbgi: valueDcbgi(value[0]),
447 |       pcoinbgi: valuePcoinbgi(value[0]),
448 |       tlbgi: valueTlbgi(value[0]),
449 |       tlbgirep: ['no-repeat'],
450 |       tlbgiposi: [`bottom ${value[0]}% left ${value[1]}%`],
451 |       browsealbgi: valueBrowsebgi(value[0]),
452 |       browsearbgi: valueBrowsebgi(value[0]),
453 |       browsettbgi: valueBrowsebgi(value[0]),
454 |       loadingbgi: valueLoadingbgi(value[0]),
455 |       cursor: [`url("${value[0]}"), auto`],
456 |       up: valueUp(),
457 |       boxup: valueBoxup(),
458 |       open: valueOpen(value[0]),
459 |       ftposi: valueFtposi(),
460 |       toicon: valueToicon(),
461 |     };
462 |     return conversionFunction[type];
463 |   };
464 |   const generatorValueToBeResult = (valueList, valueTypes, areaName) => {
465 |     valueTypes.forEach((type) => {
466 |       valueList[type].result = generatorValueConversion(valueList, type);
467 |       valueHasImportant(valueList[type].result, type, areaName);
468 |       valueHasOverflow(valueList[type].result, type, areaName);
469 |     });
470 |   };
471 |   const generatorCssNormalContent = (valueList, valueTypes, exportResultList) => {
472 |     const selector = valueList.selector;
473 |     const detail = `/*${valueList.detail}*/`;
474 |     const cssList = [];
475 |     valueTypes.forEach((type) => {
476 |       const resultList = [...valueList[type].result];
477 |       const attrList = valueList[type].css.split(', ');
478 |       const value = resultList.splice(0, attrList.length);
479 |       cssList.push(...resultList.map((value) => `\n  ${value};`));
480 |       cssList.push(...attrList.map((css, i) => `\n  ${css}: ${value[i]};`));
481 |     });
482 |     const content = `${detail}\n${selector} {${cssList.join('')}\n}`;
483 |     exportResultList.push(content);
484 |   };
485 |   const generatorCssSpacialContent = (valueList, valueTypes, exportResultList) => {
486 |     valueTypes.forEach((type) => {
487 |       const resultValue = valueList[type].result;
488 |       resultValue.forEach((result) => {
489 |         const contentList = [];
490 |         const [detail, ...resultList] = result;
491 |         resultList.forEach((result) => {
492 |           const [spacialSelector, cssList] = result;
493 |           const contentTemp = cssList.map((text) => `\n  ${text};`).join('');
494 |           contentList.push(`${spacialSelector} {${contentTemp}\n}`);
495 |         });
496 |         const content = `/*${detail}*/\n${contentList.join('\n')}`;
497 |         exportResultList.push(content);
498 |       });
499 |     });
500 |   };
501 |   const generatorCssContentCreate = (valueList, valueTypes, exportResultList) => {
502 |     const typeSpacialList = ['up', 'boxup', 'open', 'ftposi', 'toicon'];
503 |     const noSpacialType = valueTypes.every((type) => !typeSpacialList.includes(type));
504 |     if (noSpacialType) {
505 |       generatorCssNormalContent(valueList, valueTypes, exportResultList);
506 |     } else {
507 |       generatorCssSpacialContent(valueList, valueTypes, exportResultList);
508 |     }
509 |   };
510 |   const generatorGetOriginValueList = (originValueList) => {
511 |     originValueList.length = 0;
512 |     const applyGenerator = document.querySelectorAll(`.${generatorApplyClass}`);
513 |     applyGenerator.forEach((generator) => generatorValueBasic(generator, originValueList));
514 |   };
515 |   const generatorExportResult = (originValueList) => {
516 |     const exportResultList = [];
517 |     originValueList.forEach((valueList) => {
518 |       const areaName = valueList.areaName;
519 |       const valueTypes = generatorValueTypeFilter(valueList);
520 |       generatorValueToBeResult(valueList, valueTypes, areaName);
521 |       generatorCssContentCreate(valueList, valueTypes, exportResultList);
522 |     });
523 |     return exportResultList;
524 |   };
525 | 
526 |   //========== review
527 |   //== 讓河道滑動
528 |   const reviewContainerNoScroll = (blockCnt) => {
529 |     const reviewContainer = document.querySelector('.review_container');
530 |     const removeEvent = (e) => e.preventDefault();
531 |     blockCnt.addEventListener('mouseenter', () => {
532 |       reviewContainer.addEventListener('wheel', removeEvent);
533 |     });
534 |     blockCnt.addEventListener('mouseleave', () => {
535 |       reviewContainer.removeEventListener('wheel', removeEvent);
536 |     });
537 |   };
538 |   const blockCntDrag = (blockCnt) => {
539 |     let isDrag = false;
540 |     let preX = 0;
541 |     blockCnt.addEventListener('mousedown', (e) => {
542 |       isDrag = true;
543 |       preX = e.pageX;
544 |     });
545 |     blockCnt.addEventListener('mouseup', () => (isDrag = false));
546 |     blockCnt.addEventListener('mousemove', (e) => {
547 |       if (isDrag) {
548 |         const distance = preX - e.pageX;
549 |         blockCnt.scrollBy(distance, 0);
550 |         preX = e.pageX;
551 |       }
552 |     });
553 |   };
554 |   const blockCntScroll = () => {
555 |     const blockCnt = document.querySelector('.block_cnt');
556 |     reviewContainerNoScroll(blockCnt);
557 |     blockCntDrag(blockCnt);
558 |     blockCnt.addEventListener('wheel', (e) => {
559 |       const dir = e.deltaY > 0 ? 1 : -1;
560 |       const nowLeft = blockCnt.scrollLeft;
561 |       blockCnt.scrollTo(nowLeft + 100 * dir, 0);
562 |     });
563 |   };
564 | 
565 |   //== 將結果放到 style 中
566 |   const generatorReviewResultWhenInput = (OriginValueList) => {
567 |     const resultList = generatorExportResult(OriginValueList);
568 |     const newResultList = resultList.map((result) => {
569 |       result = result.replace(/\n\s\s/g, '');
570 |       result = result.replace(/\/\*(.+?)\*\//g, '');
571 |       result = result.replace(/\n}/g, '}');
572 |       result = result.replace(/\n/g, '#review ');
573 |       return result;
574 |     });
575 |     return newResultList.join('');
576 |   };
577 |   const generatorReviewHandler = () => {
578 |     const generatorInput = document.querySelectorAll('.generator_box input');
579 |     let result = '';
580 |     generatorInput.forEach((input) => {
581 |       input.addEventListener('input', () => {
582 |         generatorGetOriginValueList(generatorOriginValueList);
583 |         const newResult = generatorReviewResultWhenInput(generatorOriginValueList);
584 |         if (result === newResult) return;
585 |         result = newResult;
586 |         reviewStyleBlock.textContent = result;
587 |       });
588 |     });
589 |   };
590 | 
591 |   //========== review all handler
592 |   const reviewControl = () => {
593 |     blockCntScroll();
594 |     generatorReviewHandler();
595 |   };
596 |   reviewControl();
597 | 
598 |   //========== export control
599 |   const exportRecoveryInputValue = (input, i, value, css) => {
600 |     const type = input.type;
601 |     const syncBoxClass = ['color_box', 'range_box'];
602 |     const syncBox = syncBoxClass.some((classes) => input.classList.contains(classes));
603 |     if (type === 'text') {
604 |       input.value = value[i];
605 |       input.classList.add(noEmptyClass);
606 |       if (syncBox) input.nextElementSibling.value = value[i];
607 |     }
608 |     if (type === 'checkbox') {
609 |       input.checked = value[i];
610 |       toIconAndCountPositionSync();
611 |     }
612 |     if (type === 'radio') {
613 |       const [radioValue] = css === 'bdrs' ? [...value].splice(4, 1) : value;
614 |       if (input.value === radioValue) input.checked = 'true';
615 |     }
616 |   };
617 |   const exportLoadFileRecovery = (originValueList) => {
618 |     originValueList.forEach((valueList) => {
619 |       const { areaName, detail, selector, ...valueTypes } = valueList;
620 |       const cssList = Object.keys(valueTypes);
621 |       const container = document.querySelector(`#${areaName}`);
622 |       container.classList.add(generatorApplyClass);
623 |       cssList.forEach((css) => {
624 |         const value = valueTypes[css].value;
625 |         const box = container.querySelector(`[data-type="${css}"]`);
626 |         const inputs = box.querySelectorAll('input[type="text"], input[type="radio"], input[type="checkbox"]');
627 |         box.dataset.apply = 'true';
628 |         inputs.forEach((input, i) => exportRecoveryInputValue(input, i, value, css));
629 |       });
630 |     });
631 |   };
632 |   const exportControlWhenLoad = (e, originValueList) => {
633 |     const file = e.target.files[0];
634 |     const reader = new FileReader();
635 |     reader.addEventListener('load', (el) => {
636 |       const valueList = JSON.parse(el.target.result);
637 |       const dateIndex = valueList.findIndex((value) => value.save_date);
638 |       valueList.splice(dateIndex, 1);
639 |       originValueList.length = 0;
640 |       originValueList.push(...valueList);
641 |       exportLoadFileRecovery(originValueList);
642 |       const result = generatorReviewResultWhenInput(valueList);
643 |       reviewStyleBlock.textContent = result;
644 |     });
645 |     reader.readAsText(file);
646 |   };
647 |   const exportControlWhenSave = (originValueList) => {
648 |     if (!originValueList.length) return;
649 |     const result = [...originValueList];
650 |     const date = new Date().toString();
651 |     result.push({ save_date: date, url: location.href });
652 |     const json = JSON.stringify(result);
653 |     const blob = new Blob([json], { type: 'application/json' });
654 |     const url = URL.createObjectURL(blob);
655 |     const download = document.createElement('a');
656 |     download.download = 'plurk_css_backup.json';
657 |     download.href = url;
658 |     download.click();
659 |   };
660 |   const exportControlWhenCreate = (originValueList) => {
661 |     const info = ['/**======== Create by Plurk CSS Generator ========**/', '/**== https://hoshikata.github.io/PlurkCSSGenerator ==**/'];
662 |     generatorGetOriginValueList(originValueList);
663 |     const result = generatorExportResult(originValueList);
664 |     result.unshift(...info);
665 |     exportCode.value = result.join('\n');
666 |   };
667 |   const exportControl = () => {
668 |     const createButton = document.querySelector('.create_button');
669 |     const selectButton = document.querySelector('.select_button');
670 |     const clearButton = document.querySelector('.clear_button');
671 |     const saveButton = document.querySelector('.save_button');
672 |     const loadInput = document.querySelector('.load_input');
673 |     saveButton.addEventListener('click', () => exportControlWhenSave(generatorOriginValueList));
674 |     loadInput.addEventListener('change', (e) => exportControlWhenLoad(e, generatorOriginValueList));
675 |     selectButton.addEventListener('click', () => exportCode.select());
676 |     clearButton.addEventListener('click', () => (exportCode.value = ''));
677 |     createButton.addEventListener('click', () => exportControlWhenCreate(generatorOriginValueList));
678 |   };
679 |   exportControl();
680 | }
681 | 


--------------------------------------------------------------------------------
/style/main.min.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");@import url("https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;600&display=swap");@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");::-moz-selection{background-color:#0f4c81;color:#f5f5f5}::selection{background-color:#0f4c81;color:#f5f5f5}html,body{scroll-behavior:smooth;width:100%;margin:0;padding:0;font-family:'Noto Sans TC', sans-serif;font-size:14px;font-weight:300;letter-spacing:0.1em;background-color:#f5f5f5}h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}h1{font-size:1.9rem;font-weight:900}h2{font-size:1.65rem;font-weight:700}h3{font-size:1.5rem;font-weight:700}h4{font-size:1.3rem;font-weight:500}h5{font-size:1.2rem;font-weight:500}h6{font-size:1.1rem;font-weight:500}p{font-size:1rem}img{vertical-align:middle}ul,ol{margin:0;padding:0;list-style:none}input,select,textarea,button{margin:0;padding:0;outline:none}button{cursor:pointer;border:none}.customization-scroll{scrollbar-width:thin;scrollbar-color:#0f4c81 rgba(214,214,214,0.5)}.customization-scroll::-webkit-scrollbar{width:6px}.customization-scroll::-webkit-scrollbar-track{background-color:rgba(214,214,214,0.5);border-radius:5px}.customization-scroll::-webkit-scrollbar-thumb{background-color:#0f4c81;border-radius:5px}.customization-scroll::-webkit-scrollbar-thumb:hover{background-color:#1467af}.cross_btn{position:relative;width:15px;height:15px}.cross_btn::before,.cross_btn::after{content:'';display:block;position:absolute;top:50%;left:0;width:100%;height:3px;-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg);border-radius:5px;background-color:currentColor}.cross_btn::after{-webkit-transform:translateY(-50%) rotate(-45deg);transform:translateY(-50%) rotate(-45deg)}.header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:100;position:fixed;top:0;left:0;width:100%;height:45px;padding:0;padding-left:40px;-webkit-box-sizing:border-box;box-sizing:border-box;background-image:linear-gradient(160deg, rgba(15,76,129,0.9), rgba(27,38,44,0.9) 300%);color:#f5f5f5}.header_title{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding-left:20px;font-family:'Baloo Da 2', cursive;font-size:1.5rem;font-weight:500;text-transform:uppercase;letter-spacing:0;color:currentColor}.header_title-small{padding-left:5px;font-size:0.5em;font-weight:300}.logo{-ms-flex-negative:0;flex-shrink:0;position:relative;width:40px;height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-webkit-transform:scale(0.8);transform:scale(0.8);border-radius:5px;border:3px solid currentColor;letter-spacing:0}.logo_main,.logo_sub{position:absolute;top:-1px;right:2px;font-family:'Baloo Da 2', cursive;font-size:16px;font-weight:600;line-height:16px;color:currentColor}.logo_main{top:-1px;left:-1px;width:35px;height:35px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);font-size:35px;line-height:35px;color:currentColor}.logo_cover{position:absolute;top:0;left:0;width:100%;height:100%}.nav{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;height:100%;margin-right:10px}.nav_btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;margin-right:5px;padding:0 10px;font-family:'Noto Sans TC', sans-serif;font-size:1.1rem;font-weight:400;background-color:transparent;color:#f5f5f5}.nav_btn-active.plurkbg_button,.nav_btn-active.plurkbox_button,.nav_btn:hover.plurkbg_button,.nav_btn:hover.plurkbox_button{background-color:rgba(255,163,114,0.5)}.nav_btn-active.reset_button,.nav_btn:hover.reset_button{background-color:rgba(237,102,99,0.5)}.nav_btn-active.export_button,.nav_btn:hover.export_button{background-color:rgba(24,176,176,0.5)}.nav_btn-active.tip_button,.nav_btn-active.github_button,.nav_btn:hover.tip_button,.nav_btn:hover.github_button{background-color:rgba(181,181,181,0.5)}.load_button{cursor:pointer}.github_button{width:20px;margin-right:0;background:url("../image/github.png") no-repeat center center;background-size:20px}.plurkbg_list{position:absolute;bottom:0;left:0;padding:10px 20px;visibility:hidden;-webkit-transform:translateY(100%);transform:translateY(100%);border-radius:0 0 5px 5px;background-color:#fff;color:#333;-webkit-box-shadow:3px 3px 6px rgba(51,51,51,0.2);box-shadow:3px 3px 6px rgba(51,51,51,0.2)}.plurkbg-open .plurkbg_list{visibility:visible}.plurkbg_item{font-size:1.1rem;font-weight:500;text-align:left;white-space:nowrap}.plurkbg_item:hover{opacity:0.8}.plurkbg_item+.plurkbg_item{margin-top:10px}.plurkbg_label{cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.plurkbg_preview{display:inline-block;width:20px;height:20px;margin-left:5px;border-radius:3px;background:#333}.plurkbg_image{width:60px;height:40px;background-position:center center;background-size:cover}.plurkbg_clear{display:inline-block;cursor:pointer;margin-left:5px;color:#949494}.plurkbg_clear:hover{color:#545454}.sidebar{width:25px;height:21px;-ms-flex-item-align:start;align-self:flex-start;margin-left:20px;padding:12px 15px;cursor:pointer;color:#f5f5f5}.sidebar::before{content:'';display:block;width:100%;height:3px;-webkit-transform:translateY(1px);transform:translateY(1px);border-radius:5px;background-color:currentColor;-webkit-box-shadow:0 8px 0 currentColor, 0 16px 0 currentColor;box-shadow:0 8px 0 currentColor, 0 16px 0 currentColor}.sidebar-active,.sidebar:hover{background-color:rgba(27,38,44,0.5)}.tools{-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:0;height:100%;padding-top:45px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-webkit-transition:0.5s;transition:0.5s}.tools-open{width:395px}.tools_main{-ms-flex-negative:0;flex-shrink:0;position:relative;width:320px;height:100%;background-color:#fff}.tools_container{position:absolute;top:0;right:0;width:100%;height:100%;padding:15px 0;padding-left:0;padding-right:10px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateX(100%);transform:translateX(100%);background-color:#fff;-webkit-transition:0.5s;transition:0.5s}.tools_container-open{-webkit-transform:translateX(0);transform:translateX(0)}.tools_generator{width:100%;height:100%;overflow-y:auto}.tools_bar{-ms-flex-negative:0;flex-shrink:0;position:relative;width:75px;height:100%;padding:15px 0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#25343c;color:#f5f5f5}.menu_list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.menu_item{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 10px;cursor:pointer;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;border-left:5px solid transparent}.menu_item+.menu_item{margin-top:10px}.menu_item-active,.menu_item:hover{border-left-color:#18b0b0;background-color:#1b262c}.generator{width:100%;padding:0 10px;padding-left:35px;-webkit-box-sizing:border-box;box-sizing:border-box}.generator_container{position:relative;margin-bottom:10px;padding:5px 10px;cursor:pointer;border-radius:5px;background-color:rgba(51,51,51,0.08)}.generator_container::before{content:'+';display:inline-block;position:absolute;top:0;left:0;width:20px;padding-right:5px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translate(-100%, -2px);transform:translate(-100%, -2px);font-size:1.8rem;font-weight:700;line-height:37px;text-align:center;color:#18b0b0}.generator_container:hover{background-color:#18b0b0}.generator_container-open{margin-bottom:25px;cursor:auto;background-color:transparent}.generator_container-open::before{content:'-'}.generator_container-open:hover{background-color:transparent}.generator_title{border-bottom:2px solid transparent;color:#333}.generator_title::after{content:attr(data-selector);display:none;font-size:0.7em;font-weight:300;color:#949494}.generator_container-apply .generator_title{color:#18b0b0}.generator_container-open.generator_container-apply .generator_title{color:#333;border-bottom-color:#18b0b0}.generator_container:hover .generator_title{color:#f5f5f5}.generator_container-open:hover .generator_title{color:#333}.generator_container-open .generator_title{padding-bottom:10px;cursor:pointer;border-bottom-color:#d6d6d6}.generator_container-open .generator_title::after{display:block}.generator_container-open .generator_title:hover{color:#18b0b0}.generator_body{display:none;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -10px}.generator_container-open .generator_body{display:-webkit-box;display:-ms-flexbox;display:flex}.generator_box{width:220px;margin-top:15px;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box}.generator_subtitle{color:#333}.generator_subtitle::after{content:attr(data-css);margin-left:5px;font-size:0.7em;font-weight:300;color:#949494}.generator_group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin-top:5px}.generator_input{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:0;height:25px;padding:2px 5px;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:'Noto Sans TC', sans-serif;font-size:1rem;font-weight:300;letter-spacing:0.05em;border-radius:3px;border:1px solid #949494;background-color:transparent;color:#333}.generator_input::-webkit-input-placeholder{opacity:0.3;color:#333}.generator_input:-ms-input-placeholder{opacity:0.3;color:#333}.generator_input::-ms-input-placeholder{opacity:0.3;color:#333}.generator_input::placeholder{opacity:0.3;color:#333}.generator_input:focus{border-color:#333}.generator_input-no-empty{border-color:#333}.generator_input-color{width:25px;height:25px;margin-left:5px;cursor:pointer;overflow:hidden;border-radius:3px;border:none}.generator_input-color::-moz-color-swatch,.generator_input-color::-webkit-color-swatch{border-radius:3px;border:1px solid rgba(148,148,148,0.2)}.generator_input-color::-webkit-color-swatch-wrapper{padding:0}.generator_input-range{width:150px;height:5px;margin-left:5px;padding:0 3px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:5px;border:none;background-color:rgba(214,214,214,0.5)}.generator_input-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;border:none;background-color:#18b0b0}.generator_input-range::-moz-range-thumb{width:15px;height:15px;width:15px;height:15px;border-radius:50%;border:none;background-color:#18b0b0}.generator_input-range::-moz-focus-outer{border:none}.generator_input-checkbox,.generator_input-radio{display:none}.generator_label-checkbox{position:relative;height:22px;padding-left:50px;cursor:pointer;line-height:22px}.generator_label-checkbox::before{content:'';position:absolute;display:block;top:0;left:0;width:40px;height:100%;border-radius:3px;background-color:#d6d6d6;-webkit-box-shadow:inset 0 0 2px rgba(27,38,44,0.3);box-shadow:inset 0 0 2px rgba(27,38,44,0.3);-webkit-transition:0.3s;transition:0.3s}.generator_label-checkbox::after{content:'';position:absolute;display:block;top:0;left:0;width:18px;height:18px;margin-left:2px;margin-top:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:3px;background-color:#f5f5f5;-webkit-transition:all 0.3s, -webkit-box-shadow 0.1s;transition:all 0.3s, -webkit-box-shadow 0.1s;transition:all 0.3s, box-shadow 0.1s;transition:all 0.3s, box-shadow 0.1s, -webkit-box-shadow 0.1s}.generator_label-checkbox:hover::after{-webkit-box-shadow:0 0 3px 1px rgba(27,38,44,0.3);box-shadow:0 0 3px 1px rgba(27,38,44,0.3)}.generator_label-checkbox .generator_text-yes{display:none}.generator_input-checkbox:checked+.generator_label-checkbox::before{background-color:#18b0b0}.generator_input-checkbox:checked+.generator_label-checkbox::after{margin-left:20px}.generator_input-checkbox:checked+.generator_label-checkbox .generator_text-yes{display:inline}.generator_input-checkbox:checked+.generator_label-checkbox .generator_text-no{display:none}.generator_label-radio{z-index:0;position:relative;padding:3px 10px;cursor:pointer;-webkit-transition:0.3s;transition:0.3s}.generator_label-radio ~ .generator_label-radio{margin-left:10px}.generator_label-radio::before{content:'';z-index:-1;position:absolute;bottom:0;left:0;width:100%;height:1px;border-radius:0;background-color:#d6d6d6;-webkit-transition:0.3s;transition:0.3s}.generator_label-radio:hover::before{background-color:#333}.generator_input-radio:checked+.generator_label-radio{color:#f5f5f5}.generator_input-radio:checked+.generator_label-radio::before{height:100%;border-radius:3px;background-color:#18b0b0}.generator_input-radio:disabled+.generator_label-radio{color:#f5f5f5}.generator_input-radio:disabled+.generator_label-radio::before{height:100%;border-radius:3px;background-color:#d6d6d6}.generator_text-unit{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin:0 5px;font-size:1.05rem;text-align:right}.export{display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;top:0;right:10%;width:90%;height:100%;max-width:600px;max-height:400px;padding:20px;padding-top:65px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateY(-100%);transform:translateY(-100%);border-radius:0 0 10px 10px;background-color:#fff;-webkit-box-shadow:0 0 6px rgba(51,51,51,0.2);box-shadow:0 0 6px rgba(51,51,51,0.2);-webkit-transition:0.5s;transition:0.5s}.export-open{-webkit-transform:translateY(0);transform:translateY(0)}.export_control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:10px 0;margin-right:20px}.export_btn{display:block;position:relative;padding:5px 12px;padding-left:37px;margin-bottom:15px;border-radius:3px;font-family:'Noto Sans TC', sans-serif;font-weight:300;background-color:transparent;color:#333;-webkit-box-shadow:0 0 2px rgba(51,51,51,0.2);box-shadow:0 0 2px rgba(51,51,51,0.2);-webkit-transition:0.3s;transition:0.3s}.export_btn::before{content:'';z-index:-1;position:absolute;top:0;left:0;width:25px;height:100%;border-radius:3px 0 0 3px;background-color:#0f4c81;-webkit-transition:0.3s;transition:0.3s}.export_btn:hover{color:#f5f5f5}.export_btn:hover::before{width:100%;border-radius:3px}.export_icon{position:absolute;top:50%;left:6px;width:13px;height:13px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#f5f5f5}.export_icon::before,.export_icon::after{content:'';display:block;position:absolute;top:50%;left:50%;width:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-top:2px solid currentColor}.export_icon::after{-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg)}.export_container{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:100%;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:10px;border:1px solid #b5b5b5}.export_code{width:100%;height:100%;resize:none;border:none;font-family:'Noto Sans TC', sans-serif;font-size:1rem;letter-spacing:0.05em;background-color:transparent;color:#333}.select_button .export_icon{border:2px dashed currentColor}.select_button .export_icon::before,.select_button .export_icon::after{content:none}.clear_button::before{background-color:#ed6663}.clear_button .export_icon{-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}.save_button,.load_button{margin-top:50px}.save_button::before,.load_button::before{background-color:#b5b5b5}.save_button .export_icon,.load_button .export_icon{left:3px;width:20px;height:20px;-webkit-box-sizing:content-box;box-sizing:content-box;background-image:url("../image/save.svg");background-size:20px;background-repeat:no-repeat;background-position:center center}.save_button .export_icon::before,.save_button .export_icon::after,.load_button .export_icon::before,.load_button .export_icon::after{content:none}.load_button{margin-top:0}.load_button .export_icon{background-image:url("../image/load.svg")}.review{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative;width:100%;height:100vh;padding-top:45px;-webkit-box-sizing:border-box;box-sizing:border-box}.review_container{width:100%;height:100%;overflow-y:auto;z-index:0 !important;position:relative;top:auto !important;bottom:auto !important;width:100%;min-height:100%;margin:0 !important}.review div,.review dl,.review dt,.review dd,.review ul,.review ol,.review li,.review h1,.review h2,.review h3,.review h4,.review h5,.review h6,.review pre,.review code,.review form,.review fieldset,.review legend,.review input,.review textarea,.review p,.review blockquote,.review th,.review td{margin:0;padding:0}.review h1,.review h2,.review h3,.review h4,.review h5,.review h6{font-size:100%;font-weight:normal}.review h2{font-family:Arial, Verdana, sans-serif}.review p{margin-bottom:18px}.review a{cursor:pointer;text-decoration:none;color:#ff574d}.review a img{border:none}.review table{border-collapse:collapse;border-spacing:0}.review th{font-style:normal}.review .clearfix{clear:both}.review .clearfix::after{content:'';clear:both;display:block;width:0px;height:0px;font-size:0px;line-height:0px}.review [class^='pif-']::before,.review [class*=' pif-']::before{position:relative;display:inline-block;top:1px;font-family:'PlurkIconFont' !important;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.review [class^='pif-']::before,.review .pif-emoticon::before,.review .pif-user-add::before,.review .pif-follow_add::before,.review .pif-follow::before,.review .pif-volume::before,.review .pif-media::before{content:'❅';font-size:18px;margin-right:0}.review #layout_content{position:relative;top:auto !important;bottom:auto !important;width:100%;min-height:100%;margin:0 !important;overflow-x:hidden;font-size:13px;background-color:#eeebf0;color:#333;background-position:center center;background-size:cover;background-attachment:fixed}.review #timeline_holder{background:none}.review .timeline-holder{padding:0 !important;overflow:visible;height:386px;position:relative;width:100%;cursor:move}.review .timeline-cnt,.review .timeline-bg,.review .timeline-cnt .block_cnt,.review .timeline-bg .block_bg{position:absolute;height:100% !important;width:100%;left:0;top:0;overflow:visible !important}.review .timeline-cnt .block_cnt{overflow-x:scroll !important;scrollbar-width:none}.review .timeline-cnt .block_cnt::-webkit-scrollbar{width:0}.review .timeline-cnt .block_cnt::after{content:'';display:block;width:2500px;height:1px}.review .timeline-cnt{z-index:2}.review .timeline-cnt .display{width:380px}.review .timeline-cnt .plurk{position:absolute;cursor:pointer}.review .plurk{color:#111;white-space:nowrap}.review .plurk td{vertical-align:top;white-space:nowrap !important}.review .td_img{width:20px}.review .p_img,.review .p_img img{width:20px;height:20px}.review .td_response_count{width:15px;height:30px !important}.review .new .response_count{background:#fb0047;color:#fff}.review .response_count{padding:1px 4px;font-weight:bold;background-color:rgba(0,0,0,0.1);color:#fff}.review .plurk_cnt{position:relative;padding:2px 0 0;font-weight:normal;line-height:1.3;-webkit-box-shadow:1px 1px 3px -3px #000;box-shadow:1px 1px 3px -3px #000;background-color:#fff;color:#111}.review .plurk_cnt.new6{-webkit-transition:background-color 0s;transition:background-color 0s;background-color:#ffff99}.review .plurk_cnt.new5{background-color:#ffffaa}.review .plurk_cnt.new4{background-color:#ffffbb}.review .plurk_cnt.new3{background-color:#ffffcc}.review .plurk_cnt.new2{background-color:#ffffdd}.review .plurk_cnt.new1{background-color:#ffffee}.review .timeline-cnt .display table{width:100%}.review .timeline-cnt .plurk .time{position:absolute;bottom:7px;left:9px;-webkit-transform:scale(0.95);transform:scale(0.95);-webkit-transform-origin:left;transform-origin:left;font-size:12px}.review .timeline-cnt .plurk .time a{color:#afb8cc}.review .td_qual{width:0%;padding:2px 5px 2px 5px}.review .name{color:#111;font-weight:bold;text-decoration:none}.review .name:hover{text-decoration:underline}.review .q_replurks{background:#3b8610}.review .qualifier{padding:0 3px 0 3px;color:#fff;margin:0 3px 0 4px;border-radius:3px}.review .q_replurks i{font-size:12px;margin-left:2px}.review .porn-icon{display:inline-block;margin:0 4px 0 1px}.review .porn-icon::before{content:'';position:relative;top:6px;left:0;width:20px;height:20px;margin-top:-6px;line-height:0;border-radius:50%;background-color:#ff3600}.review .porn-icon::after{content:'R18';position:relative;top:-1px;left:-18px;font-size:9px;letter-spacing:0;color:#fff}.review .td_cnt{width:100%;padding:2px 5px 5px 0}.review .text_holder{position:relative;min-width:48px;white-space:normal !important;background:none}.review .timeline-cnt .plurk .text_holder{width:180px;height:auto;min-height:1.3em;white-space:normal;overflow:hidden !important}.review .timeline-cnt .display .text_holder{width:100%;max-width:80vw;min-width:180px;height:auto !important;min-height:2em;max-height:none !important;white-space:normal}.review #timeline_holder .plurk .text_holder{max-height:37.210875px}.review .plurk_content a.hashtag,.review .plurk .text_holder a.hashtag{margin:0 0.1em;font-size:0.9em;border-radius:4px;color:#cf682f}.review .plurk_content a.hashtag:hover,.review .plurk .text_holder a.hashtag:hover{margin:auto -0.1em;padding:0.05em 0.2em;text-decoration:none;background-color:#cf682f;color:white;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.25);box-shadow:0 1px 1px rgba(0,0,0,0.25)}.review .emoticon,.review .emoticon_my,.review .emo_campaign,.review .emoticons_campaign{vertical-align:top}.review .plurk a.ex_link{color:#0435d2;text-decoration:none}.review .plurk a.ex_link:hover{text-decoration:underline}.review .plurk a.meta{position:relative;display:block;margin:1px 4px 4px 0px;padding:4px;cursor:pointer;overflow:hidden;border:none;border:#e5ebfb 1px solid;border:rgba(33,83,210,0.08) 1px solid;border-radius:7px;background:#f6f8fe;background:rgba(33,83,210,0.04);color:#2153d2}.review .plurk a.meta img{float:left;height:48px;max-width:80px;margin:0 5px 0 0;border-radius:5px}.review .plurk a.meta:hover{text-decoration:none;border:#d4dff7 1px solid;border:rgba(33,83,210,0.12) 1px solid;background:#edf1fc;background:rgba(33,83,210,0.08)}.review .plurk a.pictureservices{position:relative;display:inline-block;max-width:200px;margin:1px 2px 4px 0px;overflow:hidden;cursor:pointer;vertical-align:text-top;border:none;border-radius:5px}.review .plurk a.pictureservices:hover{text-decoration:none}.review .plurk a.pictureservices img{display:block;max-width:240px;height:64px}.review .plurk a.pictureservices:hover img{-webkit-filter:brightness(90%);filter:brightness(90%)}.review .manager::after{content:'';clear:both;display:block;height:0}.review .timeline-cnt .plurk .manager{display:none}.review .link_extend .manager,.review .plurk_box .manager{display:block !important}.review .manager{float:right;margin-top:4px;padding:3px 4px 0;color:#afb8cc}.review .manager>a{display:inline-block;margin-left:12px;padding:2px 5px 3px;cursor:pointer;text-decoration:none !important;border-radius:3px;color:#afb8cc}.review .manager>a.gift{margin-left:10px}.review .manager>a:hover{color:#fff !important;background:#3667a5 !important}.review .manager .mute-off:hover{background:#000 !important}.review .manager .replurk-off:hover{background:#45b03f !important}.review .manager .like-off:hover{background:#e8443d !important}.review .manager .mark-off:hover{background:#5abac5 !important}.review .timeline-bg .block_bg .bottom_start,.review .timeline-timeshow{position:absolute;padding:0 4px;font-size:12px;bottom:-8px;white-space:nowrap}.review .timeline-bg{z-index:1}.review .bottom-line{z-index:-100;position:absolute;bottom:-1px;width:100%;height:2px;overflow:hidden;background-color:#fff}.review .bottom_start{background:#fff;color:#ccc;border-radius:5px}.review .timeline-holder .loading-div{position:absolute;top:50%;margin-top:-100px;width:100%;text-align:center;padding:0}.review .timeline-holder .loading-div .cnt{padding:0 !important}.review .timeline-holder .timeline-bg .block_bg .loading-div{width:auto;right:100px}.review .timeline-timeshow{z-index:1;border-radius:5px;background:#ff574d;color:#fff}.review #time_show{z-index:1;position:absolute;margin-top:-9px;padding:0 4px;font-size:11px;white-space:nowrap;border-radius:5px}.review #time_show span{color:#fff}.review .evening,.review .night,.review .day,.review .morning{background:#ff574d}.review .browse_button{position:absolute;z-index:5000;top:167px}.review .browse_button_last{opacity:0 !important}.review .browse_button_last:hover{opacity:1 !important}.review .browse_button .cmp_arrow_right,.review .browse_button .cmp_arrow_left{color:#ff574d;font-size:56px}.review .browse_button .cmp_arrow_right::before{content:'→';font-family:'Potta One', cursive !important}.review .browse_button .cmp_arrow_left::before{content:'←';font-family:'Potta One', cursive !important}.review .browse_button .cmp_back_to_today{font-size:12px;line-height:18px;margin-top:10px;background:#ff574d;color:#fff;border-radius:10px;position:absolute;margin-left:11px;padding:0px 9px}.review .cmp_back_to_today::before{content:'←';font-family:'Potta One', cursive !important;position:absolute;color:#ff574d;margin-left:-19px;margin-top:4px}.review .browse_button div{border:none !important;cursor:pointer}.review #dynamic_logo{z-index:1;display:inline-block;position:absolute;right:10px;margin-top:12px;cursor:move;white-space:nowrap}.review .timeline_control{z-index:10;position:absolute;width:100%;height:25px;margin-left:16px;margin-top:-46px;pointer-events:none}.review .timeline_control a{border-radius:5px;padding:0 8px;text-decoration:none;text-align:center;line-height:25px;white-space:nowrap}.review .timeline_control a i{opacity:0.8;width:18px;margin-right:4px}.review #timeline_control_holder{position:absolute;bottom:0}.review #updater{position:absolute;bottom:0;left:100%;pointer-events:auto}.review #updater,.review #updater .item,.review #updater .item a{white-space:nowrap;display:inline-block;height:25px;line-height:25px}.review #updater .item a{background:#fff;margin-left:8px;cursor:pointer}.review #updater .item a:hover{background:#ff574d;color:#fff}.review #filter_tab{float:right;pointer-events:auto}.review #filter_tab::after{content:'';clear:both;display:block;height:0}.review #filter_tab li{list-style:none;float:right;clear:both;width:100%}.review #filter_tab a{display:block;height:0;margin-top:0;padding:0 12px;overflow:hidden;cursor:pointer;opacity:0.9;-webkit-transition:height 200ms ease-in, margin-top 200ms ease-in;transition:height 200ms ease-in, margin-top 200ms ease-in;background:#fff;color:#999}.review #filter_tab a:hover{opacity:1}.review #filter_tab a.filter_selected{color:#fff;background:#ff574d}.review #filter_tab:hover a,.review #filter_tab a.filter_selected,.review #filter_tab a.has_unread,.review #filter_tab:hover a.filter_selected,.review #filter_tab:hover a.has_unread{height:25px;margin-top:6px}.review .unread_generic{padding:2px 4px 1px;margin-left:5px;background-color:#f83010;color:#fff !important;border-radius:4px;font-family:arial, sans-serif;font-size:12px}.review #dashboard_holder{width:98%;max-width:980px;min-width:580px;position:relative;margin:0 auto 21px;padding:35px 0 20px}.review #plurk-dashboard{color:#666;overflow:visible;line-height:15px;height:1%}.review #plurk-dashboard h2{display:block;padding:2px;font-size:14px}.review #plurk-dashboard p{margin:0}.review #plurk-dashboard a{color:#e88d43}.review #dashboard_holder a:hover{text-decoration:underline}.review #plurk-dashboard::after,.review .segment-content::after{content:'';clear:both;display:block;width:0;height:0;font-size:0;line-height:0}.review #plurk-dashboard .dash-group-form,.review #plurk-dashboard .dash-group-right{position:relative;float:right;width:67%}.review #plurk-dashboard .dash-group-left{position:relative;float:left;width:33%;padding-right:10px;-webkit-box-sizing:border-box;box-sizing:border-box}.review #plurk-dashboard .dash-segment{float:left;position:relative}.review .dash-segment .segment-content{margin-top:10px;padding:5px;border-radius:10px;background:#fff}.review #plurk-dashboard .dash-segment-post,.review #plurk-dashboard .dash-segment-stats{width:100%}.review .friend_man{display:inline-block;margin:0 2px;padding:6px 10px;overflow:hidden;cursor:pointer !important;-webkit-transition:background-color 300ms;transition:background-color 300ms;font-size:12px;line-height:15px;text-decoration:none !important;white-space:nowrap;border-radius:5px;color:white !important}.review .friend_man::before{width:16px;margin-right:5px;margin-left:-1px;font-size:14px;line-height:14px;text-align:center;vertical-align:top}.review #plurk-dashboard .dash-group-form .segment-content{min-height:96px;overflow:visible}.review .plurkForm::after,.review .input_holder::after,.review .share_list::after,.review .icons_holder::after{content:'';clear:both;display:block;height:0}.review .plurkForm{position:relative;padding:3px 3px 0}.review .submit_img_color{background:#ff574d}.review .submit_img{float:right;width:80px;height:38px;margin-left:6px;cursor:pointer;font-size:25px;line-height:38px;text-align:center;border:none;border-radius:5px;color:#fff}.review .input_holder{float:none;width:auto;overflow:hidden;border:#eee 1px solid;border-color:rgba(0,0,0,0.1);border-radius:8px;background:#fff}.review .qual_holder{position:relative !important;padding:3px;font-size:24px}.review .dd_img{cursor:pointer}.review .m_qualifier{position:relative;padding:3px 6px 4px;border-radius:5px;line-height:100%;background-color:#ccc;color:#fff}.review .m_qualifier i::before{top:0;font-size:16px;line-height:16px}.review .pif-dropdown::before{content:'▼'}.review .textarea_holder{float:none;width:auto;overflow:hidden}.review .textarea_holder textarea{display:block;clear:none;width:100%;height:37px;padding:0 0 0 2px !important;margin:0 !important;resize:none;outline:none;font-family:inherit;font-size:25px;font-weight:inherit;line-height:37px;border:0;-webkit-box-shadow:none;box-shadow:none;border-radius:7px;background:#fff}.review .icons_holder{float:left;margin:4px 0 4px;overflow:hidden;font-size:12px}.review .icons_holder li{position:relative;float:left;width:32px;margin:4px 6px 0 0;cursor:pointer;font-size:26px;line-height:32px;text-align:center}.review .icons_holder .pif-emoticon::before,.review .icons_holder .pif-media::before,.review .icons_holder .pif-sync::before,.review .icons_holder .pif-anynomous::before,.review .icons_holder .pif-privacy::before{font-size:26px}.review .icons_holder .pif-emoticon{color:#fcd254}.review .icons_holder .pif-emoticon:hover{color:#e7b237}.review .icons_holder .pif-media{color:#8bcfd6}.review .icons_holder .pif-media:hover{color:#7ab1b7}.review .icons_holder .pif-sync{color:#96cb84}.review .icons_holder .pif-sync:hover{color:#81ac72}.review .icons_holder .pif-anynomous{color:#a98ab8}.review .icons_holder .pif-anynomous:hover{color:#997aa8}.review .icons_holder .pif-privacy{color:#f4cb35}.review .icons_holder .pif-privacy:hover{color:#e7b237}.review .plurk_to,.review .plurkForm .whispers_hint,.review .priv,.review .plurk_schedule{float:right;font-size:13px;line-height:17px;opacity:0.6;margin-top:6px;text-align:right}.review .char_updater{clear:both;font-size:12px;display:block;line-height:18px;opacity:0.75}.review #plurk-dashboard .dash-segment-profile{width:100%}.review #plurk-dashboard .dash-segment-profile #dash-profile{height:86px;position:relative;text-align:left}.review #plurk-dashboard .dash-segment-profile #dash-profile img.profile-pic{position:absolute;width:86px;height:86px;border-radius:8px}.review #plurk-dashboard.own img.profile-pic{cursor:pointer}.review #profile_pic{margin-bottom:5px}.review #plurk-dashboard .dash-segment-profile #dash-profile #full_name{margin-left:92px;padding-top:1px;font-size:17px}.review #plurk-dashboard .dash-segment-profile #dash-profile #full_name .display_name{display:block;margin-bottom:1px;line-height:1.1em}.review #plurk-dashboard .dash-segment-profile #dash-profile #full_name .nick_name{display:block}.review .nick_name{opacity:0.85;font-size:12px}.review #plurk-dashboard .dash-segment-profile #dash-profile .profile-info{position:absolute;bottom:0;margin-left:92px;opacity:0.85}.review #plurk-dashboard .dash-segment-profile #dash-profile .profile-icons{position:absolute;bottom:0;height:20px;right:2px;font-size:0;white-space:nowrap}.review #plurk-dashboard .dash-segment-profile #dash-profile .profile-icons .premium{display:inline-block;margin-left:5px}.review #plurk-dashboard .dash-segment-profile #dash-profile .profile-icons img{width:auto;height:20px}.review #plurk-dashboard .dash-segment-profile #dash-additional-info{padding:5px}.review #plurk-dashboard .dash-segment-profile #dash-additional-info #about_me{padding-bottom:10px;line-height:1.4em}.review #plurk-dashboard .dash-segment-profile #dash-additional-info #location_container,.review #plurk-dashboard .dash-segment-profile #dash-additional-info #relationship_container{margin-top:10px}.review #plurk-dashboard .dash-segment-profile #dash-additional-info #private_plurk{margin-bottom:10px}.review .friend_man.private_plurk{background-color:#207298}.review .friend_man.send_gift{background-color:#e8ad40}.review #plurk-dashboard #dash-stats .dash-stats-karma{float:left;width:37%;min-width:210px;margin:15px 0;text-align:center}.review .karma_hover{position:relative;margin:10px 0 10px 10px;font-family:Georgia, 'Times New Roman', Times, serif;font-size:28px;line-height:30px;white-space:nowrap}.review .karma_hover .karma_red{color:#c60900}.review .karma_hover .karma_green{color:#00ff24}.review .karma_hover #karma_arrow{display:none;margin-top:-8px;font-size:12px;vertical-align:top}.review #plurk-dashboard #dash-stats table{float:none;width:auto;height:72px;overflow:hidden}.review #plurk-dashboard #dash-stats table th{padding:8px 3px 0 0;opacity:0.7;font-size:12px;font-weight:normal;text-align:center;vertical-align:bottom}.review #plurk-dashboard #dash-stats table td{vertical-align:bottom;padding:8px 5px 0 0;color:#333;font-size:15px;width:26%;white-space:nowrap}.review #plurk-dashboard .dash-segment-award{clear:both}.review #plurk-dashboard .dash-segment-award .segment-content{background:none}.review #plurk-dashboard .dash-segment-award .segment-content .award_bar div{float:left;width:39px;height:39px;margin:0 8px 6px 0;cursor:default;font-weight:bold;text-align:center}.review .cmp_9{width:39px;height:39px;font-size:1px;background:transparent url("../image/award.png") 0 -2420px no-repeat}.review #plurk-dashboard .link_arrow{display:block;margin-top:10px;margin-left:10px;font-size:11px;text-align:left}.review #plurk-dashboard .link_arrow i{margin-right:5px}.review .pif-arrow-points::before{font-size:15px;margin-right:0}.review #plurk-dashboard #dash-friends-pics,.review #plurk-dashboard #dash-fans-pics{margin:10px 0 0 0}.review .show_all_friends,.review .show_mutual_friends{float:left;margin:0 15px 5px 0}.review .friend_holder{clear:both}.review .friend_holder ul li{margin:5px 2px;float:left}.review .friend_holder img{width:35px;height:35px;border:0}.review #plurk-dashboard .dash-segment-friends{width:49.3%;margin-right:1.4%}.review #plurk-dashboard .dash-segment-friends #dash-friends #friend_managment{margin-top:5px;text-align:center}.review .friend_man.add_friend,.review .friend_man.accpet{background-color:#7aa716}.review .friend_man.add_friend:hover,.review .friend_man.accpet:hover{background-color:#6a9706}.review #plurk-dashboard .dash-segment-fans{width:49.3%}.review #plurk-dashboard .dash-segment-fans #dash-fans #fan_managment{margin-top:5px;text-align:center}.review .friend_man.unfollow,.review .friend_man.add_follow,.review .friend_man.add-as-fan{background-color:#207298}.review .friend_man.unfollow:hover,.review .friend_man.add_follow:hover,.review .friend_man.add-as-fan:hover{background-color:#106288}.review #form_holder{background:#fff;-webkit-box-shadow:1px 1px 3px -3px #000;box-shadow:1px 1px 3px -3px #000}.review .plurk_box{z-index:50;position:absolute}.review .plurkForm::after,.review .input_holder::after,.review .share_list::after,.review .icons_holder::after{content:'';clear:both;height:0;display:block}.review .plurk_box .mini_form{padding:4px 3px 2px;font-weight:normal;border-top:#eee 1px solid;background-color:#fff}.review .plurkForm{position:relative;padding:3px 3px 0}.review .plurkForm.mini-mode .input_holder,.review .mini_form .input_holder{border-radius:6px}.review .input_holder{float:none;width:auto;overflow:hidden;border:#eee 1px solid;border-color:rgba(0,0,0,0.1);border-radius:8px;background:#fff}.review .qual_holder{position:relative !important;padding:3px;font-size:24px}.review .plurkForm.mini-mode .qual_holder,.review .mini_form .qual_holder{padding:1px 1px 0;font-size:12px}.review #form_holder .qual_holder{color:black}.review .m_qualifier{position:relative;padding:3px 6px 4px;line-height:100%;border-radius:5px;background-color:#ccc;color:#fff}.review .dd_img{cursor:pointer}.review .plurkForm.mini-mode .m_qualifier,.review .mini_form .m_qualifier{padding:3px 6px 2px}.review .pif-dropdown::before{content:'▼'}.review .m_qualifier i::before{top:0;font-size:16px;line-height:16px}.review .mini_form .m_qualifier i::before{top:1px;font-size:12px;line-height:10px}.review .textarea_holder{float:none;width:auto;overflow:hidden}.review .textarea_holder textarea{display:block;clear:none;width:100%;height:37px;margin:0 !important;padding:0 0 0 2px !important;outline:none;resize:none;font-family:inherit;font-size:25px;line-height:37px;border:0;border-radius:7px;background:#fff;-webkit-box-shadow:none;box-shadow:none}.review .plurkForm.mini-mode .textarea_holder textarea,.review .mini_form .textarea_holder textarea{height:19px;font-size:12px;line-height:19px;border-radius:4px}.review .icons_holder{float:left;margin:4px 0 4px;overflow:hidden;font-size:12px}.review .plurkForm.mini-mode .icons_holder,.review .mini_form .icons_holder{margin:1px 0 3px}.review .icons_holder li{position:relative;float:left;width:32px;margin:4px 6px 0 0;cursor:pointer;font-size:26px;line-height:32px;text-align:center}.review .plurkForm.mini-mode .icons_holder li,.review .mini_form .icons_holder li{width:26px;margin:1px 1px 0 0;font-size:16px;line-height:24px}.review .plurkForm.mini-mode .icons_holder .pif-emoticon::after,.review .mini_form .icons_holder .pif-emoticon::after{width:12px;height:12px;border-radius:6px;background:#333;margin:-19px 0 0 7px}.review .icons_holder .pif-emoticon{color:#fcd254}.review .icons_holder .pif-media{color:#8bcfd6}.review .plurkForm.mini-mode .icons_holder .pif-emoticon::before,.review .plurkForm.mini-mode .icons_holder .pif-media::before,.review .mini_form .icons_holder .pif-emoticon::before,.review .mini_form .icons_holder .pif-media::before{font-size:20px}.review .plurk_to,.review .plurkForm .whispers_hint,.review .priv,.review .plurk_schedule{float:right;margin-top:6px;opacity:0.6;font-size:13px;line-height:17px;text-align:right}.review .char_updater{clear:both;display:block;opacity:0.75;font-size:12px;line-height:18px}.review .plurkForm.mini-mode .char_updater,.review .mini_form .char_updater{clear:none;float:right;margin:4px 5px 0;color:#999}.review .response_box{position:relative;min-height:260px;overflow:auto;overflow-x:hidden;border-top:#eee 1px solid;background:#fff}.review .button,.review .orange-but{display:inline-block;width:auto;padding:9px 13px;cursor:pointer;outline:none;font-size:13px;font-weight:bold;line-height:1;vertical-align:middle;border:0;border-radius:999px;background:#ff574d;color:#fff;-webkit-box-shadow:none;box-shadow:none}.review .button.small-button{font-size:12px;padding:6px 10px}.review .favorite_count,.review .replurk_count,.review .bookmark_info,.review .private_info{margin:9px 0 4px 10px;color:#fff;float:left}.review .favorite_count{background:#54a4be}.review .favorite_count:hover{background:#4494ae}.review .replurk_count{background:#56b892}.review .replurk_count:hover{background:#46a882}.review .bookmark_info{background:#5abac5}.review .bookmark_info:hover{background:#4a9aa5}.review .private_info{background:#f4ca35}.review .private_info:hover{background:#e4ba25}.review .response-status{clear:both;margin-top:5px;padding:4px 0;font-size:12px}.review .response-status .response-count{height:24px;padding:5px 0 0 10px;font-weight:normal;line-height:24px;background-color:transparent;color:#afb8cc}.review .response-status .response-only-owner{margin-left:10px;opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9);font-weight:normal;vertical-align:top;background:#f5f5f9;color:#afb8cc}.review .response-status:hover .response-only-owner{opacity:1}.review .response-status .response-only-owner:hover{background:#afb8cc;color:#fff}.review .language-large-font .list{font-size:0.93em}.review .plurk_box .list{clear:both;position:relative;height:auto !important;padding:5px 5px}.review .list .plurk{position:relative;margin:3px 0}.review .plurk{white-space:nowrap;color:#111}.review .plurk_box table{width:100%}.review .plurk td{vertical-align:top;white-space:nowrap !important}.review .plurk_cnt{position:relative;padding:2px 0 0;font-weight:normal;line-height:1.3;background-color:#fff;color:#111;-webkit-box-shadow:1px 1px 3px -3px #000;box-shadow:1px 1px 3px -3px #000}.review .list .plurk_cnt{padding-bottom:0px;-webkit-transition:background-color 0s;transition:background-color 0s;border:none;-webkit-box-shadow:none;box-shadow:none}.review .list .td_qual{width:0%}.review .plurk td{vertical-align:top;white-space:nowrap !important}.review .td_qual{width:0%;padding:2px 0 2px 5px}.review .name{font-weight:bold;text-decoration:none}.review .td_cnt{width:100%;padding:2px 5px 5px 0}.review .list .td_cnt{width:100%}.review .text_holder{position:relative;min-width:48px;white-space:normal !important;background:none}.review .list .text_holder{width:100% !important;margin-left:5px;margin-right:5px;white-space:normal !important;word-break:break-word !important}body{height:100vh;overflow:hidden;background-image:linear-gradient(-160deg, #fdfbfb, #ebedee);color:#333;-webkit-transition:0.5s;transition:0.5s}body.dark-mode{color:#f5f5f5}.wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;position:relative;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.no-display{display:none}@media only screen and (max-width: 992px){.header{padding-left:15px}.header_title{padding-left:0;font-size:0}.nav_btn{margin-right:0}.sidebar{margin-left:0}}@media only screen and (max-width: 576px){.nav{position:absolute;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;bottom:0;left:0;width:100%;height:30px;margin-right:0;-webkit-transform:translateY(100%);transform:translateY(100%);font-size:1rem;background-image:linear-gradient(160deg, rgba(15,76,129,0.9), rgba(27,38,44,0.9) 300%)}.nav_btn{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:0}.github_button{display:none}.tools{z-index:10;position:absolute;top:0;left:0;width:100%;padding-top:75px;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.tools-open{width:100%;-webkit-transform:translateY(0);transform:translateY(0)}.tools_main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;width:auto}.tools_bar{width:50px}.export{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;right:auto;left:0;width:100%;max-height:80%;padding-top:85px}.export_control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:0}.export_btn{margin-bottom:10px;margin-right:10px}.export .save_button{margin-top:0}.review{padding-top:75px}.review #plurk-dashboard .dash-group-form,.review #plurk-dashboard .dash-group-right{width:100%;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box}.review #plurk-dashboard .dash-group-left{width:100%;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box}.review #plurk-dashboard .dash-segment-friends{width:100%;margin-right:0;-webkit-box-sizing:border-box;box-sizing:border-box}.review #plurk-dashboard .dash-segment-fans{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}}
2 | 


--------------------------------------------------------------------------------