Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

white box around the color palette #83

Closed
ctf0 opened this issue Jan 31, 2017 · 13 comments
Closed

white box around the color palette #83

ctf0 opened this issue Jan 31, 2017 · 13 comments

Comments

@ctf0
Copy link

ctf0 commented Jan 31, 2017

  • Describe the bug/question in as much detail as possible to make it clear what is wrong or what you do not > understand.

out of the blue, the color preview started to have a white box around the color palette.

  • Pictures or screencasts can also be used to clarify what the issue is or what the question is.

screen shot 2017-02-01 at 12 54 46 am

  • Provide links to 3rd party syntax highlighting package you are using if applicable.

https://packagecontrol.io/packages/Seti_UX

Support Info

  • ST ver.: 3126
  • Platform: osx
  • Arch: x64
  • Plugin ver.: 2.4.1
  • Install via PC: True
  • mdpopups ver.: 1.13.1
  • markdown ver.: 2.6.6
  • pygments ver.: 2.1a0
  • jinja2 ver.: 2.8
@facelessuser
Copy link
Owner

I'm not seeing this. What do your ColorHelper settings look like? What kind of monitor are using? 4K? Do you have a custom mdpopups.css?

@ctf0
Copy link
Author

ctf0 commented Feb 1, 2017

  • no 4k
  • no mdpopups.css
  • settings
{
    "debug": false,
    "show_index_status": false,
    "auto_popup": false,
    "upper_case_hex": false,
    "use_webcolor_names": true,
    "click_color_box_to_pick": "none",
    "inline_previews": true,
    "inline_preview_offset": -1,
    "enable_color_picker": true,
    "graphic_size": "small",
    "use_color_picker_package": true,
    "use_hex_color_picker": true,
    "enable_global_user_palettes": false,
    "enable_favorite_palette": false,
    "enable_current_file_palette": true,
    "enable_color_conversions": true,
    "color_scanning": [
        {
            "syntax_files": [],
            "syntax_filter": "whitelist",
            "base_scopes": [
                "source.css",
                "text.html"
            ],
            "scan_scopes": [
                "meta.declaration-list.css -support.type.property-name.css -comment -string",
                "meta.property-value.css -comment -string",
                "meta.value.css -comment -string",
                "meta.tag.inline.any.html string.quoted",
                "meta.tag.any.html meta.attribute-with-value.style.html"
            ],
            "scan_completion_scopes": [],
            "extensions": [],
            "allowed_colors": ["css3"],
            "use_hex_argb": false,
            "compress_hex_output": true
        },
        {
            "syntax_files": ["Sass/Syntaxes/Sass"],
            "syntax_filter": "whitelist",
            "base_scopes": [
                "source.sass"
            ],
            "scan_scopes": [
                "source.sass -comment -string -variable.parameter"
            ],
            "scan_completion_scopes": [
            ],
            "extensions": [],
            "allowed_colors": ["css3"],
            "use_hex_argb": false,
            "compress_hex_output": true
        },
        {
            "syntax_files": [],
            "syntax_filter": "whitelist",
            "base_scopes": [
                "source.scss",
                "source.sass"
            ],
            "scan_scopes": [
                "meta.property-list.css.sass -comment -string",
                "constant.other.rgb-value.sass -comment -string",
                "constant.other.color.rgb-value.scss -comment -string",
                "constant.other.color.rgb-value.scss",
                "support.constant.color.w3c-standard-color-name.scss",
                "meta.property-value.scss",
                "sass-script-maps -variable.other -comment -string"
            ],
            "scan_completion_scopes": [
                "source.scss -comment -string",
                "source.sass -comment -string"
            ],
            "extensions": [],
            "allowed_colors": ["css3"],
            "use_hex_argb": false,
            "compress_hex_output": true
        },
        {
            "syntax_files": [],
            "syntax_filter": "whitelist",
            "base_scopes": ["text.xml"],
            "scan_scopes": ["text.xml -meta.tag.xml -comment -string, string.unquoted.cdata.xml"],
            "allowed_colors": ["hex", "hexa", "hex_compressed"],
            "extensions": [".tmTheme", ".stTheme"],
            "use_hex_argb": false,
            "compress_hex_output": false
        },
        {
            "syntax_files": [],
            "syntax_filter": "whitelist",
            "base_scopes": ["source.stylus"],
            "scan_scopes": [
                "constant.other.color.rgb-value.stylus",
                "constant.color.w3c-standard-color-name.stylus",
                "meta.property-value.stylus"
            ],
            "allowed_colors": ["css3"],
            "extensions": [],
            "use_hex_argb": false,
            "compress_hex_output": true
        }
    ],
    "enable_project_user_palettes": false
}

