chrome/common/extensions/docs/static/sass/_html.scss

   1 //-----------------------------------------------------------------------
   2 // General Elements
   3 //-----------------------------------------------------------------------
   4
   5 figure {
   6   margin: $default-padding 0;
   7   img {
   8     border: $default-border;
   9   }
  10 }
  11
  12 table {
  13   width: 100%;
  14   border-collapse: collapse;
  15   margin: 2em 0;
  16   line-height: 1.5em;
  17 }
  18 table caption {
  19   margin-bottom: 1em;
  20   text-align: left;
  21   font-weight: bold;
  22 }
  23 th {
  24   border: $default-border;
  25   font-weight: bold;
  26   background: darken($gray-light, 5%);
  27 }
  28 tr {
  29   border-bottom: $default-border;
  30 }
  31 table + tr {
  32   border-top: $default-border;
  33 }
  34 td, th {
  35   padding: 1em 1.5em;
  36   text-align: left;
  37   border: $default-border;
  38 }
  39
  40 pre {
  41   background-color: #f7f7f7;
  42   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15);
  43   margin: 1em 0 0 0;
  44   padding: .99em;
  45   position: relative;
  46   overflow-x: auto;
  47   word-wrap: normal;
  48   white-space: pre;
  49   font-size: 0.95em;
  50   line-height: 1.8em;
  51   a {
  52     text-decoration: underline!important;
  53   }
  54   b {
  55     background: yellow;
  56     font-weight: normal;
  57   }
  58   strike {
  59     text-decoration: none;
  60     background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
  61   }
  62   &[data-filename]::after {
  63     visibility: hidden;
  64   }
  65   &[data-filename]:hover::after {
  66     visibility: visible;
  67   }
  68 }
  69
  70
  71 //-----------------------------------------------------------------------
  72 // General Classes
  73 //-----------------------------------------------------------------------
  74
  75 .element-invisible {
  76   @include element-invisible;
  77 }
  78
  79 .hidden {
  80   display: none;
  81 }
  82
  83 .label {
  84   color: inherit;
  85   text-transform: uppercase;
  86   margin-bottom: 5px;
  87   font-size: $small-label-size;
  88   font-weight: bold;
  89 }
  90
  91 .published {
  92   font-size: $small-label-size;
  93   font-style: italic;
  94   color: $gray-light-dark;
  95   line-height: $base-line-height * 0.7;
  96 }
  97
  98 .description {
  99   margin: $default-padding 0;
 100
 101   &:last-child {
 102     margin-bottom: 0;
 103   }
 104 }
 105
 106
 107 #gc-footer {
 108   background: $gray-light;
 109 }
 110
 111 // Big blue buttonz!
 112 .button {
 113   background: #0370ea;
 114   background-image: linear-gradient(top, #008dfd 0%,#0370ea 100%);
 115   border: 1px solid #076bd2;
 116   border-radius: 3px;
 117   color: $white !important;
 118   display: inline-block;
 119   font-size: 13px;
 120   font-weight: 700;
 121   line-height: 1.3;
 122   padding: 5px 20px;
 123   text-align: center;
 124   text-decoration: none !important;
 125   text-shadow: 1px 1px 1px #076bd2;
 126
 127   &:hover {
 128     background-image: linear-gradient(top, #008dfd 30%,#0370ea 100%);
 129     cursor: pointer;
 130   }
 131
 132   a {
 133       color: inherit !important;
 134   }
 135 }
 136
 137 .button-alt {
 138   background: #eee;
 139   background-image: linear-gradient(bottom, #DCDCDC 46%, #FAFAFA 87%);
 140   border: 1px solid #d6d6d6;
 141   border-radius: 3px;
 142   color: #333 !important;
 143   display: inline-block;
 144   font-size: 12px;
 145   font-weight: 700;
 146   line-height: 24px;
 147   padding: 0 15px;
 148   text-align: center;
 149   text-decoration: none !important;
 150   text-shadow: none;
 151
 152   &:hover {
 153     background-image: linear-gradient(bottom, #DCDCDC 20%, #FAFAFA 87%);
 154     cursor: pointer;
 155   }
 156 }
 157
 158 // Feedback and scroll to top buttons.
 159 .google-button {
 160   background-color: $gray-light;
 161   border-radius: 2px 0 0 0;
 162   border: 1px solid rgba(0,0,0,0.1);
 163   padding: 5px 12px;
 164   text-align: center;
 165   white-space: nowrap;
 166
 167   &:hover {
 168     border-color: #c6c6c6;
 169     box-shadow: 0 -1px 1px rgba(0,0,0,0.1);
 170   }
 171   &:active {
 172     background-color: #f1f1f1;
 173     box-shadow: inset 0 0px 2px rgba(0,0,0,0.2);
 174   }
 175 }
 176
 177 .screenshot,
 178 .screenshot img {
 179   margin: 1em 0;
 180 }
 181
 182 .video-container {
 183   position: relative;
 184   padding-bottom: 56.25%;
 185   padding-top: 30px;
 186   height: 0;
 187   overflow: hidden;
 188   margin: 0 0 20px 0;
 189 }
 190 .video-container iframe,
 191 .video-container object,
 192 .video-container embed {
 193   position: absolute;
 194   top: 0;
 195   left: 0;
 196   width: 100%;
 197   height: 100%;
 198 }
 199
 200 p, div, aside {
 201   &.note,
 202   &.caution,
 203   &.warning {
 204     background-color: $gray-light;
 205     border-bottom: 1px solid;
 206     border-top: 1px solid;
 207     overflow: hidden;
 208     max-width: 85%;
 209     padding: 1em;
 210     //border: none;
 211     //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15);
 212
 213   }
 214   &.note {
 215     border-color: #36C;
 216   }
 217   &.caution {
 218     border-color: #FC3;
 219   }
 220   &.warning {
 221     border-color: #A03;
 222     em, strong {
 223       color: #A03;
 224     }
 225   }
 226 }
 227
 228 .permalink {
 229   display: none;
 230   margin-left: 5px;
 231 }
 232 .has-permalink:hover .permalink {
 233   display: initial;
 234 }
 235 .no-permalink .permalink {
 236   display: none !important;
 237 }
 238
 239 //-----------------------------------------------------------------------
 240 // Specific Elements
 241 //-----------------------------------------------------------------------
 242
 243 #gc-footer {
 244   .links {
 245     a {
 246       margin-right: $default-padding;
 247     }
 248   }
 249   #cc-info {
 250     font-size: $small-label-size;
 251   }
 252 }
 253
 254 #social-buttons {
 255   @include display-flex();
 256   @include justify-content(flex-end);
 257   @include align-items(center);
 258
 259   > * {
 260     margin-left: 10px;
 261   }
 262
 263   img {
 264     margin: -4px 0 0 1px;
 265   }
 266 }
 267
 268 // @media only screen and (min-width: $break-small)  {
 269 //   #gc-pagecontent {
 270 //     > .g-section {
 271 //       padding: $main-content-top-margin / 2 0 $main-content-top-margin;
 272 //     }
 273 //   }
 274 //   .g-unit {
 275 //     &.g-last {
 276 //       .g-content {
 277 //         border-bottom: none;
 278 //       }
 279 //     }
 280 //     .g-content {
 281 //       margin-top: $default-padding;
 282 //       margin-right: 0;
 283 //       &:last-child {
 284 //         padding-bottom: $default-padding;
 285 //       }
 286 //     }
 287 //   }
 288 // }
 289
 290
 291 // Phone
 292 @media only screen and (max-width: $break-small)  {
 293   .more-section {
 294     .g-last {
 295       .g-content {
 296         padding-bottom: 0;
 297         border: none;
 298       }
 299     }
 300     .g-content {
 301       border: $default-border;
 302       border-width: 0 0 1px 0;
 303       padding-bottom: $default-padding;
 304       margin-bottom: $default-padding;
 305     }
 306   }
 307   #gc-footer {
 308     .links {
 309       a {
 310         display: inline-block;
 311       }
 312     }
 313   }
 314 }
 315
 316
 317 #scroll-to-top,
 318 #send-feedback {
 319   border-bottom: none;
 320   bottom: 0;
 321   position: fixed;
 322   z-index: 5;
 323 }
 324 #scroll-to-top {
 325   border-left: 0;
 326   left: 0;
 327 }
 328 #send-feedback {
 329   border-right: 0;
 330   right: 0;
 331 }
 332
 333
 334 //-----------------------------------------------------------------------
 335 // UNCLEAR IF NEEDED. Move things up as needed. ================
 336 //-----------------------------------------------------------------------
 337
 338 /*
 339 ul.condensed {
 340   margin: 0.5em 0;
 341   li {
 342     margin-top: 0;
 343   }
 344 }
 345
 346 pre {
 347   &[data-filename] .filename {
 348     background-color: #777;
 349     padding: 2px 12px;
 350     position: absolute;
 351     right: 0;
 352     top: 0;
 353 }
 354 */
 355
 356 /*
 357 #gc-sidebar {
 358   width: 185px;
 359   float: left;
 360
 361   // scroll.js adds and removes the floating class depending on the scroll position.
 362   &.floating {
 363     overflow: auto;
 364     position: fixed;
 365     top: 0; bottom: 0;
 366   }
 367
 368   // Sidebar link/button styling.
 369   span, a {
 370     color: black;
 371     display: block;
 372     font-weight: normal;
 373     position: relative;
 374
 375     &.level2 {
 376       font-weight: bold;
 377     }
 378   }
 379   a:hover,
 380   a.selected {
 381     color: #0d68ae;
 382   }
 383
 384   a.button,
 385   .level3,
 386   .level4 {
 387     color: #444;
 388   }
 389
 390   .toggleIndicator {
 391     background: url(../../images/toggle_sprite.png) no-repeat 0 0;
 392     height: 8px;
 393     position: absolute;
 394     right: 0;
 395     top: 3px;
 396     width: 8px;
 397
 398     &.toggled {
 399       background-position: 0 -9px;
 400     }
 401   }
 402
 403   // Sidebar list styling.
 404 /*  ul {
 405     list-style: none;
 406     margin: 0;
 407     padding: 0;
 408
 409     &.level2 {
 410       margin-left: 10px;
 411       padding-top: 10px;
 412     }
 413     &.level3,
 414     &.level4,
 415     &.level5 {
 416       margin-left: 20px;
 417       padding-top: 10px;
 418     }
 419   }
 420
 421   li {
 422     line-height: 120%;
 423     margin: 0;
 424     padding: 8px 0;
 425
 426     &.level2 {
 427       border-top: 1px solid #F5F5F5;
 428
 429       &:first-child {
 430         border-top: none;
 431       }
 432     }
 433   }
 434 }
 435 *//*
 436 #toc {
 437   background-color: #F5F5F5;
 438   border-bottom: 20px solid white; */
 439   /* We want this element to have a visual left-margin of 20px, but margins on
 440      floated elements don't affect the borders and background of the elements
 441      they float over. So we add this border to force the issue. */
 442 /*  border-left: 20px solid white;
 443   float: right;
 444   margin: 5px 0px 0px 0px;
 445   padding: 5px;
 446   position: relative;
 447   width: 250px;
 448   word-break: break-word;
 449   z-index: 3;
 450
 451   * {
 452     list-style: none;
 453     overflow: hidden;
 454     padding: 0;
 455     text-overflow: ellipsis;
 456     white-space: nowrap;
 457   }
 458
 459   a {
 460     color: black;
 461   }
 462
 463   h2 {
 464     border: none;
 465     font-size: 100%;
 466     font-weight: bold;
 467     margin: 0;
 468     padding: 0;
 469   }
 470
 471   ol {
 472     margin: 1em 0 0 0;
 473
 474     li {
 475       line-height: 1.2em;
 476       margin: .5em 0 .5em 1em;
 477
 478       ol {
 479         margin: 0;
 480
 481         li {
 482           margin: .5em 0 0 1em;
 483         }
 484       }
 485     }
 486   }
 487
 488   .api-reference {
 489     border-top: 1px solid #e5e5e5;
 490   }
 491 }
 492
 493 .filtered_item {
 494   line-height: 6px;
 495 }
 496
 497 #filtered_apis {
 498   margin-top: 5px;
 499 }
 500
 501 #skipto {
 502   display: none;
 503 }
 504 */
 505 /* List with largeish images floated to the right. */
 506 /*.imaged {
 507   li {
 508     clear: right;
 509
 510     img {
 511       float: right;
 512       margin-bottom: 1em;
 513     }
 514   }
 515   + p {
 516     clear: right;
 517   }
 518 }*/
 519
 520 // small indent for better visual distinction (e.g., in a long list)
 521 /*.indent-small {
 522   margin-left: 2em;
 523 }*/
 524
 525 /* Tabbed pane with header (tabs) and content */
 526 /*
 527 tabs {
 528   display: block;
 529   margin: 25px 0;
 530
 531   header {
 532     background: inherit;
 533     border: 1px solid #ccc;
 534     border-bottom: 1px solid white;
 535     cursor: auto;
 536     display: inline-block;
 537     margin-bottom: 0;
 538     padding: 10px;
 539     outline: none;
 540
 541     &.unselected {
 542       background: #eee;
 543       border-bottom: 1px solid #ccc;
 544       cursor: pointer;
 545     }
 546   }
 547   content {
 548     border: 1px solid #ccc;
 549     display: block;
 550     margin-top: -1px;
 551     padding: 20px;
 552
 553     &.unselected {
 554       display: none;
 555     }
 556
 557     pre {
 558       margin: 0;
 559       padding: 10px;
 560     }
 561   }
 562 } */
 563
 564 /*
 565  * API references.
 566  */
 567 /*
 568 .type_name,
 569 .property {
 570   font-style: italic;
 571 }
 572
 573 .api_reference {
 574   div.summary {
 575     background-color: #CADEF4;
 576     border: 1px solid #93B4D9;
 577     font-family: "Courier New", courier, monospace;
 578     margin-top: 1em;
 579     padding: 0.5em;
 580     text-indent: -1.5em;
 581
 582     .line {
 583       padding-left: 1.5em;
 584       text-indent: -1.5em;
 585     }
 586
 587     .subdued {
 588       color: #7594B8;
 589     }
 590   }
 591
 592   div.description {
 593     margin-left: 2em;
 594   }
 595 */
 596   /* This style is used because types with functions prefix the function with the
 597    * type name, using a lowercase first letter. */
 598 /*  .uncapitalize:first-letter {
 599     text-transform: lowercase;
 600   }
 601
 602   .capitalize:first-letter {
 603     text-transform: uppercase;
 604   }
 605 }
 606
 607 .optional {
 608   color: #7D7D7D;
 609 }
 610 */