Komica Menu Plus (AKA Kool-Mica Menu 選單) by hollen9

Details

Authorhollen9

LicenseMIT

Categorykomica1.org,komica2.net

Created7 months, 2 weeks ago

Updated7 months, 2 weeks ago

Size18 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

左側選單視覺加強

Notes

更新紀錄

2024-01-31 T 02:38 v1.46

因應 komica.org 網域失效，新增 komica1.org。

2018-10-20 T 17:56 v1.45

因應 K2 新版選單，套用對象新增 bbsmenu2018.html。

2018-09-15 T 03:51 v1.44

修正 Chrome 網站標題顯示錯位的錯誤。經重新調校已可正常顯示於 Chrome 和 Firefox。(h3 的邊界、文字尺寸、留白設定問題)

2018-09-13 T 00:18 v1.43

修正 NPNT 的錯誤 Regex。

2018-09-12 T 23:30 v1.42

其他站點的 Icon 顯示正常了。不需要額外解法。

2018-09-12 T 23:13 v1.41

修復網址錯誤，如果發現更新之後有問題，可以在更新一次，因為我剛才短短十分鐘內 Commit 了 6 次以上。

2018-09-12 T 22:49 v1.4

もっと！もっと！支援更多的版面：NTPT、K3、偽島、偽裏島

2018-09-12 T 02:56 v1.3

やったぜ！K2 裏島也可以用囉～視覺設計完全相同。（想不到還真的可以用一套 CSS 同時對應標準 ul li 和傳統 font br 呢）

2018-09-11 T 21:49 v1.25

Bug 修正：解決 Chrome 渲染錯誤問題。如果還是遇到問題，請更新至最新版的 Chrome。

2018-09-11 T 21:27 v1.24

輸入框視覺調整。修正滑鼠移過搜尋結果的目錄標籤，導致第一選像反白。

2018-09-11 T 19:38 v1.23

調整按鈕移過、按下的效果。若點書籤新增、移動按鈕，旁邊的管管改動文字則會消散。新增迷你模式 (RWD)：將選單框架頁拉到最小，會變成單字顯示。搜尋輸入框視覺扁平化。

2018-09-10 T 14:02 v1.22

島娘變得超興奮！嗯！

2018-09-10 T 13:38 v1.21

最上方浮動的目錄標籤，現在會變黃以作醒目。改變選像放大的方式，避免畫面外溢使得頁面可以左右捲動。維持和上一版本相同外觀，但位置以更好的方式重新定義。CSS最小化（移除註解、斷行），進而增進效能。

2018-09-10 v1.2

修正小按鈕樣式，更貼近扁平式風格。同時也改進了效能。輸入框高度極值重設。(為了與「K 島元素風」相容)改變 icon 島娘出現位置。調整第一選項以上邊界，使之貼近於目錄標籤。CSS最小化（移除註解、斷行），進而增進效能。

2018-09-09 v1.1

改成扁平式風格。管管的紅色小字預設為選項標註紅底但不顯示字，但於滑鼠移過時顯示。支援 CSS Sticky的瀏覽器，區塊標題將會隨著使用者捲動，固定於畫面上方──就像在替換卡片一般。修正搜尋結果顯示異常問題。

2017-11-18 v1.04

ADD::總選單::新增小按鈕在未進入編輯模式前分別向左右兩側位移效果──乃為了修正按鈕透明但仍點選得到的問題。

2017-11-12 v1.03

ADD::總選單::頁面橫向卷軸隱藏。ADD::總選單::底部計數器固定在頁底，不受捲動效果引響；並且隱藏該站 logo，僅保留人數的部分。ADD::總選單::賦予兩側書籤小按鈕新視覺效果。轉呀轉~MOD::總選單::修正小按鈕因為z-index 順序錯誤點擊不到的問題。(因為我本機端兩個新舊 script 重疊，導致先前沒有注意到這個問題。)MOD::總選單::修正沒啟用編輯模式，也顯示小按鈕的問題。MOD::總選單::微調搜尋結果位置。

