Small CSS module. There was a ordering conflict between `.ui.menu` and `.ui.container` which I've solved by adding the `.ui.menu` rule into base. --------- Co-authored-by: Giteabot <teabot@gitea.io>tags/v1.22.0-rc0
@@ -352,6 +352,10 @@ ol.ui.list li, | |||
border-right-color: var(--color-primary); | |||
} | |||
.ui.menu { | |||
display: flex; | |||
} | |||
.ui.menu, | |||
.ui.vertical.menu { | |||
background: var(--color-menu); | |||
@@ -738,37 +742,6 @@ img.ui.avatar, | |||
padding-top: 14px; | |||
} | |||
/* overwrite semantic width of containers inside the main page content div (div with class "page-content") */ | |||
.page-content .ui.ui.ui.container:not(.fluid) { | |||
width: 1280px; | |||
max-width: calc(100% - 64px); | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
.ui.container.fluid.padded { | |||
padding: 0 32px; | |||
} | |||
/* enable fluid page widths for medium size viewports */ | |||
@media (min-width: 768px) and (max-width: 1200px) { | |||
.page-content .ui.ui.ui.container:not(.fluid) { | |||
max-width: calc(100% - 32px); | |||
} | |||
.ui.container.fluid.padded { | |||
padding: 0 16px; | |||
} | |||
} | |||
@media (max-width: 767.98px) { | |||
.page-content .ui.ui.ui.container:not(.fluid) { | |||
max-width: calc(100% - 16px); | |||
} | |||
.ui.container.fluid.padded { | |||
padding: 0 8px; | |||
} | |||
} | |||
.ui.pagination.menu .active.item { | |||
color: var(--color-text); | |||
background: var(--color-active); |
@@ -14,6 +14,7 @@ | |||
@import "./modules/svg.css"; | |||
@import "./modules/flexcontainer.css"; | |||
@import "./modules/message.css"; | |||
@import "./modules/container.css"; | |||
@import "./modules/header.css"; | |||
@import "./shared/flex-list.css"; |
@@ -0,0 +1,78 @@ | |||
/* based on Fomantic UI container module, with just the parts extracted that we use. If you find any | |||
unused rules here after refactoring, please remove them. */ | |||
.ui.container { | |||
display: block; | |||
max-width: 100%; | |||
} | |||
@media (max-width: 767.98px) { | |||
.ui.ui.ui.container:not(.fluid) { | |||
width: auto; | |||
margin-left: 1em; | |||
margin-right: 1em; | |||
} | |||
} | |||
@media (min-width: 768px) and (max-width: 991.98px) { | |||
.ui.ui.ui.container:not(.fluid) { | |||
width: 723px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
} | |||
@media (min-width: 992px) and (max-width: 1199.98px) { | |||
.ui.ui.ui.container:not(.fluid) { | |||
width: 933px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
} | |||
@media (min-width: 1200px) { | |||
.ui.ui.ui.container:not(.fluid) { | |||
width: 1127px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
} | |||
.ui.fluid.container { | |||
width: 100%; | |||
} | |||
.ui[class*="center aligned"].container { | |||
text-align: center; | |||
} | |||
/* overwrite width of containers inside the main page content div (div with class "page-content") */ | |||
.page-content .ui.ui.ui.container:not(.fluid) { | |||
width: 1280px; | |||
max-width: calc(100% - 64px); | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
.ui.container.fluid.padded { | |||
padding: 0 32px; | |||
} | |||
/* enable fluid page widths for medium size viewports */ | |||
@media (min-width: 768px) and (max-width: 1200px) { | |||
.page-content .ui.ui.ui.container:not(.fluid) { | |||
max-width: calc(100% - 32px); | |||
} | |||
.ui.container.fluid.padded { | |||
padding: 0 16px; | |||
} | |||
} | |||
@media (max-width: 767.98px) { | |||
.page-content .ui.ui.ui.container:not(.fluid) { | |||
max-width: calc(100% - 16px); | |||
} | |||
.ui.container.fluid.padded { | |||
padding: 0 8px; | |||
} | |||
} |
@@ -3032,163 +3032,6 @@ | |||
.plus:before { content: '\e802'; } | |||
*/ | |||
/******************************* | |||
Site Overrides | |||
*******************************/ | |||
/*! | |||
* # Fomantic-UI - Container | |||
* http://github.com/fomantic/Fomantic-UI/ | |||
* | |||
* | |||
* Released under the MIT license | |||
* http://opensource.org/licenses/MIT | |||
* | |||
*/ | |||
/******************************* | |||
Container | |||
*******************************/ | |||
/* All Sizes */ | |||
.ui.container { | |||
display: block; | |||
max-width: 100%; | |||
} | |||
/* Mobile */ | |||
@media only screen and (max-width: 767.98px) { | |||
.ui.ui.ui.container:not(.fluid) { | |||
width: auto; | |||
margin-left: 1em; | |||
margin-right: 1em; | |||
} | |||
.ui.ui.ui.grid.container { | |||
width: auto; | |||
} | |||
.ui.ui.ui.relaxed.grid.container { | |||
width: auto; | |||
} | |||
.ui.ui.ui.very.relaxed.grid.container { | |||
width: auto; | |||
} | |||
} | |||
/* Tablet */ | |||
@media only screen and (min-width: 768px) and (max-width: 991.98px) { | |||
.ui.ui.ui.container:not(.fluid) { | |||
width: 723px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
.ui.ui.ui.grid.container { | |||
width: calc(723px + 2rem); | |||
} | |||
.ui.ui.ui.relaxed.grid.container { | |||
width: calc(723px + 3rem); | |||
} | |||
.ui.ui.ui.very.relaxed.grid.container { | |||
width: calc(723px + 5rem); | |||
} | |||
} | |||
/* Small Monitor */ | |||
@media only screen and (min-width: 992px) and (max-width: 1199.98px) { | |||
.ui.ui.ui.container:not(.fluid) { | |||
width: 933px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
.ui.ui.ui.grid.container { | |||
width: calc(933px + 2rem); | |||
} | |||
.ui.ui.ui.relaxed.grid.container { | |||
width: calc(933px + 3rem); | |||
} | |||
.ui.ui.ui.very.relaxed.grid.container { | |||
width: calc(933px + 5rem); | |||
} | |||
} | |||
/* Large Monitor */ | |||
@media only screen and (min-width: 1200px) { | |||
.ui.ui.ui.container:not(.fluid) { | |||
width: 1127px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
.ui.ui.ui.grid.container { | |||
width: calc(1127px + 2rem); | |||
} | |||
.ui.ui.ui.relaxed.grid.container { | |||
width: calc(1127px + 3rem); | |||
} | |||
.ui.ui.ui.very.relaxed.grid.container { | |||
width: calc(1127px + 5rem); | |||
} | |||
} | |||
/******************************* | |||
Types | |||
*******************************/ | |||
/* Text Container */ | |||
.ui.text.container { | |||
font-family: var(--fonts-regular); | |||
max-width: 700px; | |||
line-height: 1.5; | |||
font-size: 1.14285714rem; | |||
} | |||
/* Fluid */ | |||
.ui.fluid.container { | |||
width: 100%; | |||
} | |||
/******************************* | |||
Variations | |||
*******************************/ | |||
.ui[class*="left aligned"].container { | |||
text-align: left; | |||
} | |||
.ui[class*="center aligned"].container { | |||
text-align: center; | |||
} | |||
.ui[class*="right aligned"].container { | |||
text-align: right; | |||
} | |||
.ui.justified.container { | |||
text-align: justify; | |||
-webkit-hyphens: auto; | |||
hyphens: auto; | |||
} | |||
/******************************* | |||
Theme Overrides | |||
*******************************/ | |||
/******************************* | |||
Site Overrides | |||
*******************************/ |
@@ -24,7 +24,6 @@ | |||
"api", | |||
"button", | |||
"checkbox", | |||
"container", | |||
"dimmer", | |||
"dropdown", | |||
"form", |