Ubuntu Terminal Adwaita-dark in CSS

4 min readMar 12, 2020

The minimalist design for Ubuntu combine with the famous Adwaita theme are beautiful and unique. If you are starting with Web technologies or want to refresh some fun CSS concepts you can join me recreating this Ubuntu terminal in CSS.

Semantic HTML

We are going to organize the differents parts (components) of The Ubuntu terminal but instead of using divites (divs tags every where), overdose of attributes, classes…

<div class="col-xs-12 col-sm-6 col-md-8"><button class="toolbar__button toolbar__button--exit">&#10005;</button><div class="terminal-prompt-title"></div></div>

We are going to use our own Semantic HTML. You already know the difference:

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

But we are going to go further using our own tags.

<g-terminal>
  <g-toolbar></g-toolbar>
  <g-promt></g-promt>
</g-terminal>

It’s best practice to use a dash like this for your custom tags in order to avoid name conflicts with other custom tags. Also, it’s obviously a good idea not to use tag names that are already defined by HTML.

<g-terminal>
  <g-toolbar>
    <g-add></g-add>
    <g-title>gengns@slimbook: ~</g-title>
    <g-search></g-search>
    <g-menu></g-menu>
    <g-minimize></g-minimize>
    <g-maximize></g-maximize>
    <g-close></g-close>
  </g-toolbar>
  <g-promt>
    <g-user>gengns@slimbook</g-user>
    <g-location>~</g-location>
    <g-cursor></g-cursor>
  </g-promt>
</g-terminal>

Notice that we don’t need to create Custom Elements that encapsulate your functionality and style. We just need Custom Tags that make our code more readable.

Toolbar

The Ubuntu Adwaita terminal toolbar consists of six buttons and a title with the user and the system name. The background of the toolbar is actually a slight linear gradient of dark greys. Additionally, the topbar right and left corners are rounded unlike the bottom right and left corners of the whole terminal.

g-toolbar {
  background: linear-gradient(#262626 0%, #2b2b2b 100%);
  border: 1px solid #070707;
  width: 100%;
  height: 45px;
  padding: 0 8px;
  box-sizing: border-box;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0.5px 0 rgba(256, 256, 256, .15);
}

Apart from the 1 pixel border, it has a white besel at the top.

Toolbar Title

The toolbar title is always in the center and has an ellipsis effect. Try changing the terminal width in g-terminal.

g-title {
  color: var(--white);
  font-weight: bold;
  text-align: center;
  width: calc(100% - 400px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 28%;
  margin-right: auto;
}

Toolbar Buttons

We have 2 different types of toolbar buttons.

The three first, with rounded corners and a slightly brightness effect.

g-add, g-search, g-menu {
  border: 1px solid var(--black);
  background-color: #333;
  border-bottom: 1px solid black;
  border-radius: 5px;
}

g-toolbar > *:nth-child(-n+4):not(g-title):hover {
  filter: brightness(110%);
  transition: filter 0.5s ease;
}

The rest, without borders and a background circle effect.

g-toolbar > *:nth-last-child(-n+3):hover {
  border: 1px solid var(--black);
  border-radius: 50%;
  background-color: #333;
  padding: 7px;
  transition: background-color 0.5s ease;
}

We are using the original Adwaita SVG icons in CSS for the buttons.

Remember that you can copy directly your SVG and paste it on your CSS background-image property as Data URLs. Add data:image/svg+xml, at the beginning and change the pad character (#) for the HTML URL equivalent code (%28)

g-minimize {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 10.009h8v1.989H4z" fill="%23e5e5e3"/></svg>');
}

Promt

The promt of the terminal is much simpler, a rectangle with a dark background.

g-promt {
  background: #2d2d2d;
  height: calc(100% - 25px);
  padding: 4px 2px;
  display: flex;
}

Promt User

Set the user together with the location using Pseudo-elements to generate some extra symbols like the dollar.

g-user {
  color: #4a9009;
  font-weight: bold;
}g-location::before {
  content: ':';
  color: var(--white);
  font-weight: normal;
}g-location {
  color: #33629e;
  font-weight: bold;
}g-location::after {
  content: '$';
  color: var(--white);
  font-weight: normal;
}

Promt Cursor

And last but not least, add the terminal cursor, which is just a white block. We can animate the cursor like it’s blinking by changing the opacity from 0 to 1.

g-cursor {
  height: 17px;
  width: 8px;
  background: var(--white);
  margin-left: 8px;
  animation: 800ms ease infinite alternate blink;
}@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Further insights

We can try to add some Promt Scrollbars. Use the Ubuntu Adwaita-dark style but remember that unfortunatly we don’t have standard CSS Scrollbars yet.

You can improve your Ubuntu terminal adding more interaction: allow users to type, give some magic to the buttons, drag&drop, etc.

Keep in touch

Do you think all operating system should support CSS styling by default? What are your thoughts about semantic HTML? Leave a comment to let us know!

And if you want to know next time I publish something, you can also follow me on Medium. Don’t forget to hand clapping (Flamenco style) 😊

T-Shirts

★ Now you can have some of my coolest T-Shirts for programmers, check it out!