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

52 lines
1.3 KiB
Markdown

---
title: "Pure CSS icons for my Gitea theme"
author: ""
date: 2020-10-05T12:14:51+02:00
categories:
- gitea-theme
tags:
- webdesign
- code
draft: false
description: "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](2020-10-05_pure-css-icons-2.jpg)
# the code
```scss
.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](https://code.cozy.town/vrifox/gitea-theme).