Blender - Samin

by Samin Sami

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Samin</title>
<style>
  :root{
    --top:#1f1f1f;
    --bar:#2b2b2b;
    --bar2:#303030;
    --panel:#2d2d2d;
    --panel2:#343434;
    --viewport:#393939;
    --line:#1a1a1a;
    --line2:#464646;
    --text:#c9c9c9;
    --muted:#909090;
    --muted2:#6f6f6f;
    --blue:#477fb3;
    --blue2:#4c91d9;
    --orange:#f5a623;
    --orange2:#ffb22a;
    --green:#57b65f;
    --red:#dd5c5c;
    --field:#202020;
    --field2:#242424;
    --shadow:rgba(0,0,0,.45);
    --toolbar-w:42px;
    --side-w:292px;
    --header-h:31px;
    --font: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;overflow:hidden;background:#202020;color:var(--text);font:12px/1.25 var(--font);user-select:none;-webkit-user-select:none}
  button,input,select{font:inherit;color:inherit}
  button{background:none;border:0;padding:0;margin:0;color:inherit;cursor:default}
  #app{height:100vh;display:grid;grid-template-rows:24px 30px minmax(0,1fr) 22px;background:var(--top)}
  .topbar{display:flex;align-items:center;height:24px;background:#1f1f1f;border-bottom:1px solid #161616;color:#c8c8c8;white-space:nowrap}
  .brand{display:flex;align-items:center;gap:7px;padding:0 10px 0 8px;height:100%;font-weight:600;letter-spacing:.2px;color:#d6d6d6}
  .brand-mark{width:14px;height:14px;border-radius:50%;border:2px solid #8e8e8e;position:relative;display:inline-block}
  .brand-mark:before{content:"";position:absolute;width:6px;height:2px;background:#8e8e8e;left:-5px;top:4px;transform:rotate(-25deg);border-radius:1px}
  .top-menu{display:flex;align-items:center;height:100%}
  .menu-button{height:22px;padding:3px 8px;border-radius:3px;color:#c9c9c9}
  .menu-button:hover,.menu-button.active{background:#3a3a3a;color:#fff}
 ...