Jump to content
Sign in to follow this  
Lifehacker

Πώς θα κάνουμε τον νέο Firefox 57 Quantum να μοιάζει σαν τον Firefox 56 (Μέρος 1)

Recommended Posts

Πολλοί χρήστες του Firefox (συμπεριλαμβανομένου κι εμένα) βρίσκουν πολύ άσχημο τον νέο 57+ Firefox, ...πήγαν και 'βάλαν τετραγωνισμένες καρτέλες :shocked: 

 

Θα σας δείξω τον τρόπο πως να βάλετε καμπυλωτές καρτέλες..

 

Ανοίξτε μια νέα καρτέλα Firefox και στην γραμμή διεύθυνσης πληκτρολογήστε about:profiles και πατήστε Εnter ή Μετάβαση

 

Στο προφίλ που χρησιμοποιείται και συγκεκριμένα στην γραμμή που γράφει Ριζικός κατάλογος πατήστε Άνοιγμα φακέλου.

 

firefox_custom.png

 

Στον φάκελο που ανοίξατε δημιουργήστε ένα φάκελο με την ονομασία chrome (αν δεν έχει ήδη).

 

Εντός του φακέλου chrome, δημιουργήστε ένα αρχείο και ονομάστε το userChrome.css

 

Ανοίξτε το αρχείο userChrome.css με το Wordpad (ή οποιοδήποτε editor) και αντιγράψτε και επικολλήστε τον κώδικα που ταιριάζει με το θέμα του Firefox: Dark, Default ή Light.

 

Dark

:root {
--tab-curve-width: 30px;
--tabs-border: transparent !important;
}

.arrowscrollbox-scrollbox {
padding-inline-start: 10px !important;
}

/* To be able to see the top border of the tab */
.tab-stack {
margin-top: 2px !important;
}

/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar {
padding-inline-start: 15px !important;
}

.titlebar-placeholder {
border: none !important;
}

/* Remove unneeded styles from Photon */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
border: none !important;
}

.tabbrowser-tab > .tab-stack > .tab-background {
background-image: none !important;
-moz-box-orient: horizontal !important;
background-color: transparent !important;
margin-top: 1px !important;
}

.tab-background[selected=true] {
border: none !important;
}

.tab-line {
display: none !important;
}

.tab-bottom-line {
display: none !important;
}

/* Match height of new tab button (right svg) on hover */
.tabs-newtab-button {
margin: 0 !important;
}

/* overlap the tab curves */
.tab-background {
-moz-margin-end: -15px !important;
-moz-margin-start: -15px !important;
}

/* Begin tab background customizations */
.tab-background[selected=true]::before {
border: none !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
display: -moz-box !important;
background-repeat: no-repeat !important;
}

.tab-background[selected=true]::after {
border: none !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
display: -moz-box !important;
background-repeat: no-repeat !important;
}

.tab-background[selected=true] > spacer {
margin-top: 0px !important;
}

#new-tab-button,
.tabs-newtab-button {
width: calc(36px + 30px) !important;
margin-inline-start: -15px !important;
margin-top: 1px !important;
}

/* Tab hover customizations */

/* Regular tabs */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
display: -moz-box !important;
background-repeat: no-repeat !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
display: -moz-box !important;
background-repeat: no-repeat !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
margin-top: 0px !important;
}

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
.tabs-newtab-button:hover,
.tabs-newtab-button:hover::before,
.tabs-newtab-button:hover::after {
background-color: transparent !important;
}

/* New tab hover customizations */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover {
background-position: 0px 2px, 30px 4px , 36px 2px !important;
background-repeat: no-repeat !important;
background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
}

.tabs-newtab-button:hover > .toolbarbutton-icon {
background: none !important;
background-color: transparent !important;
}

