You are here

Home » API reference » Environment Indicator 8.2

environment_indicator.css in Environment Indicator 8.2

Same filename and directory in other branches
  1. 6 environment_indicator.css
  2. 7.2 environment_indicator.css
  3. 7 environment_indicator.css
#toolbar-administration .toolbar-bar .environment-indicator-name,
#environment-indicator {
  text-align: center;
  white-space: nowrap;
  color: white;
  text-shadow: 0 -1px 1px #333;
  font-weight: bold;
  z-index: 10;
  left: 0;
  right: 0;
}


.fixed-yes { position: fixed; }
.fixed-yes.position-bottom { bottom: 0; }
.fixed-yes.position-top { top: 0; }

div#toolbar-administration div.toolbar-menu { padding: 5px 20px 5px 10px; }

#toolbar-administration .toolbar-bar .environment-indicator-name, #environment-indicator .environment-indicator-name { cursor: pointer; }
#environment-indicator .environment-indicator-name { padding: 5px; }
#toolbar-administration .toolbar-bar .environment-indicator-name { padding: 0px 12px; }

#environment-indicator .gradient-bar,
#environment-indicator .environment-indicator-name,
#toolbar-administration .environment-indicator-name-wrapper .environment-indicator-name {
  background-image: linear-gradient(bottom, rgba(207,207,207,0.3) 19%, rgba(250,250,250,0.3) 60%, rgba(255,255,255,0.3) 80%);
  background-image: -o-linear-gradient(bottom, rgba(207,207,207,0.3) 19%, rgba(250,250,250,0.3) 60%, rgba(255,255,255,0.3) 80%);
  background-image: -moz-linear-gradient(bottom, rgba(207,207,207,0.3) 19%, rgba(250,250,250,0.3) 60%, rgba(255,255,255,0.3) 80%);
  background-image: -webkit-linear-gradient(bottom, rgba(207,207,207,0.3) 19%, rgba(250,250,250,0.3) 60%, rgba(255,255,255,0.3) 80%);
  background-image: -ms-linear-gradient(bottom, rgba(207,207,207,0.3) 19%, rgba(250,250,250,0.3) 60%, rgba(255,255,255,0.3) 80%);

  background-image: -webkit-gradient(
  	linear,
  	left bottom,
  	left top,
  	color-stop(0.19, rgba(207,207,207,0.3)),
  	color-stop(0.6, rgba(250,250,250,0.3)),
  	color-stop(0.8, rgba(255,255,255,0.3))
  );
}

#toolbar-administration .environment-indicator-name-wrapper { float: right; font-size: 0.85em; }

#toolbar-administration .toolbar-bar .environment-indicator-name {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
#environment-indicator .item-list ul, #toolbar-administration .item-list ul { overflow: hidden; margin: 0; }

#environment-indicator .item-list ul.environment-switcher-container li.environment-switcher,
#toolbar-administration .item-list ul.environment-switcher-container li.environment-switcher {
  list-style: none;
  float: left;
  background-color: #333;
  margin: 0 3px;
  padding: 3px 8px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  font-size: 0.8em;
  text-shadow: none;
}

#environment-indicator .item-list ul.environment-switcher-container li.environment-switcher:hover,
#toolbar-administration .item-list ul.environment-switcher-container li.environment-switcher:hover {
  background-color: #DDD;
  -moz-box-shadow: inset 0 1px 5px #333;
  -webkit-box-shadow: inset 0 1px 5px #333;
  -o-box-shadow: inset 0 1px 5px #333;
  box-shadow: inset 0 1px 5px #333;
}
#environment-indicator .item-list ul.environment-switcher-container li.environment-switcher a,
#toolbar-administration .item-list ul.environment-switcher-container li.environment-switcher a { color: #DDD; text-decoration: none; background-color: transparent !important; }
#environment-indicator .item-list ul.environment-switcher-container li.environment-switcher:hover a,
#toolbar-administration .item-list ul.environment-switcher-container li.environment-switcher:hover a { color: #333; }

#environment-indicator .item-list, #toolbar-administration .item-list {
  display: none;
  padding: 10px;
  -moz-box-shadow: inset 0 0 5px #333;
  -webkit-box-shadow: inset 0 0 5px #333;
  -o-box-shadow: inset 0 0 5px #333;
  box-shadow: inset 0 0 5px #333;
}

.environment-indicator-color {
  font-size: 1em;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-color: #EDEDE0;
}

.toolbar-bar .toolbar-icon-environment:before {
  background-image: url("images/env-bebebe.svg");
}
.no-svg .toolbar-bar .toolbar-icon-environment:before {
  background-image: url("images/env-bebebe.png");
}
.toolbar-bar .toolbar-icon-environment:active:before,
.toolbar-bar .toolbar-icon-environment.active:before {
  background-image: url("images/env-ffffff.svg");
}
.no-svg .toolbar-bar .toolbar-icon-environment:active:before,
.no-svg .toolbar-bar .toolbar-icon-environment.active:before {
  background-image: url("images/env-ffffff.png");
}

File

