bugfix: revert styles
This commit is contained in:
Benoit Alessandroni
parent
1df8e34ddb
commit
3861289d21
@ -90,7 +90,7 @@ html(lang="en")
|
||||
#admin(hidden).with-sidebar
|
||||
include page-admin.pug
|
||||
|
||||
#about(hidden).no-sidebar.with-padding
|
||||
#about.no-sidebar.with-padding
|
||||
include page-about.pug
|
||||
|
||||
if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users))
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
font-size : 10px;
|
||||
font-family : Open Sans, sans-serif;
|
||||
--sib-notifications-theme: var(--color-primary);
|
||||
|
||||
body {
|
||||
background-color: var(--color-main-background);
|
||||
box-sizing : border-box;
|
||||
@ -15,6 +16,7 @@
|
||||
height : -webkit-fill-available;
|
||||
min-height : -webkit-fill-available;
|
||||
}
|
||||
|
||||
.notLoggedIn {
|
||||
visibility: hidden;
|
||||
}
|
||||
@ -25,9 +27,11 @@
|
||||
|
||||
solid-dashboard section {
|
||||
padding: 1rem !important;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
padding: 4.2rem !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -36,6 +40,7 @@ solid-dashboard section {
|
||||
.wrapper {
|
||||
display : grid;
|
||||
grid-template-areas: "header""content";
|
||||
|
||||
@include breakpoint(lg) {
|
||||
grid-template-columns: 265px auto;
|
||||
grid-template-areas : "header header""leftmenu content";
|
||||
@ -48,6 +53,7 @@ solid-dashboard section {
|
||||
|
||||
.left-menu {
|
||||
grid-area: leftmenu;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
height : calc(100vh - 83px);
|
||||
/* 83px = nav height */
|
||||
@ -56,12 +62,15 @@ solid-dashboard section {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&.jsLeftMenu {
|
||||
display: none;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.jsLeftMenu[open] {
|
||||
display : block;
|
||||
bottom : 0;
|
||||
@ -71,6 +80,7 @@ solid-dashboard section {
|
||||
right : 0;
|
||||
top : 0;
|
||||
z-index : 1000;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
display: none;
|
||||
}
|
||||
@ -79,6 +89,7 @@ solid-dashboard section {
|
||||
|
||||
.content {
|
||||
grid-area: content;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
position : sticky;
|
||||
top : 0;
|
||||
@ -106,14 +117,17 @@ nav,
|
||||
nav {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--color-scrollbar-left-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-scrollbar-left-track);
|
||||
border-radius : 6px;
|
||||
border : 3px solid var(--color-scrollbar-left-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 11px;
|
||||
}
|
||||
@ -125,14 +139,17 @@ nav {
|
||||
.views-container {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--color-scrollbar-right-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-scrollbar-right-track);
|
||||
border-radius : 6px;
|
||||
border : 3px solid var(--color-scrollbar-right-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 11px;
|
||||
}
|
||||
@ -144,13 +161,16 @@ nav {
|
||||
.table-wrapper {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--color-scrollbar-table-background);
|
||||
border-radius : 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-scrollbar-table-track);
|
||||
border-radius : 10px;
|
||||
@ -200,6 +220,7 @@ h1,
|
||||
color : var(--color-h1);
|
||||
font-size : 2rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.without-margin {
|
||||
margin: 0;
|
||||
}
|
||||
@ -240,6 +261,7 @@ h5 {
|
||||
justify-content : center;
|
||||
overflow : hidden;
|
||||
position : relative;
|
||||
|
||||
img {
|
||||
background-color: white;
|
||||
height : 100%;
|
||||
@ -250,6 +272,7 @@ h5 {
|
||||
top : 0;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
object {
|
||||
height: 45%;
|
||||
width : 45%;
|
||||
@ -376,6 +399,7 @@ h5 {
|
||||
flex-direction: column;
|
||||
flex-grow : 1;
|
||||
margin : 2rem 1rem 5rem 2rem;
|
||||
|
||||
&.full-width {
|
||||
background: var(--color-white);
|
||||
flex : 1;
|
||||
@ -392,40 +416,49 @@ h5 {
|
||||
border-bottom: 1px solid var(--color-content-header);
|
||||
padding : 1.8rem 0 1.4rem;
|
||||
margin : 0 1.6rem;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
padding: 3rem;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
.mobile-sidebar-button {
|
||||
float : right;
|
||||
color : var(--color-secondary);
|
||||
font-size : 1.8rem;
|
||||
font-weight: bold !important;
|
||||
|
||||
&::before {
|
||||
font-size : 2.2rem;
|
||||
font-weight : normal;
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
@include breakpoint(lg) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
solid-display {
|
||||
@include breakpoint(sm) {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* For solid-display on project, circle, or private message view */
|
||||
solid-display {
|
||||
width: calc(100% - 94px);
|
||||
|
||||
/* 94px = width of .mobile-sidebar-button */
|
||||
div {
|
||||
overflow : hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space : nowrap;
|
||||
width : calc(100% - 20px);
|
||||
|
||||
.h1-aside {
|
||||
font-size: 1.8rem;
|
||||
|
||||
&:not(:empty)::before {
|
||||
color : var(--color-grey-4);
|
||||
content : ' - ';
|
||||
@ -433,9 +466,11 @@ h5 {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--color-grey-4);
|
||||
}
|
||||
|
||||
.name {
|
||||
color : var(--color-grey-4);
|
||||
font-weight: normal;
|
||||
@ -446,6 +481,7 @@ h5 {
|
||||
|
||||
.content-box__height {
|
||||
min-height: calc(100vh - 50px - 56px);
|
||||
|
||||
/* Heights of main header and sub-header */
|
||||
@include breakpoint(lg) {
|
||||
min-height: calc(100vh - 83px - 84px);
|
||||
@ -455,9 +491,11 @@ h5 {
|
||||
.content-box__info {
|
||||
flex-direction: column;
|
||||
padding : 1rem;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
padding: 3.2rem;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -492,6 +530,7 @@ h5 {
|
||||
flex-direction: column;
|
||||
align-items : flex-start;
|
||||
margin-bottom : 20px;
|
||||
|
||||
/*end */
|
||||
@include breakpoint(lg) {
|
||||
flex-direction : row;
|
||||
@ -499,17 +538,21 @@ h5 {
|
||||
justify-content: space-between;
|
||||
margin-bottom : 5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
/* Quick fix for alignment on mobile before admin content rework */
|
||||
margin-bottom: 20px;
|
||||
|
||||
/* end */
|
||||
@include breakpoint(lg) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
solid-ac-checker,
|
||||
solid-link {
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
width: auto;
|
||||
}
|
||||
@ -522,11 +565,13 @@ h5 {
|
||||
font-size : 1.5rem;
|
||||
margin : 2rem 0 0 2rem;
|
||||
text-decoration: underline;
|
||||
|
||||
&::before {
|
||||
font-size : 2rem;
|
||||
margin-right : 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.right {
|
||||
display : block;
|
||||
text-align: right;
|
||||
@ -547,6 +592,7 @@ h5 {
|
||||
|
||||
.desktop-button__end {
|
||||
display: block;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
display : flex;
|
||||
justify-content: flex-end;
|
||||
@ -555,6 +601,7 @@ h5 {
|
||||
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
|
||||
&.with-padding {
|
||||
padding-bottom: 1.4rem;
|
||||
}
|
||||
@ -562,6 +609,7 @@ h5 {
|
||||
|
||||
.mobile-vertical-align {
|
||||
flex-direction: column;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
flex-direction: row;
|
||||
}
|
||||
@ -577,6 +625,7 @@ h5 {
|
||||
|
||||
.mobile-margin__bottom {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -588,6 +637,7 @@ h5 {
|
||||
@import 'header';
|
||||
@import 'menu-left';
|
||||
@import 'user-thumb';
|
||||
|
||||
// Button global CSS
|
||||
solid-delete,
|
||||
solid-route,
|
||||
@ -601,169 +651,217 @@ a,
|
||||
cursor : pointer;
|
||||
display : inline-block;
|
||||
padding : 0;
|
||||
|
||||
&.button {
|
||||
padding : 0.55rem 2.5rem;
|
||||
border-radius: 100em;
|
||||
|
||||
*,
|
||||
& {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
&.mobile-full-width {
|
||||
margin-bottom: 1rem;
|
||||
padding-left : 5rem;
|
||||
width : -webkit-fill-available;
|
||||
width : -moz-available;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
margin-bottom: 0;
|
||||
padding-left : 2.5rem;
|
||||
width : auto;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-left: -2.6rem;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.desktop-btn-margin__left {
|
||||
margin: 0;
|
||||
|
||||
@include breakpoint(lg) {
|
||||
margin-left: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
|
||||
*,
|
||||
& {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.text-bold {
|
||||
|
||||
*,
|
||||
& {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.text-uppercase {
|
||||
|
||||
*,
|
||||
& {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&.rounded {
|
||||
border-radius: 50%;
|
||||
font-size : 1.8rem;
|
||||
padding : 1rem;
|
||||
}
|
||||
|
||||
&.button-link {
|
||||
border-radius: 100em;
|
||||
|
||||
*,
|
||||
& {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.with-icon::before {
|
||||
font-size : 1.6rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&.button-primary {
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-secondary {
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-complementary {
|
||||
color : var(--color-complementary);
|
||||
background-color: var(--color-white);
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-complementary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-complementary);
|
||||
color : var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.reversed {
|
||||
&.button-primary {
|
||||
background-color: var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-white);
|
||||
color : var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-complementary {
|
||||
background-color: var(--color-complementary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid var(--color-complementary);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user