@import '../variables';
@import '../mixins';

.#{$prefix}-ui-titlebar {
  @extend %ui-container;

  @include hidden-animated;
  @include layout-align-top;

  background: linear-gradient(to top, $color-transparent, $color-background-bars);
  padding: .5em 1em 1em;

  > .#{$prefix}-container-wrapper {
    padding: .5em;

    .#{$prefix}-ui-titlebar-title {
      cursor: default;
      display: block;
      font-size: 1.2em;
    }

    .#{$prefix}-ui-titlebar-description {
      color: $color-secondary;
      cursor: default;
      display: block;
    }
  }
}

@import '../variables';
@import '../mixins';

.#{$prefix}-ui-titlebar {
  @extend %ui-container;

  @include hidden-animated;
  @include layout-align-top;

  background: linear-gradient(to top, $color-transparent, $color-background-bars);
  padding: .5em 1em 1em;

  > .#{$prefix}-container-wrapper {
    padding: .5em;

    .#{$prefix}-ui-titlebar-title {
      cursor: default;
      display: block;
      font-size: 1.2em;
      text-shadow: 0 0 5px $color-black;
    }

    .#{$prefix}-ui-titlebar-description {
      color: lighten($color-secondary, 30%);
      cursor: default;
      display: block;
      text-shadow: 0 0 5px $color-black;
    }
  }
}

Add shadow and brighten description text to improve readability
Add shadow and brighten description text to improve readability