environment_indicator.css
View source 
  1. #toolbar-administration .toolbar-bar .environment-indicator-name,

  2. #environment-indicator {

  3.   text-align: center;

  4.   white-space: nowrap;

  5.   color: white;

  6.   text-shadow: 0 -1px 1px #333;

  7.   font-weight: bold;

  8.   z-index: 10;

  9.   left: 0;

  10.   right: 0;

  11. }

  12. 

  13. 

  14. .fixed-yes { position: fixed; }

  15. .fixed-yes.position-bottom { bottom: 0; }

  16. .fixed-yes.position-top { top: 0; }

  17. 

  18. div#toolbar-administration div.toolbar-menu { padding: 5px 20px 5px 10px; }

  19. 

  20. #toolbar-administration .toolbar-bar .environment-indicator-name, #environment-indicator .environment-indicator-name { cursor: pointer; }

  21. #environment-indicator .environment-indicator-name { padding: 5px; }

  22. #toolbar-administration .toolbar-bar .environment-indicator-name { padding: 0px 12px; }

  23. 

  24. #environment-indicator .gradient-bar,

  25. #environment-indicator .environment-indicator-name,

  26. #toolbar-administration .environment-indicator-name-wrapper .environment-indicator-name {

  27.   background-image: linear-gradient(bottom, rgba(207,207,207,0.3) 19%, rgba(250,250,250,0.3) 60%, rgba(255,255,255,0.3) 80%);

  28.   background-image: -o-linear-gradient(bottom, rgba(207,207,207,0.3) 19%, rgba(250,250,250,0.3) 60%, rgba(255,255,255,0.3) 80%);

  29.   background-image: -moz-linear-gradient(bottom, rgba(207,207,207,0.3) 19%, rgba(250,250,250,0.3) 60%, rgba(255,255,255,0.3) 80%);

  30.   background-image: -webkit-linear-gradient(bottom, rgba(207,207,207,0.3) 19%, rgba(250,250,250,0.3) 60%, rgba(255,255,255,0.3) 80%);

  31.   background-image: -ms-linear-gradient(bottom, rgba(207,207,207,0.3) 19%, rgba(250,250,250,0.3) 60%, rgba(255,255,255,0.3) 80%);

  32. 

  33.   background-image: -webkit-gradient(

  34.   	linear,

  35.   	left bottom,

  36.   	left top,

  37.   	color-stop(0.19, rgba(207,207,207,0.3)),

  38.   	color-stop(0.6, rgba(250,250,250,0.3)),

  39.   	color-stop(0.8, rgba(255,255,255,0.3))

  40.   );

  41. }

  42. 

  43. #toolbar-administration .environment-indicator-name-wrapper { float: right; font-size: 0.85em; }

  44. 

  45. #toolbar-administration .toolbar-bar .environment-indicator-name {

  46.   -webkit-border-radius: 10px;

  47.   -moz-border-radius: 10px;

  48.   -o-border-radius: 10px;

  49.   border-radius: 10px;

  50. }

  51. #environment-indicator .item-list ul, #toolbar-administration .item-list ul { overflow: hidden; margin: 0; }

  52. 

  53. #environment-indicator .item-list ul.environment-switcher-container li.environment-switcher,

  54. #toolbar-administration .item-list ul.environment-switcher-container li.environment-switcher {

  55.   list-style: none;

  56.   float: left;

  57.   background-color: #333;

  58.   margin: 0 3px;

  59.   padding: 3px 8px;

  60.   -moz-border-radius: 15px;

  61.   -webkit-border-radius: 15px;

  62.   -moz-border-radius: 15px;

  63.   border-radius: 15px;

  64.   font-size: 0.8em;

  65.   text-shadow: none;

  66. }

  67. 

  68. #environment-indicator .item-list ul.environment-switcher-container li.environment-switcher:hover,

  69. #toolbar-administration .item-list ul.environment-switcher-container li.environment-switcher:hover {

  70.   background-color: #DDD;

  71.   -moz-box-shadow: inset 0 1px 5px #333;

  72.   -webkit-box-shadow: inset 0 1px 5px #333;

  73.   -o-box-shadow: inset 0 1px 5px #333;

  74.   box-shadow: inset 0 1px 5px #333;

  75. }

  76. #environment-indicator .item-list ul.environment-switcher-container li.environment-switcher a,

  77. #toolbar-administration .item-list ul.environment-switcher-container li.environment-switcher a { color: #DDD; text-decoration: none; background-color: transparent !important; }

  78. #environment-indicator .item-list ul.environment-switcher-container li.environment-switcher:hover a,

  79. #toolbar-administration .item-list ul.environment-switcher-container li.environment-switcher:hover a { color: #333; }

  80. 

  81. #environment-indicator .item-list, #toolbar-administration .item-list {

  82.   display: none;

  83.   padding: 10px;

  84.   -moz-box-shadow: inset 0 0 5px #333;

  85.   -webkit-box-shadow: inset 0 0 5px #333;

  86.   -o-box-shadow: inset 0 0 5px #333;

  87.   box-shadow: inset 0 0 5px #333;

  88. }

  89. 

  90. .environment-indicator-color {

  91.   font-size: 1em;

  92.   text-align: center;

  93.   -webkit-border-radius: 5px;

  94.   -moz-border-radius: 5px;

  95.   -o-border-radius: 5px;

  96.   border-radius: 5px;

  97.   background-color: #EDEDE0;

  98. }

  99. 

  100. .toolbar-bar .toolbar-icon-environment:before {

  101.   background-image: url("images/env-bebebe.svg");

  102. }

  103. .no-svg .toolbar-bar .toolbar-icon-environment:before {

  104.   background-image: url("images/env-bebebe.png");

  105. }

  106. .toolbar-bar .toolbar-icon-environment:active:before,

  107. .toolbar-bar .toolbar-icon-environment.active:before {

  108.   background-image: url("images/env-ffffff.svg");

  109. }

  110. .no-svg .toolbar-bar .toolbar-icon-environment:active:before,

  111. .no-svg .toolbar-bar .toolbar-icon-environment.active:before {

  112.   background-image: url("images/env-ffffff.png");

  113. }