前往
大廳
主題

火狐Firefox CSS樣式:圖示按鈕加框 65+ 緊湊

—— | 2019-03-06 14:38:28 | 巴幣 0 | 人氣 266

/*****圖示框*******/
@namespace html url("http://www.w3.org/1999/xhtml");

* {
    -moz-outline-radius: 0px !important;
    border-radius: 0px !important;
}

/*固定網址列高度*/
#urlbar, .searchbar-textbox{
background: none !important;
box-shadow: none !important;
min-height: 28px !important;
max-height: 28px !important;
border-radius:0px !important;
-moz-appearance: none !important;
}

/*導航列高度*/
#nav-bar > *{
margin:-1px 0px -1px 2px !important;/
}
#nav-bar {
    box-shadow:0 1px 3px 0 rgba(0, 0, 0, .2);
}
/*邊框*/
#nav-bar toolbarbutton[type="menu-button"] .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#nav-bar .toolbarbutton-1:not([checked]):not([open]):not(:active) > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([checked]):not([open]):not(:active) > .toolbarbutton-text,
#nav-bar .toolbarbutton-1:not([checked]):not([open]):not(:active) > .toolbarbutton-badge-stack,
#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active) > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {    
  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
              0 0 0 2px rgba(255,255,255,.1) inset,
              0 0 0 1px rgba(0,0,0,.3) inset !important;
              border-radius:0px !important;
              margin-left: -5px !important;
}
#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {    
  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
              0 0 0 1.5px rgba(255,255,255,.1) inset,
              0 0 3.5px hsl(190,90%,80%),
              0 0 0 1px rgba(0,0,0,.3) inset !important;  
              border-radius:0px !important;
              margin-left: -5px !important;
}
#nav-bar toolbarbutton[type="menu"][open]:not([disabled]) .toolbarbutton-icon,
#nav-bar toolbarbutton[type="menu-button"]:not([open]):hover:not([disabled]):active .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active,:active, [open]) > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active,:active) > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active,:active) > .toolbarbutton-text,
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active,:active) > .toolbarbutton-badge-stack {   
  box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
              0 0 0 2px rgba(255,255,255,.1) inset,
              0 0 0 1px rgba(0,0,0,.3) inset !important;
              border-radius:0px !important;
              margin-left: -5px !important;
}

/*去除前進後退按鈕圓圈*/
#nav-bar #back-button > .toolbarbutton-icon,
#nav-bar #forward-button > .toolbarbutton-icon{
    -moz-appearance: none !important;
    border: 0px solid transparent !important;
    box-shadow: none !important;
    background: none !important;
}
/*前進後退按鈕調整*/
#back-button,#forward-button {
    -moz-appearance: none !important;
}
#forward-button {
    -moz-appearance: none !important;
}

/*前進後退按鈕常亮*/
#back-button:not([checked]):not([open]):not(:active) > .toolbarbutton-icon,#forward-button:not([checked]):not([open]):not(:active) > .toolbarbutton-icon{opacity:1 !important;}
/*有可用前進後退狀態時變色提示*/
#back-button:not([disabled=true]) > .toolbarbutton-icon,
#forward-button:not([disabled=true]) > .toolbarbutton-icon{fill: #66CDAA !important;}
/*前進後退按鈕固定大小*/
#nav-bar #back-button > .toolbarbutton-icon,#nav-bar #forward-button > .toolbarbutton-icon{width:28px !important;height: 28px !important;}
/*前進後退按鈕*/
#nav-bar #back-button > .toolbarbutton-icon,
#nav-bar #forward-button > .toolbarbutton-icon{padding:6px 5px !important;border:1px solid #B3B3B3 !important;border-radius:0px !important;}
#nav-bar #forward-button > .toolbarbutton-icon{margin-left:-5px !important;}
#nav-bar #back-button > .toolbarbutton-icon{margin-left:-3px !important;margin-right:2px !important;}
#back-button:active,#forward-button:active{position:fixed !important;margin-left:0px !important;}
#reload-button:active{position:fixed !important;margin:0px !important;}
#stop-reload-button[animate] > #reload-button .toolbarbutton-animatable-image, #stop-reload-button[animate] > #stop-button .toolbarbutton-animatable-image {background:center !important;}

/*導航列最前最後圖示距離調整*/
#urlbar {margin-left: -3px !important}
#urlbar-container{margin-right:-3px !important}
#PanelUI-menu-button{margin-left: -7px !important;margin-right: -3px !important;}
.searchbar-textbox{margin-left:-7px !important;}
#searchbar{margin-left:4px !important;margin-right:-3px !important;}

創作回應

更多創作