vrifox/gitea-theme
vrifox/gitea-theme
Archived
1
0
Fork 0
Code Issues 6 Releases Activity

more variables

Browse source
This commit is contained in:
Vrifox 2020-10-20 19:24:47 +02:00
parent 220ac00a41
commit 22df39941a
7 changed files with 381 additions and 378 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
scss/import/_colors.scss
View file

@ -1,9 +1,11 @@
$green: rgb(100, 200, 130); $green: rgb(100, 200, 130);
$green-dark: rgb(80, 180, 110); $green-dark: rgb(80, 180, 110);
$green-light: rgb(100, 220, 150);
$red: rgb(255, 130, 130); $red: rgb(255, 130, 130);
$red-dark: rgb(255, 110, 110); $red-dark: rgb(235, 110, 110);
$red-light: rgb(255, 150, 150);
$white: rgb(245, 245, 255); $white: rgb(245, 245, 255);
$white-dark: rgb(225, 225, 235); $white-dark: rgb(215, 215, 225);
$white-light: rgb(255, 255, 255); $white-light: rgb(255, 255, 255);
$white-disabled: rgb(150, 150, 160); $white-disabled: rgb(150, 150, 160);
@ -12,3 +14,4 @@ $bg40: rgb(40, 40, 60);
$bg50: rgb(50, 50, 75); $bg50: rgb(50, 50, 75);
$bg60: rgb(60, 60, 90); $bg60: rgb(60, 60, 90);
$bg70: rgb(70, 70, 105); $bg70: rgb(70, 70, 105);
$bg80: rgb(80, 80, 120);

8
scss/import/_footer.scss
View file