@facelessuser
Copy link
Owner

I'll take another look, but it looks like something is setting a background and padding your phantoms.

@ctf0
Copy link
Author

ctf0 commented Feb 1, 2017

is there a debug cmnd to check what is controlling the phantoms from the console ?

@facelessuser
Copy link
Owner

In general for phantoms, no. You could enable I think "mdpopups.debug": 3 I think. I think that will dump CSS and HTML for a given render. I guess you could post that here and I can see if it makes sense. I'm just not seeing what you're seeing. But that won't show what a theme injects, just what mdpopups injects (or what someone is injecting through mdpopups).

@ctf0
Copy link
Author

ctf0 commented Feb 1, 2017 •
edited

do u mean adding "mdpopups.debug": 3 to settings file ?

@facelessuser
Copy link
Owner

Yes, to Preferences.sublime-settings. I don't remember if it has to be 3 (it controls how much stuff it dumps, but I think 3 dumps everything).

@ctf0
Copy link
Author

ctf0 commented Feb 1, 2017

not sure if that what u want but heres what the console give

reloading settings Packages/User/Preferences.sublime-settings
mdpopups: =====CSS=====
mdpopups: 
html, body { padding: 0; margin: 0; }
div.mdpopups {
  display: block;
  margin: 0;
  padding: 0.2rem;
  font-size: 1rem;
  line-height: 1.1rem;
}
.mdpopups div { display: block; }

