-
-
Notifications
You must be signed in to change notification settings - Fork 30
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.
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
white box around the color palette #83
Comments
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? |
{
"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
} |
I'll take another look, but it looks like something is setting a background and padding your phantoms. |
is there a debug cmnd to check what is controlling the |
In general for phantoms, no. You could enable I think |
do u mean adding |
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). |
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">>>></a> <span class="support type">#009fff</span><br><a class="small" href="__convert__:#009fff:hexa">>>></a> <span class="support type"></span><span class="support typealpha">ff</span><br></p> |
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. |
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 |
sweet. |
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. |
u r right, i believe app controlling its own phantoms layout is the best solution. |
out of the blue, the color preview started to have a white box around the color palette.
https://packagecontrol.io/packages/Seti_UX
Support Info
The text was updated successfully, but these errors were encountered: