Skip to content

Commit

Permalink
Update layout to match latest Chrome UI
Browse files Browse the repository at this point in the history
  • Loading branch information
BenCSIRO committed Aug 31, 2018
1 parent e528b5f commit 8171483
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 18 deletions.
77 changes: 60 additions & 17 deletions chrome/_browser.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@

#navigator-toolbox :-moz-any(.toolbarbutton-1, .bookmark-item)
{
max-height: 32px !important;

font-size: 12px !important;
padding: 0 !important;
margin: 0 !important;
Expand Down Expand Up @@ -145,27 +147,52 @@
margin: 1px !important;
padding: 2px !important;
background-clip: padding-box !important;
min-height: 24px !important;
position: relative !important;
overflow: visible !important;
}

#urlbar[focused]
{
box-shadow:
0 0 0 2px var(--textbox-outer-color-focused),
0 0 0 2px var(--textbox-inner-color-focused) inset !important;
background-color: var(--textbox-background-color-focused) !important;
}

#urlbar[focused]::after
{
display: -moz-box !important;
content: "";
position: absolute !important;
left: -1px;
right: -1px;
top: -1px;
bottom: -1px;
border-radius: 99px;
border: 2px solid var(--textbox-outer-color-focused);
}

#page-action-buttons
{
color: var(--toolbar-color) !important;
}

#page-action-buttons > :-moz-any(#pocket-button-box, #pageActionButton),
#page-action-buttons > :-moz-any(#pageActionSeparator, #pocket-button-box, #pageActionButton),
.urlbar-history-dropmarker
{
display: none !important;
}

#pageActionSeparator
{
height: 24px !important;
}

.urlbar-icon
{
min-width: 32px !important;
height: 24px !important;
padding: 4px !important;
}

#star-button
{
list-style-image: url(star.svg) !important;
Expand Down Expand Up @@ -225,6 +252,8 @@

.tabbrowser-tab
{
min-height: var(--tab-min-height) !important;

overflow: visible !important;
font-size: 12px !important;

Expand All @@ -234,6 +263,8 @@

.scrollbutton-down,
.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.arrowscrollbox-overflow-end-indicator,
#alltabs-button
{
display: none !important;
Expand Down Expand Up @@ -299,10 +330,12 @@
transition: fill .3s var(--ease-basic) !important;
}

.tabbrowser-tab::before
.tabbrowser-tab::before,
.tabbrowser-tab:last-of-type::after
{
content: "";
display: -moz-box;
content: "" !important;
display: -moz-box !important;
width: 1px !important;
padding: 0 !important;
margin-top: 8px !important;
margin-bottom: 8px !important;
Expand All @@ -311,7 +344,8 @@
opacity: 1 !important;
}

.tabbrowser-tab:-moz-any(:hover, [visuallyselected])::before,
.tabbrowser-tab:-moz-any(:hover, [visuallyselected], :first-of-type)::before,
.tabbrowser-tab:-moz-any(:hover, [visuallyselected], :first-of-type)::after,
.tabbrowser-tab:hover + .tabbrowser-tab::before
{
opacity: 0 !important;
Expand Down Expand Up @@ -374,9 +408,13 @@
display: none !important;
}

#tabbrowser-tabs[overflow] .tabbrowser-tab:not([visuallyselected]) .tab-close-button
{
display: none !important;
}

.titlebar-placeholder[type=post-tabs],
.closing-tabs-spacer,
.arrowscrollbox-overflow-end-indicator
.closing-tabs-spacer
{
display: none !important;
}
Expand All @@ -386,6 +424,17 @@
width: 13px !important;
}

#tabbrowser-tabs .tabs-newtab-button
{
margin-left: 6px !important;
}

/* Simple New Tab Button */
#_42b6f73f-e197-466e-9059-bd40982e88ce_-browser-action
{
list-style-image: url(new-tab.svg) !important;
}

/* macOS */
@media (-moz-mac-yosemite-theme)
{
Expand All @@ -397,17 +446,11 @@
}
}

#_42b6f73f-e197-466e-9059-bd40982e88ce_-browser-action
{
list-style-image: url(new-tab.svg) !important;
}


@media (min--moz-device-pixel-ratio: 2)
{
#navigator-toolbox::after
{
border-top: .5px solid var(--chrome-secondary-bckground-color) !important;
border-top: .5px solid var(--chrome-secondary-background-color) !important;
border-bottom-width: .5px !important;
}

Expand Down
2 changes: 1 addition & 1 deletion chrome/_vars.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
#titlebar,
#tabbrowser-tabs
{
--tab-min-height: 36px !important;
--tab-min-height: 34px !important;
}

#main-window[privatebrowsingmode],
Expand Down

0 comments on commit 8171483

Please sign in to comment.