2017-11-10 v1.02

ADD::總選單::新增連結醒目效果：滑鼠移過字會放大並立即襯底，點擊後若鼠標移開襯底換慢慢淡出。MOD::總選單::修正 Firefox瀏覽器看不到小按鈕亮黃邊的醒目提示。MOD::總選單::配合 Firefox 瀏覽器，將搜尋欄位的寬度改為 90%。MOD::總選單::將搜尋欄位的輸入文字置中。

2017-11-09 v1.01

MOD::this::過濾後的清單外觀，並賦予醒目特效。

2017-11-08 v1.00

MOD::this::因應新版選單，重新設計。（新版的 HTML 結構整潔很多，必須給個讚~）To do:過濾後的清單還沒改變外觀，以及尚未賦予醒目特效。因為我想睡覺了，所以今天先改到這邊啦~ 先求有再求好。

2017-09-14 v0.90

ADD::this::基本樣式上線，配合原本的介面。(應該不適合其他島民做的暗色介面或各版提供的夜晚版本)

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name         Komica Menu Plus (AKA Kool-Mica Menu 選單)
@version      20240130.18.47
@namespace    https://userstyles.world/user/hollen9
@description  左側選單視覺加強
@author       hollen9
@license      MIT
==/UserStyle== */

@-moz-document regexp("(https|http)://komica.org/bbsmenu.html"), regexp("(https|http)://komica1.org/bbsmenu.html"), regexp("(https|http)://komica2.net/bbsmenu.htm"), regexp("(https|http)://.*npnt.me/menu.htm"), regexp("(https|http)://ca2.camiko.org/bbsmenu.htm"), regexp("(https|http)://k3-bbs.com/menu.htm"), regexp("(https|http)://camiko.org/bbsmenu.htm"), regexp("(https|http)://komica2.net/bbsmenu2018.html") {
/* Darken */
/*body {
    background: #2A2A2E !important;
}*/




/* 全域 */
body {
    /*, */
    font-family: 'Noto Sans CJK', 'Noto Sans CJK TC', 'Noto Sans TC', '微軟正黑體', Arial, STHeiti, sans-serif;
    margin: 0;
    text-align: center;
    /*background-color: #FFFFEE;*/
    /*background: #E2E2D3;*/
    /*overflow-x: hidden;*/
    overflow-y: scroll;
}

/* 搜尋框 */
div#searchmain {
    position: fixed;
    top: 30px;
    background:#e2e2d3;
    /*background: linear-gradient(to bottom, rgba(255, 255, 238, 1) 50%, rgba(255, 255, 238, 0) 100%);*/
    /*height: 50px;*/
    width: 100%;
    z-index: 5;
    overflow: visible;
    
    border-bottom: 2px solid #e2e2d3;
}

body > div#searchmain > input {
    min-height: unset;
    max-height: unset;
    /*width: 6.5rem;*/
    width: 95%;
    height: 20px;
    margin: 0px auto;
    padding: 0px;
    /*border: 1px #555 solid;*/
    /*border-radius: 2px;*/
    display: block;
    text-align: center;
    box-shadow: none;
    border: 0;
    transition: .2s;
    border-radius: 0px !important;
    color: #111 !important;
    
    background-color: transparent;
} div#searchmain > input:not(:focus):hover{
    box-shadow: 0 0 5px #000;
} div#searchmain > input:focus {
    background-color: #FBFBEA;
    outline: 2px solid #FBFBEA;
    width: 100%;
} div#searchmain > input::placeholder {
    
} div#searchmain > input:focus::placeholder {
    color: #FBFBEA;
    color: transparent;
}

div#searchmain > input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #AAA;
    text-align: center;
}
div#searchmain > input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #AAA;
   opacity:  1;
    text-align: center;
}
div#searchmain > input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #AAA;
   opacity:  1;
    text-align: center;
}
div#searchmain > input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #AAA;
    text-align: center;
}
div#searchmain > input::-ms-input-placeholder { /* Microsoft Edge */
   color: #AAA;
    text-align: center;
}



