css [Decrepated，请参阅https://github.com/andy0130tw/plurk-css]我的新plurk主题灵感来自Material Design。

Posted 2021-05-13

/* Global */
._lch_, textarea {
  font-family: "Source Han Sans TC", "Noto Sans CJK", "Microsoft JhengHei", sans-serif;
}

textarea {
  border-radius: 4px;
}

/* Markup -- Common markup styling */
strike {
  color: #999;
}

code {
  color: #111;
  font-family: 'Ubuntu Mono', Menlo, 'Roboto Mono', 'Droid Mono', monospace;
}

/* Markup -- Emotion */
img.emoticon {
  vertical-align: middle;
}

/* Markup -- Media */
a.ex_link {
  font-weight: 500;
  color: rgb(63, 81, 181);
  transition: text-shadow 150ms cubic-bezier(.4, 0, .2, 1);
}

a.ex_link:hover {
  text-decoration: none;
  text-shadow: 1px 1px 4px rgba(63, 81, 181, .4);
}

a.hashtag {
  font-weight: 500;
  color: #e64a19;
}

a.hashtag:hover {
  color: white;
  background-color: #e64a19;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
}

/* Timeline -- Structure */
#timeline_holder {
  /*background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/school.png);*/
  background: url(http://res.cloudinary.com/qbane/image/upload/v1454758953/food-alpha_jhwbn6.png);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
              0 1px 10px 0 rgba(0, 0, 0, 0.12),
              0 2px 4px -1px rgba(0, 0, 0, 0.4);
  /*height: 480px !important;*/
  max-height: 75vh !important;
}

.bottom_start, .bottom_end {
  font-size: .85em;
  font-family: Lato, sans-serif;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 4px rgba(0, 0, 0, .3);
}

.day_start .bottom_start {
  font-size: 1.05em;
  background: rgba(255, 255, 255, .95);
  color: #888;
}

/* Timeline -- Icon width Unifying */
#filter_tab .pif-like,
#filter_tab .pif-message,
#filter_tab .pif-messages,
#filter_tab .pif-message-my,
#filter_tab .pif-message-private {
  display /**/: inline-block;
  width: 1.28571429em;
  text-align: center;
}

/* Timeline -- Response count */
.plurk .response_count {
  font-family: 'Roboto Mono', Menlo, 'Droid Mono', monospace;
  padding: 2px 4px;
  min-width: 20px;
  border-radius: 4px;
  background: rgba(227, 242, 253, 0.7);
  color: #1e88e5;
  box-shadow: 1px 0 2px rgba(0, 0, 0, .25);
  transform: translateX(8px);
  text-align: center;
  display /**/: inline-block;
  transition: transform     250ms cubic-bezier(.4, 0, .2, 1),
              border-radius 250ms cubic-bezier(.4, 0, .2, 1),
              background    250ms cubic-bezier(.4, 0, .2, 1),
              box-shadow    250ms cubic-bezier(.4, 0, .2, 1);
}

.plurk.new .response_count {
  background: #f44336;
  box-shadow: 1px 0 4px 1px rgba(244, 67, 54, .55);
  color: #fff;
}

.plurk.display.plurk_box .response_count {
  transform: translateX(0);
  border-radius: 0 4px 4px 0;
  background: rgba(227, 242, 253, 0.9);
  box-shadow: 2px 0 6px 4px rgba(30, 136, 229, .75);
  /* to hide the shadow from the box */
  z-index: -1;
}

.plurk.display.plurk_box.new .response_count {
  background-color: #f44336;
  box-shadow: 2px 0 6px 4px rgba(244, 67, 54, .75);
}

/* Timeline -- Switcher */
#filter_tab li   a,
#noti_np         a,
#noti_re_actions a,
#noti_re_view    a {
  transition: box-shadow 250ms cubic-bezier(.4, 0, 1, 1),
              opacity    100ms cubic-bezier(.4, 0, .2, 1),
              color      100ms cubic-bezier(.4, 0, .2, 1),
              height     250ms cubic-bezier(.4, 0, .2, 1),
              margin     250ms cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
              0 1px 10px 0 rgba(0, 0, 0, 0.12),
              0 2px 4px -1px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  text-align: left;
  line-height: 32px;
}

#filter_tab li   a:hover,
#noti_np         a:hover,
#noti_re_actions a:hover,
#noti_re_view    a:hover {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
              0 1px 18px 0 rgba(0, 0, 0, 0.12),
              0 3px 5px -1px rgba(0, 0, 0, 0.4);
}

#filter_tab li a {
  display /**/: flex;
}

