aboutsummaryrefslogtreecommitdiffstats
path: root/app/comp-fe/composition.css
diff options
context:
space:
mode:
Diffstat (limited to 'app/comp-fe/composition.css')
-rw-r--r--app/comp-fe/composition.css626
1 files changed, 626 insertions, 0 deletions
diff --git a/app/comp-fe/composition.css b/app/comp-fe/composition.css
new file mode 100644
index 0000000..2431858
--- /dev/null
+++ b/app/comp-fe/composition.css
@@ -0,0 +1,626 @@
+body {
+ overflow: hidden;
+}
+
+#icecat {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.product {
+ padding: 5px;
+ margin: 5px;
+ background: rgba(0,0,0,0.05);
+ border-radius: 10px;
+}
+#products {
+ position:absolute;
+ top:10px;
+ left:0px;
+ width:140px;
+ height:200px;
+ font-size: 10px;
+ background: rgba(0,0,0,0);
+ z-index: 10;
+}
+#productlist {
+ position:absolute;
+ top:0;
+}
+.part {
+ padding: 2px;
+ margin: 3px;
+ margin-left: 5px;
+ background: rgba(0,0,0,0.1);
+ display: table;
+}
+.part span {
+ //background: rgba(0,0,0,0.1);
+}
+.part:hover {
+ outline: 1px solid black;
+}
+
+.partnode {
+ padding: 2px;
+ margin-left: 10px;
+}
+.partnode span {
+ padding: 1px;
+ background: rgba(0,0,0,0.1);
+}
+.partnode span:hover {
+ background: rgba(200,100,100,0.3);
+}
+
+.compositionbody {
+ margin:0;
+ padding:0;
+ font-size: 14px;
+ //font-family: Raleway;
+ font-family: helvetica;
+ color: black;
+ //overflow-x: hidden;
+ //overflow-y: hidden;
+ //position:fixed;
+ //text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+ background: rgba(255, 255, 255, 0);
+
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+#compositioncontainer {
+ //position:absolute;
+ overflow:hidden;
+ width: 100%; height: 100%;
+ user-select: none;
+}
+#under {
+ z-index:-10;
+ background: rgba(0,0,0,0);
+ position:absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+}
+#overlay {
+ z-index:1;
+ background: rgba(0,0,0,0);
+ position:absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0; padding: 0;
+ pointer-events: none;
+}
+svg {
+ pointer-events: all;
+ overflow: visible;
+}
+
+.node {
+ //fill: rgba(190,190,190,0.8);
+ fill: #ccc;
+ //fill-opacity: .6;
+ text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
+ stroke: rgba(0,0,0,0.2);
+}
+
+.node:hover {
+ stroke: rgba(0,0,0,0.5);
+}
+.nodeport {
+ //visibility:hidden;
+ text-shadow: none;
+ //text-color: rgba(0,0,0,0.4);
+ //fill-opacity: 1;
+ //transform: scale(1);
+}
+.nodeport:hover {
+ //fill: #f00;
+}
+
+.nodeporttext {
+ transition: .5s;
+ text-anchor: middle;
+ //font: 12px Raleway;
+ //font: 12px helvetica;
+ font-size: 12px;
+ font-family:helvetica;
+ pointer-events: none;
+ //stroke: rgba(0,0,0,0.3);
+ fill: rgba(0,0,0,0.6);
+ text-color: rgba(0,0,0,0.6);
+ //stroke-opacity: 0.7;
+ //opacity: 0.8;
+}
+.nodeporttext:hover {
+ font-size: 14px;
+}
+
+.hidden {
+ visibility: hidden;
+}
+.srcport {
+}
+.srcport:hover {
+ //fill: rgba(0,0,255,0.5);
+}
+
+.capabilityport {
+ fill: #beb;
+}
+.requirementport {
+ fill: #ebb;
+}
+
+.targetport {
+ //visibility: hidden;
+}
+.targeting:hover .nodeportcircle {
+ visibility: visible;
+}
+
+.targetcircle {
+ stroke: rgba(0,0,0,0);
+ fill: rgba(0,0,0,0);
+ fill: none;
+}
+.targeting:hover .targetcircle {
+ fill: rgba(0,0,0,0.2);
+ stroke: rgba(0,0,0,0.5);
+ stroke-width: .5;
+ visibility: visible;
+ -webkit-animation: pulsate 1s ease-out 0s infinite alternate;
+ animation: pulsate 1s ease-out 0s infinite alternatedil;
+}
+@keyframes pulsate {
+ 0% {transform: scale(0.9); opacity: 0.0;}
+ 50% {opacity: 0.8;}
+ 100% {transform: scale(2); opacity: 0.0;}
+}
+
+#catalogdiv {
+ position:absolute;
+ top: 5px;
+ right: 5px;
+ transform: scale(0.7);
+ transform-origin: top right;
+}
+
+.type-select{
+ width: 90%;
+ display: block;
+ margin: 10px auto;
+ height: 45px;
+ line-height: 40px;
+ padding: 0 5px;
+ font-size: 22px;
+ border: 2px solid #68c6e9;
+}
+
+.pendingquery {
+ font-style: italic;
+ margin-left: 20px;
+ -webkit-animation: pending 1s ease-out 0s infinite alternatedil;
+ animation: pending 1s ease-out 0s infinite alternatedil;
+}
+@keyframes pending {
+ 0% { opacity: 1.0;}
+ 50% {opacity: 0.5;}
+ 100% {opacity: 1.0;}
+}
+
+.svgtext {
+ text-anchor: middle;
+ //font: 12px Raleway;
+ font: 12px helvetica;
+ stroke: rgba(0,0,0,0.6);
+ pointer-events: none;
+}
+.relation {
+ fill-opacity: 0;
+ stroke-width: 10;
+ stroke-opacity: 0.4;
+ stroke-linecap: round;
+ stroke: #777;
+ //transition: .5s;
+}
+.relation:hover {
+ stroke: #555;
+}
+.pending {
+ stroke-dasharray: 10,25;
+}
+.tmprelation {
+ fill-opacity: 0;
+ stroke-width: 10;
+ stroke-opacity: 0.6;
+ stroke-linecap: round;
+ stroke: #777;
+ pointer-events: none;
+ stroke-dasharray: 10,20;
+ //transition: .5s;
+}
+.fixed {
+}
+#minutiae {
+ width: 150;
+ height: 15;
+ border: 1px solid rgba(50,50,50,0.5);
+ background: rgba(238,238,238,0.2);
+ border-radius: 5px;
+ transition: height 1s, width 2s;
+ transition-delay: 5s;
+ transform-origin: bottom right;
+ padding: 4px;
+ margin: 4px;
+ margin-bottom: 10px;
+ overflow: hidden;
+ position:absolute;
+ right: 5;
+ bottom: 40;
+}
+#minutiae:hover {
+ transition-delay: 0s;
+ width: 200;
+ height: 300;
+ transform: scale(1);
+ background: rgba(238,238,238,0.8);
+ pointer-events: all;
+}
+#project {
+ position:absolute;
+ bottom: 4;
+ left: 4;
+}
+iiinput {
+ color: black;
+ border: 1px dotted rgba(50,50,50,0.5);
+ background-color: rgba(0,0,0,0);
+}
+iiinput:focus {
+ outline: 1px solid rgba(50,50,50,0.5);
+}
+.nodetext {
+ padding:2px;
+ font: 13px helvetica;
+ text-align: center;
+ display: table-cell;
+ vertical-align: middle;
+ /*border-radius: 10px;*/
+}
+.nodetypetext {
+ font-size: 7px;
+ /*text-shadow: none;*/
+}
+
+.confignode {
+ /*visibility: hidden;*/
+ pointer-events: all;
+ font-size: 60%;
+ background: #8ac6fb;
+ padding: 0.3rem;
+ border-radius: 28px;
+}
+.nodetext:hover .confignode {
+ visibility: visible;
+}
+.confignode:hover {
+ visibility: visible;
+ background: rgba(255,100,100,0.5);
+}
+#configeditor {
+ font-family: helvetica;
+ font-size: 12px;
+ padding: 5px;
+ position:absolute;
+ z-index:10;
+ width: 100%;
+ height: 600px;
+ visibility: hidden;
+ border-radius: 5px;
+ background: rgba(238,238,238,0.9);
+ box-shadow: 4px 4px 50px rgba(0,0,0,1);
+ transition: .2s;
+ pointer-events: all;
+ transform-origin: top left;
+ border-radius: 5px;
+ overflow: hidden;
+ bottom: 0px;
+ right: 0px;
+ top: 0;
+ left: 0;
+ margin-left: auto;
+ margin-right: auto;
+
+}
+#configstuff {
+ width: 100%;
+ height: 564px;
+ overflow: hidden;
+}
+
+.configbutton{
+ background: #009fdb;
+ font-family: Arial;
+ color: #ffffff;
+ font-size: 14px;
+ padding: 5px 15px 5px 15px;
+ margin: 0.1rem;
+ float: right;
+ height: 100%;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+.config-fotter {
+ position:absolute;
+ height: 39px;
+ left: 0px;
+ bottom: 0px;
+ width: 100%;
+}
+
+.config-fotter .btn {
+ float: right;
+ margin-right: 5px;
+}
+
+.btn.btn-primary {
+ background-color: #009fdb;
+ border-color: #009fdb;
+}
+
+.btn.btn-default {
+ color: #009fdb;
+ border-color: #009fdb;
+}
+
+.btn.btn-default:hover {
+ color: #009fdb;
+ border-color: #009fdb;
+}
+
+.modal-footer {
+ background-color: #f8f8f8;
+ border: none !important;
+}
+
+.modal-header .modal-header-info {
+ border-top: solid 3px #009fdb;
+ margin-top: 10px;
+ margin-bottom: 0px;
+}
+
+.modal-header .modal-header-error {
+ border-top: solid 3px #cf2a2a;
+ margin-top: 10px;
+ margin-bottom: 0px;
+}
+
+.modal-header {
+ border: none !important;
+}
+
+#problem {
+ padding: 5px;
+ position:absolute;
+ width: 100px;
+ height: 50px;
+ visibility: hidden;
+ border-radius: 10px;
+ background: rgba(238,238,238,0.9);
+ box-shadow: 4px 4px 50px rgba(0,0,0,1);
+ transition: .2s;
+ pointer-events: all;
+ transform-origin: top left;
+ font-size: 20px;
+ vertical-align: middle;
+ text-align: center;
+}
+
+
+#bottombar {
+ width: 100%;
+ position:fixed;
+ bottom:0px;
+ text-align: center;
+ transform: scale(.3);
+ opacity: 0;
+}
+#viewclasses {
+ z-index: 2;
+ display:inline-block;
+ text-align: center;
+ background: rgba(0,0,0,0.2);
+ padding: 4px;
+ padding-left: 10px;
+ border-radius: 4px;
+}
+.viewclass {
+ margin-right: 20px;
+ margin-left: 20px;
+ padding: 2px;
+ border: 1px solid rgba(50,50,50,0.5);
+ border-radius: 3px;
+}
+.viewclass:hover {
+ outline: 2px solid rgba(50,50,50,0.5);
+}
+.activeview {
+ background: rgba(125,125,125,0.9);
+}
+
+.faded {
+ transition: 1s;
+ opacity: 0.15;
+}
+
+
+.asc_nodes_Router_CPE {
+ fill: #cbb;
+}
+
+.asc_nodes_Link_CPE_CPE_site2site {
+ fill: #bcb;
+}
+
+.asc_nodes_Feature_Data_Gamma_Link_Data {
+ fill: #bbc;
+}
+
+
+.asc_nodes_Feature_Firewall {
+ fill: green;
+}
+
+.asc_nodes_Feature_Switch {
+ fill: green;
+}
+
+.asc_nodes_Feature_Link {
+ fill: green;
+}
+
+.asc_nodes_Feature_ {
+ fill: @asc_nodes_Feature_
+}
+
+.asc_nodes_Router_Gateway_Internet {
+ fill: #ccb;
+}
+
+.asc_nodes_Link_CPE_Gateway_mis {
+ fill: #bcc;
+}
+
+.asc_nodes_NOD {
+ fill: #bcc;
+}
+.asc_nodes_VPN {
+ fill: #cbc;
+}
+.asc_nodes_Site {
+ fill: #bcb;
+}
+
+.asc_nodes_VIG {
+ fill: #cbb;
+}
+.asc_nodes_AppServer {
+ fill: #bbc;
+}
+
+.fabulous {
+ stroke: rgba(0,255,0,0.5);
+ stroke-width: 10px;
+}
+
+.dragpart {
+ font-size: 30px;
+ position: absolute;
+}
+
+.highlight {
+ fill: #44c8f5;
+ background-color: #f2f2f2;
+}
+#editNodeProperties {
+ padding: 5px;
+ position:absolute;
+ z-index:10;
+ width: 500px;
+ visibility: hidden;
+ border-radius: 5px;
+ background: rgba(238,238,238,0.9);
+ box-shadow: 4px 4px 50px rgba(0,0,0,1);
+ transition: .2s;
+ pointer-events: all;
+ transform-origin: top left;
+ transform: scale(.001);
+ border-radius: 3px;
+ vertical-align:middle;
+}
+#editNodePropertiesHeaderBoard {
+ position:relative;
+ background-color:FloralWhite;
+ border-radius:10px;
+ margin-bottom:5px;
+}
+#editNodePropertiesHeader {
+ display:inline-block;
+ width:90%;
+ text-align:center;
+ font-size:125%;
+ margin-left:15px;
+}
+.editNodePropertyLabel {
+ display:inline-block;
+ width:35%;
+ text-align:right;
+ margin-right:0.5em;
+}
+.editNodePropertyValue {
+ display:inline-block;
+ width:60%;
+ text-align:left;
+}
+.editNodePolicyLabel {
+ display:inline-block;
+ width:50%;
+ text-align:right;
+ margin-right:0.5em;
+}
+.editNodePolicyValue {
+ display:inline-block;
+ width:45%;
+ text-align:left;
+}
+.rule-editor-btn {
+ cursor: pointer;
+ width: auto;
+ font-size: 16px;
+ margin-left: 2px;
+ color: #999999;
+}
+.rule-editor-btn:hover {
+ color: #009fdb;
+}
+.rule-editor-modal .modal-header {
+ position: absolute;
+ border-bottom: none;
+ width: 100%;
+}
+
+@keyframes pulse-info {
+ 0% {
+ -moz-box-shadow: 0 0 0 0 rgba(104, 198, 233, 0.9);
+ box-shadow: 0 0 0 0 rgba(104, 198, 233, 0.9);
+ }
+ 70% {
+ -moz-box-shadow: 0 0 0 10px rgba(104, 198, 233, 0);
+ box-shadow: 0 0 0 10px rgba(104, 198, 233, 0);
+ }
+ 100% {
+ -moz-box-shadow: 0 0 0 0 rgba(104, 198, 233, 0);
+ box-shadow: 0 0 0 0 rgba(104, 198, 233, 0);
+ }
+}
+
+.pulse-info {
+ animation: pulse-info 1.5s infinite;
+}
+
+.mandatory {
+ font-size: 34px;
+ position: absolute;
+ color: red;
+} \ No newline at end of file