| @@ -1,9 +1,11 @@ | ||
| 1 | +/* SQL Chart Builder 3.0 — front-end styles */ | |
| 2 | + | |
| 1 | 3 | .gf-alert { |
| 2 | 4 | padding: 15px !important; |
| 3 | 5 | margin-bottom: 20px !important; |
| 4 | 6 | border: 1px solid transparent !important; |
| 5 | - border-radius: 4px !important; | |
| 7 | + border-radius: 6px !important; | |
| 6 | 8 | overflow: auto |
| 7 | 9 | } |
| 8 | 10 | |
| 9 | 11 | .gf-alert-success { |
| @@ -33,8 +35,128 @@ | ||
| 33 | 35 | border-color: #ebccd1 !important; |
| 34 | 36 | |
| 35 | 37 | } |
| 36 | 38 | |
| 39 | +/* ---------- chart wrapper ---------- */ | |
| 40 | + | |
| 41 | +.gvn-chartwrap { | |
| 42 | + position: relative; | |
| 43 | + margin: 10px 0 20px; | |
| 44 | + width: 100%; | |
| 45 | +} | |
| 46 | + | |
| 47 | +/* ---------- dynamic filters form ---------- */ | |
| 48 | + | |
| 49 | +.guaven_sqlcharts_form { | |
| 50 | + display: flex; | |
| 51 | + flex-wrap: wrap; | |
| 52 | + align-items: flex-end; | |
| 53 | + gap: 12px; | |
| 54 | + padding: 14px 16px; | |
| 55 | + margin: 0 0 18px; | |
| 56 | + background: #f8f9fb; | |
| 57 | + border: 1px solid #e3e6ea; | |
| 58 | + border-radius: 8px; | |
| 59 | +} | |
| 60 | + | |
| 61 | +.guaven_sqlcharts_form .gvn-filter-field { | |
| 62 | + display: inline-flex; | |
| 63 | + flex-direction: column; | |
| 64 | + gap: 4px; | |
| 65 | +} | |
| 66 | + | |
| 67 | +.guaven_sqlcharts_form .gvn-filter-field label { | |
| 68 | + font-size: 12px; | |
| 69 | + font-weight: 600; | |
| 70 | + color: #50575e; | |
| 71 | + text-transform: uppercase; | |
| 72 | + letter-spacing: .03em; | |
| 73 | +} | |
| 74 | + | |
| 75 | +.guaven_sqlcharts_form input[type="text"], | |
| 76 | +.guaven_sqlcharts_form input[type="number"], | |
| 77 | +.guaven_sqlcharts_form input[type="date"] { | |
| 78 | + display: inline-block; | |
| 79 | + max-width: 210px; | |
| 80 | + padding: 7px 10px; | |
| 81 | + font-size: 14px; | |
| 82 | + color: #1d2327; | |
| 83 | + background: #fff; | |
| 84 | + border: 1px solid #c6cbd2; | |
| 85 | + border-radius: 6px; | |
| 86 | + outline: none; | |
| 87 | + transition: border-color .15s ease, box-shadow .15s ease; | |
| 88 | +} | |
| 89 | + | |
| 90 | +.guaven_sqlcharts_form input[type="number"] { | |
| 91 | + width: 110px; | |
| 92 | +} | |
| 93 | + | |
| 94 | +.guaven_sqlcharts_form input:focus { | |
| 95 | + border-color: #4693dd; | |
| 96 | + box-shadow: 0 0 0 2px rgba(70, 147, 221, .18); | |
| 97 | +} | |
| 98 | + | |
| 99 | +.guaven_sqlcharts_form input[type="submit"] { | |
| 100 | + padding: 8px 22px; | |
| 101 | + font-size: 14px; | |
| 102 | + font-weight: 600; | |
| 103 | + color: #fff; | |
| 104 | + background: #4693dd; | |
| 105 | + border: 0; | |
| 106 | + border-radius: 6px; | |
| 107 | + cursor: pointer; | |
| 108 | + transition: background .15s ease; | |
| 109 | +} | |
| 110 | + | |
| 111 | +.guaven_sqlcharts_form input[type="submit"]:hover { | |
| 112 | + background: #3a7fc4; | |
| 113 | +} | |
| 114 | + | |
| 115 | +.gws_datepicker { display: inline-block !important } | |
| 116 | + | |
| 117 | +/* ---------- table view ---------- */ | |
| 118 | + | |
| 119 | +.gvn-tablewrap { | |
| 120 | + overflow-x: auto; | |
| 121 | + margin: 6px 0 14px; | |
| 122 | + border: 1px solid #e3e6ea; | |
| 123 | + border-radius: 8px; | |
| 124 | +} | |
| 125 | + | |
| 126 | +.gvn-tablewrap .gvn-table { | |
| 127 | + width: 100%; | |
| 128 | + margin: 0; | |
| 129 | + border-collapse: collapse; | |
| 130 | + font-size: 14px; | |
| 131 | + background: #fff; | |
| 132 | +} | |
| 133 | + | |
| 134 | +.gvn-tablewrap .gvn-table th { | |
| 135 | + padding: 10px 14px; | |
| 136 | + text-align: left; | |
| 137 | + font-weight: 600; | |
| 138 | + color: #fff; | |
| 139 | + background: #4693dd; | |
| 140 | + border: 0; | |
| 141 | + white-space: nowrap; | |
| 142 | +} | |
| 143 | + | |
| 144 | +.gvn-tablewrap .gvn-table td { | |
| 145 | + padding: 9px 14px; | |
| 146 | + border: 0; | |
| 147 | + border-top: 1px solid #eef0f3; | |
| 148 | + color: #1d2327; | |
| 149 | +} | |
| 150 | + | |
| 151 | +.gvn-tablewrap .gvn-table tr:nth-child(even) td { | |
| 152 | + background: #f8f9fb; | |
| 153 | +} | |
| 154 | + | |
| 155 | +.gvn-tablewrap .gvn-table tr:hover td { | |
| 156 | + background: #eef5fc; | |
| 157 | +} | |
| 158 | + | |
| 37 | 159 | /*! |
| 38 | 160 | * Datepicker v1.0.0 |
| 39 | 161 | * https://fengyuanchen.github.io/datepicker |
| 40 | 162 | * |
| @@ -41,5 +163,54 @@ | ||
| 41 | 163 | * Copyright 2014-present Chen Fengyuan |
| 42 | 164 | * Released under the MIT license |
| 43 | 165 | * |
| 44 | 166 | * Date: 2018-08-05T03:02:13.513Z |
| 45 | - */.datepicker-container{-moz-user-select:none;-ms-touch-action:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;background-color:#fff;direction:ltr;font-size:12px;left:0;line-height:30px;position:fixed;top:0;touch-action:none;user-select:none;width:210px;z-index:-1}.datepicker-container:after,.datepicker-container:before{border:5px solid rgba(0,0,0,0);content:" ";display:block;height:0;position:absolute;width:0}.datepicker-dropdown{-webkit-box-shadow:0 3px 6px #ccc;-webkit-box-sizing:content-box;border:1px solid #ccc;box-shadow:0 3px 6px #ccc;box-sizing:content-box;position:absolute;z-index:1}.datepicker-inline{position:static}.datepicker-top-left,.datepicker-top-right{border-top-color:#39f}.datepicker-top-left:after,.datepicker-top-left:before,.datepicker-top-right:after,.datepicker-top-right:before{border-top:0;left:10px;top:-5px}.datepicker-top-left:before,.datepicker-top-right:before{border-bottom-color:#39f}.datepicker-top-left:after,.datepicker-top-right:after{border-bottom-color:#fff;top:-4px}.datepicker-bottom-left,.datepicker-bottom-right{border-bottom-color:#39f}.datepicker-bottom-left:after,.datepicker-bottom-left:before,.datepicker-bottom-right:after,.datepicker-bottom-right:before{border-bottom:0;bottom:-5px;left:10px}.datepicker-bottom-left:before,.datepicker-bottom-right:before{border-top-color:#39f}.datepicker-bottom-left:after,.datepicker-bottom-right:after{border-top-color:#fff;bottom:-4px}.datepicker-bottom-right:after,.datepicker-bottom-right:before,.datepicker-top-right:after,.datepicker-top-right:before{left:auto;right:10px}.datepicker-panel>ul{margin:0;padding:0;width:102%}.datepicker-panel>ul:after,.datepicker-panel>ul:before{content:" ";display:table}.datepicker-panel>ul:after{clear:both}.datepicker-panel>ul>li{background-color:#fff;cursor:pointer;float:left;height:30px;list-style:none;margin:0;padding:0;text-align:center;width:30px}.datepicker-panel>ul>li:hover{background-color:#e5f2ff}.datepicker-panel>ul>li.muted,.datepicker-panel>ul>li.muted:hover{color:#999}.datepicker-panel>ul>li.highlighted{background-color:#e5f2ff}.datepicker-panel>ul>li.highlighted:hover{background-color:#cce5ff}.datepicker-panel>ul>li.picked,.datepicker-panel>ul>li.picked:hover{color:#39f}.datepicker-panel>ul>li.disabled,.datepicker-panel>ul>li.disabled:hover{background-color:#fff;color:#ccc;cursor:default}.datepicker-panel>ul>li.disabled.highlighted,.datepicker-panel>ul>li.disabled:hover.highlighted{background-color:#e5f2ff}.datepicker-panel>ul>li[data-view="month next"],.datepicker-panel>ul>li[data-view="month prev"],.datepicker-panel>ul>li[data-view="year next"],.datepicker-panel>ul>li[data-view="year prev"],.datepicker-panel>ul>li[data-view="years next"],.datepicker-panel>ul>li[data-view="years prev"],.datepicker-panel>ul>li[data-view=next]{font-size:18px}.datepicker-panel>ul>li[data-view="month current"],.datepicker-panel>ul>li[data-view="year current"],.datepicker-panel>ul>li[data-view="years current"]{width:150px}.datepicker-panel>ul[data-view=months]>li,.datepicker-panel>ul[data-view=years]>li{height:52.5px;line-height:52.5px;width:52.5px}.datepicker-panel>ul[data-view=week]>li,.datepicker-panel>ul[data-view=week]>li:hover{background-color:#fff;cursor:default}.datepicker-hide{display:none} | |
| 167 | + */.datepicker-container{-moz-user-select:none;-ms-touch-action:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;background-color:#fff;direction:ltr;font-size:12px;left:0;line-height:30px;position:fixed;top:0;touch-action:none;user-select:none;width:210px;z-index:-1}.datepicker-container:after,.datepicker-container:before{border:5px solid rgba(0,0,0,0);content:" ";display:block;height:0;position:absolute;width:0}.datepicker-dropdown{-webkit-box-shadow:0 3px 6px #ccc;-webkit-box-sizing:content-box;border:1px solid #ccc;box-shadow:0 3px 6px #ccc;box-sizing:content-box;position:absolute;z-index:1}.datepicker-inline{position:static}.datepicker-top-left,.datepicker-top-right{border-top-color:#39f}.datepicker-top-left:after,.datepicker-top-left:before,.datepicker-top-right:after,.datepicker-top-right:before{border-top:0;left:10px;top:-5px}.datepicker-top-left:before,.datepicker-top-right:before{border-bottom-color:#39f}.datepicker-top-left:after,.datepicker-top-right:after{border-bottom-color:#fff;top:-4px}.datepicker-bottom-left,.datepicker-bottom-right{border-bottom-color:#39f}.datepicker-bottom-left:after,.datepicker-bottom-left:before,.datepicker-bottom-right:after,.datepicker-bottom-right:before{border-bottom:0;bottom:-5px;left:10px}.datepicker-bottom-left:before,.datepicker-bottom-right:before{border-top-color:#39f}.datepicker-bottom-right:after,.datepicker-bottom-right:before,.datepicker-top-right:after,.datepicker-top-right:before{left:auto;right:10px}.datepicker-panel>ul{margin:0;padding:0;width:102%}.datepicker-panel>ul:after,.datepicker-panel>ul:before{content:" ";display:table}.datepicker-panel>ul:after{clear:both}.datepicker-panel>ul>li{background-color:#fff;cursor:pointer;float:left;height:30px;list-style:none;margin:0;padding:0;text-align:center;width:30px}.datepicker-panel>ul>li:hover{background-color:#e5f2ff}.datepicker-panel>ul>li.muted,.datepicker-panel>ul>li.muted:hover{color:#999}.datepicker-panel>ul>li.highlighted{background-color:#e5f2ff}.datepicker-panel>ul>li.highlighted:hover{background-color:#cce5ff}.datepicker-panel>ul>li.picked,.datepicker-panel>ul>li.picked:hover{color:#39f}.datepicker-panel>ul>li.disabled,.datepicker-panel>ul>li.disabled:hover{background-color:#fff;color:#ccc;cursor:default}.datepicker-panel>ul>li.disabled.highlighted,.datepicker-panel>ul>li.disabled:hover.highlighted{background-color:#e5f2ff}.datepicker-panel>ul>li[data-view="month next"],.datepicker-panel>ul>li[data-view="month prev"],.datepicker-panel>ul>li[data-view="year next"],.datepicker-panel>ul>li[data-view="year prev"],.datepicker-panel>ul>li[data-view="years next"],.datepicker-panel>ul>li[data-view="years prev"],.datepicker-panel>ul>li[data-view=next]{font-size:18px}.datepicker-panel>ul>li[data-view="month current"],.datepicker-panel>ul>li[data-view="year current"],.datepicker-panel>ul>li[data-view="years current"]{width:150px}.datepicker-panel>ul[data-view=months]>li,.datepicker-panel>ul[data-view=years]>li{height:52.5px;line-height:52.5px;width:52.5px}.datepicker-panel>ul[data-view=week]>li,.datepicker-panel>ul[data-view=week]>li:hover{background-color:#fff;cursor:default}.datepicker-hide{display:none} | |
| 168 | + | |
| 169 | +/* ---------- datepicker modern skin (overrides) ---------- */ | |
| 170 | + | |
| 171 | +.datepicker-dropdown { | |
| 172 | + border: 1px solid #e3e6ea !important; | |
| 173 | + border-radius: 8px; | |
| 174 | + overflow: hidden; | |
| 175 | + box-shadow: 0 8px 24px rgba(29, 35, 39, .14) !important; | |
| 176 | +} | |
| 177 | + | |
| 178 | +.datepicker-panel > ul > li { | |
| 179 | + transition: background .12s ease, color .12s ease; | |
| 180 | + border-radius: 4px; | |
| 181 | +} | |
| 182 | + | |
| 183 | +.datepicker-panel > ul > li:hover, | |
| 184 | +.datepicker-panel > ul > li.highlighted { | |
| 185 | + background-color: #eaf3fc; | |
| 186 | +} | |
| 187 | + | |
| 188 | +.datepicker-panel > ul > li.highlighted:hover { | |
| 189 | + background-color: #d7e9f9; | |
| 190 | +} | |
| 191 | + | |
| 192 | +.datepicker-panel > ul > li.picked, | |
| 193 | +.datepicker-panel > ul > li.picked:hover { | |
| 194 | + color: #fff; | |
| 195 | + background-color: #4693dd; | |
| 196 | + font-weight: 600; | |
| 197 | +} | |
| 198 | + | |
| 199 | +.datepicker-panel > ul[data-view=week] > li { | |
| 200 | + font-weight: 600; | |
| 201 | + color: #50575e; | |
| 202 | + text-transform: uppercase; | |
| 203 | + font-size: 10px; | |
| 204 | +} | |
| 205 | + | |
| 206 | +.datepicker-panel > ul > li[data-view="month current"], | |
| 207 | +.datepicker-panel > ul > li[data-view="year current"], | |
| 208 | +.datepicker-panel > ul > li[data-view="years current"] { | |
| 209 | + font-weight: 600; | |
| 210 | + color: #1d2327; | |
| 211 | +} | |
| 212 | + | |
| 213 | +.datepicker-top-left, .datepicker-top-right { border-top-color: #4693dd } | |
| 214 | +.datepicker-top-left:before, .datepicker-top-right:before { border-bottom-color: #4693dd } | |
| 215 | +.datepicker-bottom-left, .datepicker-bottom-right { border-bottom-color: #4693dd } | |
| 216 | +.datepicker-bottom-left:before, .datepicker-bottom-right:before { border-top-color: #4693dd } | |