/* 頂部 KOMICA 字樣 */
#searchmain + h3:nth-of-type(1),
body[text][bgcolor][alink][vlink] > h3:nth-of-type(1) /* Komica2 */
{
    position: fixed;
    left: 0px;
    display: block;
    width: 100%;
    margin: 0;
    height: 27px;
    z-index: 5;
    background: #E2E2D3;
    font-weight: 900;
    font-family: "Trebuchet MS" !important;
    font-size: 23px;
    line-height: 35px;
    white-space: nowrap;
    overflow: hidden;
    
    padding-bottom: 5px;
} #searchmain + h3:nth-of-type(1) {
    top: 0px; /*var page_top_margin */
    
} body[text][bgcolor][alink][vlink] > h3:nth-of-type(1) /* Komica2 */ {
    top: 0px;
    
    text-transform: uppercase;
} body[text][bgcolor][alink][vlink] /* Komica2 */{
    margin-top: 30px; /*var page_top_margin */
}

/*@media only screen and (min-width: 0px) {
    h3 {
        display: none;
    }
}*/

@media only screen and (min-width: 100px) {
    h3 {
        display: inline;
    }
}



h3:before {
    content:'';
    transform: scalex(-1);
    background-image: url('http://komica.org/favicon.ico');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    transform-origin: center center;
} h3:hover:before{
    animation-play-state: running;
    animation-name: shake-hard;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
} h3:hover:active:before {
    position: fixed;
    background-size: contain;
    background-position: 0px 0px;
    background-repeat: repeat-y;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    outline: 100px solid #000;
    
}

/* 版面清單 */
#list {
    margin-top: 0px;
}
#search-div {
    
}

#list {
    margin-bottom: 20rem;
}

#list ul li.category,
body[text][bgcolor][alink][vlink] > font > b /* Komica2 */
{
    padding: 5px 0;
    color: #030033;
    font-weight: 800;
    font-size: 16px;
    cursor: default;
    z-index: 4;
    /*text-shadow: 0 0 5px;*/
    background-color: #ADDCE7;
    /*background: linear-gradient(to bottom, rgba(255,255,238,1) 0%, rgb(226, 226, 211) 100%);*/
    /*color: #aa7777;*/
} body[text][bgcolor][alink][vlink] > font > b:not(:nth-of-type(1)) /* Komica2 */ {
    margin-top: 1rem;
}

#bookmark {
    margin-top: 50px;
} #bookmark li.category + li {
    margin-top: .0rem;
} #list ul:not(#bookmark) li.category + li {
    margin-top: .0rem;
}

@supports(position:sticky){
    #list ul li.category {
        position: sticky;
        top: 50px;
    }
    
    body[text][bgcolor][alink][vlink] > font > b /* Komica2 */ {
        position: sticky;
        top: 30px;
    }
    
    div#searchmain,
    body[text][bgcolor][alink][vlink] > h3{
        outline: 2rem solid #f5f50b55;
    }
}

#search-div #search-result {
    position: relative;
    top: 5.25em;
}

#search-div #search-result li.bookmark-excluded:first-child {
    
}


#search-div #search-result:after,
#search-div #search-result:after{
    content: "検索結果";
    font-weight: 800;
    font-size: 16px;
    display: block;
    line-height: 2.25rem;
    position: fixed;
    top: 3em;
    left: 0;
    color: #000;
    background: #ADDCE7;
    height: 2.25em;
    width: 100%;
    z-index: 3;
}

#list.bookmark-setting-hide ul li.category a.bookmark-setting {
    
}

#list.bookmark-setting-hide ul li.category a.bookmark-setting::before {
    content: "開始";
} #list.bookmark-setting-hide ul li.category a.bookmark-setting::after {
    content: "";
} #list ul li.category a.bookmark-setting::after {
    content: "完成";
}

#list ul li.category a.bookmark-setting {
    display: inline-block;
    font-size: .5rem;
    
    outline: 0;
}





