CDE Window

cde-window.markdown

CDE Window

CSS Emulation of the UI style of the Common Desktop Environment

A Pen by Vegard Berg on CodePen.

License.

index.html

<div class="window">
  <div class="titlebar">
    <div class="buttons-left">
      <button class="button1"></button>
    </div>
    <div class="titlebar-text">
      Testing
    </div>
    <div class="buttons-right">
      <button class="button2"></button>
      <button class="button3"></button>
    </div>
  </div>
  <div class="body">
    <p>Hello, world!</p>
    <br>
    <p>this is an example of speech.</p>
    <br>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis leo sapien, facilisis ac faucibus vel, finibus vel justo. Ut vel fringilla nulla. Nulla eleifend vestibulum maximus. Mauris ut sapien a est luctus semper. Proin vel bibendum mauris. Morbi eu nulla ac urna aliquet semper non a nisi. Vestibulum tortor ligula, rutrum et gravida sed, scelerisque id elit. Curabitur quis diam dignissim, placerat lectus ac, elementum sapien. Nulla non erat lacus. 
    </p>
     <br>
    <hr>
    <button>pointless button</button>
    <input value="egg">
  </div>
  </div>
</div>

style.scss

@import url('https://fonts.cdnfonts.com/css/lucida-sans');

$button1:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpX5UHAwo4pChOlkQFXHUKhShQqgVWnUwufRDaNKQpLg4Cq4FBz8Wqw4uzro6uAqC4AeIo5OToouU+L+k0CLWg+N+vLv3uHsHCNUi0+22MUA3HCsZj0npzIoUekU3OiEihH6F2easLCfQcnzdI8DXuyjPan3uz9GjZW0GBCTiGWZaDvE68dSmY3LeJxZZQdGIz4lHLbog8SPXVZ/fOOc9FnimaKWSc8QisZRvYrWJWcHSiSeJI5puUL6Q9lnjvMVZL5ZZ/Z78heGssbzEdZpDiGMBi5AhQUUZGyjCQZRWgxQbSdqPtfAPen6ZXCq5NsDIMY8SdCieH/wPfndr5ybG/aRwDGh/cd2PYSC0C9Qqrvt97Lq1EyD4DFwZDX+pCkx/kl5paJEjoHcbuLhuaOoecLkDDDyZiqV4UpCmkMsB72f0TRmg7xboWvV7q+/j9AFIUVeJG+DgEBjJU/Zai3d3NPf275l6fz8eR3KFeGWtmAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+YLCRQIE1FZ7N4AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAPElEQVQoz2N8u6LgPwOZgImBAjBENbMgc7gMAwhq+HZ+A3bN6JLoYMLG0wwF/qY0cDbMdGIB42gioaNmADDWEKw/1CNEAAAAAElFTkSuQmCC');
$button2:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpX5UHAwo4pChOlkQFXHUKhShQqgVWnUwufRDaNKQpLg4Cq4FBz8Wqw4uzro6uAqC4AeIo5OToouU+L+k0CLWg+N+vLv3uHsHCNUi0+22MUA3HCsZj0npzIoUekU3OiEihH6F2easLCfQcnzdI8DXuyjPan3uz9GjZW0GBCTiGWZaDvE68dSmY3LeJxZZQdGIz4lHLbog8SPXVZ/fOOc9FnimaKWSc8QisZRvYrWJWcHSiSeJI5puUL6Q9lnjvMVZL5ZZ/Z78heGssbzEdZpDiGMBi5AhQUUZGyjCQZRWgxQbSdqPtfAPen6ZXCq5NsDIMY8SdCieH/wPfndr5ybG/aRwDGh/cd2PYSC0C9Qqrvt97Lq1EyD4DFwZDX+pCkx/kl5paJEjoHcbuLhuaOoecLkDDDyZiqV4UpCmkMsB72f0TRmg7xboWvV7q+/j9AFIUVeJG+DgEBjJU/Zai3d3NPf275l6fz8eR3KFeGWtmAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+YLCRQILOc/weMAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAO0lEQVQoz2N8u6LgPwOZgImBAjBENbNgE+QyDEDhfzu/gXjNyBombDzNUOBvSidnw2wkBBhHEwkdNQMASfIQrDL/sg8AAAAASUVORK5CYII=');
$button3:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpX5UHAwo4pChOlkQFXHUKhShQqgVWnUwufRDaNKQpLg4Cq4FBz8Wqw4uzro6uAqC4AeIo5OToouU+L+k0CLWg+N+vLv3uHsHCNUi0+22MUA3HCsZj0npzIoUekU3OiEihH6F2easLCfQcnzdI8DXuyjPan3uz9GjZW0GBCTiGWZaDvE68dSmY3LeJxZZQdGIz4lHLbog8SPXVZ/fOOc9FnimaKWSc8QisZRvYrWJWcHSiSeJI5puUL6Q9lnjvMVZL5ZZ/Z78heGssbzEdZpDiGMBi5AhQUUZGyjCQZRWgxQbSdqPtfAPen6ZXCq5NsDIMY8SdCieH/wPfndr5ybG/aRwDGh/cd2PYSC0C9Qqrvt97Lq1EyD4DFwZDX+pCkx/kl5paJEjoHcbuLhuaOoecLkDDDyZiqV4UpCmkMsB72f0TRmg7xboWvV7q+/j9AFIUVeJG+DgEBjJU/Zai3d3NPf275l6fz8eR3KFeGWtmAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+YLCRQJKY5OBC0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAPklEQVQoz2N8u6LgPwOZgImBAkCRZhZkDpdhAEEN385vwK4ZXRIdTNh4mqHA33QQ+HkkambBFh3EAsahmbYBm1kQrGR+z3QAAAAASUVORK5CYII=');

$button-size: 23px;

$orange: #eda870;
$gray: #c6b2a8;
$darkgray: #748190;

button.button1 {
  width: $button-size;
  height: $button-size;
  background-image: $button1;
  background-size: cover;
}

button.button2 {
  width: $button-size;
  height: $button-size;
  background-image: $button2;
  background-size: cover;
}

button.button3 {
  width: $button-size;
  height: $button-size;
  background-image: $button3;
  background-size: cover;
}

div.titlebar {
  user-select: none;
  border: 0px groove $orange;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}

div.buttons-left {
  display: flex;
  //margin-top: -3px;
}

div.buttons-right {
  display: flex;
}

div.window {
  font-family: 'Lucida Sans Typewriter', sans-serif;
  display: flex;
  flex-direction: column;
  border: 6px ridge $orange;
  background-color: $orange;
  max-width: 800px;
  min-width: 400px;
}

div.window div.body {
  font-family: 'Lucida Sans Typewriter', sans-serif;
  background-color: #c6b2a8;
  padding: .5em;
  border: 3px ridge $orange;
}

body {
  display: flex;
  justify-content: center;
  //background-color: #748190;
  background: rgb(116,129,144);
  background: linear-gradient(90deg, rgba(116,129,144,1) 0%, rgba(116,129,144,1) 90%, rgba(84,97,112,1) 90%, rgba(84,97,112,1) 100%);
  background-size: 20px 100% ;
}

div.body button {
   font-family: 'Lucida Sans Typewriter', sans-serif;
  background-color: $gray;
}

div.body input {
  font-family: 'Lucida Sans Typewriter', sans-serif;
  border: 2px ridge $gray;
  border-radius: 0px;
  background-color: $darkgray ;
  color: white;
}