Unchecked checkboxes get rendered with white border in Epiphany #75

junrrein · 2016-09-18T19:09:22Z

Note: Before submitting an issue, please check whether it also occurs with other themes.

Doesn't happen with either Adwaita or Arc.

Distribution (and version)

Opensuse Tumbleweed

Desktop environment (and version)

Budgie 10.2.7

GTK+ 3 version (You can check it with pkg-config --modversion gtk+-3.0)

Gtk 3.20.9

Flat-Plat version

Git master, Laptop variant

Related application version

Epiphany (Gnome Web) 3.20.3
WebkitGtk 2.13.91

Steps to reproduce

1 - Set Flat-Plat as your application theme.
2 - Visit this page for an example: solus-project/budgie-desktop#261

Screenshot(s)

Flat-Plat and Firefox

Flat-Plat and Epiphany

PS: Let me take this opportunity to thank you for the Budgie styling, it looks great!

The text was updated successfully, but these errors were encountered:

junrrein · 2016-09-20T22:56:47Z

After checking on another website, it turns out unchecked checkboxes in Epiphany get rendered with white border. Tha's why they can't be seen in Github.

Sample image:

nana-4 · 2016-09-21T16:11:52Z

It related with #34.

nicman23 · 2016-10-06T15:05:04Z

for epiphany and firefox you can use this user style css:

*:not(:empty):not([onclick*="open"]):not(span):not([class*="stars"]):not([id*="stars"]):not([id="rating"]):not([class="rating"]):not([class*="prite"]):not([id*="prite"]):not([id*="lbImage"]) {

background-image: none !important;

}



/* Basic Bodies */

html,

body {

background: none #607D8B !important;

}



/* Make descendents of the body element transparent.  Formerly "DIV + SPAN" rules. */

body * {

background-color: transparent !important;

}



/* Give id's BG hopefully */

div[id] {

background-color: inherit !important;

}



/* Filter non-icons */

span:not(:empty):not([class*="icon"]):not([id*="icon"]):not([class*="star"]):not([id*="star"]):not([id*="rating"]):not([class*="rating"]):not([class*="prite"]) {



background: none transparent !important;

border-color: #000 !important;

}



/* Try to contrast containers */

html:root > body > * > * > * > *:not(input):not([onclick]) > div:not(:empty):not([id]) {

background: none #546E7A !important

}



/* :::::::: Text Presentation :::::::: */



summary,

details {

background-color: inherit !important;

}



abbr,

progress,

time,

label,

.date {

color: #CDEFC2 !important;

}



mark,

code,

pre,

blockquote,

[class*="quote"],

td[style*="inset"][class="alt2"] {

background-color: #00090F !important;

}





/* :::::::: Headings + Header :::::::: */



/* Header gradient rules */



header,

#header {

background: -moz-linear-gradient(#333,#607D8B) transparent !important;

}



#header h1 {

background-color: transparent !important;

}



h1,

h2 {

background: none #28313E !important;

border-radius: 5px !important;

-moz-border-radius: 5px !important;

-webkit-border-radius: 5px !important;

}



h3,

h4 {

background: none #2A3731 !important;

border-radius: 5px !important;

-moz-border-radius: 5px !important;

-webkit-border-radius: 5px !important;

}



h5,

h6 {

background: none #372A2A !important;

}





/* :::::::: Lists :::::::: */



dt {

background-color: #2B3135 !important;

}



dl,

dd {

background-color: #232323 !important;

}



li,

ul {

background-color: inherit !important;

}



li a:not([class*="icon"]):not([id*="icon"]):not([onclick]),

dt a:not([class*="icon"]):not([id*="icon"]):not([onclick]) {

background-image: none !important;

text-indent: 0 !important;

}



/* :::::::: list Item highlight :::::::: */



li[class*="item"] a:hover,

li[class*="item"]:hover,



/* Not list item, but still useful*/



[class*="menuitem"]:hover {

background-color: #2E2B2F !important;

}



