Is there a way to add padding to top of page?

[wbond]

Adding “content_margin” to “scroll_area_control” seems to add the same margin to other elements.

This is very likely because you didn’t target the rule with a parents specifier. The scroll_area_control is used anywhere content can grow and scrolling is required. If you check out the rules for the Adaptive theme, you’ll see one with a parents targeting the sidebar_container so it only applies to the sidebar.

[Monty]

Got it. I just saw how @deathaxe did that above. Thanks!

[ihodev]

There is no padding at the very top of the page, which makes the text on the first line bump right up against the bottom of the tabs. It’s only cosmetic, but for some reason this really bugs me.

I’ve done that in DA UI by default. You can try to play with its settings and see the output, when you get the appearance that fits your needs – you can easily add some missing styles to the Adaptive.sublime-theme via creating theme file in Packages/User folder.

[deathaxe]

I already wanted to ask you how you accomplished the padding in the Sodish theme. I guess the space between the tabs and the views are part of the tabset_control? Does it use a special background image or how is it handled? Didn’t find the correct patterns in your theme (too little skills ).

Maybe it’s a task of 5mins for you to create a little patch, for Adaptive which adds a gap between the tabs and the view, which is tinted with the view’s background?

[ihodev]

Maybe it’s a task of 5mins for you to create a little patch, for Adaptive which adds a gap between the tabs and the view, which is tinted with the view’s background?

I think I’ll do that later today. The main difference between DA.sublime-theme and Adaptive.sublime-theme is that I do not set tint_index for the background of tabset, I set it for the tabset “line” layer:

------ tabset background ----------- (e.g. “layer0.tint”: [“background”, 1.0])
------ tabset line background ----- (playing with “tint_index” and “tint_modifier”)
------ tabset rest background ----- (its height equals tabset height - tabset line height, the background color is the same as for tabset itself).

Of course this requires some math when changing DA UI settings, but can be accomplished for Adaptive.sublime-theme because we know the height of the tabset and we can tweak other aspects to get the needed appearance.

[deathaxe]

Hi @Monty, @wbond: I guess, I finally got it. I played around with the hints of @ihodev and found the following patch.

    {
        "class": "tabset_control",
        "content_margin": [4, 0, 8, 10],
        "layer1.draw_center": false,
        "layer1.inner_margin": [0, 0, 0, 10],
        "layer1.opacity": 1.0,
        "layer1.tint": ["background", 0, 0, 0, 0.00],
    },

It adds a padding of 10 pixels to the top of the view. The height of the padding is controlled by the 2 latest entries in the content_margin and layer1.inner_margin.

[wbond]

Hi @Monty, @wbond: I guess, I finally got it.

I believe this will look incorrect if the color scheme for one view is not the global color scheme.

Edit: Although I just noticed the tint has a 0 opacity, so perhaps I am not understanding how this is working.

[deathaxe]

… look incorrect if the color scheme for one view is not the global color scheme

Confirm that

[ihodev]

Sorry for the late response. Create Adaptive.sublime-theme in Packages/User folder with next contents:

