Merge pull request '1.0.11' (#19) from dev into main

Reviewed-on: https://codeberg.org/Freeplay/CSS-Styles/pulls/19
This commit is contained in:
Free 2021-10-30 17:59:39 +02:00
commit 48591170d0
3 changed files with 101 additions and 108 deletions

File diff suppressed because one or more lines are too long

View file

@ -1,15 +1,17 @@
// main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css, compress: true // main: theme-gitea-modern.user.styl, out: theme-gitea-modern.css, compress: true
// Ignore above, just compiler stuff // Ignore above, just compiler stuff
/* Update 1.0.10 /* Update 1.0.11
- Tweaked the look of the dashboard and other menu's / tabs - Removed sticky positioning on Releases page due to z-index issues
- Other fixes - Fixed tooltips z-index
- Fixed button heights in some areas
- Fixed explore page on mobile (I'll try to fix more mobile issues later.)
- Tweaked Header Padding
*/ */
:root { :root {
--base-border-radius: 6px; --base-border-radius: 6px;
} }
html.theme-gitea, html.theme-arc-green { html.theme-gitea, html.theme-arc-green {
--fonts-override: var(--fonts-regular); --fonts-override: var(--fonts-regular);
@ -75,7 +77,7 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
.ui.compact.button { .ui.compact.button {
padding-top: .3em; padding-top: .3em;
padding-bottom: .3em; padding-bottom: .3em;
min-height: .8em; min-height: 2.4em;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
svg { svg {
@ -87,7 +89,6 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
} }
/*** Inputs ***/ /*** Inputs ***/
.input.action.fluid { .input.action.fluid {
@ -150,6 +151,54 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
} }
} }
/*** Popups ***/
/* Tooltips */
.popup.tiny.inverted {
background: var(--color-body);
color: var(--color-text);
box-shadow: var(--lm-large-shadow);
border: 1px solid var(--color-secondary);
pointer-events: none;
z-index: 9999999;
&::before {
background: var(--color-body) !important;
z-index: -99999 !important;
border-color: var(--color-secondary) !important;
}
}
.ui.left.popup::before {
border: 0;
border-top: 1px solid;
border-right: 1px solid;
}
.ui.right.popup::before {
border: 0;
border-left: 1px solid;
border-bottom: 1px solid;
}
.ui.top.popup::before {
border: 0;
border-right: 1px solid;
border-bottom: 1px solid;
}
.ui.bottom.popup::before {
border: 0;
border-top: 1px solid;
border-left: 1px solid;
}
.settings > .ui.container {
max-width: 1150px !important;
}
/** Other Elements **/
// Filter buttons & New Issue buttons on mobile // Filter buttons & New Issue buttons on mobile
.ui.two.column.stackable.grid > .column { .ui.two.column.stackable.grid > .column {
width: auto !important; width: auto !important;
@ -200,54 +249,7 @@ a[rel*="nofollow"]:not(.ui), .link:not(.ui) {
} }
// Make heatmap not smoll on smoll screens
/*** Popups ***/
/* Tooltips */
.popup.tiny.inverted {
background: var(--color-body);
color: var(--color-text);
box-shadow: var(--lm-large-shadow);
border: 1px solid var(--color-secondary);
pointer-events: none;
z-index: 1000;
&::before {
background: var(--color-body) !important;
z-index: -99999 !important;
border-color: var(--color-secondary) !important;
}
}
.ui.left.popup::before {
border: 0;
border-top: 1px solid;
border-right: 1px solid;
}
.ui.right.popup::before {
border: 0;
border-left: 1px solid;
border-bottom: 1px solid;
}
.ui.top.popup::before {
border: 0;
border-right: 1px solid;
border-bottom: 1px solid;
}
.ui.bottom.popup::before {
border: 0;
border-top: 1px solid;
border-left: 1px solid;
}
.settings > .ui.container {
max-width: 1150px !important;
}
/** Other Elements **/
#user-heatmap { #user-heatmap {
overflow: auto hidden; overflow: auto hidden;
justify-content: flex-start; justify-content: flex-start;
@ -456,16 +458,14 @@ html {
/*** Header ***/ /*** Header ***/
.following.bar { .following.bar {
--min-height: 60px; --min-height: 60px;
background: none !important; background: none !important;
border-bottom: 1px solid var(--color-secondary) !important; border-bottom: 1px solid var(--color-secondary) !important;
background-color: var(--color-navbar) !important; background-color: var(--color-navbar) !important;
position: relative; position: relative;
min-height: var(--min-height); min-height: var(--min-height);
align-items: center; align-items: center;
z-index: 99999;
#navbar { #navbar {
padding: 0 calc(2px + 1%) !important; padding: 0 calc(4px + 1%) !important;
background: none !important; background: none !important;
max-width: 100rem; max-width: 100rem;
transition: padding 1s; transition: padding 1s;
@ -478,7 +478,7 @@ html {
font-size: 1rem !important; font-size: 1rem !important;
font-weight: 600; font-weight: 600;
padding: 0 calc(0px + 1.1%); padding: 0 calc(0px + 1%);
height: calc(var(--min-height) + 1px) !important; height: calc(var(--min-height) + 1px) !important;
margin: 0 !important; margin: 0 !important;
border-radius: 0; border-radius: 0;
@ -1293,9 +1293,6 @@ html {
#release-list { #release-list {
padding-left: 0; padding-left: 0;
.four.wide.column { .four.wide.column {
position: sticky !important;
top: 0px;
height: min-content;
width: 150px !important; width: 150px !important;
} }
} }
@ -1625,8 +1622,8 @@ html {
grid-gap: 16px; grid-gap: 16px;
.item { .item {
width: 400px;
width: 100%; width: 100%;
max-width: calc(100vw - 40px);
min-height: unset !important; min-height: unset !important;
padding: 14px 16px !important; padding: 14px 16px !important;
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);

View file

@ -1,6 +1,6 @@
/* ==UserStyle== /* ==UserStyle==
@name Gitea Modern @name Gitea Modern
@version 1.0.10 @version 1.0.11
@description A modern style for Gitea and Codeberg! @description A modern style for Gitea and Codeberg!
@updateURL https://codeberg.org/Freeplay/CSS-Styles/raw/branch/main/Gitea/theme-gitea-modern.user.css @updateURL https://codeberg.org/Freeplay/CSS-Styles/raw/branch/main/Gitea/theme-gitea-modern.user.css
@homepageURL https://codeberg.org/Freeplay/CSS-Styles @homepageURL https://codeberg.org/Freeplay/CSS-Styles
@ -85,7 +85,7 @@
.ui.compact.button { .ui.compact.button {
padding-top: 0.3em; padding-top: 0.3em;
padding-bottom: 0.3em; padding-bottom: 0.3em;
min-height: 0.8em; min-height: 2.4em;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
@ -150,6 +150,42 @@
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
} }
.popup.tiny.inverted {
background: var(--color-body);
color: var(--color-text);
box-shadow: var(--lm-large-shadow);
border: 1px solid var(--color-secondary);
pointer-events: none;
z-index: 9999999;
}
.popup.tiny.inverted::before {
background: var(--color-body) !important;
z-index: -99999 !important;
border-color: var(--color-secondary) !important;
}
.ui.left.popup::before {
border: 0;
border-top: 1px solid;
border-right: 1px solid;
}
.ui.right.popup::before {
border: 0;
border-left: 1px solid;
border-bottom: 1px solid;
}
.ui.top.popup::before {
border: 0;
border-right: 1px solid;
border-bottom: 1px solid;
}
.ui.bottom.popup::before {
border: 0;
border-top: 1px solid;
border-left: 1px solid;
}
.settings > .ui.container {
max-width: 1150px !important;
}
.ui.two.column.stackable.grid > .column { .ui.two.column.stackable.grid > .column {
width: auto !important; width: auto !important;
flex-grow: 1; flex-grow: 1;
@ -191,42 +227,6 @@
.full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap + .divider { .full.height > span[style="display: inline !important;"]:first-child ~ .page-content #user-heatmap + .divider {
display: none !important; display: none !important;
} }
.popup.tiny.inverted {
background: var(--color-body);
color: var(--color-text);
box-shadow: var(--lm-large-shadow);
border: 1px solid var(--color-secondary);
pointer-events: none;
z-index: 1000;
}
.popup.tiny.inverted::before {
background: var(--color-body) !important;
z-index: -99999 !important;
border-color: var(--color-secondary) !important;
}
.ui.left.popup::before {
border: 0;
border-top: 1px solid;
border-right: 1px solid;
}
.ui.right.popup::before {
border: 0;
border-left: 1px solid;
border-bottom: 1px solid;
}
.ui.top.popup::before {
border: 0;
border-right: 1px solid;
border-bottom: 1px solid;
}
.ui.bottom.popup::before {
border: 0;
border-top: 1px solid;
border-left: 1px solid;
}
.settings > .ui.container {
max-width: 1150px !important;
}
#user-heatmap { #user-heatmap {
overflow: auto hidden; overflow: auto hidden;
justify-content: flex-start; justify-content: flex-start;
@ -416,10 +416,9 @@
position: relative; position: relative;
min-height: var(--min-height); min-height: var(--min-height);
align-items: center; align-items: center;
z-index: 99999;
} }
.following.bar #navbar { .following.bar #navbar {
padding: 0 calc(2px + 1%) !important; padding: 0 calc(4px + 1%) !important;
background: none !important; background: none !important;
max-width: 100rem; max-width: 100rem;
transition: padding 1s; transition: padding 1s;
@ -431,7 +430,7 @@
color: var(--color-text-dark) !important; color: var(--color-text-dark) !important;
font-size: 1rem !important; font-size: 1rem !important;
font-weight: 600; font-weight: 600;
padding: 0 calc(0px + 1.1%); padding: 0 calc(0px + 1%);
height: calc(var(--min-height) + 1px) !important; height: calc(var(--min-height) + 1px) !important;
margin: 0 !important; margin: 0 !important;
border-radius: 0; border-radius: 0;
@ -1534,9 +1533,6 @@
padding-left: 0; padding-left: 0;
} }
#release-list .four.wide.column { #release-list .four.wide.column {
position: sticky !important;
top: 0px;
height: min-content;
width: 150px !important; width: 150px !important;
} }
.explore, .explore,
@ -1946,8 +1942,8 @@
} }
.ui.repository.list .item, .ui.repository.list .item,
.ui.user.list .item { .ui.user.list .item {
width: 400px;
width: 100%; width: 100%;
max-width: calc(100vw - 40px);
min-height: unset !important; min-height: unset !important;
padding: 14px 16px !important; padding: 14px 16px !important;
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);