mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2025-12-15 15:20:33 -08:00
Fix: URL View - As Launcher
- https://alternativeto.net/category/utilities/application-launcher/
This commit is contained in:
alstjr7375
parent
050f06d867
commit
f9d71cc029
6 changed files with 285 additions and 40 deletions
|
|
@ -3769,38 +3769,40 @@
|
|||
}
|
||||
}
|
||||
/*= URL Bar - Reduce Padding =================================================*/
|
||||
@supports -moz-bool-pref("userChrome.padding.urlbar") {
|
||||
:root:not([uidensity="touch"]) #urlbar-container,
|
||||
:root:not([uidensity="touch"]) #search-container {
|
||||
padding-block: 3px !important;
|
||||
/* Original: 4px */
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.urlView.as_launcher") {
|
||||
@supports -moz-bool-pref("userChrome.padding.urlbar") {
|
||||
:root:not([uidensity="touch"]) #urlbar-container,
|
||||
:root:not([uidensity="touch"]) #search-container {
|
||||
padding-block: 3px !important;
|
||||
/* Original: 4px */
|
||||
}
|
||||
|
||||
:root:not([uidensity="compact"]) #urlbar-container,
|
||||
:root:not([uidensity="compact"]) #search-container {
|
||||
padding-block: 2px !important;
|
||||
}
|
||||
:root:not([uidensity="compact"]) #urlbar-container,
|
||||
:root:not([uidensity="compact"]) #search-container {
|
||||
padding-block: 2px !important;
|
||||
}
|
||||
|
||||
/* spread menu */
|
||||
:root:not([uidensity]) .urlbarView-row {
|
||||
padding-block: 1px !important;
|
||||
/* Original: 2px */
|
||||
}
|
||||
/* spread menu */
|
||||
:root:not([uidensity]) .urlbarView-row {
|
||||
padding-block: 1px !important;
|
||||
/* Original: 2px */
|
||||
}
|
||||
|
||||
:root[uidensity="compact"] .urlbarView-row {
|
||||
padding-block: 0px !important;
|
||||
}
|
||||
:root[uidensity="compact"] .urlbarView-row {
|
||||
padding-block: 0px !important;
|
||||
}
|
||||
|
||||
:root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) {
|
||||
padding-block: 8px !important;
|
||||
/* Original: 10px */
|
||||
}
|
||||
:root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) {
|
||||
padding-block: 8px !important;
|
||||
/* Original: 10px */
|
||||
}
|
||||
|
||||
:root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) {
|
||||
padding-block: 2px !important;
|
||||
:root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) {
|
||||
padding-block: 2px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.padding.urlView_expanding") {
|
||||
@supports -moz-bool-pref("userChrome.padding.urlView_expanding") or -moz-bool-pref("userChrome.urlView.as_launcher") {
|
||||
#urlbar[breakout][breakout-extend] {
|
||||
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
|
||||
left: 0 !important;
|
||||
|
|
@ -3812,7 +3814,8 @@
|
|||
padding-block: 0 !important;
|
||||
padding-inline: var(--urlbar-container-padding, 0px) !important;
|
||||
}
|
||||
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.padding.urlView_expanding") {
|
||||
#urlbar[breakout][breakout-extend] > #urlbar-background {
|
||||
animation-name: none !important;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
|
||||
|
|
@ -8326,6 +8329,105 @@
|
|||
}
|
||||
}
|
||||
/** Url View UI ***************************************************************/
|
||||
/*= Url View - Looks like Launcher ===========================================*/
|
||||
@supports -moz-bool-pref("userChrome.urlView.as_launcher") {
|
||||
/* Init & Base Layout */
|
||||
.urlbarView {
|
||||
--urlbarView-favicon-width: 32px;
|
||||
/* Original: 16px */
|
||||
--uc-urlView-typeIcon-size: 18px;
|
||||
--uc-urlView-icon-size-differ: 14px;
|
||||
--uc-searchBar-icon-size: 20px;
|
||||
--uc-searchBar-button-size: 32px;
|
||||
--uc-urlView-row-padding: 8px;
|
||||
--uc-urlView-row-bottom: 2px;
|
||||
--uc-urlView-margin: calc(var(--uc-sidebar-activate-width, 18rem) + var(--toolbarbutton-inner-padding));
|
||||
position: fixed !important;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 12vh !important;
|
||||
width: calc(100% - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important;
|
||||
/* paddding as margin */
|
||||
margin-inline: 0 !important;
|
||||
padding-inline: calc(5px + var(--urlbar-container-padding)) !important;
|
||||
/* background */
|
||||
background-color: var(--toolbar-field-focus-background-color) !important;
|
||||
background-clip: border-box;
|
||||
border: 1px solid var(--arrowpanel-border-color) !important;
|
||||
border-radius: var(--toolbarbutton-border-radius) !important;
|
||||
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
|
||||
}
|
||||
|
||||
.urlbarView-body-inner {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
/* Big icons */
|
||||
:root[uidensity="compact"] .urlbarView {
|
||||
--urlbarView-favicon-width: 24px;
|
||||
/* Original: 16px */
|
||||
--uc-urlView-typeIcon-size: 16px;
|
||||
--uc-urlView-icon-size-differ: 8px;
|
||||
--uc-searchBar-icon-size: 18px;
|
||||
--uc-searchBar-button-size: 30px;
|
||||
}
|
||||
|
||||
:root[uidensity="touch"] .urlbarView {
|
||||
--uc-urlView-row-padding: 17px;
|
||||
--uc-urlView-row-bottom: 11px;
|
||||
}
|
||||
|
||||
.urlbarView-row:not([type="tip"], [type="dynamic"]) {
|
||||
position: relative;
|
||||
min-height: calc(var(--urlbarView-favicon-width) + var(--uc-urlView-row-padding)) !important;
|
||||
}
|
||||
.urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-row-inner {
|
||||
height: var(--urlbarView-favicon-width) !important;
|
||||
}
|
||||
.urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-favicon {
|
||||
position: absolute;
|
||||
}
|
||||
.urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-title {
|
||||
padding-inline-start: calc(
|
||||
var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)
|
||||
) !important;
|
||||
}
|
||||
.urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-type-icon {
|
||||
width: var(--uc-urlView-typeIcon-size) !important;
|
||||
height: var(--uc-urlView-typeIcon-size) !important;
|
||||
margin-inline-start: calc(var(--uc-urlView-icon-size-differ) + var(--urlbarView-item-inline-padding)) !important;
|
||||
/* Original: 8px */
|
||||
bottom: var(--uc-urlView-row-bottom);
|
||||
}
|
||||
.urlbarView-row[dynamicType="quickactions"] .urlbarView-favicon-img {
|
||||
width: var(--urlbarView-favicon-width) !important;
|
||||
/* Original: 16px */
|
||||
height: var(--urlbarView-favicon-width) !important;
|
||||
/* Original: 16px */
|
||||
}
|
||||
.urlbarView-row[dynamicType="quickactions"] .urlbarView-label {
|
||||
font-size: 0.95em !important;
|
||||
/* Original: 11px */
|
||||
}
|
||||
|
||||
:root[uidensity="touch"] .urlbarView-row {
|
||||
padding-block: 6px !important;
|
||||
}
|
||||
:root[uidensity="touch"] .urlbarView-row-inner {
|
||||
padding-block: 11px !important;
|
||||
}
|
||||
|
||||
#urlbar .searchbar-engine-one-off-item {
|
||||
min-width: var(--uc-searchBar-button-size) !important;
|
||||
/* Original: 28px */
|
||||
height: var(--uc-searchBar-button-size) !important;
|
||||
}
|
||||
#urlbar .searchbar-engine-one-off-item > .button-box > .button-icon {
|
||||
width: var(--uc-searchBar-icon-size) !important;
|
||||
/* Original: 16px */
|
||||
height: var(--uc-searchBar-icon-size) !important;
|
||||
}
|
||||
}
|
||||
/*= Url View - Always show page actions ======================================*/
|
||||
@supports -moz-bool-pref("userChrome.urlbar.always_show_page_actions") {
|
||||
#urlbar:not([breakout-extend="true"]) #pageActionButton {
|
||||
|
|
|
|||
|
|
@ -30,8 +30,23 @@
|
|||
}
|
||||
|
||||
/*= URL Bar - Reduce Padding =================================================*/
|
||||
@include Option("userChrome.padding.urlbar") {
|
||||
@import "urlbar";
|
||||
@include NotOption("userChrome.urlView.as_launcher") {
|
||||
@include Option("userChrome.padding.urlbar") {
|
||||
@import "urlbar";
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.padding.urlView_expanding", "userChrome.urlView.as_launcher") {
|
||||
#urlbar[breakout][breakout-extend] {
|
||||
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
|
||||
height: var(--urlbar-height) !important;
|
||||
padding-block: 0 !important;
|
||||
padding-inline: var(--urlbar-container-padding, 0px) !important;
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.padding.urlView_expanding") {
|
||||
@import "urlview_expanding";
|
||||
|
|
|
|||
|
|
@ -1,15 +1,3 @@
|
|||
#urlbar[breakout][breakout-extend] {
|
||||
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
|
||||
height: var(--urlbar-height) !important;
|
||||
padding-block: 0 !important;
|
||||
padding-inline: var(--urlbar-container-padding, 0px) !important;
|
||||
}
|
||||
|
||||
#urlbar[breakout][breakout-extend] > #urlbar-background {
|
||||
animation-name: none !important;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
|
||||
|
|
|
|||
134
src/urlview/_as_launcher.scss
Normal file
134
src/urlview/_as_launcher.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
//-- Mixin ---------------------------------------------------------------------
|
||||
$_URL_ROW_INNER_PADDING: 6px; // .urlbarView-row-inner
|
||||
|
||||
$_urlViewIcon: 32px;
|
||||
$_urlViewTypeIcon: 18px;
|
||||
$_urlViewTypeIconMargin: 2px;
|
||||
$_searchBarIcon: 20px;
|
||||
$_searchBarButton: 32px;
|
||||
@mixin _urlViewCompact() {
|
||||
$_urlViewIcon: 24px;
|
||||
$_urlViewTypeIcon: 16px;
|
||||
$_urlViewTypeIconMargin: 0px;
|
||||
$_searchBarIcon: 18px;
|
||||
$_searchBarButton: 30px;
|
||||
|
||||
:root[uidensity="compact"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin _urlViewCompactInit() {
|
||||
--urlbarView-favicon-width: #{ $_urlViewIcon }; /* Original: 16px */
|
||||
--uc-urlView-typeIcon-size: #{ $_urlViewTypeIcon };
|
||||
--uc-urlView-icon-size-differ: #{ $_urlViewIcon - $_urlViewTypeIcon };
|
||||
|
||||
--uc-searchBar-icon-size: #{ $_searchBarIcon };
|
||||
--uc-searchBar-button-size: #{ $_searchBarButton };
|
||||
}
|
||||
|
||||
$_urlRowPadding: 2px; //.urlbarView-row
|
||||
@mixin _urlViewTouch() {
|
||||
$_urlRowPadding: 11px;
|
||||
|
||||
:root[uidensity="touch"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin _urlViewTouchInit() {
|
||||
--uc-urlView-row-padding: #{ $_URL_ROW_INNER_PADDING + $_urlRowPadding };
|
||||
--uc-urlView-row-bottom: #{ $_urlRowPadding };
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
/* Init & Base Layout */
|
||||
.urlbarView {
|
||||
@include _urlViewCompactInit;
|
||||
@include _urlViewTouchInit;
|
||||
|
||||
--uc-urlView-margin: calc(var(--uc-sidebar-activate-width, 18rem) + var(--toolbarbutton-inner-padding));
|
||||
|
||||
position: fixed !important;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 12vh !important;
|
||||
width: calc(100% - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important;
|
||||
|
||||
/* paddding as margin */
|
||||
margin-inline: 0 !important;
|
||||
padding-inline: calc(5px + var(--urlbar-container-padding)) !important;;
|
||||
|
||||
/* background */
|
||||
background-color: var(--toolbar-field-focus-background-color) !important;
|
||||
background-clip: border-box;
|
||||
border: 1px solid var(--arrowpanel-border-color) !important;
|
||||
border-radius: var(--toolbarbutton-border-radius) !important;
|
||||
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
|
||||
}
|
||||
.urlbarView-body-inner {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
/* Big icons */
|
||||
@include _urlViewCompact {
|
||||
.urlbarView {
|
||||
@include _urlViewCompactInit;
|
||||
}
|
||||
}
|
||||
@include _urlViewTouch {
|
||||
.urlbarView {
|
||||
@include _urlViewTouchInit;
|
||||
}
|
||||
}
|
||||
|
||||
.urlbarView-row {
|
||||
&:not([type="tip"], [type="dynamic"]) {
|
||||
position: relative;
|
||||
min-height: #{ calc(var(--urlbarView-favicon-width) + var(--uc-urlView-row-padding)) } !important;
|
||||
|
||||
.urlbarView-row-inner {
|
||||
height: var(--urlbarView-favicon-width) !important;
|
||||
}
|
||||
.urlbarView-favicon {
|
||||
position: absolute;
|
||||
// padding-block: $_URL_ROW_INNER_PADDING;
|
||||
}
|
||||
.urlbarView-title {
|
||||
padding-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)) !important;
|
||||
}
|
||||
.urlbarView-type-icon {
|
||||
width: var(--uc-urlView-typeIcon-size) !important;
|
||||
height: var(--uc-urlView-typeIcon-size) !important;
|
||||
margin-inline-start: calc(var(--uc-urlView-icon-size-differ) + var(--urlbarView-item-inline-padding)) !important; /* Original: 8px */
|
||||
bottom: var(--uc-urlView-row-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
&[dynamicType="quickactions"] {
|
||||
.urlbarView-favicon-img {
|
||||
width: var(--urlbarView-favicon-width) !important; /* Original: 16px */
|
||||
height: var(--urlbarView-favicon-width) !important; /* Original: 16px */
|
||||
}
|
||||
.urlbarView-label {
|
||||
font-size: 0.95em !important; /* Original: 11px */
|
||||
}
|
||||
}
|
||||
}
|
||||
@include _urlViewTouch {
|
||||
.urlbarView-row {
|
||||
padding-block: $_URL_ROW_INNER_PADDING !important;
|
||||
}
|
||||
.urlbarView-row-inner {
|
||||
padding-block: $_urlRowPadding !important;
|
||||
}
|
||||
}
|
||||
|
||||
#urlbar .searchbar-engine-one-off-item {
|
||||
min-width: var(--uc-searchBar-button-size) !important; /* Original: 28px */
|
||||
height: var(--uc-searchBar-button-size) !important;
|
||||
|
||||
> .button-box > .button-icon {
|
||||
width: var(--uc-searchBar-icon-size) !important; /* Original: 16px */
|
||||
height: var(--uc-searchBar-icon-size) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
/*= Url View - Looks like Launcher ===========================================*/
|
||||
@include Option("userChrome.urlView.as_launcher") {
|
||||
@import "as_launcher";
|
||||
}
|
||||
|
||||
/*= Url View - Always show page actions ======================================*/
|
||||
@include Option("userChrome.urlbar.always_show_page_actions") {
|
||||
@import "always_show_page_actions";
|
||||
|
|
|
|||
1
user.js
1
user.js
|
|
@ -138,6 +138,7 @@ user_pref("userChrome.rounding.square_tab", false);
|
|||
// user_pref("userChrome.padding.urlView_result", true);
|
||||
// user_pref("userChrome.padding.panel_header", true);
|
||||
|
||||
// user_pref("userChrome.urlView.as_launcher", true);
|
||||
// user_pref("userChrome.urlView.always_show_page_actions", true);
|
||||
// user_pref("userChrome.urlView.move_icon_to_left", true);
|
||||
// user_pref("userChrome.urlView.go_button_when_typing", true);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue