Fixed CSS for black-white and blue theme.

Author: MrCoder

package.json

@@ -96,7 +96,7 @@
 		"split.js": "1.6.2",
 		"svg-transform-loader": "^2.0.12",
 		"vue": "^2.6.12",
-		"vue-sequence": "^1.0.159",
+		"vue-sequence": "^1.0.160",
 		"vuex": "^3.6.2"
 	},
 	"resolutions": {

src/templates/template-black-white.json

@@ -6,6 +6,6 @@
 	"jsMode": "js",
 	"layoutMode": 1,
 	"js": "Client->SGW.\"Get order by id\" {\n  svc.Get(id) {\n    new X()\n    rep.\"load order\" {\n      ==\"Start Here\"==\n      MF.\"load order from mainframe\"\n      ==\"End Here\"==\n      if(order == null) {\n        @return \n        SGW->Client:404\n      } else {\n        return order\n      }\n      \n      while(true) {\n        svc.refresh(data)\n      }\n      processOrder()\n    }\n    return order\n  }\n  return response\n}",
-	"css": "@fragmentBorderColor: rgba(0, 0, 0, 0.30);\n@nameBackgroundColor: rgba(0, 0, 0, 0.07);\n@messageLineColor: #000;\n@occuranceBorderColor: #000;\n@occuranceBackgroundColor: #F5F5F5;\n@participantLineColor: rgba(0, 0, 0, 0.40);\n@participantBorderColor: #000;\n@participantBackgroundColor: #fff;\n@dividerBackgroundColor: #000;\n@dividerBorderColor: #000;\n\n#diagram {\n  .sequence-diagram {\n    .divider {\n      .name {\n        padding: 2px 6px 2px 6px;\n        border-radius: 0px;\n        margin: 0px;\n        border-color: @dividerBorderColor;\n        box-shadow: 2px 2px 0px @dividerBorderColor;\n      }\n      .left {\n        background: @dividerBackgroundColor;\n      }\n      .right {\n        background: @dividerBackgroundColor;\n      }\n    }\n    .lifeline {\n      .participant {\n        font-weight: 400;\n        border: 2px solid @participantBorderColor;\n        background: @participantBackgroundColor;  \n        box-shadow: 2px 2px 0px @participantBorderColor;\n        label {\n          text-decoration: underline;\n        }\n      }\n      .line {\n        border-left-color: @participantLineColor;\n      }\n    }\n    .message {\n      .name {\n        padding-bottom: 1px;\n      }\n      border-bottom-color: @messageLineColor;\n      svg {\n        polyline {\n          fill: @messageLineColor;\n          stroke: @messageLineColor;\n        }\n      }\n    }\n    .message.self {\n      svg>polyline:not(.head) {\n        fill: none;\n      }\n    }\n    .occurrence {\n      background-color: white;\n      border: 2px solid @occuranceBorderColor;\n      background-color: @occuranceBackgroundColor;\n    }\n    .fragment {\n      margin-top: 8px;\n      margin-bottom: 8px;\n      border-radius: 0px;\n      border: 1px solid @fragmentBorderColor;\n      .fragment.par>.block>.statement-container:not(:first-child), .segment:not(:first-child) {\n        border-top: 1px solid @fragmentBorderColor;\n      }\n      .header {\n        .name {\n          padding: 4px 4px 4px 6px;\n          background: @nameBackgroundColor;\n          label { /* name label */\n            background: transparent;\n            padding: 0px;\n          }\n        }\n      }\n      label { /* other labels e.g. condition */\n        display: inline-block; \n        padding: 4px 4px 4px 6px;\n      }\n    }\n    .statement-container {\n      margin-bottom: 8px;\n    }\n  }\n}",
+	"css": "@fragmentBorderColor: rgba(0, 0, 0, 0.30);\n@nameBackgroundColor: rgba(0, 0, 0, 0.07);\n@messageLineColor: #000;\n@occuranceBorderColor: #000;\n@occuranceBackgroundColor: #F5F5F5;\n@participantLineColor: rgba(0, 0, 0, 0.40);\n@participantBorderColor: #000;\n@participantBackgroundColor: #fff;\n@dividerBackgroundColor: #000;\n@dividerBorderColor: #000;\n\n#diagram {\n  .sequence-diagram {\n    .divider {\n      .name {\n        padding: 2px 6px 2px 6px;\n        border-radius: 0px;\n        margin: 0px;\n        border-color: @dividerBorderColor;\n        box-shadow: 2px 2px 0px @dividerBorderColor;\n      }\n      .left {\n        background: @dividerBackgroundColor;\n      }\n      .right {\n        background: @dividerBackgroundColor;\n      }\n    }\n    .lifeline {\n      .participant {\n        font-weight: 400;\n        border: 2px solid @participantBorderColor;\n        background: @participantBackgroundColor;  \n        box-shadow: 2px 2px 0px @participantBorderColor;\n        label {\n          text-decoration: underline;\n        }\n      }\n      .line {\n        border-left-color: @participantLineColor;\n      }\n    }\n    .message {\n      .name {\n        padding-bottom: 1px;\n      }\n      border-bottom-color: @messageLineColor;\n      svg {\n        polyline {\n          fill: @messageLineColor;\n          stroke: @messageLineColor;\n        }\n      }\n    }\n    .message.self {\n      svg>polyline:not(.head) {\n        fill: none;\n      }\n    }\n    .occurrence {\n      background-color: white;\n      border: 2px solid @occuranceBorderColor;\n      background-color: @occuranceBackgroundColor;\n    }\n    .fragment {\n      margin-top: 8px;\n      margin-bottom: 8px;\n      border-radius: 0px;\n      border: 1px solid @fragmentBorderColor;\n      .fragment.par>.block>.statement-container:not(:first-child), .segment:not(:first-child) {\n        border-top: 1px solid @fragmentBorderColor;\n      }\n      .header {\n        .name {\n          padding: 4px 4px 4px 6px;\n          background: @nameBackgroundColor;\n          label { /* name label */\n            background: transparent;\n            padding: 0px;\n          }\n        }\n      }\n    }\n    .statement-container {\n      margin-bottom: 8px;\n    }\n  }\n}",
     "html": ""
 }

src/templates/template-blue.json

@@ -6,6 +6,6 @@
 	"jsMode": "js",
 	"layoutMode": 1,
 	"js": "Client->SGW.\"Get order by id\" {\n  svc.Get(id) {\n    new X()\n    rep.\"load order\" {\n      ==\"Start Here\"==\n      MF.\"load order from mainframe\"\n      ==\"End Here\"==\n      if(order == null) {\n        @return \n        SGW->Client:404\n      } else {\n        return order\n      }\n      \n      while(true) {\n        svc.refresh(data)\n      }\n      processOrder()\n    }\n    return order\n  }\n  return response\n}",
-	"css": "@fragmentBorderColor: rgba(4, 46, 110, 0.30);\n@nameBackgroundColor: rgba(4, 46, 110, 0.10);\n@labelTextColor: #032C72;\n@messageLineColor: #032C72;\n@occuranceBorderColor: #032C72;\n@occuranceBackgroundColor: #fff;\n@participantLineColor: #032C72;\n@participantBorderColor: #032C72;\n@participantTextColor: #032C72;\n@participantBackgroundColor: rgba(146, 192, 240, 0.30);\n@dividerBackgroundColor: #E28553;\n@dividerBorderColor: #E28553;\n@dividerTextColor: #E28553;\n\n#diagram {\n  .sequence-diagram {\n    .divider {\n      .name {\n        padding: 2px 6px 2px 6px;\n        border-radius: 4px;\n        margin: 0px;\n        border-color: @dividerBorderColor;\n        color: @dividerTextColor;\n      }\n      .left {\n        background: @dividerBackgroundColor;\n      }\n      .right {\n        background: @dividerBackgroundColor;\n      }\n    }\n    .lifeline {\n      .participant {\n        font-weight: 400;\n        border: 2px solid @participantBorderColor;\n        background: @participantBackgroundColor;      \n        label {\n          text-decoration: underline;\n          color: @participantTextColor;\n        }\n      }\n      .line {\n        border-left-color: @participantLineColor;\n      }\n    }\n    .message {\n      .name {\n        padding-bottom: 1px;\n        color: @messageLineColor;\n      }\n      border-bottom-color: @messageLineColor;\n      svg {\n        polyline {\n          fill: @messageLineColor;\n          stroke: @messageLineColor;\n        }\n      }\n    }\n    .message.self {\n      svg>polyline:not(.head) {\n        fill: none;\n      }\n    }\n    .occurrence {\n      background-color: white;\n      border: 2px solid @occuranceBorderColor;\n      background-color: @occuranceBackgroundColor;\n    }\n    .fragment {\n      margin-top: 8px;\n      margin-bottom: 8px;\n      border-radius: 4px;\n      border: 1px solid @fragmentBorderColor;\n      .fragment.par>.block>.statement-container:not(:first-child), .segment:not(:first-child) {\n        border-top: 1px solid @fragmentBorderColor;\n      }\n      .header {\n        .name {\n          padding: 4px 4px 4px 6px;\n          background: @nameBackgroundColor;\n          label { /* name label */\n            background: transparent;\n            padding: 0px;\n            color: @labelTextColor;\n          }\n        }\n      }\n      label { /* other labels e.g. condition */\n        display: inline-block; \n        padding: 4px 4px 4px 6px;\n        color: @labelTextColor;\n      }\n    }\n    .statement-container {\n      margin-bottom: 8px;\n    }\n  }\n}",
+	"css": "@fragmentBorderColor: rgba(4, 46, 110, 0.30);\n@nameBackgroundColor: rgba(4, 46, 110, 0.10);\n@labelTextColor: #032C72;\n@messageLineColor: #032C72;\n@occuranceBorderColor: #032C72;\n@occuranceBackgroundColor: #fff;\n@participantLineColor: #032C72;\n@participantBorderColor: #032C72;\n@participantTextColor: #032C72;\n@participantBackgroundColor: rgba(146, 192, 240, 0.30);\n@dividerBackgroundColor: #E28553;\n@dividerBorderColor: #E28553;\n@dividerTextColor: #E28553;\n\n#diagram {\n  .sequence-diagram {\n    .divider {\n      .name {\n        padding: 2px 6px 2px 6px;\n        border-radius: 4px;\n        margin: 0px;\n        border-color: @dividerBorderColor;\n        color: @dividerTextColor;\n      }\n      .left {\n        background: @dividerBackgroundColor;\n      }\n      .right {\n        background: @dividerBackgroundColor;\n      }\n    }\n    .lifeline {\n      .participant {\n        font-weight: 400;\n        border: 2px solid @participantBorderColor;\n        background: @participantBackgroundColor;      \n        label {\n          text-decoration: underline;\n          color: @participantTextColor;\n        }\n      }\n      .line {\n        border-left-color: @participantLineColor;\n      }\n    }\n    .message {\n      .name {\n        padding-bottom: 1px;\n        color: @messageLineColor;\n      }\n      border-bottom-color: @messageLineColor;\n      svg {\n        polyline {\n          fill: @messageLineColor;\n          stroke: @messageLineColor;\n        }\n      }\n    }\n    .message.self {\n      svg>polyline:not(.head) {\n        fill: none;\n      }\n    }\n    .occurrence {\n      background-color: white;\n      border: 2px solid @occuranceBorderColor;\n      background-color: @occuranceBackgroundColor;\n    }\n    .fragment {\n      margin-top: 8px;\n      margin-bottom: 8px;\n      border-radius: 4px;\n      border: 1px solid @fragmentBorderColor;\n      .fragment.par>.block>.statement-container:not(:first-child), .segment:not(:first-child) {\n        border-top: 1px solid @fragmentBorderColor;\n      }\n      .header {\n        .name {\n          padding: 4px 4px 4px 6px;\n          background: @nameBackgroundColor;\n          label { /* name label */\n            background: transparent;\n            padding: 0px;\n            color: @labelTextColor;\n          }\n        }\n      }\n    }\n    .statement-container {\n      margin-bottom: 8px;\n    }\n  }\n}",
     "html": ""
 }

yarn.lock

@@ -14950,10 +14950,10 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
   integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
 
-vue-sequence@^1.0.159:
-  version "1.0.159"
-  resolved "https://registry.yarnpkg.com/vue-sequence/-/vue-sequence-1.0.159.tgz#9d0166e1b38094dfdd1367a0e03b47bd14d34eb7"
-  integrity sha512-RrEY2UZc1ggCdnBoEqyKs0Vu862h0iDNCJH27nTXf/XTFtuFDHEeLbhcoaLUK1WryZ9MwKWA/bFqLYeE7yOQxQ==
+vue-sequence@^1.0.160:
+  version "1.0.160"
+  resolved "https://registry.yarnpkg.com/vue-sequence/-/vue-sequence-1.0.160.tgz#f5f991c79197143a86540ca2c4845b65403bbb73"
+  integrity sha512-B8QFWJPXDjv7DpQKUTncbgDuCN5k+9GAmg+M1t0hZntH8/tG+WCBCMhQQJFfEIw7/7adyXWyQB7jRpUv3bd5eA==
   dependencies:
     "@types/assert" "^1.5.4"
     antlr4 "~4.8.0"