/* :::::::: Tables, cells :::::::: */



table {

background-color: #232323 !important;

border-color: #333 !important;

}



table table {

background: #191919 !important;

}



th,

caption {

background-color: #353535 !important;

}



/* :::::::: Input :::::::: */



/* === Basic === */



/* anonymous divs */



input *,

textarea * {

color: #DDD !important;

}



html body input:not([type="image"]),

button,

html body textarea {



background: none #353535 !important;

-moz-appearance: none !important;

-webkit-appearance: none !important;

color:  #DDD  !important;

border: solid 1px #777 !important;

border-radius: 0 !important;

-moz-border-radius: 0 !important;

-webkit-border-radius: 0 !important;

opacity: 1 !important;

}



/* Style reset. */



html body input[type="checkbox"] {

-moz-appearance: checkbox !important;

-webkit-appearance: checkbox !important;

}



html body input[type="radio"] {

-moz-appearance: radio !important;

-webkit-appearance: radio !important;

}



/* :::::::: Custom styling :::::::: */



html:root input[type="button"],

html:root input[type="submit"],

html:root input[type="reset"],

html:root button {



color: #EEE !important;

background-color: #222437 !important;



-moz-box-shadow: inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.15), inset 0 -15px 30px rgba(0,0,0,0.2) !important;

-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.15), inset 0 -15px 30px rgba(0,0,0,0.2) !important;

}



html:root input[type="button"]:hover,

html:root input[type="submit"]:hover,

html:root input[type="reset"]:hover,

html:root button:hover {



color: #FFF !important;

background-color: #31344F !important;

border-color: #5F687F !important;



-moz-box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3) !important;

-webkit-box-shadow:  inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3) !important;

}



html:root input[type="image"] {

opacity: .85 !important;

}



html:root input[type="image"]:hover {

opacity: .95 !important;

}



/* Drop-down menu */



select,

option,

optgroup {



background: none #383838 !important;

border-color:#555 !important;

color:#f1f1f1 !important;

-moz-appearance: none !important;

}



/* :::::::: Misc :::::::: */



address {

background: none #333 !important;

}



hr {

background: none #444 !important

}



/*currently viewed page*/

.current {

color: #FFF !important;

}



/* Remove Rounded Corners, Borders, Spacer, Padding images */



img[src*="spacer"]:empty,

[id*="round"]:empty,

[id*="bottom"]:empty,

[class*="bottom"]:empty,

[class*="Bottom"]:empty,

[id*="top"]:empty,

[class*="top"]:empty,

[class*="Top"]:empty,

[class*="spacer"]:empty {

background-image: none !important;

}



/* Menus and Navigation */



nav,

menu,



/*Common naming conventions - in case previous declarations fail to give solid BG*/



html body [class*="open"],

html body [id*="Dropdown"],

html body [id*="dropdown"],

html body [class*="Dropdown"],

html body [class*="dropdown"],

html body [id*="menu"]:not(SELECT),

html body [class*="menu"]:NOT(SELECT),

html body [class*="tooltip"],

html body [class*="popup"],

html body [id*="popup"],



/* Notes, details, etc.  Maybe useful */



html body [class*="note"],

html body [class*="detail"],

html body [class*="description"]



{background-color: #232323 !important}



/* Also common */

[class*="content"],

[class*="container"] {

background-color: #546E7A !important;

}



/* Headers, Logos */



[id*="masthead"] a,

[id*="header"] a,

[id*="logo"] a,

[class*="logo"] a {

text-indent: 0 !important;

}



/* Instead of increasing specificity rating by using :not, set rules separately */



html:root body [class*="layer"],

html:root body #lightbox-nav,

html:root body #imageContainer {

background-color: transparent !important;

}



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/



/* Universal - sets color of text, border */



* {

color: #CCC !important;

border-color: #444 !important;

outline-color: #444 !important;

text-shadow: none !important;

}