body[text][bgcolor][alink][vlink] > font { /* Komica2 */
    font-size: 0;
} body[text][bgcolor][alink][vlink] > font > b { /* Komica2 */
    font-size: 16px;
    display: block;
    height: 1.5rem;
} body[text][bgcolor][alink][vlink] > font:after { /* Komica2 */
    /* Bottom Padding*/
    content:'2';
    display: block;
    height: 95%;
}

#list ul li,
#search-div ul#search-result li,
body[text][bgcolor][alink][vlink] > font > a { /* Komica2 */
    height: 1.5rem;
    transition: .012s ease-out;
    white-space: nowrap;
    font-size: 13px;
} body[text][bgcolor][alink][vlink] > font > a { /* Komica2 */
    color: #111 !important;
} body[text][bgcolor][alink][vlink] > font > a ~ br { /* Komica2 */
    display: none;
} 

#list ul li a,
#search-div ul#search-result li a {
    height: 100%;
} 

#list ul li a,
#search-div ul#search-result li a,
body[text][bgcolor][alink][vlink] > font > a /* Komica2 */
{
    display: block;
    text-decoration: none;
    color: #002;
    font-weight: 500;
    line-height: 1.5rem;
    transition: .15s;
    transform: scale(1);
    z-index: 0;
    outline: 1px solid transparent;
}

#list ul li:not(.category) a,
#search-div ul#search-result li:not(.category) a {
    overflow: hidden;
} 


/* Mini Mode */
@media screen and (max-width: 70px){
    #list ul li.category,
    #search-div ul#search-result li.category {
        font-size: 8px;
        height: auto;
        font-weight: normal;
    }
    
    #list ul li.category:first-letter,
    #search-div ul#search-result li.category:first-letter {
        font-size: 12px;
        font-weight: bolder;
    }
    
    #bookmark li.category a:first-letter {
        font-size: unset !important;
    } #bookmark li.category a:after {
        display: none;
    } #bookmark li.category a:before {
        display: none;
    } #bookmark li.category {
        
    }
    
    div#searchmain {
        outline: 0;
    }
    
    h3 {
        visibility: hidden;
        width: 100%;
    }
    
    h3:before {
        position: fixed;
        left:0;
        top:0;
        visibility: visible;
        content: '';
        background-color: #E2E2D3;
        background-position: center center;
        width: 100%;
        height: 30px;
    }
    
    body {
        overflow-x: hidden;
    }
    
    li:not(.category) {
        font-size: 10px;
    }
    
    li a:first-letter {
        font-size: 20px !important;
    }
}



#list ul li a + small,
body[text][bgcolor][alink][vlink] > font > font[color][size] /* Komica2 */{
    
    position: relative;
    bottom: 2em;
    display: block;
    /*min-width: 1.5em;*/
    height: 2em;
    background-color: #eaeda1; /*Highlight Color*/
    color: transparent;
    
    z-index: -1;
    transition: .1s ease-out;
} body[text][bgcolor][alink][vlink] > font > font[color][size] + br + a /* Komica2 */ {
    margin-top: -2em; /*將空出來的高度抵銷掉*/
} body[text][bgcolor][alink][vlink] > font > font[color][size] + br + a:hover /* Komica2 */ {
    margin-top: -1.65em; /*將空出來的高度抵銷掉*/
}

#list ul li:hover a + small,
body[text][bgcolor][alink][vlink] > font > a:hover + font[color][size]/*Komica2*/{
    min-width: 1.5em;
    color: #fff;
    background-color: rgba(183, 0, 1, .7); /*Highlight Color*/
    z-index: 10;
    display: block;
    position: relative;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    
    top: 0px;
} #list ul li a + small:hover,
body[text][bgcolor][alink][vlink] > font > font[color][size]:hover /*Komica2*/{
    display: none;
    border-radius: 0;
}

/* 連結醒目效果 */
#list ul li:not(.category):hover,
#search-div...

Reviews

No reviews yet.