#noti_np a,
#noti_re_view a {
  margin-left: 8px;
}

#noti_np a:hover,
#noti_re_view a:hover {
  background: #fffde7;
  color: #f57f17;
}

#filter_tab:hover li a {
  margin-top: 8px !important;
}

#filter_tab li a.off_tab.has_unread {
  background: #ffcdd2;
  color: #e53935;
}

#filter_tab li a.filter_selected {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12),
              0 5px 5px -3px rgba(0, 0, 0, 0.4);
}

#updater,
#updater .item a,
#filter_tab a.has_unread,
#filter_tab li a.filter_selected,
#filter_tab:hover li a {
  height: 32px !important;
}

#filter_tab li a span {
    flex: 1 1 auto;
    text-align: right;
    font-size: 90%;
    border-radius: 4px;
}

#noti_re #mark_all_link.updater_link {
  /* to win the selector */
  background: #e8f5e9;
}

#noti_re #mark_all_link.updater_link:hover {
  background: #4caf50;
}

/***** Timeline -- Shortcuts *****/
#noti_np_text:after {
  content /**/: ' [U]';
}

#noti_re #mark_all_link.updater_link span:after {
  content /**/: ' [M]';
}

#noti_re_text:after {
  content /**/: ' [V]';
}

#noti_re .updater_link .pif-cancel + span:after {
  content /**/: ' [V]';
}

/* Timeline -- Avatars */
.p_img {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12),
              0 5px 5px -3px rgba(0, 0, 0, 0.4);
  border-bottom: 0;
  border-radius: 2px;
  overflow: hidden;
  transform: translateX(-4px) translateY(4px);
  transition: border-radius 100ms cubic-bezier(.4, 0, .2, 1),
              transform     250ms cubic-bezier(.4, 0, .2, 1);
}

.plurk.display.plurk_box .p_img {
  transform: translateX(24px) translateY(1px);
  border-radius: 50%;
  z-index: 9999;
}

.plurk .plurk_icon {
  transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
}

.plurk.display.plurk_box .plurk_icon {
  transform: translateY(12px);
}

/* Timeline -- Qualifier */
.qualifier, .m_qualifier {
  /* this also affects the composing area */
  border-radius: 2px;
  min-height: 1.5em;
  display /**/: inline-block;
  min-width: 1.5em;
  text-align: center;
  line-height: 1.5em;
  border: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
}

.qualifier.qual_embedded {
  /* clean-up default styling, use only underline */
  box-shadow: none;
  background: none !important;
  text-decoration: underline dotted;
  border-radius: 0px;
}

/* Timeline -- Name color manipulation */
a.name                   { /* none  */ color: #37474f;            text-shadow: 0 0 3px rgba(55, 71, 79, .4); }
a.name[style*="rgb(228"] { /* red   */ color: #e91e63 !important; text-shadow: 0 0 3px rgba(233, 30, 99, .4); }
a.name[style*="rgb(34"]  { /* blue  */ color: #03a9f4 !important; text-shadow: 0 0 3px rgba(3, 169, 244, .4); }
a.name[style*="rgb(10"]  { /* green */ color: #009688 !important; text-shadow: 0 0 3px rgba(0, 150, 136, .4); }
a.name[style*="rgb(174"] { /* anony */ color: #9c27b0 !important; text-shadow: 0 0 3px rgba(156, 39, 176, .4); }

/* Timeline -- Arrows */
.browse_button {
  /* control the buttons manually */
  opacity: 1;
}

.browse_button .cmp_arrow_left:before,
.browse_button .cmp_arrow_right:before {
  font-size: 20px;
  padding: 18px;
  color: white;
}


.browse_button .cmp_arrow_left,
.browse_button .cmp_arrow_right,
.browse_button .cmp_back_to_today {
  transition: background 250ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 250ms cubic-bezier(.4, 0, 1, 1);
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2),
              0 13px 19px 2px rgba(0, 0, 0, .14),
              0 5px 24px 4px rgba(0, 0, 0, .12);
}

.browse_button .cmp_arrow_left,
.browse_button .cmp_arrow_right {
  background: #607d8b;
  border-radius: 28px;
  width: 56px;
  height: 56px;
}

.browse_button .cmp_back_to_today {
  font-size: 10px;
  background: #b0bec5;
  font-family: Lato, Roboto, sans-serif;
  text-transform: uppercase;
}

.browse_button .cmp_arrow_left:hover,
.browse_button .cmp_arrow_right:hover {
  background: #546e7a;
  box-shadow: 0 8px 9px -5px rgba(0, 0, 0, .2),
              0 15px 22px 2px rgba(0, 0, 0, .14),
              0 6px 28px 5px rgba(0, 0, 0, .12);
}

.browse_button .cmp_arrow_left:active,
.browse_button .cmp_arrow_right:active {
  background: #37474f;
  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, .2),
              0 18px 28px 2px rgba(0, 0, 0, .14),
              0 7px 34px 6px rgba(0, 0, 0, .12);
}

.browse_button .cmp_back_to_today:before {
  color: #b0bec5;
}

/* Timeline -- Creature */
#creature {
  /*box-shadow: 0px 0px 45px 10px rgba(255,255,255,.9);*/
  /*background: rgba(255,255,255,.65);*/
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .4))
          drop-shadow(0 0 25px rgba(255, 255, 255, .6))
          drop-shadow(0 0 45px rgba(255, 255, 255, .9));
}

