婆罗门
精华
|
战斗力 鹅
|
回帖 0
注册时间 2011-4-2
|
本帖最后由 暁美ほむら 于 2024-7-19 02:26 编辑
userchrome.css推荐,悬浮地址栏,如下图
- /* URL BAR */
- /* Make text in URL bar in the center */
- #nav-bar {
- display: flex;
- justify-content: center;
- }
- #urlbar-container {
- flex: 1;
- max-width: 1000px;
- min-width: 200px;
- margin: auto !important;
- }
- #main-window #urlbar {
- z-index: 9999 !important;
- width: 100% !important;
- margin-top: 0 !important;
- margin-left: 0 !important;
- margin-right: 0 !important;
- transition: width 0.3s ease, left 0.3s ease, margin-top 0.3s ease, margin-left 0.3s ease, margin-right 0.3s ease;
- }
- #main-window #urlbar[breakout][breakout-extend] {
- opacity: 0.97 !important;
- width: 100% !important;
- left: 0;
- right: 0;
- margin-left: auto !important;
- margin-right: auto !important;
- margin-top: 30vh !important;
- transition: width 0.3s ease, left 0.3s ease, margin-top 0.3s ease, margin-left 0.3s ease, margin-right 0.3s ease;
- }
- #urlbar-background,
- #urlbar-input-container {
- --toolbarbutton-border-radius: calc(var(--urlbar-min-height) / 2);
- }
- #urlbar-input-container {
- --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px);
- }
- #urlbar:not([focused]) #urlbar-input {
- text-align: center !important;
- }
- #urlbar:not([breakout][breakout-extend]) #urlbar-input {
- text-align: center !important;
- }
- /*------------------------------------------------*/
- /* Change URL Bar background color */
- @media (prefers-color-scheme: dark) {
- #urlbar-background {
- background-color: #2a2a2a !important;
- }
- }
- @media (prefers-color-scheme: light) {
- #urlbar-background {
- background-color: #d6d6d6 !important;
- }
- }
- @media (prefers-color-scheme: dark) {
- #urlbar-results > *[selected=""] {
- background-color: #424242 !important;
- }
- }
- @media (prefers-color-scheme: light) {
- #urlbar-results > *[selected=""] {
- background-color: #e8e8e8 !important;
- }
- }
- /*------------------------------------------------*/
- /* Hide and Hover icons in URL Bar */
- #nav-bar:not([customizing="true"]):not(.searchButton)
- > #nav-bar-customization-target
- > #urlbar-container:not(:hover)
- > #urlbar:not([focused])
- > #urlbar-input-container
- > #page-action-buttons
- .urlbar-page-action {
- opacity: 0;
- transition-delay: 500ms;
- }
- #nav-bar:not([customizing="true"]):not(.searchButton)
- > #nav-bar-customization-target
- > #urlbar-container:not(:hover)
- > #urlbar:not([focused])
- > #urlbar-input-container
- > #identity-box
- > #identity-permission-box:not([open]) {
- opacity: 0;
- transition-delay: 500ms;
- }
- #page-action-buttons .urlbar-page-action,
- #identity-permission-box,
- #notification-popup-box .notification-anchor-icon {
- transition: opacity 0.2s ease;
- }
- #urlbar #identity-icon-box,
- #urlbar #identity-permission-box {
- opacity: 0 !important;
- margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
- transition: margin-inline-start 100ms linear, opacity 200ms linear;
- }
- #urlbar #identity-box.notSecureText #identity-icon-box {
- margin-inline-start: initial !important;
- opacity: 1 !important;
- color: #e36f6f !important;
- }
- #urlbar #identity-box.extensionPage #identity-icon-box {
- margin-inline-start: initial !important;
- opacity: 1 !important;
- }
- #identity-box:hover #identity-icon-box,
- #identity-box:hover #identity-permission-box,
- #identity-box #identity-permission-box[open="true"] {
- opacity: 1 !important;
- margin-inline-start: initial !important;
- }
- #urlbar-input-container .urlbar-input-box {
- padding-inline-start: 2px !important;
- }
- #identity-box:hover ~ .urlbar-input-box > #urlbar-input {
- mask-image: linear-gradient(to right, transparent, black 3ch) !important;
- }
- #page-action-buttons {
- padding-inline-start: 8px;
- }
- #page-action-buttons .urlbar-page-action {
- margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding));
- opacity: 0;
- transition: margin-inline-end 100ms linear, opacity 200ms linear;
- }
- #page-action-buttons:hover > .urlbar-page-action,
- .urlbar-page-action[open],
- .urlbar-page-action[open] ~ .urlbar-page-action {
- opacity: 1;
- margin-inline-end: 0px !important;
- }
- #identity-box.chromeUI #identity-icon-box {
- opacity: 1 !important;
- margin-inline-start: initial;
- }
- #identity-box.chromeUI::after,
- #identity-box.chromeUI:hover::after {
- opacity: 0 !important;
- }
- #page-action-buttons:not(:hover) #translations-button[translationsactive="true"]:not([open]) {
- visibility:collapse !important;
- }
- /*------------------------------------------------*/
- /* Create visual dots on both sides */
- #identity-box::after,
- #page-action-buttons::before {
- position: relative;
- content: "•••";
- pointer-events: none;
- transition: opacity 100ms ease;
- align-self: center;
- font-size: 0.7em;
- }
- #identity-box::after,
- #page-action-buttons::before {
- opacity: 0.2;
- }
- #identity-box::after {
- transform: rotate(90deg);
- left: 4px;
- }
- #page-action-buttons::before {
- transform: rotate(-90deg);
- right: 4px;
- }
- #identity-box:hover::after,
- #page-action-buttons:hover::before {
- opacity: 0.2 !important;
- transition: opacity 50ms ease;
- pointer-events: none;
- }
- #identity-box[pageproxystate="invalid"]::after,
- #urlbar-input-container[pageproxystate="invalid"]
- > #page-action-buttons::before {
- opacity: 0 !important;
- transition: opacity 50ms ease;
- }
- /* Linux changes for visual dots */
- @media (-moz-platform: linux) {
- #identity-box::after,
- #page-action-buttons::before {
- content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg fill="%23FFFFFF" width="11px" height="11px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 16c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25zM20.25 27c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25zM20.25 5c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25z"></path></svg>');
- transform: none;
- font-size: unset;
- }
- #page-action-buttons::before {
- right: 2px;
- }
- #identity-box::after {
- left: 2px;
- }
- }
- #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button,
- #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button,
- #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button,
- #urlbar-label-box,
- #urlbar-zoom-button {
- background-color: var(--firefoxcss-item-bg-color) !important;
- }
- #urlbar-zoom-button:hover {
- background-color: var(--firefoxcss-urlbar-zoom-button) !important;
- }
- #urlbar-input-container #identity-box > .identity-box-button,
- #tracking-protection-icon-container,
- #urlbar-go-button,
- #page-action-buttons .urlbar-page-action,
- #notification-popup-box {
- border-radius: 8px !important;
- }
- #urlbar-go-button,
- #tracking-protection-icon-container
- {
- display: none !important;
- }
- /*============================================================================================*/
复制代码
|
|