/* Color specific customizations */
:root {
--svg-selected-before: url("data:image/svg+xml;utf8,

 
");

--svg-selected-after: url("data:image/svg+xml;utf8,
 
");

--background-selected-middle:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
linear-gradient(
transparent
2px,
rgb(50, 50, 52) 2px,
rgb(50, 50, 52)
),
none !important;

--svg-hover-before: url("data:image/svg+xml;utf8,
 
");

--svg-hover-after: url("data:image/svg+xml;utf8,
 
");

--background-hover-middle:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
linear-gradient(
transparent
2px,
rgba(255,255,255,.1) 2px,
rgba(255,255,255,.1)
),
none;

--newtab-hover: url("data:image/svg+xml;utf8,
 
"),
linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
url("data:image/svg+xml;utf8,
 
");
}


/* OS-specific color variables */
@media screen and (-moz-windows-theme) {
:root {

}
}

@media not screen and (-moz-windows-theme) {
:root {

}
}

.tab-background[selected=true]::before {
background-image: var(--svg-selected-before) !important;
}
.tab-background[selected=true]::after {
background-image: var(--svg-selected-after) !important;
}

.tab-background[selected=true] > spacer {
background-image: var(--background-selected-middle) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
background-image: var(--svg-hover-before) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
background-image: var(--svg-hover-after) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
background-image: var(--background-hover-middle) !important;
}

.tabs-newtab-button:hover {
background-image: var(--newtab-hover) !important;
}

 

Default

:root {
--tab-curve-width: 30px;
--tabs-border: transparent !important;
}

.arrowscrollbox-scrollbox {
padding-inline-start: 10px !important;
}

/* To be able to see the top border of the tab */
.tab-stack {
margin-top: 2px !important;
}

/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar {
padding-inline-start: 15px !important;
}

.titlebar-placeholder {
border: none !important;
}

/* Remove unneeded styles from Photon */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
border: none !important;
}

.tabbrowser-tab > .tab-stack > .tab-background {
background-image: none !important;
-moz-box-orient: horizontal !important;
background-color: transparent !important;
margin-top: 1px !important;
}

.tab-background[selected=true] {
border: none !important;
}

.tab-line {
display: none !important;
}

.tab-bottom-line {
display: none !important;
}

/* Match height of new tab button (right svg) on hover */
.tabs-newtab-button {
margin: 0 !important;
}

/* overlap the tab curves */
.tab-background {
-moz-margin-end: -15px !important;
-moz-margin-start: -15px !important;
}

/* Begin tab background customizations */
.tab-background[selected=true]::before {
border: none !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
display: -moz-box !important;
background-repeat: no-repeat !important;
}

.tab-background[selected=true]::after {
border: none !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
display: -moz-box !important;
background-repeat: no-repeat !important;
}

.tab-background[selected=true] > spacer {
margin-top: 0px !important;
}

#new-tab-button,
.tabs-newtab-button {
width: calc(36px + 30px) !important;
margin-inline-start: -15px !important;
margin-top: 1px !important;
}

/* Tab hover customizations */

/* Regular tabs */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
display: -moz-box !important;
background-repeat: no-repeat !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
display: -moz-box !important;
background-repeat: no-repeat !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
margin-top: 0px !important;
}

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
.tabs-newtab-button:hover,
.tabs-newtab-button:hover::before,
.tabs-newtab-button:hover::after {
background-color: transparent !important;
}

/* New tab hover customizations */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover {
background-position: 0px 2px, 30px 4px , 36px 2px !important;
background-repeat: no-repeat !important;
background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
}

.tabs-newtab-button:hover > .toolbarbutton-icon {
background: none !important;
background-color: transparent !important;
}


/* Color specific customizations */
:root {
--svg-selected-before: url("data:image/svg+xml;utf8,

 
");

--svg-selected-after: url("data:image/svg+xml;utf8,
 
");

--background-selected-middle:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
linear-gradient(
transparent
2px,
rgb(249,249,255) 2px,
rgb(249,249,255)
),
none;

--svg-hover-before: url("data:image/svg+xml;utf8,
 
");

--svg-hover-after: url("data:image/svg+xml;utf8,
 
");

--background-hover-middle:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
linear-gradient(
transparent
2px,
rgba(255,255,255,.1) 2px,
rgba(255,255,255,.1)
),
none;

--newtab-hover: url("data:image/svg+xml;utf8,
 
"),
linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
url("data:image/svg+xml;utf8,
 
");
}


/* OS-specific color variables */
@media screen and (-moz-windows-theme) {
:root {

}
}

@media not screen and (-moz-windows-theme) {
:root {

}
}

.tab-background[selected=true]::before {
background-image: var(--svg-selected-before) !important;
}

.tab-background[selected=true]::after {
background-image: var(--svg-selected-after) !important;
}

.tab-background[selected=true] > spacer {
background-image: var(--background-selected-middle) !important;

}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
background-image: var(--svg-hover-before) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
background-image: var(--svg-hover-after) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
background-image: var(--background-hover-middle) !important;

}

.tabs-newtab-button:hover {
background-image: var(--newtab-hover) !important;
}

 

Light

 

:root {
--tab-curve-width: 30px;
--tabs-border: transparent !important;
}

.arrowscrollbox-scrollbox {
padding-inline-start: 10px !important;
}

/* To be able to see the top border of the tab */
.tab-stack {
margin-top: 2px !important;
}

/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar {
padding-inline-start: 15px !important;
}

.titlebar-placeholder {
border: none !important;
}

/* Remove unneeded styles from Photon */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
border: none !important;
}

.tabbrowser-tab > .tab-stack > .tab-background {
background-image: none !important;
-moz-box-orient: horizontal !important;
background-color: transparent !important;
margin-top: 1px !important;
}

.tab-background[selected=true] {
border: none !important;
}

.tab-line {
display: none !important;
}

.tab-bottom-line {
display: none !important;
}

/* Match height of new tab button (right svg) on hover */
.tabs-newtab-button {
margin: 0 !important;
}

/* overlap the tab curves */
.tab-background {
-moz-margin-end: -15px !important;
-moz-margin-start: -15px !important;
}

/* Begin tab background customizations */
.tab-background[selected=true]::before {
border: none !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
display: -moz-box !important;
background-repeat: no-repeat !important;
}

.tab-background[selected=true]::after {
border: none !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
display: -moz-box !important;
background-repeat: no-repeat !important;
}

.tab-background[selected=true] > spacer {
margin-top: 0px !important;
}

#new-tab-button,
.tabs-newtab-button {
width: calc(36px + 30px) !important;
margin-inline-start: -15px !important;
margin-top: 1px !important;
}

/* Tab hover customizations */

/* Regular tabs */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
display: -moz-box !important;
background-repeat: no-repeat !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
display: -moz-box !important;
background-repeat: no-repeat !important;
content: "" !important;
width: 30px !important;
min-height: 30px !important;
background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
margin-top: 0px !important;
}

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
.tabs-newtab-button:hover,
.tabs-newtab-button:hover::before,
.tabs-newtab-button:hover::after {
background-color: transparent !important;
}

/* New tab hover customizations */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover {
background-position: 0px 2px, 30px 4px , 36px 2px !important;
background-repeat: no-repeat !important;
background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
}

.tabs-newtab-button:hover > .toolbarbutton-icon {
background: none !important;
background-color: transparent !important;
}

/* Color specific customizations */
:root {
--svg-selected-before: url("data:image/svg+xml;utf8,

 
");

--svg-selected-after: url("data:image/svg+xml;utf8,
 
");

--background-selected-middle:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
linear-gradient(
transparent
2px,
rgb(245,246,247) 2px,
rgb(245,246,247)
),
none;

--svg-hover-before: url("data:image/svg+xml;utf8,
 
");

--svg-hover-after: url("data:image/svg+xml;utf8,
 
");

--background-hover-middle:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
linear-gradient(
transparent
2px,
rgba(0,0,0,.1) 2px,
rgba(0,0,0,.1)
),
none !important;

--newtab-hover: url("data:image/svg+xml;utf8,
 
"),
linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1)),
url("data:image/svg+xml;utf8,
 
");
}


/* OS-specific color variables */
@media screen and (-moz-windows-theme) {
:root {

}
}

@media not screen and (-moz-windows-theme) {
:root {

}
}

.tab-background[selected=true]::before {
background-image: var(--svg-selected-before) !important;
}

.tab-background[selected=true]::after {
background-image: var(--svg-selected-after) !important;
}

.tab-background[selected=true] > spacer {
background-image: var(--background-selected-middle) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
background-image: var(--svg-hover-before) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
background-image: var(--svg-hover-after) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
background-image: var(--background-hover-middle) !important;

}

.tabs-newtab-button:hover {
background-image: var(--newtab-hover) !important;
}

 

 

Επανεκκινήστε τον Firefox και απολαύστε τον :P

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

This page uses cookies to confirm that you will have the best user experience. More Privacy Policy