styles/table.css

   1 /*\r
   2     Copyright (c) Maen Artimy, 2018\r
   3 */\r
   4 \r
   5 table {\r
   6         border-collapse: collapse;\r
   7 }\r
   8 \r
   9 .logtable {\r
  10         margin-left: 10px;\r
  11 }\r
  12 \r
  13 .fixed {\r
  14         /*table-layout: auto;*/\r
  15         width: 100%;\r
  16 }\r
  17 \r
  18 .oneliner {\r
  19         margin: auto;\r
  20         border-top: 2px solid var(--scolor-3);\r
  21         /*padding-bottom: 5px;*/\r
  22 }\r
  23 \r
  24 /*\r
  25 #mytable {\r
  26         width: 700px;\r
  27         height: 100px;\r
  28         padding: 0;\r
  29         margin: 0;\r
  30 }\r
  31 \r
  32 .flowtable {\r
  33   table-layout: auto;\r
  34 }*/\r
  35 \r
  36 caption {\r
  37         padding: 0 0 5px 0;\r
  38         text-align: right;\r
  39 }\r
  40 \r
  41 th {\r
  42         font-size: 12px;\r
  43         color: var(--white);\r
  44         border: 1px solid white;\r
  45         letter-spacing: 2px;\r
  46         text-transform: uppercase;\r
  47         text-align: left;\r
  48         padding: 2px 5px;\r
  49         background: var(--scolor-3);\r
  50         white-space:pre; /*allows new line*/\r
  51         height: 32px;\r
  52 }\r
  53 \r
  54 td {\r
  55         padding: 6px;\r
  56         white-space:pre; /*allows new line*/\r
  57 }\r
  58 \r
  59 tr:nth-child(even) {\r
  60   background-color: whitesmoke;\r
  61 }\r
  62 \r
  63 table.sortable th:hover {\r
  64         cursor: pointer;\r
  65 }\r
  66 \r
  67 table tr.editable {\r
  68         cursor: copy;\r
  69 }\r
  70 \r
  71 table.logtable tr {\r
  72         cursor: pointer;\r
  73 }\r
  74 \r
  75 th.ascending, th.descending, table.sortable th:hover {\r
  76         background-color: var(--scolor-0);\r
  77         color: var(--white);\r
  78 }\r
  79 \r
  80 /* Arrows for table sorting */\r
  81 th.ascending:after {\r
  82         font-size: 90%;\r
  83     content: '\25B2';\r
  84     float: left;\r
  85 }\r
  86 \r
  87 th.descending:after {\r
  88         font-size: 90%;\r
  89     content: '\25BC';\r
  90     float: left;\r
  91 }\r
  92 \r
  93 .tooltip span {\r
  94         z-index: 10;\r
  95         /*display: none;*/\r
  96         padding: 5px 5px;\r
  97         margin-top: 10px; \r
  98         margin-left: 10px;\r
  99         width: 400px; \r
 100         position: absolute;\r
 101         color: white;\r
 102         /*border:1px solid #DCA; */\r
 103         background-color: var(--pcolor-0);\r
 104         /*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);*/\r
 105         border-radius: 2px;\r
 106         visibility: hidden;\r
 107         opacity: 0;\r
 108         transition: visibility 0s, 0.5s linear;\r
 109 }\r
 110 \r
 111 .tooltip:hover span{\r
 112         visibility: visible;\r
 113         opacity: 1;\r
 114         transition-delay: 1s;\r
 115         /*display: inline;*/\r
 116         cursor: auto;\r
 117 }\r
 118 \r
 119 .callout {\r
 120         z-index:20;\r
 121         position:absolute;\r
 122         top:30px;\r
 123         border:0;\r
 124         left:-12px;\r
 125 }\r
 126 \r
 127 span.dropmenu {\r
 128         display: none;\r
 129 }\r
 130 \r
 131 .contextmenu span {\r
 132         z-index: 10;\r
 133         /*display: none;*/\r
 134         padding: 5px 5px;\r
 135         margin-top: 10px; \r
 136         margin-left: 10px;\r
 137         width: 400px; \r
 138         position: absolute;\r
 139         color:#111;\r
 140         border:1px solid #DCA; \r
 141         background:#fffAF0;\r
 142         box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\r
 143         visibility: hidden;\r
 144         opacity: 0;\r
 145         transition: visibility 0s, 0.5s linear;\r
 146 }\r
 147 \r
 148 .contextmenu:hover span{\r
 149         visibility: visible;\r
 150         opacity: 1;\r
 151         transition-delay: 1s;\r
 152         /*display: inline;*/\r
 153         cursor: auto;\r
 154 }\r