Kemo(咖啡)
1 years ago @Edit 1 years ago

最近看到這篇文章,但套用樣式後不是很滿意。
為了讓團錄看起來更漂亮,又開始回頭研究CSS了......ココフォリアのカスタムCSS 吹き出し | U7D05 BAR
latest #22
Kemo(咖啡)
1 years ago @Edit 1 years ago
給圖片加陰影的語法是什麼啊
Kemo(咖啡)
1 years ago
隱藏skip按鈕跟「關閉」按鈕的語法沒有用
Kemo(咖啡)
1 years ago @Edit 1 years ago
喔喔喔......終於陰影加成功了!
原來我一直動到作者自定義的語法區塊
立即下載
Kemo(咖啡)
1 years ago @Edit 1 years ago
只差分別定義判定成功和失敗的顏色了
Kemo(咖啡)
1 years ago @Edit 1 years ago
先放個比較圖。左圖是舊版語法,右圖是新版語法(未套用客製化語法)。
https://images.plurk.com/5bAlPdmWMi7Y1i35kJUwXw.png https://images.plurk.com/seGbWiiwSCehCy9jScxMt.png
舊版的對話色塊有半透明效果,判定成功與失敗時的字體顏色也有區分。
新版雖然能更改頭貼顯示方式,還有更改各個地方的顏色,但覺得沒有舊版好看,而且字還變小、成功判定跟失敗判定還共用同一個顏色
Kemo(咖啡)
1 years ago
再比較了一下,舊版似乎是直接套用CCFOLIA的預設樣式。
新版的語法中多了許多自定義的語法來改變樣式,所以要怎麼定義判定失敗的屬性呢
Kemo(咖啡)
1 years ago
成功啦
Kemo(咖啡)
1 years ago
研究下來,發現很多自定義樣式的語法使用「.MuiTypography」,於是改研究文字頻道怎麼抓到「失敗判定」的語法,最後猜測「.MuiTypography-colorSecondary」應該是指判定失敗時套用的語法。
最後測試下來確定猜想是正確的!

過程我還F12打開CCFOLIA後台去研究,真的快瘋了
Kemo(咖啡)
1 years ago
最後放一下成果圖
https://images.plurk.com/5Z38uKRPZRspHvVaMlyqpr.png https://images.plurk.com/wfio6D0tIblzmePmmTUNX.png
https://images.plurk.com/5yOngCQYEX0nxaM09RYJXo.png https://images.plurk.com/2kMvYbGmsAQ9jEpYzhfwPY.png https://images.plurk.com/1dfg1MDP1YpMp6AWMVLz3Q.png
Kemo(咖啡)
1 years ago
可以睡覺了
你覺得這算幾分強迫?ww
Kemo(咖啡)
1 years ago
wualan9710006: 滿分10分跟你比的話,這是4分,你是10分
不行了要腦溢血了
等等吃完早餐回去繼續改ww
Kemo(咖啡)
1 years ago
醒來再想怎麼統一立繪的高度表現
Kemo(咖啡)
1 years ago
wualan9710006: 不用睡了不用睡了
Kemo(咖啡)
1 years ago
做成八方對話框的模樣好了,這樣要再調色,看起來還要再加2層內陰影。
https://images.plurk.com/6hQhkScCFEzYqRvcaIxyyn.png
Kemo(咖啡)
1 years ago
嗯!很像了,收工
https://images.plurk.com/4Oukg2WtHU6A3j2dewqXbp.png
Kemo(咖啡)
1 years ago
測試下來,改用高度去限制立繪的表現大小好像比較妥當,但瘦高的圖片就容易壓縮,就只能先這樣了。
Kemo(咖啡)
1 years ago @Edit 1 years ago
隱藏skip按鈕跟「關閉」按鈕的語法,竟然要把OBS內的CCFOLIA切成日文語系才有用????!!!!!!!!
Kemo(咖啡)
1 years ago
隱藏了skip的按鈕,但關閉的按鈕不能隱藏,不然就沒辦法關掉對話框了。
所以讓關閉的按鈕跟背景幾乎同色,就不明顯了
Kemo(咖啡)
1 years ago
找到適合的字體啦!自定義字體超讚
https://images.plurk.com/WKkSzi6JSGaolhxHQ3nJx.png https://images.plurk.com/1yx7H3HkRf96USyReym2fS.png
Kemo(咖啡)
1 years ago
呼......真的可以收工了
back to top