website/content/blog/pure-css-icons-gitea-theme/pure-css-icons-gitea-theme.en.md

title	author	date	categories	tags	draft	type	description
pure css icons for my gitea theme		2020-10-05T12:14:51+02:00	gitea-theme	webdesign code	false	post	I'm working on my gitea theme and just added a $nojavascript alternative for two icons with pure css. :)

Update (2021-02-28): The code is no longer in use due to changes to gitea.

I'm working on my gitea theme and just added a $nojavascript alternative for two icons with pure css. :)

an image of how it actually looks

the code

.svg {
  &.octicon-file-directory, 
  &.octicon-file-submodule {
    fill: rgb(255, 130, 130);
    @if $nojavascript == true {
      background: rgb(255, 130, 130);
      border-radius: 0 1px 2px 2px;
      box-shadow: -4px -7px 0px -4px rgb(255, 130, 130);
      height: 10px;
      margin-left: 5px !important;
      margin-top: 4px;
      width: 14px;
    }
  }
  &.octicon-file {
    fill: rgb(215, 215, 225);
    @if $nojavascript == true {
      border: 1px solid rgb(215, 215, 225);
      border-radius: 0 5px 0 0;
      height: 13px;
      margin-left: 7px !important;
      margin-right: 6px !important;
      width: 10px;
    }
  }
}

A live version can be found on code.cozy.town.