Tab decoration too close to text

[davegomez]

The decoration line is too close to the text, making really hard to look at the text at some time, even more when your color scheme use green colors similar to the Material UI Theme.

[equinusocio]

@davegomez please share your preferences.

[equinusocio]

You can customize the theme with this rules:

{
         "class": "tabset_control",
         "content_margin": [12, -10, 8, YOU_CUSTOM_BOTTOM_MARGIN]
      },

[philipobrien]

Loving the package so far, but I agree with @davegomez the tab highlight is distracting. If I set the content_margin as you suggest it has no effect for me? My preferences are

{
    "bold_folder_labels": true,
    "caret_style": "phase",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
    "font_face": "Consolas",
    "folder_exclude_patterns": [".idea", ".git"],
    "font_options":
    [
        "gray_antialias",
        "subpixel_antialias"
    ],
    "font_size": 15,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
    ],
    "indent_guide_options":
    [
        "draw_normal",
        "draw_active"
    ],
    "line_padding_bottom": 3,
    "line_padding_top": 3,
    "material_theme_accent_indigo": true,
    "material_theme_contrast_mode": true,
    "material_theme_panel_separator": true,
    "material_theme_small_statusbar": true,
    "material_theme_small_tab": true,
    "overlay_scroll_bars": "enabled",
    "tab_size": 2,
    "theme": "Material-Theme-Darker.sublime-theme",
    "translate_tabs_to_spaces": true,
    "wide_caret": true
}

[sami616]

@davegomez what colours are you using in that screenshot? Exactly what I'm after!

[equinusocio]

@sami616 Bright-Teal accent.

[sami616]

@davegomez @equinusocio i meant the colours in the code :)

On a seperate note, looking at this thread i still cannot figure out how to seprate the tabs from the editor - as mentioned above the active tab line feels too close to line 1.

[equinusocio]

You can't separate tabs from editor. This space is handled by ST and there is no API that i can use to change it.

[sami616]

@equinusocio ah i see, is there a simple way for me to change the active tab style in Material?

[equinusocio]

{
      "class": "tab_control",

      "layer0.tint": [33, 33, 33],
      "layer0.inner_margin": [24, 0],
      "layer0.opacity": 1.0,
      "tint_index": 0,

      "layer1.texture": "Material Theme/assets/darker/tab_current.png",
      "layer1.inner_margin": [0, 0],
      "layer1.opacity": 0.0,

      "layer2.tint": [255, 255, 255, 0],
      "layer2.inner_margin": [0, 0],
      "layer2.opacity": { "target": 0.0, "speed": 3.0, "interpolation": "smoothstep" },

      "layer3.inner_margin": [0, 0],
      "layer3.opacity": { "target": 1.0, "speed": 2.0, "interpolation": "smoothstep" },
      "layer3.texture": {
              "keyframes":
              [
                "Material Theme/assets/darker/tab_animation1.png",
                "Material Theme/assets/darker/tab_animation2.png",
                "Material Theme/assets/darker/tab_animation3.png",
                "Material Theme/assets/darker/tab_animation4.png",
                "Material Theme/assets/darker/tab_animation5.png",
                "Material Theme/assets/darker/tab_animation6.png",
                "Material Theme/assets/darker/tab_animation7.png",
                "Material Theme/assets/darker/tab_animation8.png",
                "Material Theme/assets/darker/tab_animation9.png",
                "Material Theme/assets/darker/tab_animation10.png",
                "Material Theme/assets/darker/tab_animation11.png",
                "Material Theme/assets/darker/tab_animation12.png",
                "Material Theme/assets/darker/tab_animation13.png"
              ],
              "loop": false,
              "frame_time": 0.015,
      },

      "content_margin": [16, 0, 8, 0],
      "max_margin_trim": 0,
      "hit_test_level": 0.4
},

// Selected current tab

{
      "class": "tab_control", "attributes": ["selected"],
      "layer1.opacity": 1.0,
      "layer2.opacity": 0.0,
      "layer3.opacity": 0.0
}

[sami616]

Wow thanks @equinusocio! Could you tell me what file can i find this code in?

[equinusocio]

You have to extract the theme with PackageResourceViewer package, then you have to edit the theme file at the root of the extracted package (Inside sublime packages folder). If you do that, you will never get theme updates since there is the extracted folder (the extracted folder overwrite the packed one)