奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 7:58 AM
Mon, Apr 8, 2019 11:00 AM
31
7
噗浪CSS
變更噗首功能列各按鈕的背景及顏色
before(預設)
https://i.imgur.com/5HvR36k.gif https://i.imgur.com/eyeEmY5.gif
after
https://i.imgur.com/CqeAIk5.gif https://i.imgur.com/ajYM0S0.gif
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 7:59 AM
使用語法
/*噗首功能列整體(去除按鈕背景)*/ ._lc_ div.manager a{ font-size: ...
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:01 AM
Mon, Apr 8, 2019 11:19 AM
解說，請搭配噗首gif確認
https://images.plurk.com/Z84bdu2Jl4yjieBnP19OW.png
噗首功能列整體去除背景
預設無背景(此項無變更)，鼠標移至各按鈕上時無背景
另外有設font-size調整一下大小
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:03 AM
Mon, Apr 8, 2019 8:04 AM
https://images.plurk.com/3XxrS4IQRla2rhVBGd6cgZ.png
編輯按鈕
預設為白色(#FFF)，鼠標移至按鈕上時顯示藍色(#3667A5)
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:05 AM
https://images.plurk.com/JUj4z3mXglSPv0daGmm1m.png
消音按鈕
未點選狀態下，預設為白色(#FFF)，鼠標移至按鈕上時顯示黑色(#000)
已點選狀態下，預設為黑色(#000)，鼠標移至按鈕上時顯示藍色(#3667A5)
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:06 AM
https://images.plurk.com/2AmcCjoUWMTQBQ2mU6EATm.png
轉噗按鈕
未點選狀態下，預設為白色(#FFF)，鼠標移至按鈕上時顯示綠色(#45B03F)
已點選狀態下，預設為綠色(#45B03F)，鼠標移至按鈕上時顯示灰色(#444)
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:21 AM
https://images.plurk.com/5xmSv0Dp1OGt9N8sVxNIPD.png
喜歡按鈕
未點選狀態下，預設為白色(#FFF)，鼠標移至按鈕上時顯示粉紅色(#E8443D)
已點選狀態下，預設為粉紅色(#E8443D)，鼠標移至按鈕上時顯示灰色(#444)
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:21 AM
https://images.plurk.com/16qXeF0TrE6crTzHcnx2Lt.png
加入書籤按紐
未點選狀態下，預設為白色(#FFF)，鼠標移至按鈕上時顯示水藍色(#5ABAC5)
已點選狀態下，預設為水藍色(#5ABAC5)，鼠標移至按鈕上時顯示灰色(#444)
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:22 AM
https://images.plurk.com/5Vrn6DaTJBw3J6yRcUCFp7.png
禮物按鈕(贈送噗幣/確認收到的噗幣)
預設為白色(#FFF)，鼠標移至按鈕上時顯示藍色(#3667A5)
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:22 AM
https://images.plurk.com/5g2Xb3oJCHWmNhUkEPE5nC.png
其餘選項按紐(最右側的向下箭頭)
預設顏色未更改(預設顏色是淺灰色，#AFB8CC)
鼠標移至按鈕上時，以及被點選狀態時，顯示白色(#FFF)
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:24 AM
Mon, Apr 8, 2019 8:47 AM
這些色碼中除了純白色(#FFF)以外，都是直接挪用噗浪預設的按鈕背景色，把它改成hover時顯示的顏色
https://images.plurk.com/OhZ5sRgvAQwmYEvs0WNah.png
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:39 AM
Mon, Apr 8, 2019 8:49 AM
噗首追加了未使用語法的系統預設狀態下的畫面gif，可對照參考喔
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 8:39 AM
----
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 11:10 AM
Mon, Apr 8, 2019 11:38 AM
再稍微補充，將前兩段的語法稍作修改就可以了
https://images.plurk.com/6uLEA3WOp6NYfLqIlphhR9.png
https://i.imgur.com/BVkBe3G.gif
噗首功能列整體統一背景（1）
預設為黑色(#000)背景，鼠標移至各按鈕上時無背景
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 11:19 AM
Mon, Apr 8, 2019 11:38 AM
https://images.plurk.com/38X6QslW9X7lfwdGLBS215.png
https://i.imgur.com/8b3vjR1.gif
噗首功能列整體統一背景（2）
預設無背景，鼠標移至各按鈕上時為灰色(#888)背景
奏◎2434沼
@ncy944123
Mon, Apr 8, 2019 11:21 AM
----
載入新的回覆