andy0130tw
2/6/2016 - 4:37 PM
[Decrepated, see https://github.com/andy0130tw/plurk-css] My new plurk theme inspired by Material Design.
[Decrepated, see https://github.com/andy0130tw/plurk-css] My new plurk theme inspired by Material Design.
/* 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;
}