You are here

simplifying.css in Simplifying 8

@media only screen and (min-width: 16.5em) {
  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
    width: 3.5em;
  }
}
@media only screen and (min-width: 36em) {
  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
    width: auto;
  }
}
.toolbar_simplifying .small_button {
  padding-right: 0 !important;
  min-height: 39px;
  background-color: #333333 !important;
  text-indent: -9999px !important;
  width: 0 !important;
}
.toolbar-icon-simplifying_unread::before {
  background-image: url(../images/writing_grey.svg);
}
.toolbar-icon-simplifying_unread.is-active::before {
  background-image: url(../images/writing_white.svg);
}
.toolbar-icon-simplifying_switch::before {
  background-image: url(../images/logo_g.svg);
}
#toolbar-item-simplifying-unread-tray .menu-item ,
#toolbar-item-simplifying-tray .menu-item {
  margin: 0;
}
#toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify {
  background: url(../images/a_large.svg) 12px center no-repeat;
  background-size: 30px 25px;
  padding-left: 43px;
}
#toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify.is-active {
  background: url(../images/a_small.svg) 12px center no-repeat;
  background-size: 30px 25px;
}
#toolbar-item-simplifying-tray .toolbar-icon-simplifying_services {
  background: url(../images/service-grey.svg) 12px center no-repeat;
  background-size: 25px 20px;
  padding-left: 43px;
}
#toolbar-item-simplifying-tray .toolbar-icon-simplifying_training {
  background: url(../images/training-grey.svg) 12px center no-repeat;
  background-size: 25px 20px;
  padding-left: 41px;
}

/* gin theme fix */
body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_switch,
body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_unread {
  outline: none;
}
body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_unread::before {
  -webkit-mask-image: url(../images/writing_grey.svg);
  mask-image: url(../images/writing_grey.svg);
}
body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_unread.is-active::before {
  -webkit-mask-image: url(../images/writing_white.svg);
  mask-image: url(../images/writing_white.svg);
}
body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_switch.is-active::before ,
body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_switch::before {
  -webkit-mask-image: url(../images/logo_g.svg);
  mask-image: url(../images/logo_g.svg);
}

body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify,
body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify.is-active {
  background: none;
  padding-left: 35px;
}
body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify::before {
  -webkit-mask-image: url(../images/a_large.svg);
  mask-image: url(../images/a_large.svg);

  background-color: var(--colorGinIcons);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: 30px 25px;
  mask-size: 30px 25px;
}
body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify.is-active::before {
  -webkit-mask-image: url(../images/a_small.svg);
  mask-image: url(../images/a_small.svg);
  background: var(--colorGinPrimary);
}

body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_services,
body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_services.is-active {
  background: none;
  padding-left: 35px;
}
body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_services::before {
  -webkit-mask-image: url(../images/service-grey.svg);
  mask-image: url(../images/service-grey.svg);

  background-color: var(--colorGinIcons);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: 25px 20px;
  mask-size: 25px 20px;
}
body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_services.is-active::before {
  -webkit-mask-image: url(../images/service-grey.svg);
  mask-image: url(../images/service-grey.svg);
  background: var(--colorGinPrimary);
}

body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_training,
body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_training.is-active {
  background: none;
  padding-left: 35px;
}
body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_training::before {
  -webkit-mask-image: url(../images/training-grey.svg);
  mask-image: url(../images/training-grey.svg);

  background-color: var(--colorGinIcons);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: 25px 20px;
  mask-size: 25px 20px;
}
body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_training.is-active::before {
  -webkit-mask-image: url(../images/training-grey.svg);
  mask-image: url(../images/training-grey.svg);
  background: var(--colorGinPrimary);
}

File

