Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

I'm trying to approximate my FF button to match this mockup: https://bug513162.bugzilla.mozilla.org/attachment.cgi?id=451630

But I've run into a snag.

How do I make the FF button longer and thinner (like in the mockup)?

Padding and fixed height like this.

#appmenu-button {
  max-height: 20px !important;
  min-height: 20px !important;
  padding: 0 14px 0 14px !important;
}

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Thanks Soapy.

One more question, is it feasible to make the tabs a bit smaller (again, to match the mockup) or should I wait for the tab-changes to land on Minefield?

This is what I'm working with currently.

#TabsToolbar {
  min-height: 24px !important;
  height: 24px !important;
  max-height: 24px !important;
}

.tabbrowser-tab .tab-text,
.tab-icon-image,
.tabs-newtab-button .toolbarbutton-icon {
  margin-top: -2px !important;
}

Better Firefox menu

post-49492-12799959532262.png

http://userstyles.org/styles/34025

I have a lot of fixes, not sure if I should release them individually or all in one style..

Collaborator

Duke D

Posted
Posted

I have a lot of fixes, not sure if I should release them individually or all in one style..

Personally, I prefer individual.

Makes it easier to manage them/pick and choose.

I added your better gradient colors to my FF button, looks pretty darn close to the mockup.

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Guru, Soapy.

How to make small icon when put bookmark and history button at bookmark toolbar like when put button at tabs toolbar?

I think this is what you want, let me know.

#PersonalToolbar .toolbarbutton-1 {
  -moz-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  -moz-box-shadow: none !important;
}

Contributor

mame32kawaks

Posted
Posted

I think this is what you want, let me know.

#PersonalToolbar .toolbarbutton-1 {
  -moz-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  -moz-box-shadow: none !important;
}

Yes its work as what i want.

Currently using your 3 custom stylish Firefox 4 better app button style, Firefox 4 combine stop/reload with urlbar and Firefox 4 darker inactive tab.

Thanks a lot dude. :)

Collaborator

vajlent

Posted
Posted

I think this is what you want, let me know.

#PersonalToolbar .toolbarbutton-1 {
 -moz-appearance: none !important;
 background: transparent !important;
 border: 0 !important;
 -moz-box-shadow: none !important;
}

Can U put a screenie of what this code really do maybe? ;)

Contributor

BantryRed

Posted
Posted

Im pretty happy with what I have now. One or two small things I would like to change if some one can help me. When I have a lot of tabs open, the "New Tab" button is too close to the caption buttons in Maximise screen, seems to be ok in normal screen, also the lower spacing between the "Foxy" button and the url bar is slightly smaller than the space between the caption button and url bar. Can some one help? :D

post-346088-12800484286984.png

post-346088-12800486193624.png

#appmenu-button-container{
position: fixed !important;
}




#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 82px !important;
padding-top:1px !important;
padding-right:107px !important;
}


#appmenu-button{
padding: 3px 14px 3px 14px !important;
margin-top:3px !important;
}

 #appmenu-button {
   -moz-appearance: none !important;
   background-image: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%) !important;
   background-clip: padding-box !important;
   -moz-border-radius: 0 0 4px 4px !important;
   border-top: none !important;
   border: 2px solid !important;
   border-top: none !important;
   -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                    0 0 0 1px rgba(255,255,255,.40) inset !important;
   color: white !important;
   font-weight: bold !important;
   text-shadow: 0 0 1px rgba(0,0,0,.7),
                0 1px 2px rgba(0,0,0,.5) !important;
   padding: 2px 1.5em .15em 1.5em !important;
   margin: 0 !important;
 }

 #appmenu-button:-moz-window-inactive {
   background: transparent !important;
   background-clip: padding-box !important;
   -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                    0 0 0 1px rgba(255,255,255,.35) inset !important;
 }

 #appmenu-button:hover:not(:active):not([open]),
 #appmenu-button:hover:-moz-window-inactive:not(:active):not([open]) {
   background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(252,240,89,.5) 10%, rgba(252,240,89,0) 70%),
                     -moz-radial-gradient(center bottom, farthest-side, rgb(236,133,0), rgba(255,229,172,0)),
                     -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
   border-color: rgba(83,42,6,.9) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset,
                    0 0 2px 1px rgba(250,234,169,.7) inset,
                    0 -1px 0 rgba(250,234,169,.5) inset !important;
 }

 #appmenu-button:hover:active,
 #appmenu-button[open] {
   background-image: -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
   -moz-border-radius: 0 !important;
   -moz-box-shadow: 0 2px 4px rgba(0,0,0,.4) inset,
                    0 1px 1px rgba(0,0,0,.2) inset !important;
 }

