yaffs.net Git - yaffs-website/blob - web/modules/contrib/devel/kint/kint/view/base.less

   1 //
   2 // VARIABLES FOR THEMES TO OVERRIDE
   3 // --------------------------------------------------
   4
   5 @spacing : 4;
   6
   7 // caret taken from solarized
   8 @caret-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAA8CAMAAACO5hB7AAAA7VBMVEVYbnWToaH///9YbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnWToaGToaGToaGToaGToaGToaGToaGToaGToaFYbnWToaFYbnVYbnWToaGToaFYbnWToaFYbnWToaFYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnWToaGToaGToaGToaGToaGToaGToaGToaGToaGToaGToaGToaGToaGToaFYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnWToaGToaGToaGToaGToaGToaGToaGToaGToaFYbnWToaEeRtj1AAAATXRSTlMAAACLab0B7iP2R7CL9iPuaUewAb36F0/QnPoX0JxPYQaurepi6QV8FhV7MzFhM6586RYFMa3qYnsVBpNQ+ZGOGJ3PkM9QkZAY+Y6TnV7gnYsAAAEcSURBVHhebdHVbgMxEEBRu8sUZmqapBBoSuGUmWb+/3NayxtrLOe+Hck745XZgd6/eb3CVcKt7HmR+gKxlCGOETG5vFbOoahR6NxI5zHt6nuq+2dqnqfzzH3mfcz70vb8H6MJt5u6a96hS30E4PjEFgAEp2fKNojKUfVEOoS044ex7u3YPE/nmfvM+5j3pe17T9oe/77O41w+n4vnrbrwZxbTshVhvtx5Kb8vliRLRWmeSQSTjJq/El5x5fUXYmNN9hcQC5y4g/hGvVksNtT8451rns2IScb7mn567ll2GNpWr9YWfvQgzWsKs8HOA/m960g6rjTzA8HAV/NHwiOmPLwDKA/J/gggYsRVgFvqbr/fpWYv90zzZKKs9Qfx00Jx65oxLAAAAABJRU5ErkJggg==");
   9
  10 //
  11 // SET UP HELPER VARIABLES
  12 // --------------------------------------------------
  13
  14 @border: 1px solid @border-color;
  15
  16 .selection() {
  17   background : @border-color-hover;
  18   color      : @text-color;
  19 }
  20
  21 //
  22 // BASE STYLES
  23 // --------------------------------------------------
  24
  25 .kint::selection { .selection() }
  26
  27 .kint::-moz-selection { .selection() }
  28
  29 .kint::-webkit-selection { .selection() }
  30
  31 .kint,
  32 .kint::before,
  33 .kint::after,
  34 .kint *,
  35 .kint *::before,
  36 .kint *::after {
  37   box-sizing    : border-box;
  38   border-radius : 0;
  39   color         : @text-color;
  40   float         : none !important;
  41   font-family   : Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  42   line-height   : 15px;
  43   margin        : 0;
  44   padding       : 0;
  45   text-align    : left;
  46 }
  47
  48 .kint {
  49   font-size   : 13px;
  50   margin      : @spacing * 2px 0;
  51   overflow-x  : auto;
  52   white-space : nowrap;
  53
  54   dt {
  55     background  : @main-background;
  56     border      : @border;
  57     color       : @text-color;
  58     display     : block;
  59     font-weight : bold;
  60     list-style  : none outside none;
  61     overflow    : auto;
  62     padding     : @spacing * 1px;
  63
  64     &:hover {
  65       border-color : @border-color-hover;
  66     }
  67
  68     > var {
  69       margin-right : 5px;
  70     }
  71   }
  72
  73   > dl dl {
  74     padding : 0 0 0 @spacing * 3px;
  75   }
  76
  77   //
  78   // DROPDOWN CARET
  79   // --------------------------------------------------
  80
  81   nav {
  82     background     : @caret-image no-repeat scroll 0 0 transparent;
  83     cursor         : pointer;
  84     display        : inline-block;
  85     height         : 15px;
  86     width          : 15px;
  87     margin-right   : 3px;
  88     vertical-align : middle;
  89   }
  90
  91   dt.kint-parent:hover nav {
  92     background-position : 0 -15px;
  93   }
  94
  95   dt.kint-parent.kint-show:hover > nav {
  96     background-position : 0 -45px;
  97   }
  98
  99   dt.kint-show > nav {
 100     background-position : 0 -30px;
 101   }
 102
 103   dt.kint-parent + dd {
 104     display     : none;
 105     border-left : 1px dashed @border-color;
 106   }
 107
 108   dt.kint-parent.kint-show + dd {
 109     display : block;
 110   }
 111
 112   //
 113   // INDIVIDUAL ITEMS
 114   // --------------------------------------------------
 115
 116   var,
 117   var a {
 118     color      : @variable-type-color;
 119     font-style : normal;
 120   }
 121
 122   dt:hover var,
 123   dt:hover var a {
 124     color : @variable-type-color-hover;
 125   }
 126
 127   dfn {
 128     font-style  : normal;
 129     font-family : monospace;
 130     color       : @variable-name-color;
 131   }
 132
 133   pre {
 134     color      : @text-color;
 135     margin     : 0 0 0 @spacing * 3px;
 136     padding    : 5px;
 137     overflow-y : hidden;
 138     border-top : 0;
 139     border     : @border;
 140     background : @main-background;
 141     display    : block;
 142     word-break : normal;
 143   }
 144
 145   .kint-popup-trigger {
 146     float  : right !important;
 147     cursor : pointer;
 148     color  : @border-color-hover;
 149
 150     &:hover {
 151       color : @border-color;
 152     }
 153   }
 154
 155   dt.kint-parent > .kint-popup-trigger {
 156     font-size : 13px;
 157   }
 158
 159   footer {
 160     padding   : 0 3px 3px;
 161     font-size : 9px;
 162
 163     > .kint-popup-trigger {
 164       font-size : 12px;
 165     }
 166
 167     nav {
 168       background-size : 10px;
 169       height          : 10px;
 170       width           : 10px;
 171
 172       &:hover {
 173         background-position : 0 -10px;
 174       }
 175     }
 176
 177     > ol {
 178       display     : none;
 179       margin-left : 32px;
 180     }
 181
 182     &.kint-show {
 183       > ol {
 184         display : block;
 185       }
 186
 187       nav {
 188         background-position : 0 -20px;
 189
 190         &:hover {
 191           background-position : 0 -30px;
 192         }
 193       }
 194     }
 195   }
 196
 197   a {
 198     color       : @text-color;
 199     text-shadow : none;
 200
 201     &:hover {
 202       color         : @variable-name-color;
 203       border-bottom : 1px dotted @variable-name-color;
 204     }
 205   }
 206
 207   //
 208   // TABS
 209   // --------------------------------------------------
 210
 211   ul {
 212     list-style   : none;
 213     padding-left : @spacing * 3px;
 214
 215     &:not(.kint-tabs) {
 216       li {
 217         border-left : 1px dashed @border-color;
 218
 219         > dl {
 220           border-left : none;
 221         }
 222       }
 223     }
 224
 225     &.kint-tabs {
 226       margin       : 0 0 0 @spacing * 3px;
 227       padding-left : 0;
 228       background   : @main-background;
 229       border       : @border;
 230       border-top   : 0;
 231
 232       li {
 233         background     : @secondary-background;
 234         border         : @border;
 235         cursor         : pointer;
 236         display        : inline-block;
 237         height         : @spacing * 6px;
 238         margin         : round(@spacing / 2) * 1px;
 239         padding        : 0 2px + round(@spacing * 2.5px);
 240         vertical-align : top;
 241
 242         &:hover,
 243         &.kint-active-tab:hover {
 244           border-color : @border-color-hover;
 245           color        : @variable-type-color-hover;
 246         }
 247
 248         &.kint-active-tab {
 249           background  : @main-background;
 250           border-top  : 0;
 251           margin-top  : -1px;
 252           height      : 27px;
 253           line-height : 24px;
 254         }
 255
 256         &:not(.kint-active-tab) {
 257           line-height : @spacing * 5px;
 258         }
 259       }
 260
 261       li + li {
 262         margin-left : 0
 263       }
 264     }
 265
 266     &:not(.kint-tabs) > li:not(:first-child) {
 267       display : none;
 268     }
 269   }
 270
 271   dt:hover + dd > ul > li.kint-active-tab {
 272     border-color : @border-color-hover;
 273     color        : @variable-type-color-hover;
 274   }
 275 }
 276
 277 //
 278 // REPORT
 279 // --------------------------------------------------
 280
 281 .kint-report {
 282   border-collapse : collapse;
 283   empty-cells     : show;
 284   border-spacing  : 0;
 285
 286   * {
 287     font-size : 12px;
 288   }
 289
 290   dt {
 291     background : none;
 292     padding    : (@spacing/2) * 1px;
 293
 294     .kint-parent {
 295       min-width     : 100%;
 296       overflow      : hidden;
 297       text-overflow : ellipsis;
 298       white-space   : nowrap;
 299     }
 300   }
 301
 302   td,
 303   th {
 304     border         : @border;
 305     padding        : (@spacing/2) * 1px;
 306     vertical-align : center;
 307   }
 308
 309   th {
 310     cursor : alias;
 311   }
 312
 313   td:first-child,
 314   th {
 315     font-weight : bold;
 316     background  : @secondary-background;
 317     color       : @variable-name-color;
 318   }
 319
 320   td {
 321     background  : @main-background;
 322     white-space : pre;
 323
 324     > dl {
 325       padding : 0;
 326     }
 327   }
 328
 329   pre {
 330     border-top   : 0;
 331     border-right : 0;
 332   }
 333
 334   th:first-child {
 335     background : none;
 336     border     : 0;
 337   }
 338
 339   td.kint-empty {
 340     background : #d33682 !important;
 341   }
 342
 343   tr:hover {
 344     > td {
 345       box-shadow : 0 0 1px 0 @border-color-hover inset;
 346     }
 347
 348     var {
 349       color : @variable-type-color-hover;
 350     }
 351   }
 352   ul.kint-tabs li.kint-active-tab {
 353     height      : 20px;
 354     line-height : 17px;
 355   }
 356 }
 357
 358 //
 359 // TRACE
 360 // --------------------------------------------------
 361 .kint-trace {
 362   .kint-source {
 363     line-height : round(@spacing * 3.5) * 1px;
 364
 365     span {
 366       padding-right : 1px;
 367       border-right  : 3px inset @variable-type-color;
 368     }
 369
 370     .kint-highlight {
 371       background : @secondary-background;
 372     }
 373   }
 374
 375   .kint-parent {
 376     > b {
 377       min-width  : 18px;
 378       display    : inline-block;
 379       text-align : right;
 380       color      : @variable-name-color;
 381     }
 382
 383     > var {
 384       > a {
 385         color : @variable-type-color;
 386       }
 387     }
 388   }
 389 }
 390
 391 //
 392 // MISC
 393 // --------------------------------------------------
 394
 395 // keyboard navigation caret
 396 .kint-focused {
 397   .keyboard-caret
 398 }
 399
 400 .kint-microtime,
 401 .kint-color-preview {
 402   box-shadow  : 0 0 2px 0 #b6cedb;
 403   height      : 16px;
 404   text-align  : center;
 405   text-shadow : -1px 0 #839496, 0 1px #839496, 1px 0 #839496, 0 -1px #839496;
 406   width       : 230px;
 407   color       : #fdf6e3;
 408 }
 409
 410 // mini trace
 411 .kint footer li {
 412   color : #ddd;
 413 }