CSS-only solution for the circle

jackmaessen

I made a css-only solution for the blank and red circle instead of the .png files
In the css i did some modifications:

.Alertcss {
  /*This is a trasnparent png. Visual created by border. Change png to have other visual*/
  /*background: url('InformOff32x32.png');
  background-repeat: no-repeat !Important;*/
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid lightgrey;
  /*font-size: 0.001px;*/
  color: rgba(0, 0, 0, 0) !important;
  float: right;
  margin: 2px 0px 0px 14px;

}
.Alertcss.on {
  /*background: url('AlertOn16x16.png'); 
  border-width: 0px;*/

  /* CSS-ONLY; red cirle without border*/
  width:16px;
  height: 16px;
  background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
        border: none !important;
}
/* CSS-ONLY; Exclamation in the circle*/
.Alertcss.on:after {
  position: absolute;
  content: "!";
  margin: -24px 0 0 6px; /* positioning in the circle*/
  font-weight: bold;
  color: #fff;


}

.Informcssoff {
   /*Trasnparent placeholder - keeps evrything aligned*/
  /*background: url('InformOff32x32.png');*/
  background-repeat: no-repeat !Important;
  width: 16px;
  height: 16px;
  font-size: 0.001px;
  color: rgba(0, 0, 0, 0) !important;
  float: right;
  margin: 2px 0px 0px 14px; 
}
.Informcsson {
  /*background: url('AlertOn16x16.png');*/
  width:16px;
  height: 16px;
  background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
  background-repeat: no-repeat !Important;
  width: 16px;
  height: 16px;
  font-size: 0.001px;
  color: rgba(0, 0, 0, 0) !important;
  float: right;
  margin: 2px 0px 0px 14px; 
}

.Optionscss {
  /*Uncomment the following two lines to add an icon to the toggle menu*/
  /*background: url('AlertToggle.png');         
    text-indent: 12px; */
  background-repeat: no-repeat !Important;
  background-size: 24px;
  font-size: 10pt; 
}
.Optionscss.on {
   background: url('AlertToggle.png');          /*Remove background if you dislike the image in the menu*/
}

rbrahmson

Cool! Thanks!

subdreamer

I don't use this plugin. However, I would like to thank you for this tweak. So... thanks!