html *:after,

html *:before {

color: #CCC !important;

border-color: #666 !important;

background: none transparent !important;

}





/* Link */



a:link,

a:link *:not(img){



color: #B1CBF7 !important;

background-color: transparent !important;

border-color: #666 !important;}



a:visited,

a:visited * {

color: #CDB4E7 !important;

}



a:hover,

a:hover *:not(img){



color: #FFE900 !important;

background-color: #363037 !important;

border-color: #999 !important;

}



html [href*="#"]:hover {

color: #FFE900 !important;

background-color: transparent !important;

}





/* Event Handlers/Attributes */



[onclick],

[ondblclick],

[onmousedown] {

color: #DFD5BC !important;

text-indent: 0 !important;

}



[onclick]:hover,

[ondblclick]:hover,

[onmousedown]:hover {

color: #FEFF97 !important;

}



/* Make images transparent */



img {

opacity: .75 !important;

}



img:hover {

opacity: 1 !important;

background-color: #888 !important;

}



svg {

background: none #666 !important;

}



/* Highlight */

::-moz-selection {

background-color: #626F61 !important;

color: #F6F7B9 !important;

}



/* :::::::: Specific Fixes :::::::: */



/* google search link fix */

.g .r {

background-color: transparent !important;

}



/* google result hover highlight*/

div.vsc:hover > .vspi, div.vso > .vspi {

background: none transparent !important;

border: none !important;

}



}



/* :::::::: About... :::::::: */



@-moz-document url(about:newtab) {



window {background: #607D8B !important;}



#newtab-scrollbox {

background-color: transparent !important;

background-image:

    url("chrome://browser/skin/newtab/noise.png"),

    -moz-linear-gradient(transparent,transparent) !important;

    }



.newtab-title {

background-color: rgba(0,0,0,.75) !important;

color: #eee !important;

}



}



@-moz-document url(about:blank) {



html, html * {

  background: none #607D8B !important;

  color: #CCC !important;

  }



}



@-moz-document url-prefix("about:neterror") {



html, body {

background-color: #353535 !important;

color: #CCC !important;

}



#errorPageContainer {

background-color: #222 !important;

border-color: #666 !important;

}



#errorPageContainer button {

opacity: .8 !important;

}



/*resurrect pages FF extension*/

#resurrect {

background-color: #333 !important;

border-color: #000 !important;

}



}

taken from a random stylish theme and edited colors for dark flatplat. Needs more work, but it is fine for now

nana-4 · 2017-06-06T13:27:08Z

This issue has been almost solved with recent updates.

However, it still remains with dark variants, so I opened a new issue as #123.

So I'd like to close this now, but thank you for your report. :)

junrrein mentioned this issue Sep 18, 2016

[Light theme] Pop-ups on Epiphany have a titlebar with white text over a light gray background #76

Closed

junrrein changed the title ~~Unchecked checkboxes don't get rendered in Epiphany~~ Unchecked checkboxes get rendered with white border in Epiphany Sep 20, 2016

nana-4 added the bug label Sep 21, 2016

nana-4 closed this as completed Jun 6, 2017

nana-4 mentioned this issue Jun 6, 2017

Firefox&Web: Unchecked checkbox&radio are hard to see with dark variant #123

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unchecked checkboxes get rendered with white border in Epiphany #75

Unchecked checkboxes get rendered with white border in Epiphany #75

junrrein commented Sep 18, 2016

junrrein commented Sep 20, 2016

nana-4 commented Sep 21, 2016

nicman23 commented Oct 6, 2016

nana-4 commented Jun 6, 2017

Unchecked checkboxes get rendered with white border in Epiphany #75

Unchecked checkboxes get rendered with white border in Epiphany #75

Comments

junrrein commented Sep 18, 2016

junrrein commented Sep 20, 2016

nana-4 commented Sep 21, 2016

nicman23 commented Oct 6, 2016

nana-4 commented Jun 6, 2017