[
  //
  // Making the background color of the tab set control the same
  // as for the sidebar.
  //

  {
    "class": "tabset_control",
    "tint_index": -1, // Disabling tab set tinting.
    "layer0.tint": ["background", 0, 0, 0, 0.4]
  },
  {
    "class": "tabset_control",
    "parents": [{"class": "window", "attributes": ["file_dark"]}],
    "layer0.tint": ["background", 255, 255, 255, 0.15]
  },
  {
    "class": "tabset_control",
    "parents": [{"class": "window", "attributes": ["file_medium"]}],
    "layer0.tint": ["background", 0, 0, 0, 0.2]
  },
  {
    "class": "tabset_control",
    "parents": [{"class": "window", "attributes": ["file_light"]}],
    "layer0.tint": ["background", 0, 0, 0, 0.1]
  },

  //
  // Fixing the color of the tab set icon buttons
  //

  {
    "class": "scroll_tabs_left_button",
    "parents": [
      {"class": "window", "attributes": ["file_dark"]},
      {"class": "tabset_control", "attributes": ["file_light"]}
    ],
    "layer0.tint": [255, 255, 255, 1.0]
  },
  {
    "class": "scroll_tabs_left_button",
    "parents": [
      {"class": "window", "attributes": ["file_medium_dark"]},
      {"class": "tabset_control", "attributes": ["file_light"]}
    ],
    "layer0.tint": [255, 255, 255, 1.0]
  },
  {
    "class": "scroll_tabs_left_button",
    "parents": [
      {"class": "window", "attributes": ["file_medium"]},
      {"class": "tabset_control", "attributes": ["file_light"]}
    ],
    "layer0.tint": [255, 255, 255, 1.0]
  },
  {
    "class": "scroll_tabs_left_button",
    "parents": [
      {"class": "window", "attributes": ["file_light"]},
      {"class": "tabset_control", "attributes": ["file_dark"]}
    ],
    "layer0.tint": [0, 0, 0, 0.4]
  },
  {
    "class": "scroll_tabs_left_button",
    "parents": [
      {"class": "window", "attributes": ["file_light"]},
      {"class": "tabset_control", "attributes": ["file_medium_dark"]}
    ],
    "layer0.tint": [0, 0, 0, 0.4]
  },
  {
    "class": "scroll_tabs_left_button",
    "parents": [
      {"class": "window", "attributes": ["file_light"]},
      {"class": "tabset_control", "attributes": ["file_medium"]}
    ],
    "layer0.tint": [0, 0, 0, 0.4]
  },

  {
    "class": "scroll_tabs_right_button",
    "parents": [
      {"class": "window", "attributes": ["file_dark"]},
      {"class": "tabset_control", "attributes": ["file_light"]}
    ],
    "layer0.tint": [255, 255, 255, 1.0]
  },
  {
    "class": "scroll_tabs_right_button",
    "parents": [
      {"class": "window", "attributes": ["file_medium_dark"]},
      {"class": "tabset_control", "attributes": ["file_light"]}
    ],
    "layer0.tint": [255, 255, 255, 1.0]
  },
  {
    "class": "scroll_tabs_right_button",
    "parents": [
      {"class": "window", "attributes": ["file_medium"]},
      {"class": "tabset_control", "attributes": ["file_light"]}
    ],
    "layer0.tint": [255, 255, 255, 1.0]
  },
  {
    "class": "scroll_tabs_right_button",
    "parents": [
      {"class": "window", "attributes": ["file_light"]},
      {"class": "tabset_control", "attributes": ["file_dark"]}
    ],
    "layer0.tint": [0, 0, 0, 0.4]
  },
  {
    "class": "scroll_tabs_right_button",
    "parents": [
      {"class": "window", "attributes": ["file_light"]},
      {"class": "tabset_control", "attributes": ["file_medium_dark"]}
    ],
    "layer0.tint": [0, 0, 0, 0.4]
  },
  {
    "class": "scroll_tabs_right_button",
    "parents": [
      {"class": "window", "attributes": ["file_light"]},
      {"class": "tabset_control", "attributes": ["file_medium"]}
    ],
    "layer0.tint": [0, 0, 0, 0.4]
  },

  {
    "class": "show_tabs_dropdown_button",
    "parents": [
      {"class": "window", "attributes": ["file_dark"]},
      {"class": "tabset_control", "attributes": ["file_light"]}
    ],
    "layer0.tint": [255, 255, 255, 1.0]
  },
  {
    "class": "show_tabs_dropdown_button",
    "parents": [
      {"class": "window", "attributes": ["file_medium_dark"]},
      {"class": "tabset_control", "attributes": ["file_light"]}
    ],
    "layer0.tint": [255, 255, 255, 1.0]
  },
  {
    "class": "show_tabs_dropdown_button",
    "parents": [
      {"class": "window", "attributes": ["file_medium"]},
      {"class": "tabset_control", "attributes": ["file_light"]}
    ],
    "layer0.tint": [255, 255, 255, 1.0]
  },
  {
    "class": "show_tabs_dropdown_button",
    "parents": [
      {"class": "window", "attributes": ["file_light"]},
      {"class": "tabset_control", "attributes": ["file_dark"]}
    ],
    "layer0.tint": [0, 0, 0, 0.4]
  },
  {
    "class": "show_tabs_dropdown_button",
    "parents": [
      {"class": "window", "attributes": ["file_light"]},
      {"class": "tabset_control", "attributes": ["file_medium_dark"]}
    ],
    "layer0.tint": [0, 0, 0, 0.4]
  },
  {
    "class": "show_tabs_dropdown_button",
    "parents": [
      {"class": "window", "attributes": ["file_light"]},
      {"class": "tabset_control", "attributes": ["file_medium"]}
    ],
    "layer0.tint": [0, 0, 0, 0.4]
  },

  //
  // Creating tab set line
  //

  {
    "class": "tabset_control",

    // Adding 12pt bottom padding for tab set line.
    // Default padding is [4, 0, 8, 0].
    "content_margin": [4, 0, 8, 12],

    // Adding the layer for tab set line.
    "tint_index": 1,
    "tint_modifier": [0, 0, 0, 0.0],
    "layer1.opacity": 1.0,
    "layer1.draw_center": false,

    // It should be the same as tab set bottom padding.
    "layer1.inner_margin": [0, 0, 0, 12]
  }
]

Current solution is simpler than I’ve described above, that’s because it doesn’t include tab set line borders.

[deathaxe]

Sorry for the late response.

Not at all.

You are our hero. Pasted it. Works like a charm. It even fixes https://github.com/SublimeTextIssues/Core/issues/1798

Nice.Thank you soo much.

[jeremejevs]

tabset_control works only if you have tabs enabled. I don’t. scroll_area_control is super close, but I found no way to fill it with the background of the text area (or any solid color for that matter, it just renders black at first, and then whatever has scrolled over it in the past, though that may be my compositor’s doing).

@wbond Any pointers?