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

52 lines
1.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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 added two icons to my Gitea theme that Ive created purely with 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. :)
![The Gitea repository with the changed directory and file icons](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).~~