@ -1,7 +1,7 @@
footer { footer {
background: rgb(30, 30, 45); background: $bg30;
border-top: 1px solid rgb(40, 40, 60); border-top: 1px solid $bg40;
color: rgb(215, 215, 225); color: $white-dark;
text-transform: lowercase; text-transform: lowercase;
.ui.container { .ui.container {
display: flex; display: flex;
@ -11,7 +11,7 @@ footer {
.links { .links {
margin-left: auto; margin-left: auto;
a { a {
color: rgb(215, 215, 225); color: $white-dark;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }

12
scss/import/_main.scss
View file

@ -1,22 +1,22 @@
* { * {
scrollbar-color: rgb(255, 130, 130) rgb(60, 60, 90); scrollbar-color: $red $bg60;
scrollbar-width: thin; scrollbar-width: thin;
&::selection { &::selection {
background: rgb(245, 245, 255); background: $white;
} }
} }
body { body {
background: rgb(40, 40, 60); background: $bg40;
color: rgb(245, 245, 255); color: $white;
font-family: $font-family; font-family: $font-family;
} }
a { a {
color: rgb(255, 255, 255); color: $white-light;
transition: color 0.2s; transition: color 0.2s;
&:hover { &:hover {
color: rgb(255, 130, 130); color: $red;
} }
} }

10
scss/import/_nav.scss
View file

@ -1,5 +1,5 @@
.ui.main.menu { .ui.main.menu {
background: rgb(60, 60, 90); background: $bg60;
border-bottom: 0; border-bottom: 0;
font-size: 15px; font-size: 15px;
min-height: 64px; min-height: 64px;
@ -8,7 +8,7 @@
width: 1127px ; width: 1127px ;
padding: 0; padding: 0;
.item { .item {
color: rgb(245, 245, 255); color: $white;
&.brand { &.brand {
margin: 0 .5rem 0 0; margin: 0 .5rem 0 0;
.mini.image { .mini.image {
@ -34,10 +34,10 @@
padding: 24px; padding: 24px;
transition: background .2s, color .2s; transition: background .2s, color .2s;
&:hover { &:hover {
background: rgb(50, 50, 75); background: $bg50;
} }
&.active { &.active {
background: rgb(50, 50, 75); background: $bg50;
} }
} }
} }
@ -64,7 +64,7 @@
.link.item:hover, .link.item:hover,
.active.item:hover, .active.item:hover,
a.item:hover { a.item:hover {
color: #ffffff; color: $white-light;
} }
} }

52
scss/import/explore.scss
View file

@ -3,21 +3,21 @@
.explore { .explore {
.secondary.menu { .secondary.menu {
background-color: rgb(70, 70, 105) !important; background-color: $bg70 !important;
border-radius: 0; border-radius: 0;
.item { .item {
color: rgb(215, 215, 225); color: $white-dark;
&:hover { &:hover {
color: rgb(255, 255, 255) !important; color: $white-light !important;
} }
&.active { &.active {
color: rgb(245, 245, 255) !important; color: $white !important;
&:hover { &:hover {
color: rgb(255, 255, 255); color: $white-light;
} }
} }
.label { .label {
background: rgb(60, 60, 90); background: $bg60;
} }
} }
} }
@ -30,58 +30,58 @@
form.form { form.form {
.input { .input {
input { input {
background: rgb(40, 40, 60); background: $bg40;
border: 2px solid rgb(60, 60, 90); border: 2px solid $bg60;
color: rgb(245, 245, 255); color: $white;
&:focus { &:focus {
background: rgb(50, 50, 75); background: $bg50;
border: 2px solid rgb(60, 60, 90); border: 2px solid $bg60;
color: rgb(255, 255, 255); color: $white-light;
} }
} }
.button { .button {
background: rgb(60, 60, 90); background: $bg60;
border: 0; border: 0;
&:hover { &:hover {
background: rgb(50, 50, 75); background: $bg50;
} }
} }
} }
} }
.divider { .divider {
border-bottom: 1px solid rgb(60, 60, 90); border-bottom: 1px solid $bg60;
} }
.repository.list { .repository.list {
.item { .item {
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid rgb(60, 60, 90); border-top: 1px solid $bg60;
} }
.header { .header {
a.name { a.name {
i.archive.icon { i.archive.icon {
color: rgb(215, 215, 225) !important; color: $white-dark !important;
} }
} }
.metas { .metas {
span { span {
color: rgb(215, 215, 225) !important; color: $white-dark !important;
} }
} }
} }
.description { .description {
p { p {
color: rgb(245, 245, 255); color: $white;
&.time { &.time {
color: rgb(215, 215, 225); color: $white-dark;
} }
} }
.tags { .tags {
a .label { a .label {
background: rgb(60, 60, 90); background: $bg60;
color: rgb(245, 245, 255); color: $white;
&:hover { &:hover {
background: rgb(70, 70, 105); background: $bg70;
color: rgb(255, 255, 255); color: $white-light;
} }
} }
} }
@ -98,10 +98,10 @@
.user.list { .user.list {
.content { .content {
.header { .header {
color: rgb(245, 245, 255); color: $white;
} }
.description { .description {
color: rgb(245, 245, 255); color: $white;
} }
} }
} }

570
scss/import/repository.scss
View file

File diff suppressed because it is too large Load diff

100
scss/import/user.scss
View file

@ -5,60 +5,60 @@
.container { .container {
.grid { .grid {
.card { .card {
background: rgb(50, 50, 75); background: $bg50;
box-shadow: none; box-shadow: none;
color: rgb(245, 245, 255); color: $white;
position: sticky; position: sticky;
top: 20px; top: 20px;
.content { .content {
.header { .header {
color: rgb(245, 245, 255); color: $white;
} }
} }
.extra.content { .extra.content {
ul { ul {
color: rgb(245, 245, 255); color: $white;
li:not(:last-child) { li:not(:last-child) {
border-bottom: 1px solid rgb(60, 60, 90); border-bottom: 1px solid $bg60;
} }
a { a {
color: rgb(255, 255, 255); color: $white-light;
&:hover { &:hover {
color: rgb(255, 130, 130); color: $red;
} }
} }
} }
} }
} }
.secondary.pointing.menu { .secondary.pointing.menu {
background: rgb(70, 70, 105); background: $bg70;
border: 0; border: 0;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
margin-top: -15px; margin-top: -15px;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
padding: 0 20px; padding: 0 20px;
scrollbar-color: rgb(215, 215, 225) rgb(70, 70, 105); scrollbar-color: $white-dark $bg70;
top: 0; top: 0;
transform: rotateX(180deg); transform: rotateX(180deg);
z-index: 100; z-index: 100;
.item { .item {
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
color: rgb(245, 245, 255); color: $white;
font-family: $font-family; font-family: $font-family;
margin-bottom: 10px; margin-bottom: 10px;
transform: rotateX(180deg); transform: rotateX(180deg);
transition: background .2s, color .2s; transition: background .2s, color .2s;
&:hover { &:hover {
background: rgb(60, 60, 90); background: $bg60;
color: rgb(255, 255, 255); color: $white-light;
} }
&.active { &.active {
border-bottom: 2px solid rgb(245, 245, 255); border-bottom: 2px solid $white;
color: rgb(245, 245, 255); color: $white;
&:hover { &:hover {
color: rgb(255, 255, 255); color: $white-light;
} }
} }
@if $nojavascript == true { @if $nojavascript == true {
@ -67,8 +67,8 @@
} }
} }
.label { .label {
background: rgb(245, 245, 255); background: $white;
color: rgb(70, 70, 105); color: $bg70;
} }
@if $singleuser == true { @if $singleuser == true {
&[href*="stars"], &[href*="stars"],
@ -87,37 +87,37 @@
form.form { form.form {
.input { .input {
input { input {
background: rgb(40, 40, 60); background: $bg40;
border: 2px solid rgb(60, 60, 90); border: 2px solid $bg60;
color: rgb(245, 245, 255); color: $white;
&:focus { &:focus {
background: rgb(50, 50, 75); background: $bg50;
border: 2px solid rgb(60, 60, 90); border: 2px solid $bg60;
color: rgb(255, 255, 255); color: $white-light;
} }
} }
.button { .button {
background: rgb(60, 60, 90); background: $bg60;
border: 0; border: 0;
&:hover { &:hover {
background: rgb(50, 50, 75); background: $bg50;
} }
} }
} }
} }
.divider { .divider {
border-bottom: 1px solid rgb(60, 60, 90); border-bottom: 1px solid $bg60;
} }
.repository.list { .repository.list {
.item { .item {
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid rgb(60, 60, 90); border-top: 1px solid $bg60;
} }
.header { .header {
a.name { a.name {
font-family: $font-family; font-family: $font-family;
i.archive.icon { i.archive.icon {
color: rgb(215, 215, 225) !important; color: $white-dark !important;
} }
} }
.metas { .metas {
@ -125,24 +125,24 @@
display: none; display: none;
} }
span { span {
color: rgb(215, 215, 225) !important; color: $white-dark !important;
} }
} }
} }
.description { .description {
p { p {
color: rgb(245, 245, 255); color: $white;
&.time { &.time {
color: rgb(215, 215, 225); color: $white-dark;
} }
} }
.tags { .tags {
a .label { a .label {
background: rgb(60, 60, 90); background: $bg60;
color: rgb(245, 245, 255); color: $white;
&:hover { &:hover {
background: rgb(70, 70, 105); background: $bg70;
color: rgb(255, 255, 255); color: $white-light;
} }
} }
} }
@ -162,16 +162,16 @@
.news { .news {
.content { .content {
span { span {
color: rgb(215, 215, 225) !important; color: $white-dark !important;
} }
} }
p.grey { p.grey {
span { span {
color: rgb(215, 215, 225); color: $white-dark;
} }
} }
.svg { .svg {
fill: rgb(215, 215, 225); fill: $white-dark;
} }
} }
} }
@ -184,31 +184,31 @@
.user.signin { .user.signin {
.container { .container {
.header { .header {
background: rgb(60, 60, 90); background: $bg60;
border: 0; border: 0;
color: rgb(245, 245, 255); color: $white;
} }
.segment { .segment {
background: rgb(50, 50, 75); background: $bg50;
border: 0; border: 0;
color: rgb(245, 245, 255); color: $white;
.form { .form {
.field { .field {
label { label {
color: rgb(245, 245, 255); color: $white;
&::after { &::after {
color: rgb(255, 130, 130); color: $red;
} }
} }
input { input {
background: rgb(40, 40, 60); background: $bg40;
} }
.green.button { .green.button {
background: rgb(80, 80, 120); background: $bg80;
box-shadow: none; box-shadow: none;
color: rgb(245, 245, 255); color: $white;
&:hover { &:hover {
background: rgb(70, 70, 105); background: $bg70;
} }
} }
} }
@ -232,12 +232,12 @@
border: 0; border: 0;
color: $white-light; color: $white-light;
&.active { &.active {
background: rgb(50, 50, 75); background: $bg50;
color: $white-light; color: $white-light;
} }
.label { .label {
background: $white; background: $white;
color: rgb(60, 60, 90); color: $bg60;
} }
} }
} }