dev/scss/main/matchinfo.scss - KorAP/Kalamar - Gitiles

 @charset "utf-8";
 @import "../util";

 $left-width: 176px;
 $border-size: 2px;
 $left-distance: $left-width + ($border-size * 2);

 @mixin cell-info {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 25em;
   overflow: hidden;
   padding: 1px 6px;
   margin: 0px;
 }

 /**
  * Table view
  *
  * The table view is complicated, as the
  * first column has to be static.
  */
 @mixin matchinfo-head {
   border-width: 0px;
   border-top: $border-size solid $darker-orange; // #ff8000;
   width: $left-width / 2;
 }

 div.matchinfo {
   position: relative;
   width: 100%;
   padding-top: $border-size;
 //  background-color: $dark-orange;
   height: auto;
   font-size: 10pt;
   text-align: left;
   > p.addtree {
     position: relative;
     @include choose-item;
     border: {
       width: $border-size;
       style: solid;
       radius: $standard-border-radius;
     }

     font-size: inherit;
     margin: $border-size $border-size 0 $border-size !important;
     width: $left-width;
     text-align: center;
     cursor: pointer;
     padding: 0 !important;

     &:hover {
       cursor:pointer;
       @include choose-hover;
     }

     *.menu {
       border-top-right-radius: 8px;
       position: absolute;
       width: $left-width;
       left: 0;
       bottom: 0;
       text-align: left;
       margin: -1* $border-size;
       margin-top: 0;
       > li:first-of-type {
 	      border-top-right-radius: 5px;
       }
     }
   }

   p.queryfragment {
     position:relative;
     @include choose-item;
     border : {
       width: $border-size;
       style: solid;
       radius: $standard-border-radius;
     }
     padding: 2pt 4pt !important;
     margin: {
       // left: $border-size;
       left: $left-distance;
       top: .5em;
       bottom: .5em;
       right: $right-match-distance;
     }
     &:hover {
       cursor:pointer;
       @include choose-hover;
     }

     // This is the description
     > span:first-of-type {
       font-weight: bold;
       padding-right: 4pt;
     }

     // Query fragment
     > span:nth-of-type(2) {
       padding-right: 1.2em;
     }

     &::after {
 	    font-family: 'FontAwesome';
 	    content: $fa-to-query;
       position: absolute;
       right: 4pt;
       top: $border-size;
     }
   }
 }

 div.matchtable {
   z-index: 20;
   margin-left: $left-distance - ($border-size / 2);
   margin-right: $right-match-distance;
   padding: 0;
   overflow-x: auto;
   overflow-y: visible;
   width: auto;

   table {
     display: table;
     border-collapse: separate;
     border-spacing: 0px;
   }
   th {
     color: $nearly-white;
   }

   // Use matchinfo cells for query creation
   td,
   tbody th,
   thead th:not(:nth-child(1)):not(:nth-child(2)) {
     cursor: pointer;
   }
   td:empty {
     cursor: default;
   }
   tr {
     outline: none;
     td.chosen,
     th.chosen,
     div.chosen {
       background-color: $light-green !important;
       color: $nearly-white;
       // transition: color 0.1s, background-color 0.15s ease-out;
     }
   }

   thead {
     tr th {
       background-color: $darker-orange;
       border-top-width: 0px !important;
       text-align: center;
       &:nth-of-type(1), &:nth-of-type(2) {
 	                        text-align: left;
       }
     }
   }

   tbody {
     > tr:nth-of-type(1) > th {
       border-top-color: transparent;
     }
     /**
      * Click on a row and it's highlighted.
      */
           /*
 	outline:  (2 * $border-size) solid $light-green;
 	-moz-outline-radius: $border-size;
 	outline-radius: $border-size;
 	*/
     /*
     > tr:focus {
       outline: none;
       background-color: $light-green;
       border-color: $light-green;
       td {
         background-color: inherit;
         color: $nearly-white;
         border-color: $light-green;
       }
     }
    */
   }
   tr {
     /**
      * The first two columns.
      */
     > th:nth-of-type(1),
     > th:nth-of-type(2) {
       position: absolute;
       z-index: 80;
       vertical-align: middle;
       left: 0px;
       @include matchinfo-head;
     }
     > th:nth-of-type(2) {
       left: ($left-width / 2) + $border-size;
     }

     // Includes header line as well
     > * {
       @include cell-info;
       border: ($border-size / 2) solid $dark-orange;
     }
   }
   tr > td {
     background-color: $middle-orange; // $nearly-white;
     white-space: nowrap;
     vertical-align: top;
     text-align: center;
     /*
     div {
       background-color: $light-orange; // $nearly-white;
     }
    */
   }
   tr:nth-child(even) > td {
     background-color: $light-orange;
     /*
     div:nth-child(even) {
       background-color: $middle-orange;
     }
 */
   }
   /*
   tr:nth-child(odd) > td > div:nth-child(odd) {
     background-color: $middle-orange;
   }
   */

   // table for key-value pairs
   td.matchkeyvalues {
     padding: 0;
     > div {
       @include cell-info;
       > span {
         color: $darkest-orange;
         text-align: right;
         &::after {
           content: ":"
         }
         padding-right: .5em;
       }
     }
   }
 }

 /**
   * Tree view
   */
 div.matchtree {
   position: relative;
   overflow-x: hidden;
   overflow-y: visible;
   padding: 0;
   margin-top: 1pt;

   /**
    * Label
    */
   h6 {
     display: inline;
     font-size: inherit;
     color: $nearly-white;
     margin: 0;
     padding: 0 !important;
     float: left;
     > span {
       @include matchinfo-head;
       @include cell-info;
       display: inline-block;
       margin: 0;
       &:nth-of-type(2) {
 	      margin-left: $border-size;
       }
     }
   }
   > div {
     position: unset;
     z-index: 4;
     overflow-x: auto;
     margin: $border-size;
     margin-left: $left-distance;
     margin-right: $right-match-distance;

     background-color: $light-orange; // $nearly-white; // $light-orange;
     > ul.action.image {
       display: block;
       position: absolute;
       right: 0;
       top: 0;
       z-index: 20;
       margin: 0;
       padding: 0;
       // margin-right: -1 * $right-match-distance;
       width: $right-match-distance;
       li {
         cursor: pointer;
         color: $nearly-white;
         text-decoration: none;
         > span {
           @include blind;
         }
         border-width: 0;
         // z-index: 8;
         text-decoration:none;
         text-align: center;
         font-style: normal;

         &.download::after {
 	        font-family: 'FontAwesome';
 	        content: $fa-download;
         }

         &.close::after {
 	        font-family: 'FontAwesome';
 	        content: $fa-close;
         }
       }
     }
   }
 }


 dl.metatable {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: stretch;
   width: 100%;
   > div {
     display: flex;
     flex-direction: row;
     text-align: center;
     width: 100%;
     border: ($border-size / 2) solid $dark-orange;
     align-items: stretch;
     > * {
       @include cell-info;
     }
     > dt {
       text-align: left;
       background: $darker-orange;
       color: $nearly-white;
       width: 8em;
       margin: 0;
     }
     > dd {
       text-align: left;
       background-color: $light-orange;
       padding: 2px;
       margin: 0;
       width: 100%;
       margin-left: $border-size;
       // padding-left: 2 * $border-size;
     }
   }
 }

 @media (min-width:640px) {
   dl.metatable > div {
     width: 50%;
   }
 }

 @media (min-width:800px) {
   dl.metatable > div {
     width: 33%;
   }
 }

 @media (min-width:1200px) {
   dl.metatable > div {
     width: 30%;
   }
 }


 div.loading {
   background-color: transparent !important;
   height: 16px !important;
   width: 16px !important;
   margin: 0 auto !important;
   background-image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');

 }
	@charset "utf-8";
	@import "../util";

	$left-width: 176px;
	$border-size: 2px;
	$left-distance: $left-width + ($border-size * 2);

	@mixin cell-info {
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 25em;
	overflow: hidden;
	padding: 1px 6px;
	margin: 0px;
	}

	/**
	* Table view
	*
	* The table view is complicated, as the
	* first column has to be static.
	*/
	@mixin matchinfo-head {
	border-width: 0px;
	border-top: $border-size solid $darker-orange; // #ff8000;
	width: $left-width / 2;
	}

	div.matchinfo {
	position: relative;
	width: 100%;
	padding-top: $border-size;
	// background-color: $dark-orange;
	height: auto;
	font-size: 10pt;
	text-align: left;
	> p.addtree {
	position: relative;
	@include choose-item;
	border: {
	width: $border-size;
	style: solid;
	radius: $standard-border-radius;
	}

	font-size: inherit;
	margin: $border-size $border-size 0 $border-size !important;
	width: $left-width;
	text-align: center;
	cursor: pointer;
	padding: 0 !important;

	&:hover {
	cursor:pointer;
	@include choose-hover;
	}

	*.menu {
	border-top-right-radius: 8px;
	position: absolute;
	width: $left-width;
	left: 0;
	bottom: 0;
	text-align: left;
	margin: -1* $border-size;
	margin-top: 0;
	> li:first-of-type {
	border-top-right-radius: 5px;
	}
	}
	}

	p.queryfragment {
	position:relative;
	@include choose-item;
	border : {
	width: $border-size;
	style: solid;
	radius: $standard-border-radius;
	}
	padding: 2pt 4pt !important;
	margin: {
	// left: $border-size;
	left: $left-distance;
	top: .5em;
	bottom: .5em;
	right: $right-match-distance;
	}
	&:hover {
	cursor:pointer;
	@include choose-hover;
	}

	// This is the description
	> span:first-of-type {
	font-weight: bold;
	padding-right: 4pt;
	}

	// Query fragment
	> span:nth-of-type(2) {
	padding-right: 1.2em;
	}

	&::after {
	font-family: 'FontAwesome';
	content: $fa-to-query;
	position: absolute;
	right: 4pt;
	top: $border-size;
	}
	}
	}

	div.matchtable {
	z-index: 20;
	margin-left: $left-distance - ($border-size / 2);
	margin-right: $right-match-distance;
	padding: 0;
	overflow-x: auto;
	overflow-y: visible;
	width: auto;

	table {
	display: table;
	border-collapse: separate;
	border-spacing: 0px;
	}
	th {
	color: $nearly-white;
	}

	// Use matchinfo cells for query creation
	td,
	tbody th,
	thead th:not(:nth-child(1)):not(:nth-child(2)) {
	cursor: pointer;
	}
	td:empty {
	cursor: default;
	}
	tr {
	outline: none;
	td.chosen,
	th.chosen,
	div.chosen {
	background-color: $light-green !important;
	color: $nearly-white;
	// transition: color 0.1s, background-color 0.15s ease-out;
	}
	}

	thead {
	tr th {
	background-color: $darker-orange;
	border-top-width: 0px !important;
	text-align: center;
	&:nth-of-type(1), &:nth-of-type(2) {
	text-align: left;
	}
	}
	}

	tbody {
	> tr:nth-of-type(1) > th {
	border-top-color: transparent;
	}
	/**
	* Click on a row and it's highlighted.
	*/
	/*
	outline: (2 * $border-size) solid $light-green;
	-moz-outline-radius: $border-size;
	outline-radius: $border-size;
	*/
	/*
	> tr:focus {
	outline: none;
	background-color: $light-green;
	border-color: $light-green;
	td {
	background-color: inherit;
	color: $nearly-white;
	border-color: $light-green;
	}
	}
	*/
	}
	tr {
	/**
	* The first two columns.
	*/
	> th:nth-of-type(1),
	> th:nth-of-type(2) {
	position: absolute;
	z-index: 80;
	vertical-align: middle;
	left: 0px;
	@include matchinfo-head;
	}
	> th:nth-of-type(2) {
	left: ($left-width / 2) + $border-size;
	}

	// Includes header line as well
	> * {
	@include cell-info;
	border: ($border-size / 2) solid $dark-orange;
	}
	}
	tr > td {
	background-color: $middle-orange; // $nearly-white;
	white-space: nowrap;
	vertical-align: top;
	text-align: center;
	/*
	div {
	background-color: $light-orange; // $nearly-white;
	}
	*/
	}
	tr:nth-child(even) > td {
	background-color: $light-orange;
	/*
	div:nth-child(even) {
	background-color: $middle-orange;
	}
	*/
	}
	/*
	tr:nth-child(odd) > td > div:nth-child(odd) {
	background-color: $middle-orange;
	}
	*/

	// table for key-value pairs
	td.matchkeyvalues {
	padding: 0;
	> div {
	@include cell-info;
	> span {
	color: $darkest-orange;
	text-align: right;
	&::after {
	content: ":"
	}
	padding-right: .5em;
	}
	}
	}
	}

	/**
	* Tree view
	*/
	div.matchtree {
	position: relative;
	overflow-x: hidden;
	overflow-y: visible;
	padding: 0;
	margin-top: 1pt;

	/**
	* Label
	*/
	h6 {
	display: inline;
	font-size: inherit;
	color: $nearly-white;
	margin: 0;
	padding: 0 !important;
	float: left;
	> span {
	@include matchinfo-head;
	@include cell-info;
	display: inline-block;
	margin: 0;
	&:nth-of-type(2) {
	margin-left: $border-size;
	}
	}
	}
	> div {
	position: unset;
	z-index: 4;
	overflow-x: auto;
	margin: $border-size;
	margin-left: $left-distance;
	margin-right: $right-match-distance;

	background-color: $light-orange; // $nearly-white; // $light-orange;
	> ul.action.image {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 20;
	margin: 0;
	padding: 0;
	// margin-right: -1 * $right-match-distance;
	width: $right-match-distance;
	li {
	cursor: pointer;
	color: $nearly-white;
	text-decoration: none;
	> span {
	@include blind;
	}
	border-width: 0;
	// z-index: 8;
	text-decoration:none;
	text-align: center;
	font-style: normal;

	&.download::after {
	font-family: 'FontAwesome';
	content: $fa-download;
	}

	&.close::after {
	font-family: 'FontAwesome';
	content: $fa-close;
	}
	}
	}
	}
	}


	dl.metatable {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	> div {
	display: flex;
	flex-direction: row;
	text-align: center;
	width: 100%;
	border: ($border-size / 2) solid $dark-orange;
	align-items: stretch;
	> * {
	@include cell-info;
	}
	> dt {
	text-align: left;
	background: $darker-orange;
	color: $nearly-white;
	width: 8em;
	margin: 0;
	}
	> dd {
	text-align: left;
	background-color: $light-orange;
	padding: 2px;
	margin: 0;
	width: 100%;
	margin-left: $border-size;
	// padding-left: 2 * $border-size;
	}
	}
	}

	@media (min-width:640px) {
	dl.metatable > div {
	width: 50%;
	}
	}

	@media (min-width:800px) {
	dl.metatable > div {
	width: 33%;
	}
	}

	@media (min-width:1200px) {
	dl.metatable > div {
	width: 30%;
	}
	}


	div.loading {
	background-color: transparent !important;
	height: 16px !important;
	width: 16px !important;
	margin: 0 auto !important;
	background-image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');

	}