#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Foxy" !important; }

#main-menubar{
margin-left: 78px !important;
}






#feed-button 
{
  display: none !important;
}





toolbar[mode="icons"][currentset*="urlbar-container,reload-button,stop-button"] #urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -3px !important;
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAMCAYAAABm+U3GAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozQkQ3OTNFRTYwOTZERjExODRFOUQ2RDI3Qzg1RENGMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0ODAwNTk3Rjk2NjExMURGOTRBMUI2RTAyRUYxRjAxNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0ODAwNTk3RTk2NjExMURGOTRBMUI2RTAyRUYxRjAxNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQ0Q3OTNFRTYwOTZERjExODRFOUQ2RDI3Qzg1RENGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQkQ3OTNFRTYwOTZERjExODRFOUQ2RDI3Qzg1RENGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoZDigQAAAN3SURBVHjajJJ/aBNnGMefy11ySS65kOtilyZNurX+rAYzEJ2DaVn9R+vAsblUN2m1UK2KKM5J/bEaVnGsqfujigqWOqZVmJPqtO3arbINEcfEiVpbtYKm1NCY1OSa5HJ573yutFDY/tgLH7jn5b3v+7zP90s9HonrAMCE8IgV/r1yCLOybGnFQP+DZvi/C4VtyMyvvz26xOUubDCY7ReBy+sz2J0XnQVFQW1/1py5u4Ay9amqChVFBVWIQ/ueDu4JyKapmtJEd9bVzLva0bXFIOQZXM4ZYY/b/TIhivnxV8k3QadTiKLSRM7CO5lIO0vTJ0FH3ZVzpPzSk+ejWnNrigsFPUP3gqL6JUK2dwyFW5jzP7TlXbvcVWtzFYiHDtR3ra8MvFBUNaMoqvR5dc1HY4nxhQaTEZJjMag/ePhJW8O+iBSP+XI03RuY5S1HXWJhDb16AL9BsEU3HAg+1i6j3B7vVxFRXhY60nh2XSAwnM7KYUkm2ZVl71eIYFhd6CkEjuMgGX8Jt/o6Vz0beFj3XW317uyrsXx8zV1QgQDJ+Rmej+440Rp6q3RBC+qKFKM3XSqe7xu98fv1y5Kcu5+ScjIatXZwaHi1p6QEBEEAhmZATMSh//bNMvzJHB4cqDu9c+tuRUzmg6Lgjim68ejxkHfe/AlRrWOGUIzF5XI9xaenUDSubV7ru/Gzxai/iXMT/sPvVOfpU+0sy26nFYK62LCezfScaT1f802zOHUIm9GL6VTajnOVsaaRJBIWM3IUQMbRgRZHosVOsBihesFMwW7lr9g5zmN8wxGlVELGRl647/3W01E19+3ytv6hCUN1+YL1n9FYzHuuvd2Ldd5klrULVO1ihJ1sYhzNEvRompFS/TqzOfpJQ2NobWNTk95mjbAU+LRk4BnHhPCmzXW/SBlJvvDjTx+fOnli9qS4E3EE9+8vXfHeu5/+cf1XF9YW1sx9hg36wcRFNxxpDrlmz2lxFpccrwoda6J5PoIB9hk5rmoiFVqO9+7Z4xt4NFhrsfIMIeQpZnQ4mUw60+lM8Xgill1fWXnuiy/39ngdfEHrwfpDHwTW/TndKM3Q55iWnrPfL98YPBzE+pYmbMOPGZ1Xr3i6u7s/TIipEimbNaMrot3GP9q2dcvfS5csjuFc7uCMR/DsIqR/mujUMiOlyF9a8VqAAQCMEogyPkkkHQAAAABJRU5ErkJggg==") !important;
  opacity: 1 !important;
  padding: 0 6px 0 6px !important;
  -moz-transition: -moz-box-shadow .1s !important;
}

#urlbar-container + #reload-button {
  -moz-image-region: rect(0 11px 12px 0) !important;
}