/* Posts */
.td_cnt {
  /* reset its padding, originally 5px */
  padding-right: 0;
}

.td_qual {
  /* reset its padding, originally 5px */
  padding-left: 4px;
}

div .text_holder {
  transition: color 250ms ease-out;
  color: #222;
}

#timeline_cnt .plurk .plurk_cnt {
  /* initial state */
  will-change: background, padding, transform, border-radius;
  transition: all 350ms cubic-bezier(.4, 0, .2, 1);
  border: none;
  border-radius: 4px;
  padding: 4px 8px 4px 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
              0 3px 6px rgba(0, 0, 0, 0.23);
  background: rgba(251, 251, 255, .65);
}

#timeline_cnt .plurk.display .plurk_cnt {
  /* when content is expanded */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
              0 6px 6px rgba(0, 0, 0, 0.23);
  background: rgba(251, 251, 255, .8);
}

#timeline_cnt .plurk.display.link_extend .plurk_cnt {
  /* when mouse hover */
  background: rgba(251, 251, 255, .9);
}

#timeline_cnt .plurk.display.plurk_box {
  z-index: 2000; /* originally 1200 */
}

#timeline_cnt .plurk.display.plurk_box .plurk_cnt {
  /* when opened */
  /* the width will be added accordingly.
     padding animation will mess up the calculation,
     which is a known limitation */
  padding: 8px 16px 8px 24px;
  border-radius: 4px 4px 0 0;
  transform: translateY(-8px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
              0 10px 10px rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, .95);
}

#timeline_cnt .plurk.display.plurk_box {
  /* 503
   + outer (left 24 + right  8)
   - inner (left  1 + right  5) */
  width: 529px;
}
/* Posts -- Muted */
#timeline_cnt .plurk.muted {
  opacity: .6;
  transition: opacity 250ms ease-in;
}

#timeline_cnt .plurk.muted .plurk_cnt .text_holder {
  color: #555;
}

#timeline_cnt .plurk.muted.plurk_box {
  opacity: .9;
}

/* Posts -- Controls */
.manager a {
  display /**/: inline-block;
  min-width: 2em;
  text-align: center;
}

/* Posts -- Media */
a.meta {
  /* mostly media */
  transition: background 100ms cubic-bezier(.4, 0, .2, 1);
}

.plurk a.pictureservices {
  padding: 0;
}

/* Posts -- New message highlight */
#timeline_cnt .plurk.plurk .plurk_cnt.new6 { background-color: #FF9; }
#timeline_cnt .plurk.plurk .plurk_cnt.new5 { background-color: #FFA; }
#timeline_cnt .plurk.plurk .plurk_cnt.new4 { background-color: #FFB; }
#timeline_cnt .plurk.plurk .plurk_cnt.new3 { background-color: #FFC; }
#timeline_cnt .plurk.plurk .plurk_cnt.new2 { background-color: #FFD; }
#timeline_cnt .plurk.plurk .plurk_cnt.new1 { background-color: #FFE; }

/* Responses */
#form_holder {
  margin-top: 1px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
              0 3px 6px rgba(0, 0, 0, 0.23);
}

#form_holder .info_box.controller {
  border-radius: 0 0 4px 4px;
}

#form_holder .response_box .list {
  transition: height 250ms cubic-bezier(0, .4, .2, 1);
}

#form_holder .response_box .plurk_cnt {
  border-left: 3px solid #f1f1f1;
}

.plurk_cnt.response_time .holder {
  padding: 0;
}

/* Response -- Owner specialization */
#form_holder .highlight_owner .plurk_cnt {
  border-left: 3px solid #bbb;
}