.mdpopups h1 { font-size: 1.5rem; }
.mdpopups h2 { font-size: 1.4rem; }
.mdpopups h3 { font-size: 1.3rem; }
.mdpopups h4 { font-size: 1.2rem; }
.mdpopups h5 { font-size: 1.1rem; }
.mdpopups h6 { font-size: 1rem; }
.mdpopups h1, .mdpopups h2, .mdpopups h3, .mdpopups h4, .mdpopups h5, .mdpopups h6 {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

.mdpopups blockquote { display: block; font-style: italic; }

.mdpopups hr {
    display: block;
    padding: 1px;
    margin: 1rem;
}

.mdpopups dl { display: block; }
.mdpopups dt {
    display: block;
    font-style: italic;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.mdpopups dd {
    display: block;
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.mdpopups pre { display: block; }

.mdpopups blockquote, .mdpopups ol, .mdpopups ul, .mdpopups dl, .mdpopups p, .mdpopups div {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0.5rem;
    margin-left: 0;
    margin-right: 0;
}
.mdpopups ul, .mdpopups ol { padding-left: 2rem; }

.mdpopups .highlight { padding: 0.5rem; }
.mdpopups .admonition { padding: 0.5rem; }


.mdpopups hr { background-color: #D8F6FF;  }
.mdpopups .highlight .hll, .mdpopups .inline-highlight .hll{ background-color: #404040; }
.mdpopups .highlight, .mdpopups .inline-highlight { background-color: #202020; color: #d0d0d0; }
.mdpopups .highlight .c, .mdpopups .inline-highlight .c{ color: #999999; font-style: italic; } 
.mdpopups .highlight .err, .mdpopups .inline-highlight .err{ color: #a61717; background-color: #e3d2d2; } 
.mdpopups .highlight .esc, .mdpopups .inline-highlight .esc{ color: #d0d0d0; } 
.mdpopups .highlight .g, .mdpopups .inline-highlight .g{ color: #d0d0d0; } 
.mdpopups .highlight .k, .mdpopups .inline-highlight .k{ color: #6ab825; font-weight: bold; } 
.mdpopups .highlight .l, .mdpopups .inline-highlight .l{ color: #d0d0d0; } 
.mdpopups .highlight .n, .mdpopups .inline-highlight .n{ color: #d0d0d0; } 
.mdpopups .highlight .o, .mdpopups .inline-highlight .o{ color: #d0d0d0; } 
.mdpopups .highlight .x, .mdpopups .inline-highlight .x{ color: #d0d0d0; } 
.mdpopups .highlight .p, .mdpopups .inline-highlight .p{ color: #d0d0d0; } 
.mdpopups .highlight .ch, .mdpopups .inline-highlight .ch{ color: #999999; font-style: italic; } 
.mdpopups .highlight .cm, .mdpopups .inline-highlight .cm{ color: #999999; font-style: italic; } 
.mdpopups .highlight .cp, .mdpopups .inline-highlight .cp{ color: #cd2828; font-weight: bold; } 
.mdpopups .highlight .c1, .mdpopups .inline-highlight .c1{ color: #999999; font-style: italic; } 
.mdpopups .highlight .cs, .mdpopups .inline-highlight .cs{ color: #e50808; font-weight: bold; background-color: #520000; } 
.mdpopups .highlight .gd, .mdpopups .inline-highlight .gd{ color: #d22323; } 
.mdpopups .highlight .ge, .mdpopups .inline-highlight .ge{ color: #d0d0d0; font-style: italic; } 
.mdpopups .highlight .gr, .mdpopups .inline-highlight .gr{ color: #d22323; } 
.mdpopups .highlight .gh, .mdpopups .inline-highlight .gh{ color: #ffffff; font-weight: bold; } 
.mdpopups .highlight .gi, .mdpopups .inline-highlight .gi{ color: #589819; } 
.mdpopups .highlight .go, .mdpopups .inline-highlight .go{ color: #cccccc; } 
.mdpopups .highlight .gp, .mdpopups .inline-highlight .gp{ color: #aaaaaa; } 
.mdpopups .highlight .gs, .mdpopups .inline-highlight .gs{ color: #d0d0d0; font-weight: bold; } 
.mdpopups .highlight .gu, .mdpopups .inline-highlight .gu{ color: #ffffff; text-decoration: underline; } 
.mdpopups .highlight .gt, .mdpopups .inline-highlight .gt{ color: #d22323; } 
.mdpopups .highlight .kc, .mdpopups .inline-highlight .kc{ color: #6ab825; font-weight: bold; } 
.mdpopups .highlight .kd, .mdpopups .inline-highlight .kd{ color: #6ab825; font-weight: bold; } 
.mdpopups .highlight .kn, .mdpopups .inline-highlight .kn{ color: #6ab825; font-weight: bold; } 
.mdpopups .highlight .kp, .mdpopups .inline-highlight .kp{ color: #6ab825; } 
.mdpopups .highlight .kr, .mdpopups .inline-highlight .kr{ color: #6ab825; font-weight: bold; } 
.mdpopups .highlight .kt, .mdpopups .inline-highlight .kt{ color: #6ab825; font-weight: bold; } 
.mdpopups .highlight .ld, .mdpopups .inline-highlight .ld{ color: #d0d0d0; } 
.mdpopups .highlight .m, .mdpopups .inline-highlight .m{ color: #3677a9; } 
.mdpopups .highlight .s, .mdpopups .inline-highlight .s{ color: #ed9d13; } 
.mdpopups .highlight .na, .mdpopups .inline-highlight .na{ color: #bbbbbb; } 
.mdpopups .highlight .nb, .mdpopups .inline-highlight .nb{ color: #24909d; } 
.mdpopups .highlight .nc, .mdpopups .inline-highlight .nc{ color: #447fcf; text-decoration: underline; } 
.mdpopups .highlight .no, .mdpopups .inline-highlight .no{ color: #40ffff; } 
.mdpopups .highlight .nd, .mdpopups .inline-highlight .nd{ color: #ffa500; } 
.mdpopups .highlight .ni, .mdpopups .inline-highlight .ni{ color: #d0d0d0; } 
.mdpopups .highlight .ne, .mdpopups .inline-highlight .ne{ color: #bbbbbb; } 
.mdpopups .highlight .nf, .mdpopups .inline-highlight .nf{ color: #447fcf; } 
.mdpopups .highlight .nl, .mdpopups .inline-highlight .nl{ color: #d0d0d0; } 
.mdpopups .highlight .nn, .mdpopups .inline-highlight .nn{ color: #447fcf; text-decoration: underline; } 
.mdpopups .highlight .nx, .mdpopups .inline-highlight .nx{ color: #d0d0d0; } 
.mdpopups .highlight .py, .mdpopups .inline-highlight .py{ color: #d0d0d0; } 
.mdpopups .highlight .nt, .mdpopups .inline-highlight .nt{ color: #6ab825; font-weight: bold; } 
.mdpopups .highlight .nv, .mdpopups .inline-highlight .nv{ color: #40ffff; } 
.mdpopups .highlight .ow, .mdpopups .inline-highlight .ow{ color: #6ab825; font-weight: bold; } 
.mdpopups .highlight .w, .mdpopups .inline-highlight .w{ color: #666666; } 
.mdpopups .highlight .mb, .mdpopups .inline-highlight .mb{ color: #3677a9; } 
.mdpopups .highlight .mf, .mdpopups .inline-highlight .mf{ color: #3677a9; } 
.mdpopups .highlight .mh, .mdpopups .inline-highlight .mh{ color: #3677a9; } 
.mdpopups .highlight .mi, .mdpopups .inline-highlight .mi{ color: #3677a9; } 
.mdpopups .highlight .mo, .mdpopups .inline-highlight .mo{ color: #3677a9; } 
.mdpopups .highlight .sb, .mdpopups .inline-highlight .sb{ color: #ed9d13; } 
.mdpopups .highlight .sc, .mdpopups .inline-highlight .sc{ color: #ed9d13; } 
.mdpopups .highlight .sd, .mdpopups .inline-highlight .sd{ color: #ed9d13; } 
.mdpopups .highlight .s2, .mdpopups .inline-highlight .s2{ color: #ed9d13; } 
.mdpopups .highlight .se, .mdpopups .inline-highlight .se{ color: #ed9d13; } 
.mdpopups .highlight .sh, .mdpopups .inline-highlight .sh{ color: #ed9d13; } 
.mdpopups .highlight .si, .mdpopups .inline-highlight .si{ color: #ed9d13; } 
.mdpopups .highlight .sx, .mdpopups .inline-highlight .sx{ color: #ffa500; } 
.mdpopups .highlight .sr, .mdpopups .inline-highlight .sr{ color: #ed9d13; } 
.mdpopups .highlight .s1, .mdpopups .inline-highlight .s1{ color: #ed9d13; } 
.mdpopups .highlight .ss, .mdpopups .inline-highlight .ss{ color: #ed9d13; } 
.mdpopups .highlight .bp, .mdpopups .inline-highlight .bp{ color: #24909d; } 
.mdpopups .highlight .vc, .mdpopups .inline-highlight .vc{ color: #40ffff; } 
.mdpopups .highlight .vg, .mdpopups .inline-highlight .vg{ color: #40ffff; } 
.mdpopups .highlight .vi, .mdpopups .inline-highlight .vi{ color: #40ffff; } 
.mdpopups .highlight .il, .mdpopups .inline-highlight .il{ color: #3677a9; } 

  
.mdpopups .foreground { color: #D8F6FF; }
.mdpopups .background { background-color: #0D1011; }
.mdpopups .comment { color: #7292A1; background-color: #181F23; }
.mdpopups .comment.block { color: #7292A1; background-color: #181F23; }
.mdpopups .comment.block.documentation { color: #7292A1; background-color: #181F23; }
.mdpopups .comment.line { color: #7292A1; background-color: #181F23; }
.mdpopups .comment.line.character { color: #7292A1; background-color: #181F23; }
.mdpopups .comment.line.double-dash { color: #7292A1; background-color: #181F23; }
.mdpopups .comment.line.double-slash { color: #7292A1; background-color: #181F23; }
.mdpopups .comment.line.number-sign { color: #7292A1; background-color: #181F23; }
.mdpopups .comment.line.percentage { color: #7292A1; background-color: #181F23; }
.mdpopups .constant { color: #D8F6FF; }
.mdpopups .constant.character { color: #D8F6FF; }
.mdpopups .constant.character.escape { color: #D8F6FF; }
.mdpopups .constant.language { color: #CD3F45; }
.mdpopups .constant.numeric { color: #CD3F45; }
.mdpopups .constant.numeric.float { color: #CD3F45; }
.mdpopups .constant.numeric.hex { color: #CD3F45; }
.mdpopups .constant.numeric.integer { color: #CD3F45; }
.mdpopups .constant.numeric.octal { color: #CD3F45; }
.mdpopups .constant.other { color: #D8F6FF; }
.mdpopups .constant.other.placeholder { color: #D8F6FF; }
.mdpopups .entity { color: #D8F6FF; }
.mdpopups .entity.name { color: #D8F6FF; }
.mdpopups .entity.name.class { color: #D8F6FF; }
.mdpopups .entity.name.class.forward-decl { color: #D8F6FF; }
.mdpopups .entity.name.constant { color: #D8F6FF; }
.mdpopups .entity.name.enum { color: #D8F6FF; }
.mdpopups .entity.name.function { color: #D8F6FF; }
.mdpopups .entity.name.function.constructor { color: #D8F6FF; }
.mdpopups .entity.name.function.destructor { color: #D8F6FF; }
.mdpopups .entity.name.interface { color: #D8F6FF; }
.mdpopups .entity.name.label { color: #D8F6FF; }
.mdpopups .entity.name.namespace { color: #D8F6FF; }
.mdpopups .entity.name.section { color: #D8F6FF; }
.mdpopups .entity.name.struct { color: #D8F6FF; }
.mdpopups .entity.name.tag { color: #A83B40; background-color: #171314; }
.mdpopups .entity.name.trait { color: #D8F6FF; }
.mdpopups .entity.name.type { color: #D8F6FF; }
.mdpopups .entity.name.union { color: #D8F6FF; }
.mdpopups .entity.other { color: #D8F6FF; }
.mdpopups .entity.other.attribute-name { color: #D8F6FF; }
.mdpopups .entity.other.inherited-class { color: #FDA100; background-color: #31191B; }
.mdpopups .invalid { color: #E889B5; background-color: #722C40; }
.mdpopups .invalid.deprecated { color: #FFFFFF; background-color: #880720; }
.mdpopups .invalid.illegal { color: #E889B5; background-color: #722C40; }
.mdpopups .keyword { color: #009FFF; }
.mdpopups .keyword.control { color: #009FFF; }
.mdpopups .keyword.control.conditional { color: #009FFF; }
.mdpopups .keyword.control.import { color: #009FFF; }
.mdpopups .keyword.operator { color: #1CFF7B; }
.mdpopups .keyword.operator.arithmetic { color: #1CFF7B; }
.mdpopups .keyword.operator.assignment { color: #1CFF7B; }
.mdpopups .keyword.operator.bitwise { color: #1CFF7B; }
.mdpopups .keyword.operator.logical { color: #1CFF7B; }
.mdpopups .keyword.operator.word { color: #1CFF7B; }
.mdpopups .keyword.other { color: #009FFF; }
.mdpopups .markup { color: #D8F6FF; }
.mdpopups .markup.bold { color: #13FFA3; font-weight: bold; }
.mdpopups .markup.deleted { color: #D8F6FF; }
.mdpopups .markup.heading { color: #FDA100; background-color: #381819; }
.mdpopups .markup.inserted { color: #D8F6FF; }
.mdpopups .markup.italic { color: #109763; font-style: italic; }
.mdpopups .markup.list { color: #99CCCC; }
.mdpopups .markup.list.numbered { color: #99CCCC; }
.mdpopups .markup.list.unnumbered { color: #99CCCC; }
.mdpopups .markup.other { color: #D8F6FF; }
.mdpopups .markup.quote { color: #D8F6FF; }
.mdpopups .markup.raw { color: #D8F6FF; }
.mdpopups .markup.raw.block { color: #D8F6FF; }
.mdpopups .markup.raw.inline { color: #D8F6FF; }
.mdpopups .markup.underline { color: #D8F6FF; }
.mdpopups .markup.underline.link { color: #D8F6FF; }
.mdpopups .meta { color: #D8F6FF; }
.mdpopups .punctuation { color: #FFFEF7; }
.mdpopups .punctuation.accessor { color: #FFFEF7; }
.mdpopups .punctuation.definition { color: #FFFEF7; }
.mdpopups .punctuation.definition.comment { color: #FF0040; }
.mdpopups .punctuation.definition.keyword { color: #FFFEF7; }
.mdpopups .punctuation.definition.string { color: #009FFF; }
.mdpopups .punctuation.definition.string.begin { color: #009FFF; }
.mdpopups .punctuation.definition.string.end { color: #009FFF; }
.mdpopups .punctuation.separator { color: #FFFEF7; }
.mdpopups .punctuation.separator.continuation { color: #FFFEF7; }
.mdpopups .punctuation.terminator { color: #858D8A; }
.mdpopups .source { color: #D8F6FF; }
.mdpopups .storage { color: #D8F6FF; }
.mdpopups .storage.modifier { color: #FFFFFF; font-style: italic; }
.mdpopups .storage.type { color: #FFD200; }
.mdpopups .string { color: #D8F6FF; }
.mdpopups .string.interpolated { color: #D8F6FF; }
.mdpopups .string.other { color: #D8F6FF; }
.mdpopups .string.quoted { color: #D8F6FF; }
.mdpopups .string.quoted.double { color: #D8F6FF; }
.mdpopups .string.quoted.other { color: #D8F6FF; }
.mdpopups .string.quoted.single { color: #D8F6FF; }
.mdpopups .string.quoted.triple { color: #D8F6FF; }
.mdpopups .string.regexp { color: #FFFFFF; }
.mdpopups .string.unquoted { color: #D8F6FF; }
.mdpopups .support { color: #D8F6FF; }
.mdpopups .support.class { color: #A074C4; }
.mdpopups .support.constant { color: #CD3F45; font-style: italic; }
.mdpopups .support.function { color: #A074C4; }
.mdpopups .support.module { color: #D8F6FF; }
.mdpopups .support.other { color: #D8F6FF; }
.mdpopups .support.type { color: #FFFFFF; }
.mdpopups .support.variable { color: #D8F6FF; }
.mdpopups .text { color: #D8F6FF; }
.mdpopups .text.html { color: #D8F6FF; }
.mdpopups .text.xml { color: #D8F6FF; }
.mdpopups .variable { color: #FFFFFF; }
.mdpopups .variable.function { color: #FFFFFF; }
.mdpopups .variable.language { color: #1CFF7B; background-color: #0B2B3E; font-style: italic; }
.mdpopups .variable.other { color: #603F80; }
.mdpopups .variable.other.constant { color: #603F80; }
.mdpopups .variable.other.member { color: #603F80; }
.mdpopups .variable.other.readwrite { color: #603F80; }
.mdpopups .variable.parameter { color: #FFFFFF; }

div.color-helper { margin: 0; padding: 0.5rem; }
.color-helper .small { font-size: 0.7rem; }
.color-helper .alpha { text-decoration: underline; }

mdpopups: =====HTML OUTPUT=====
mdpopups: 
<p><a class="small" href="__palettes__">palettes</a> <a class="small" href="__color_picker__:#009fff">picker</a> </p><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAYCAIAAAAj02USAAAAZElEQVR4nO3SMQ2AUBQEwe8JwRjCE1CQEEretnOZc7DrMAtb9zez0d6A1n7CLwIiERCJgEgERCIgEgGRCIhEQCQCIhEQiYBIBEQiIBIBkQiIREAkAiIREImASD4BmQ32BGQ23gU8TLx5n1ovUAAAAABJRU5ErkJggg=="></p><hr /><p><a class="small" href="__convert__:#009fff:hex">&gt;&gt;&gt;</a>  <span class="support type">#009fff</span><br><a class="small" href="__convert__:#009fff:hexa">&gt;&gt;&gt;</a>  <span class="support type"></span><span class="support typealpha">ff</span><br></p>

@facelessuser
Copy link
Owner

Hmm. Now that I'm thinking about it, in the recent version I removed passing phantom previews through mdpopups to reduce overhead on each render. I will setup a portable Sublime setup on my Windows machine tonight and see what I see. I have unreleased stuff running on my current setup, and I want to get a normal user setup to see what I see.

I'll let you know what I find.

@facelessuser
Copy link
Owner

Seti UX apparently assigns 10px padding to phantoms which I find annoying. Themes need to stick to colors and stop trying to assume that everyone wants their phantoms with tons of padding. In the next version of mdpopups, even I am removing padding from popups as well. I'm going to leave that up to plugins from now on.

Anyways, with that said, ColorHelper was injecting CSS for previews to ensure no padding and margins, but I used a , instead of a ; in the CSS essentially breaking it. This will be fixed in the next version which should release today or tomorrow.

@ctf0
Copy link
Author

ctf0 commented Feb 2, 2017 •
edited

sweet.
regarding the 10px padding u r correct but honestly i found something like 0px or 5px isnt satisfactory, however i wish there was an option where the user can define how much padding he/she wants.

@facelessuser
Copy link
Owner

regarding the 10px padding u r correct but honestly i found something like 0px or 5px isnt satisfactory,

My point is that some phantoms will require different padding depending how they are used. You might like 10px generally, but it doesn't work in every situation. I think themes shouldn't set margins and padding at all, but that is my personal opinion. And then plugins can pad accordingly. In this case, color previews shouldn't have any padding.

With Mdpopups, I don't have padding by default on phantoms (and I plan on removing padding from tooltips by default as well). Plugins who use the mdpopups should wrap content in a div with a unique, plugin specific class and apply padding as they like, then a user can change that via their custom mdpopups.css.

With ColorHelper, we are constantly updating and generating phantoms so much, that I didn't want to continue running each phantom through the overhead of mdpopups CSS templates etc. Mdpopups has its specific applications, but I felt color previews was best to not go down that path anymore.

@ctf0
Copy link
Author

ctf0 commented Feb 2, 2017

u r right, i believe app controlling its own phantoms layout is the best solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@facelessuser @ctf0