1 files changed, 219 insertions, 0 deletions
diff --git a/chained-ci-vue/style.css b/chained-ci-vue/style.css
new file mode 100644
index 0000000..d2c7f8b
--- /dev/null
+++ b/chained-ci-vue/style.css
@@ -0,0 +1,219 @@
+a {
+    text-decoration: none;
+}
+
+html, body {
+    margin: 5px;
+    padding: 0;
+}
+
+.main{
+  margin: auto;
+  width: 70%;
+  min-width: 1200px;
+}
+
+.tools {
+  margin: 10px auto;
+}
+.tools > div {
+  padding: 0.3em;
+  margin: 1em;
+}.tools {
+  display: grid;
+  text-align: center;
+  grid-template-columns: repeat(8, 1fr );
+  grid-gap: 5px;
+}
+.tool_sc {
+  grid-column: 1 / 3;
+}
+.tool_timer {
+  grid-column: 3 / 8;
+}
+.tool_new {
+  grid-column: 8;
+}
+
+
+.pipeline {
+  margin: 10px auto;
+}
+.pipeline > div {
+  padding: 1em;
+  margin: 1em;
+}.pipeline {
+  display: grid;
+  grid-template-columns: repeat( 6, 1fr );
+  grid-gap: 5px;
+}
+
+
+.pipeline_header {
+  grid-column: 1;
+  grid-row: 1;
+}.pipeline_header {
+  display: grid;
+  grid-template-columns: repeat( 2, 1fr );
+  grid-template-rows: repeat(5, 3fr);
+  grid-gap: 5px;
+}
+
+.pipeline_user_icon {
+  grid-column: 1 ;
+  grid-row: 4 / 6;
+}
+
+.pipeline_statusIcon {
+  grid-column: 2 ;
+  grid-row: 4 / 6;
+} img{
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+}
+
+.pipeline_scenario {
+  font-weight: bold;
+  grid-column: 1 / 3;
+  grid-row:1;
+}
+.pipeline_branch {
+  grid-column: 1;
+  grid-row:2;
+}
+.pipeline_date {
+  grid-column: 1;
+  grid-row:3;
+}
+.pipeline_time {
+  grid-column: 2;
+  grid-row:3;
+}
+
+.pipeline_duration {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.pipeline_stages {
+  grid-column: 2 / 7;
+  grid-row: 1;
+}
+
+.pipeline_loader {
+  grid-column: 1 / 7;
+  grid-row: 1;
+}
+
+.stage {
+}
+.stage > div {
+  padding: 1px;
+  width: 100%;
+}.stage {
+  float:left;
+  display: table;
+}
+
+.stage_name{
+  display: inline-block;
+  text-align: center;
+  padding: 2px;
+}
+
+.job{
+  display: inline-block;
+} > div {
+}.job{
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-gap: 0px;
+}
+
+.job_statusIcon{
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.job_name{
+  padding: 2px;
+  grid-column: 2 / 7;
+  grid-row: 1;
+}
+
+.statusIcon{
+  padding: 2px;
+}
+
+
+
+
+
+
+
+
+
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+  display: table;
+  transition: opacity .3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  width: 60%;
+  min-height: 600px;;
+  margin: 0px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
+  transition: all .3s ease;
+}
+
+.modal-header h3 {
+  margin-top: 0;
+  color: #42b983;
+}
+
+.modal-body {
+  margin: 20px 0;
+}
+
+.modal-default-button {
+  float: right;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}