#form_holder .highlight_owner .name {
  /* use left border to highlight owner instead */
  text-decoration: none;
}

#form_holder .response_box .favorite_count,
#form_holder .response_box .replurk_count {
  /* smaller than what spec says */
  border-radius: 12px;
  padding: 0 6px;
  line-height: 24px;
}

/* Response -- Response time */
/* (new customizable area since Feb 17) */
.plurk_cnt.response_time {
  border-radius: 0 4px 4px 0;
  padding: 4px 8px 4px 0;
  /* to make it looks like in the same depth with the form holder */
  transform: translateX(6px);
  box-shadow: -6px 0 white,
              0 3px 6px rgba(0, 0, 0, 0.16),
              0 3px 6px rgba(0, 0, 0, 0.23);
}

.plurk_cnt.response_time p {
  color: #555;
}

/* Dashboard -- Structure */
#plurk-dashboard .dash-group-left {
  /* to have a consistent gut */
  padding-right: 12px;
}

#plurk-dashboard .dash-segment-friends,
#plurk-dashboard .dash-segment-fans {
  width: 49.08%;
}

#plurk-dashboard .dash-segment-friends {
  /* approximately 12px */
  margin-right: 1.83%;
}

#plurk-dashboard.narrow .dash-group-left {
  /* when viewport being narrow */
  padding-right: 0;
}

.dash-segment .segment-content {
  transition: box-shadow 150ms cubic-bezier(.4, 0, 1, 1),
              background 150ms cubic-bezier(.4, 0, .2, 1),
              color      150ms cubic-bezier(.4, 0, .2, 1);
  border-radius: 4px;
  color: #444;
  background: rgba(250, 250, 250, .65);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
              0 1px 5px 0 rgba(0, 0, 0, 0.12),
              0 3px 1px -2px rgba(0, 0, 0, 0.2);
  margin-top: 12px;
  padding: 8px;
}

#dash-additional-info,
#dash-stats,
#dash-friends,
#dash-fans {
  padding: 8px 8px 16px !important;
}

.dash-segment-profile [class~="segment-content"]:first-child {
  /* Plurk does not allow the string 'content$:' in CSS
     this make some selectors like 'segment-content$:hover'
     (without the dollar signs! it cannot appear even in comments)
     also violate the restriction, but we can't simply use a space
     or an empty comment to bypass it
     thanks @Helens89227 for this workaround
     btw, it can also be written `:first-child.segment-content`
     it is not trivial and harder to understand though */
  /* profile section */
  background: rgba(250, 250, 250, .9);
}

.dash-segment [class~="segment-content"]:hover {
  color: #222;
  background: rgba(250, 250, 250, .8);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
              0 1px 10px 0 rgba(0, 0, 0, 0.12),
              0 2px 4px -1px rgba(0, 0, 0, 0.4);
}

#plurk-dashboard .dash-segment-award .segment-content {
  box-shadow: none;
}

#plurk-dashboard h2 {
  /* intact when hovered */
  color: #3f51b5 !important;
  padding: 0;
  margin: 4px 0;
}

/* Dashboard -- Profile */
.nick_name, .profile-info {
  opacity: 1 !important;  /* what the hell opacity?! */
  color: #767676 !important;  /* 54% */
}

.nick_name {
  font-size: 14px;
}

#plurk-dashboard .dash-segment-profile #dash-profile {
  /* sorry for bad selector, but we are going to own the priority! */
  height: 96px;  /* 80 + 16, originally 86 */
  padding: 8px;
}

#plurk-dashboard .dash-segment-profile #dash-profile #full_name .display_name {
  color: #3f51b5;
  font-weight: 500;
  margin-bottom: 4px;
}

#plurk-dashboard .dash-segment-profile #dash-profile .profile-info {
  bottom: 8px;
}

#plurk-dashboard .dash-segment-profile #dash-profile img.profile-pic {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  /*transition: border-radius 400ms ease-in;*/
}

#plurk-dashboard .dash-segment-profile #dash-profile #full_name {
  color: #212121;  /* 87% */
  font-size: 18px;
}

/* Dashboard -- Composing area */
#main_poster {
  font-family: Lato, 'Roboto Slab', 'Droid Serif', serif;
}

#main_poster .plurkForm {
  padding: 0;
}

#input_big, #input_small {
  margin-left: 4px !important;
}

#input_big {
  margin-top: 8px !important;
  padding-left: 0 !important;
}

#input_small {
  margin-top: 4px !important;
}

.m_qualifier {
  padding: 4px 8px;
}

.dd_img, .submit_img {
  transition: background 250ms ease-out;
}