css/simplifying.css
View source
  1. @media only screen and (min-width: 16.5em) {
  2. .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
  3. width: 3.5em;
  4. }
  5. }
  6. @media only screen and (min-width: 36em) {
  7. .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
  8. width: auto;
  9. }
  10. }
  11. .toolbar_simplifying .small_button {
  12. padding-right: 0 !important;
  13. min-height: 39px;
  14. background-color: #333333 !important;
  15. text-indent: -9999px !important;
  16. width: 0 !important;
  17. }
  18. .toolbar-icon-simplifying_unread::before {
  19. background-image: url(../images/writing_grey.svg);
  20. }
  21. .toolbar-icon-simplifying_unread.is-active::before {
  22. background-image: url(../images/writing_white.svg);
  23. }
  24. .toolbar-icon-simplifying_switch::before {
  25. background-image: url(../images/logo_g.svg);
  26. }
  27. #toolbar-item-simplifying-unread-tray .menu-item ,
  28. #toolbar-item-simplifying-tray .menu-item {
  29. margin: 0;
  30. }
  31. #toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify {
  32. background: url(../images/a_large.svg) 12px center no-repeat;
  33. background-size: 30px 25px;
  34. padding-left: 43px;
  35. }
  36. #toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify.is-active {
  37. background: url(../images/a_small.svg) 12px center no-repeat;
  38. background-size: 30px 25px;
  39. }
  40. #toolbar-item-simplifying-tray .toolbar-icon-simplifying_services {
  41. background: url(../images/service-grey.svg) 12px center no-repeat;
  42. background-size: 25px 20px;
  43. padding-left: 43px;
  44. }
  45. #toolbar-item-simplifying-tray .toolbar-icon-simplifying_training {
  46. background: url(../images/training-grey.svg) 12px center no-repeat;
  47. background-size: 25px 20px;
  48. padding-left: 41px;
  49. }
  50. /* gin theme fix */
  51. body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_switch,
  52. body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_unread {
  53. outline: none;
  54. }
  55. body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_unread::before {
  56. -webkit-mask-image: url(../images/writing_grey.svg);
  57. mask-image: url(../images/writing_grey.svg);
  58. }
  59. body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_unread.is-active::before {
  60. -webkit-mask-image: url(../images/writing_white.svg);
  61. mask-image: url(../images/writing_white.svg);
  62. }
  63. body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_switch.is-active::before ,
  64. body.gin--classic-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-simplifying_switch::before {
  65. -webkit-mask-image: url(../images/logo_g.svg);
  66. mask-image: url(../images/logo_g.svg);
  67. }
  68. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify,
  69. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify.is-active {
  70. background: none;
  71. padding-left: 35px;
  72. }
  73. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify::before {
  74. -webkit-mask-image: url(../images/a_large.svg);
  75. mask-image: url(../images/a_large.svg);
  76. background-color: var(--colorGinIcons);
  77. -webkit-mask-repeat: no-repeat;
  78. mask-repeat: no-repeat;
  79. -webkit-mask-position: center center;
  80. mask-position: center center;
  81. -webkit-mask-size: 30px 25px;
  82. mask-size: 30px 25px;
  83. }
  84. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_minify.is-active::before {
  85. -webkit-mask-image: url(../images/a_small.svg);
  86. mask-image: url(../images/a_small.svg);
  87. background: var(--colorGinPrimary);
  88. }
  89. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_services,
  90. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_services.is-active {
  91. background: none;
  92. padding-left: 35px;
  93. }
  94. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_services::before {
  95. -webkit-mask-image: url(../images/service-grey.svg);
  96. mask-image: url(../images/service-grey.svg);
  97. background-color: var(--colorGinIcons);
  98. -webkit-mask-repeat: no-repeat;
  99. mask-repeat: no-repeat;
  100. -webkit-mask-position: center center;
  101. mask-position: center center;
  102. -webkit-mask-size: 25px 20px;
  103. mask-size: 25px 20px;
  104. }
  105. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_services.is-active::before {
  106. -webkit-mask-image: url(../images/service-grey.svg);
  107. mask-image: url(../images/service-grey.svg);
  108. background: var(--colorGinPrimary);
  109. }
  110. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_training,
  111. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_training.is-active {
  112. background: none;
  113. padding-left: 35px;
  114. }
  115. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_training::before {
  116. -webkit-mask-image: url(../images/training-grey.svg);
  117. mask-image: url(../images/training-grey.svg);
  118. background-color: var(--colorGinIcons);
  119. -webkit-mask-repeat: no-repeat;
  120. mask-repeat: no-repeat;
  121. -webkit-mask-position: center center;
  122. mask-position: center center;
  123. -webkit-mask-size: 25px 20px;
  124. mask-size: 25px 20px;
  125. }
  126. body.gin--classic-toolbar #toolbar-item-simplifying-tray .toolbar-icon-simplifying_training.is-active::before {
  127. -webkit-mask-image: url(../images/training-grey.svg);
  128. mask-image: url(../images/training-grey.svg);
  129. background: var(--colorGinPrimary);
  130. }