#urlbar-container + #reload-button + #stop-button {
  -moz-image-region: rect(0 22px 12px 11px) !important;
}

#urlbar-container + #reload-button:not([disabled]):hover{
  background-image: -moz-linear-gradient(#9eccf1, #6fb1e1 49%,
                                   #5b9fd9 50%, #5198d2 60%,
                                   #3e8ac9) !important;
  -moz-box-shadow: 0 0 1px 0 rgba(255,255,255,.40) inset !important;
}

#urlbar-container + #reload-button + #stop-button{
  background-image: -moz-linear-gradient(#e6a18a, #d17764 49%,
                                   #c05d4e 50%, #b95546 60%,
                                   #c15a4a) !important;
  -moz-box-shadow: 0 0 1px 0 rgba(255,255,255,.40) inset !important;
}

#urlbar-container + #reload-button:not([disabled]):hover:active,
#urlbar-container + #reload-button + #stop-button:not([disabled]):hover:active {
  -moz-box-shadow: inset 0 0 3px rgba(0,0,0,.8) !important;
}

#stop-button .toolbarbutton-icon,
#reload-button .toolbarbutton-icon{
  height: auto !important;
  width: auto !important;
}



#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
  -moz-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-size: 200% !important;
  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
  -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button)  {
  background-position: -5px -2px !important;
  background-image: -moz-linear-gradient(top,rgba(198,201,206,.70),
                                   rgba(151,160,172,.70)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):hover {
  background-image: -moz-linear-gradient(top,rgba(198,201,206,.8),
                                   rgba(151,160,172,.8)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

Veteran

Darrian

Posted
Posted

It probably isn't an issue for most of you, but I have difficulty reading my bookmarks toolbar sometimes because my monitor is a 46" HDTV, so I have to sit back a ways from it. I came up with this after some messing around.

post-1972-12800625772084.png

#PersonalToolbar .bookmark-item:not(menuitem){
  font-size: 3.6mm !important;
  font-family: calibri !important;
  font-weight: bold !important;
  color: white !important;
  text-shadow: 0 0 3px rgba(0,0,0,1), 0 0 3px rgba(0, 0, 0,1) !important;
}

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Can U put a screenie of what this code really do maybe? ;)

It just removes the border/background and box-shadow when you put toolbarbuttons in the PersonalToolbar.

Soapy! Help me please

http://userstyles.org/styles/32627

Apply this style and then press alt , and please tell me the code to fix it :(

Here you go.

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
  padding: 7px 110px 0 4px !important;
}

.tabbrowser-tab[fadein] {
 max-width: 210px !important;
}

#appmenu-button-container {
  display: none !important;
}

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
  -moz-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-size: 200% !important;
  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
  -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button)  {
  background-position: -5px -2px !important;
  background-image: -moz-linear-gradient(top,#D2D2D2,
                                   rgba(151,160,172,.70)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.6) 25%, rgba(0,0,0,0) 75%) !important;
}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):hover {
  background-image: -moz-linear-gradient(top,rgba(198,201,206,.8),
                                   rgba(100,100,100,.8)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]) {
  text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important;
}

#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar) {
  background-color: #D2D2D2!important;
}

#navigator-toolbox[tabsontop="true"] .tabbrowser-tab[selected="true"] {
 background-image: -moz-radial-gradient(center bottom, #D2D2D2, rgba(178,178,178,0) 0%),
 -moz-linear-gradient(left, transparent, transparent 1px,
 rgba(255,255,255,.5) 1px, rgba(255,255,255,.5)),
 -moz-linear-gradient(left, transparent, transparent 1px,#D2D2D2 1px, #E0E0E0) !important;
}

.tabbrowser-tabs {
  -moz-margin-start: 0 !important;
}

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Im pretty happy with what I have now. One or two small things I would like to change if some one can help me. When I have a lot of tabs open, the "New Tab" button is too close to the caption buttons in Maximise screen, seems to be ok in normal screen, also the lower spacing between the "Foxy" button and the url bar is slightly smaller than the space between the caption button and url bar. Can some one help? :D

Give this a shot, it should be about the same size as the caption buttons. Nice use of radial gradients (Y)

#main-window:not([sizemode="maximized"]) {
  margin-top: 1px !important;
}

#appmenu-button-container{
  position: fixed !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox[tabsontop="true"] #TabsToolbar{
  padding: 1px 110px 0 82px !important;
}