#main_poster .submit_img {
  margin-top: 8px;
  border-radius: 4px;
  font-weight: 500;
  /*box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
              0 1px 18px 0 rgba(0, 0, 0, 0.12),
              0 3px 5px -1px rgba(0, 0, 0, 0.4);*/
  /* bonus: move the Plurk button to the bottom of the text area *
   * disable the box-shadow above to match the style             */
  position: absolute;
  bottom: 0;
  right: 0;
}

/* move the messages lest the position of Plurk button
   disable this if you don't apply the bonus above */
#plurk_to, .whispers_hint {
  position: relative;
  right: 88px;
}

#main_poster .icons_holder {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

/* Dashboard -- Additional info */
#dash-additional-info:before {
  /* a demostration using pseudo-element to add contents */
  content /**/: 'PROFILE';
  display /**/: block;
  color: #3f51b5;
  font-weight: 700;
  margin: 4px 0 8px;
}

/* Dashboard -- Stats */
#profile_views,
#profile_views + th + td,
#plurks_count,
#response_count,
#join_date,
#last_visit {
  font-family: 'Ubuntu Mono', Menlo, 'Roboto Mono', 'Droid Mono', monospace;
}

/* Dashboard -- Tweaks */
#about_me {
  font-size: 115%;
  line-height: 1.4;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, .35);
}

#karma {
  color: white !important;
  text-shadow: 0 0 1px rgba(0, 0, 0, .2),
               0 0 2px rgba(0, 0, 0, .3),
               0 0 4px rgba(0, 0, 0, .5);
}

#karma_arrow {
  font-size: 18px;
}

#full_name .nick_name {
  font-family: 'Ubuntu Mono', Menlo, 'Roboto Mono', 'Droid Mono', monospace;
}

/* Dashboard -- Friend list / Fan list */
#friend_holder,
#fan_holder {
  /* the icons of friend must be in one line */
  margin-left: -11px;
  margin-right: -11px;
  /* XXX: preserve space without clearing float */
  overflow-x: hidden;
  overflow-y: auto;
}

#fan_holder span {
  /* no fans QAQ message; giving back margins */
  display /**/: block;
  margin-left: 11px;
  margin-right: 11px;
}

.friend_man {
  padding: 8px 12px;
  border-radius: 2px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
              0 1px 10px 0 rgba(0, 0, 0, 0.12),
              0 2px 4px -1px rgba(0, 0, 0, 0.4);
  transition: box-shadow 250ms cubic-bezier(.4, 0, 1, 1),
              filter     250ms cubic-bezier(.4, 0, .2, 1);
}

.friend_man:hover {
  filter: brightness(1.4);
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12),
              0 5px 5px -3px rgba(0, 0, 0, 0.4);
}

#dash-friends-pics .user_link,
#dash-friends-pics .user_link img,
#dash-fans-pics    .user_link,
#dash-fans-pics    .user_link img {
  border-radius: 50%;
  border: none;
  transition: border-radius 100ms ease-in;
}

#dash-friends-pics .user_link,
#dash-fans-pics    .user_link {
  display /**/: block;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
              0 3px 6px rgba(0, 0, 0, 0.23);
}

#dash-friends-pics .user_link:hover,
#dash-friends-pics .user_link:hover img,
#dash-fans-pics    .user_link:hover,
#dash-fans-pics    .user_link:hover img {
  border-radius: 8px;
}

/* Dashboard -- Award bar specialization */
#dash-award .award_bar div img {
  transition: filter 200ms cubic-bezier(.4, 0, 1, 1);
}

#dash-award .award_bar div:hover img {
  filter: brightness(1.2)
          drop-shadow(1px 1px 4px rgba(0, 0, 0, .5));
}

/* Footer */
#footer, #footer a {
  color: #f1f1f1;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}

/* Hardcoded background settings for f*cking awkward background override */
._lch_ {
  background: url(/static/theme/cold2015-theme/cold2015-bg.jpg) center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.OTHER{ background: url(http://example.com/?BELOW_IS_UNSYNCED_STYLES_USE_IT_AT_YOUR_OWN_RISK); }

._lc_ #filter_tab li a span { font-size: 125%; }

.unread_generic { 
  border-radius: 4px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background-color: transparent;
}

#noti_np_count.unread_generic,
#noti_re_count.unread_generic {
  font-size: 125%;
  color: #e91e63 !important;
  text-shadow: 0 1px 2px rgba(233, 30, 99, .6);
  padding-left: 8px;
}

.response_box {
  resize: vertical;
}