런박스 CSS

개요

런박스 CSS

html

Copy

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.min.css">
<style>
header {
  flex-direction: row;
  border: 1px solid silver;
  border-bottom: 0;
  display: flex;
}
.language {
  padding: 2px 16px;
  flex-grow: 1;
}
.tab {
  margin: 0;
  padding: .2rem;
  font: inherit;
  border: 0 solid silver;
  border-left-width: 1px;
  background: transparent;
}
button.tab {
  cursor: pointer;
}
button.tab:hover {
  background: #efe;
}
button.tab:focus {
  outline: 0;
}
pre {
  border: 1px solid silver;
  padding: 1rem;
  margin: 0;
}
</style>
<header>
  <span class="language">Python</span>
  <span class="tab"><i class="mdi mdi-spin mdi-loading"></i> Pending</span>
  <span class="tab"><i class="mdi mdi-spin mdi-google-circles-extended"></i> Running</span>
  <button class="tab"><i class="mdi mdi-triangle mdi-rotate-90"></i> Run</button>
  <button class="tab"><i class="mdi mdi-content-copy"></i> Copy</button>
</header>
<pre>
import matplotlib.pyplot as plt
x = ["Jan","Feb","Mar","Thr","Fri","Sat","Sun"]
sales = [314,159,265,358,979,323,846]
plt.bar(x, sales)
plt.show()
</pre>