1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 | /**主控台發噗區**/ /*發噗區位置調整*/ #plurk-dashboard .dash-group-form { position: fixed; width: 50%; } .dash-group-form { z-index: 999; bottom: -108px; right: 20%; margin: 0; padding: 0; min-width: 400px; opacity: 0.8; transition: all 0.2s ease 1s; } .dash-group-form:hover { bottom: 0; opacity: 1; transition-delay: 0s; } .dash-group-form::before { content: "▲"; display: block; position: absolute; top: -30px; right: 0; margin: 0; padding: 5px; width: 50px; height: 20px; line-height: 20px; border-radius: 6px 6px 0 0; text-align: center; font-size: 20px; font-weight: 900; background-color: rgba(34,34,34,0.9); color: #ccc; } /*發噗區背景*/ .dash-group-form .segment-content {background: none;} .dash-group-form { padding: 0 10px; border-radius: 6px 0 0 0; background: rgba(34,34,34,0.9); } /*分享與表情選項圖片*/ .dash-group-form .icons_holder li[class*="pif-"] {font-size: 18px;} .dash-group-form .icons_holder [class*="_off"] {color: #91928D;} .dash-group-form .pif-emoticon::after {background: none;} /*發噗區文字顏色*/ .dash-group-form .textarea_holder textarea {color: #333 !important;} /**左右主控台位移**/ #dashboard_holder { position: absolute; top: 0; left: 0; width: auto; max-width: none; min-width: auto; margin: 0; padding: 35px 0 0 0; } #dashboard_holder .dash-group-left, #dashboard_holder .dash-group-right { float: none; width: auto; max-width: 350px; } #dashboard_holder .dash-group-left .segment-content:nth-child(1) {border-top-right-radius: 10px;} #dashboard_holder .dash-group-right .dash-segment-fans .segment-content {border-bottom-right-radius: 10px;} /**主控台左右向左收縮**/ #dashboard_holder .dash-group-left, #dashboard_holder .dash-group-right { left: -100%; transition: all 1s ease 0.5s; } #dashboard_holder:hover .dash-group-left, #dashboard_holder:hover .dash-group-right {left: 0;} /*頭像位置突出*/ #dashboard_holder .dash-group-left .profile-pic { left: calc(100% + 10px); opacity: 0.75; transition: all 1s ease 1.2s; } #dashboard_holder:hover .dash-group-left .profile-pic { left: 0; opacity: 1; transition-delay: 0.5s; } /*指定發噗區時主控台不要彈出來*/ #dashboard_holder .dash-group-form:hover ~ [class*="dash-group"] {left: -100%;} #dashboard_holder .dash-group-form:hover + .dash-group-left .profile-pic { left: calc(100% + 10px); opacity: 0.75; } /**主控台左側**/ #plurk-dashboard .dash-group-left {z-index: 999; padding-right: 0;} #plurk-dashboard .dash-group-left .segment-content {border-radius: 0;} /*頭像暱稱區*/ #plurk-dashboard .dash-group-left #dash-profile #full_name { margin-left: 100px; padding-top: 5px; font-size: 14px; font-weight: 600; } #plurk-dashboard .dash-group-left #dash-profile .profile-info {margin-left: 100px;} #plurk-dashboard .dash-group-left .profile-pic {margin-left: 3px;} /*自介區*/ #plurk-dashboard .dash-group-left #private_plurk {position: absolute;} #plurk-dashboard .dash-group-left .segment-content:nth-child(2) { margin-top: 0; /*外層容器的mt與pt合計11(5+5+1),::before元素高度25(5+15+5),合起來是11+25+11=47*/ max-height: 47px; overflow: hidden; transition: all 2s ease; } #plurk-dashboard .dash-group-left .segment-content:nth-child(2):hover {max-height: 100vh;} #plurk-dashboard .dash-group-left #about_me::before { content: "♞"; display: block; padding: 5px 9px; margin: 1px 3px 15px 3px; width: 20px; line-height: 15px; border-radius: 5px; text-align: center; font-size: 20px; background: #CCC; color: #333; } /**主控台右側**/ #plurk-dashboard .dash-group-right .dash-segment {float: none;} .dash-group-right {z-index: 998;} .dash-group-right .segment-content{ margin-top: 0; padding: 5px 10px 0; overflow: hidden; transition: all 2s ease; border-radius: 0; } .dash-group-right .segment-content:hover {max-height: 100vh;} /*統計區*/ .dash-group-right .dash-segment-stats .segment-content {padding: 5px 10px 10px;} .dash-group-right .dash-stats-karma, .dash-group-right #dash-stats-table {float: none !important;} .dash-segment-stats .segment-content {max-height: 80px;} #plurk-dashboard #dash-stats table th, #plurk-dashboard #dash-stats table td { font-size: 12px; color: #ccc; } #karma {color: #FFF;} /*朋友粉絲區*/ #plurk-dashboard .dash-segment-friends, #plurk-dashboard .dash-segment-fans {width: auto;} #plurk-dashboard .dash-segment-friends {margin-right: 0;} .dash-segment-friends .segment-content, .dash-segment-fans .segment-content { /*外層容器的mt與pt合計5(padding),h2元素高度24(2+20+2),合起來是5+24+5=34*/ max-height: 34px; } #friend_managment, #fan_managment {margin-top: 10px !important;} .dash-group-right .friend_holder img {border-radius: 5px;} /*徽章的連結消除*/ #plurk-dashboard .link_arrow {display: none;} |
Direct link: https://paste.plurk.com/show/QfUytCkoovDKmqqKKX3Z