#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar{
  padding: 0 110px 0 82px !important;
}

 #appmenu-button {
   -moz-appearance: none !important;
   background-image: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%) !important;
   background-clip: padding-box !important;
   -moz-border-radius: 0 0 4px 4px !important;
   border: 2px solid !important;
   border-top: 0 !important;
   -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                    0 0 0 1px rgba(255,255,255,.40) inset !important;
   color: white !important;
   font-weight: bold !important;
   text-shadow: 0 0 1px rgba(0,0,0,.7),
                0 1px 2px rgba(0,0,0,.5) !important;
   padding: 0 1.5em 1px 1.5em !important;
 }

 #appmenu-button:-moz-window-inactive {
   background: transparent !important;
   background-clip: padding-box !important;
   -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.4) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                    0 0 0 1px rgba(255,255,255,.35) inset !important;
 }

 #appmenu-button:hover:not(:active):not([open]),
 #appmenu-button:hover:-moz-window-inactive:not(:active):not([open]) {
   background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(252,240,89,.5) 10%, rgba(252,240,89,0) 70%),
                     -moz-radial-gradient(center bottom, farthest-side, rgb(236,133,0), rgba(255,229,172,0)),
                     -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
   border-color: rgba(83,42,6,.9) !important;
   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset,
                    0 0 2px 1px rgba(250,234,169,.7) inset,
                    0 -1px 0 rgba(250,234,169,.5) inset !important;
 }

 #appmenu-button:hover:active,
 #appmenu-button[open] {
   background-image: -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
   -moz-border-radius: 0 !important;
   -moz-box-shadow: 0 2px 4px rgba(0,0,0,.4) inset,
                    0 1px 1px rgba(0,0,0,.2) inset !important;
 }

#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Foxy" !important; }

#main-menubar{
  padding-left: 82px !important;
}

Thanks , updating the style with proper credits :D

No problem :)

Contributor

BantryRed

Posted
Posted

Give this a shot, it should be about the same size as the caption buttons. Nice use of radial gradients (Y)

Very nice thank you.

post-346088-12800696515855.png

Another question, I would like the tabs to be smaller, and in 3.6 I could change this an about:config, I dont see it in 4.0b2. Have the changed it?

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Give this a shot, it should be about the same size as the caption buttons. Nice use of radial gradients (Y)

Very nice thank you.

Another question, I would like the tabs to be smaller, and in 3.6 I could change this an about:config, I dont see it in 4.0b2. Have the changed it?

Are you talking about Tab width? You can change that its just done using CSS now.

.tabbrowser-tab {
  max-width: 100px !important;
  min-width: 100px !important;
}

Enthusiast

Jimcando

Posted
Posted

Can anybody help me create the code for the colour of the app menu button? I'm a bit too confused with all this '-moz-linear-gradient', '-moz-radial-gradient' and '-moz-box-shadow' :p

I'm trying to change the colour of the button when the browser is in private browsing mode. I stole the colour from SoapyHamHocks red Stop button style:

#main-window[browsingmode=private] #appmenu-button{
    background-image: -moz-linear-gradient(#e6a18a, #d17764 49%, #c05d4e 50%, #b95546 60%, #c15a4a)!important;
}

This works OK, but it really needs a different colour for the hover state and I'm confused :(

The code I have for my current default menu button is:

#appmenu-button
{
    padding: 1px 5px 1px 5px !important;
    height: 20px !important;
    min-width: 45px !important;
    width: 45px !important;
    background-image: -moz-linear-gradient(rgba(255,224,159,0.8), rgba(255,224,109,0.5) 40%, rgba(255,224,109,0.2) 50%, rgba(255,255,255,0.05) 51%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.7) 29%, rgba(248, 233, 164, 0.4) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 5px rgba(255,255,255,.5) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.5) !important;
}

#appmenu-button:hover:active, #appmenu-button[open] 
{
    background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3) inset !important;
}

post-303978-12800888260952.jpg

Anyone feel like making it a whole let sexier?

Mentor

+Heartripper Subscriber¹

Posted
  • Subscriber¹
Posted

Can anybody help me create the code for the colour of the app menu button? I'm a bit too confused with all this '-moz-linear-gradient', '-moz-radial-gradient' and '-moz-box-shadow' :p

I'm trying to change the colour of the button when the browser is in private browsing mode. I stole the colour from SoapyHamHocks red Stop button style:

#main-window[browsingmode=private] #appmenu-button{
    background-image: -moz-linear-gradient(#e6a18a, #d17764 49%, #c05d4e 50%, #b95546 60%, #c15a4a)!important;
}

This works OK, but it really needs a different colour for the hover state and I'm confused :(

The code I have for my current default menu button is:

#appmenu-button
{
    padding: 1px 5px 1px 5px !important;
    height: 20px !important;
    min-width: 45px !important;
    width: 45px !important;
    background-image: -moz-linear-gradient(rgba(255,224,159,0.8), rgba(255,224,109,0.5) 40%, rgba(255,224,109,0.2) 50%, rgba(255,255,255,0.05) 51%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.7) 29%, rgba(248, 233, 164, 0.4) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 5px rgba(255,255,255,.5) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.8) inset, 0 0 1px rgba(255,250,240,0.5) !important;
}

#appmenu-button:hover:active, #appmenu-button[open] 
{
    background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3) inset !important;
}

post-303978-12800888260952.jpg

Anyone feel like making it a whole let sexier?

the selector you need to modify the hover appearance is:

#main-window[browsingmode="private"] #appmenu-button:hover{

}

This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Kdenlive 26.04.2

      By Copernic · Posted

      Kdenlive 26.04.2 by Razvan Serea Kdenlive is an acronym for KDE Non-Linear Video Editor. It works on GNU/Linux, Windows and BSD. Through the MLT framework, Kdenlive integrates many plugin effects for video and sound processing or creation. Furthermore Kdenlive brings a powerful titling tool, a DVD authoring (menus) solution, and can then be used as a complete studio for video creation. Kdenlive supports all of the formats supported by FFmpeg or libav (such as QuickTime, AVI, WMV, MPEG, and Flash Video, among others), and also supports 4:3 and 16:9 aspect ratios for both PAL, NTSC and various HD standards, including HDV and AVCHD. Video can also be exported to DV devices, or written to a DVD with chapters and a simple menu. Video editing features: Multi-track editing with a timeline and supports an unlimited number of video and audio tracks. A built-in title editor and tools to create, move, crop and delete video clips, audio clips, text clips and image clips. Ability to add custom effects and transitions. A wide range of effects and transitions. Audio signal processing capabilities include normalization, phase and pitch shifting, limiting, volume adjustment, reverb and equalization filters as well as others. Visual effects include options for masking, blue-screen, distortions, rotations, colour tools, blurring, obscuring and others. Configurable keyboard shortcuts and interface layouts. Rendering is done using a separate non-blocking process so it can be stopped, paused and restarted. Kdenlive also provides a script called the Kdenlive Builder Wizard (KBW) that compiles the latest developer version of the software and its main dependencies from source, to allow users to try to test new features and report problems on the bug tracker. Project files are stored in XML format. An archiving feature allows exporting a project among all assets into a single folder or compressed archive. Built-in audio mixer Kdenlive 26.04.2 changelog: Remove not needed actions from render info, fix rough size calculation for rendering. Fix clip sometimes not inserted in timeline when moving vertically in bin drag. Fix transcoding from clip properties. Cleanup render profile audio quality. Use percent based value for audio quality, and adjust the range accordingly per codec. Fixes bug #520750 Enforce even numbers for render width/height. Fixes bug #520737 Fix nightly flatpak - disable rnnoise until implemented. Fix missing initialization. Edit mediacapture.cpp. Fix document unnecessarily marked as modified on opening, triggering a backup request. Fix incorrect detection of missing and remote clips causing unwanted backups. Fixes issue #2194 Fix tests. Fix tmp files copied to wrong location when setting project folder. Fixes bug #467740 Fix color clips not selected on creation. Use QFileInfo instead of QUrl/QDir to try fixing Windows shared drives. Fixes bug #451413 Fix timeline preview incorrectly invalidated when a track with effect duration changed. Fixes bug #514541 Fix missing var. Display paths in native format in render widget. Fixes bug #520428 Simple splash: fix pressing return always triggered the same button. Minor update to simple splash. Fix unwanted clips added to timeline and cleanup. Fixes issue #2190 Minor layout improvements to welcome screen, add Quit and Open shortcuts. Fix broken welcome dialog layout in tiling compositors. (craft) Limit the number of CPU cores used during a Windows build with mingw as some .cpp files are memory intensive to build. (kde-ci) Limit the number of CPU cores used during a build as some .cpp files are memory intensive to build. (kde-ci) Cleanup old entries. Another fix for animation crash. Fix uninitialized function - crash on create animation. Another attempt to fix MacOS permissions. MacOS: fix bundle release version. Fix MacOS plist path. Fix MacOS build. Explicitely link against Qt::Core. Download: Kdenlive 26.04.2 | 128.0 MB (Open Source) Download: Standalone Executable View: Kdenlive Home page Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Here's how to watch the Xbox Games Showcase today and what to expect

      By LoneWolfSL · Posted

      Here's how to watch the Xbox Games Showcase today and what to expect by Pulasthi Ariyasinghe The June games showcase week has been a packed one, with everything from major presentations like Sony and Summer Game Fest to indie-focused reveals coming in almost every day. Now, it's almost time for another big one, with Microsoft bringing its Xbox Games Showcase back later today. This is a double feature too, with a Gears of War E-Day deep dive also being attached to it. For anyone wanting to tune in online, the 2026 Xbox Games Showcase is kicking off at 10 AM PT | 1 PM ET | 6 PM BST | 7 PM CEST later today, June 7. The event will be available to watch on the official Xbox YouTube (4K 60FPS), Twitch, Facebook, Steam, Amazon Live, and other portals. Separate livestreams for American Sign Language and Audio Description will also be available. "This year marks 25 years of XBOX, and this Showcase is poised to be a true celebration, offering world premieres, new gameplay, fresh updates, and more for a swathe of projects we cannot wait to share," said Microsoft about this presentation. With a new CEO behind it that is pulling off some interesting moves, Xbox may have some surprises to reveal today. New looks at first-party games like Halo Campaign Evolved from Halo studios, Fable from Playground Games, InXile Entertainment's Clockwork Revolution, Mojang's Minecraft Dungeons II, and Call of Duty: Modern Warfare 4 from Infinity Ward are to be expected here. We may finally get to see the new Blade from Arcane Studios in action and a new Persona game from Atlus at the showcase too. Surprise announcements may also arrive from other Microsoft-owned studios like Bethesda, MachineGames, Ninja Theory, Obsidian, Rare, World's Edge, or Blizzard. Considering how every new release nowadays is staying away from November and December to avoid Grand Theft Auto VI's release, any launch dates Microsoft announces will probably skip those months as well. Once the Xbox Games Showcase ends, Microsoft will immediately kick off the Gears of War: E-Day Direct. This deep dive into the upcoming prequel from The Coalition should attach gameplay footage and perhaps a release window to the highly anticipated project.
    • This could exactly be how our Sun ends but it's not as simple

      By PeterTHX · Posted

      People in the '50s and '60s had the same attitude, and we're still here over a half century later.
    • 007 First Light review: Satisfying spy adventure that James Bond needed

      By Nick H. · Posted

      So after some fiddling I was able to get it to run at a pretty stable 30FPS. I'm slightly surprised about how much fiddling I had to do to get there though given what I thought was reasonable hardware: Processors: 16 × AMD Ryzen 7 7840HS w/ Radeon 780M Graphics Memory: 16 GiB of RAM Graphics Processor 1: AMD Radeon 780M Graphics Graphics Processor 2: AMD Radeon RX 7700S I think I could do it better if I use Linux rather than Windows, Windows RAM usage is stupid without stripping the system down. But once I got it working in a reasonable state, it was so awesome! I felt like a new Bond! If anyone has any advice to get things going a bit smoother FPS-wise, I'd appreciate it.
    • Hi my name is Olivia and I am from Australia

      By +Nik Louch · Posted

      Something is rotten in the state of Denmark Australia

  • Recent Achievements

    • Dedicated
      Mark Spruce earned a badge
      Dedicated
    • Collaborator
      conkir earned a badge
      Collaborator
    • Rising Star
      olavinto went up a rank
      Rising Star
    • One Month Later
      lamborghiniv10 earned a badge
      One Month Later
    • Week One Done
      lamborghiniv10 earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      482
    2. 2
      PsYcHoKiLLa
      256
    3. 3
      Steven P.
      74
    4. 4
      +Edouard
      70
    5. 5
      FloatingFatMan
      69
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!