improvement: various biseau additions
This commit is contained in:
Kazhnuz
parent
75e0c6b39f
commit
f4d918796f
6 changed files with 304 additions and 110 deletions
341
css/style.css
341
css/style.css
|
|
@ -698,10 +698,27 @@ ul.social li a:hover {
|
|||
font-weight: 600;
|
||||
border-radius: 0;
|
||||
padding: 0.75rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0.75rem !important;
|
||||
margin-left: -3rem;
|
||||
margin-bottom: 0.75rem;
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
left: -1.875rem;
|
||||
width: 95%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
.card-header:before, .menu-header:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.75rem;
|
||||
right: -0.75rem;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10, .menu-header h1, .menu-header h2, .menu-header h3, .menu-header h4, .menu-header h5, .menu-header h6, .menu-header h7, .menu-header h8, .menu-header h9, .menu-header h10 {
|
||||
font-size: 1em;
|
||||
|
|
@ -725,6 +742,23 @@ ul.social li a:hover {
|
|||
padding-bottom: 0.325rem;
|
||||
margin: 0;
|
||||
justify-content: space-between;
|
||||
word-wrap: none;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
.card-menu .menu-element:before, .menu-menu .menu-element:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.375rem;
|
||||
right: -0.375rem;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
.card-menu a, .menu-menu a {
|
||||
text-decoration: none;
|
||||
|
|
@ -734,6 +768,21 @@ ul.social li a:hover {
|
|||
.card-menu a:hover, .menu-menu a:hover {
|
||||
text-decoration: none;
|
||||
color: #d33682;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
.card-menu a:hover:before, .menu-menu a:hover:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.375rem;
|
||||
right: -0.375rem;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
.card-menu a:hover:before, .menu-menu a:hover:before {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.card-menu .menu-divider, .menu-menu .menu-divider {
|
||||
|
|
@ -758,10 +807,27 @@ ul.social li a:hover {
|
|||
font-weight: 600;
|
||||
border-radius: 0;
|
||||
padding: 0.75rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0.75rem !important;
|
||||
margin-left: -3rem;
|
||||
margin-bottom: 0.75rem;
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
left: -1.875rem;
|
||||
width: 95%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
.smallcard-header:before, .toast-header:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.75rem;
|
||||
right: -0.75rem;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
.smallcard-header h1, .smallcard-header h2, .smallcard-header h3, .smallcard-header h4, .smallcard-header h5, .smallcard-header h6, .smallcard-header h7, .smallcard-header h8, .smallcard-header h9, .smallcard-header h10, .toast-header h1, .toast-header h2, .toast-header h3, .toast-header h4, .toast-header h5, .toast-header h6, .toast-header h7, .toast-header h8, .toast-header h9, .toast-header h10 {
|
||||
font-size: 1em;
|
||||
|
|
@ -774,79 +840,155 @@ ul.social li a:hover {
|
|||
}
|
||||
|
||||
/* COLORIZE CARDS and TOASTS */
|
||||
.card-blue > .card-header, .card-blue > .menu-header, .smallcard-blue > .card-header, .smallcard-blue > .menu-header, .menu-blue > .card-header, .menu-blue > .menu-header {
|
||||
.card-blue .card-header, .card-blue .menu-header, .smallcard-blue .card-header, .smallcard-blue .menu-header, .menu-blue .card-header, .menu-blue .menu-header {
|
||||
background-color: #268bd2 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-violet > .card-header, .card-violet > .menu-header, .smallcard-violet > .card-header, .smallcard-violet > .menu-header, .menu-violet > .card-header, .menu-violet > .menu-header {
|
||||
.card-blue .card-header:before, .card-blue .menu-header:before, .smallcard-blue .card-header:before, .smallcard-blue .menu-header:before, .menu-blue .card-header:before, .menu-blue .menu-header:before {
|
||||
background-color: #268bd2 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-violet .card-header, .card-violet .menu-header, .smallcard-violet .card-header, .smallcard-violet .menu-header, .menu-violet .card-header, .menu-violet .menu-header {
|
||||
background-color: #d33682 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-purple > .card-header, .card-purple > .menu-header, .smallcard-purple > .card-header, .smallcard-purple > .menu-header, .menu-purple > .card-header, .menu-purple > .menu-header {
|
||||
.card-violet .card-header:before, .card-violet .menu-header:before, .smallcard-violet .card-header:before, .smallcard-violet .menu-header:before, .menu-violet .card-header:before, .menu-violet .menu-header:before {
|
||||
background-color: #d33682 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-purple .card-header, .card-purple .menu-header, .smallcard-purple .card-header, .smallcard-purple .menu-header, .menu-purple .card-header, .menu-purple .menu-header {
|
||||
background-color: #6c71c4 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-red > .card-header, .card-red > .menu-header, .smallcard-red > .card-header, .smallcard-red > .menu-header, .menu-red > .card-header, .menu-red > .menu-header {
|
||||
.card-purple .card-header:before, .card-purple .menu-header:before, .smallcard-purple .card-header:before, .smallcard-purple .menu-header:before, .menu-purple .card-header:before, .menu-purple .menu-header:before {
|
||||
background-color: #6c71c4 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-red .card-header, .card-red .menu-header, .smallcard-red .card-header, .smallcard-red .menu-header, .menu-red .card-header, .menu-red .menu-header {
|
||||
background-color: #dc322f !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-orange > .card-header, .card-orange > .menu-header, .smallcard-orange > .card-header, .smallcard-orange > .menu-header, .menu-orange > .card-header, .menu-orange > .menu-header {
|
||||
.card-red .card-header:before, .card-red .menu-header:before, .smallcard-red .card-header:before, .smallcard-red .menu-header:before, .menu-red .card-header:before, .menu-red .menu-header:before {
|
||||
background-color: #dc322f !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-orange .card-header, .card-orange .menu-header, .smallcard-orange .card-header, .smallcard-orange .menu-header, .menu-orange .card-header, .menu-orange .menu-header {
|
||||
background-color: #cb4b16 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-green > .card-header, .card-green > .menu-header, .smallcard-green > .card-header, .smallcard-green > .menu-header, .menu-green > .card-header, .menu-green > .menu-header {
|
||||
.card-orange .card-header:before, .card-orange .menu-header:before, .smallcard-orange .card-header:before, .smallcard-orange .menu-header:before, .menu-orange .card-header:before, .menu-orange .menu-header:before {
|
||||
background-color: #cb4b16 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-green .card-header, .card-green .menu-header, .smallcard-green .card-header, .smallcard-green .menu-header, .menu-green .card-header, .menu-green .menu-header {
|
||||
background-color: #859900 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-skyblue > .card-header, .card-skyblue > .menu-header, .smallcard-skyblue > .card-header, .smallcard-skyblue > .menu-header, .menu-skyblue > .card-header, .menu-skyblue > .menu-header {
|
||||
.card-green .card-header:before, .card-green .menu-header:before, .smallcard-green .card-header:before, .smallcard-green .menu-header:before, .menu-green .card-header:before, .menu-green .menu-header:before {
|
||||
background-color: #859900 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-skyblue .card-header, .card-skyblue .menu-header, .smallcard-skyblue .card-header, .smallcard-skyblue .menu-header, .menu-skyblue .card-header, .menu-skyblue .menu-header {
|
||||
background-color: #2aa198 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-dark > .card-header, .card-dark > .menu-header, .smallcard-dark > .card-header, .smallcard-dark > .menu-header, .menu-dark > .card-header, .menu-dark > .menu-header {
|
||||
.card-skyblue .card-header:before, .card-skyblue .menu-header:before, .smallcard-skyblue .card-header:before, .smallcard-skyblue .menu-header:before, .menu-skyblue .card-header:before, .menu-skyblue .menu-header:before {
|
||||
background-color: #2aa198 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-dark .card-header, .card-dark .menu-header, .smallcard-dark .card-header, .smallcard-dark .menu-header, .menu-dark .card-header, .menu-dark .menu-header {
|
||||
background-color: #002b36 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-light > .card-header, .card-light > .menu-header, .smallcard-light > .card-header, .smallcard-light > .menu-header, .menu-light > .card-header, .menu-light > .menu-header {
|
||||
.card-dark .card-header:before, .card-dark .menu-header:before, .smallcard-dark .card-header:before, .smallcard-dark .menu-header:before, .menu-dark .card-header:before, .menu-dark .menu-header:before {
|
||||
background-color: #002b36 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-light .card-header, .card-light .menu-header, .smallcard-light .card-header, .smallcard-light .menu-header, .menu-light .card-header, .menu-light .menu-header {
|
||||
background-color: #eee8d5 !important;
|
||||
color: #002b36;
|
||||
}
|
||||
.card-turquoise > .card-header, .card-turquoise > .menu-header, .smallcard-turquoise > .card-header, .smallcard-turquoise > .menu-header, .menu-turquoise > .card-header, .menu-turquoise > .menu-header {
|
||||
.card-light .card-header:before, .card-light .menu-header:before, .smallcard-light .card-header:before, .smallcard-light .menu-header:before, .menu-light .card-header:before, .menu-light .menu-header:before {
|
||||
background-color: #eee8d5 !important;
|
||||
color: #002b36;
|
||||
}
|
||||
.card-turquoise .card-header, .card-turquoise .menu-header, .smallcard-turquoise .card-header, .smallcard-turquoise .menu-header, .menu-turquoise .card-header, .menu-turquoise .menu-header {
|
||||
background-color: #2aa198 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-yellow > .card-header, .card-yellow > .menu-header, .smallcard-yellow > .card-header, .smallcard-yellow > .menu-header, .menu-yellow > .card-header, .menu-yellow > .menu-header {
|
||||
.card-turquoise .card-header:before, .card-turquoise .menu-header:before, .smallcard-turquoise .card-header:before, .smallcard-turquoise .menu-header:before, .menu-turquoise .card-header:before, .menu-turquoise .menu-header:before {
|
||||
background-color: #2aa198 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-yellow .card-header, .card-yellow .menu-header, .smallcard-yellow .card-header, .smallcard-yellow .menu-header, .menu-yellow .card-header, .menu-yellow .menu-header {
|
||||
background-color: #b58900 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-brown > .card-header, .card-brown > .menu-header, .smallcard-brown > .card-header, .smallcard-brown > .menu-header, .menu-brown > .card-header, .menu-brown > .menu-header {
|
||||
.card-yellow .card-header:before, .card-yellow .menu-header:before, .smallcard-yellow .card-header:before, .smallcard-yellow .menu-header:before, .menu-yellow .card-header:before, .menu-yellow .menu-header:before {
|
||||
background-color: #b58900 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-grey > .card-header, .card-grey > .menu-header, .smallcard-grey > .card-header, .smallcard-grey > .menu-header, .menu-grey > .card-header, .menu-grey > .menu-header {
|
||||
.card-brown .card-header, .card-brown .menu-header, .smallcard-brown .card-header, .smallcard-brown .menu-header, .menu-brown .card-header, .menu-brown .menu-header {
|
||||
background-color: #b58900 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-brown .card-header:before, .card-brown .menu-header:before, .smallcard-brown .card-header:before, .smallcard-brown .menu-header:before, .menu-brown .card-header:before, .menu-brown .menu-header:before {
|
||||
background-color: #b58900 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-grey .card-header, .card-grey .menu-header, .smallcard-grey .card-header, .smallcard-grey .menu-header, .menu-grey .card-header, .menu-grey .menu-header {
|
||||
background-color: #586e75 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-primary > .card-header, .card-primary > .menu-header, .smallcard-primary > .card-header, .smallcard-primary > .menu-header, .menu-primary > .card-header, .menu-primary > .menu-header {
|
||||
.card-grey .card-header:before, .card-grey .menu-header:before, .smallcard-grey .card-header:before, .smallcard-grey .menu-header:before, .menu-grey .card-header:before, .menu-grey .menu-header:before {
|
||||
background-color: #586e75 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-primary .card-header, .card-primary .menu-header, .smallcard-primary .card-header, .smallcard-primary .menu-header, .menu-primary .card-header, .menu-primary .menu-header {
|
||||
background-color: #6c71c4 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-secondary > .card-header, .card-secondary > .menu-header, .smallcard-secondary > .card-header, .smallcard-secondary > .menu-header, .menu-secondary > .card-header, .menu-secondary > .menu-header {
|
||||
.card-primary .card-header:before, .card-primary .menu-header:before, .smallcard-primary .card-header:before, .smallcard-primary .menu-header:before, .menu-primary .card-header:before, .menu-primary .menu-header:before {
|
||||
background-color: #6c71c4 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-secondary .card-header, .card-secondary .menu-header, .smallcard-secondary .card-header, .smallcard-secondary .menu-header, .menu-secondary .card-header, .menu-secondary .menu-header {
|
||||
background-color: #268bd2 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-warning > .card-header, .card-warning > .menu-header, .smallcard-warning > .card-header, .smallcard-warning > .menu-header, .menu-warning > .card-header, .menu-warning > .menu-header {
|
||||
.card-secondary .card-header:before, .card-secondary .menu-header:before, .smallcard-secondary .card-header:before, .smallcard-secondary .menu-header:before, .menu-secondary .card-header:before, .menu-secondary .menu-header:before {
|
||||
background-color: #268bd2 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-warning .card-header, .card-warning .menu-header, .smallcard-warning .card-header, .smallcard-warning .menu-header, .menu-warning .card-header, .menu-warning .menu-header {
|
||||
background-color: #cb4b16 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-danger > .card-header, .card-danger > .menu-header, .smallcard-danger > .card-header, .smallcard-danger > .menu-header, .menu-danger > .card-header, .menu-danger > .menu-header {
|
||||
.card-warning .card-header:before, .card-warning .menu-header:before, .smallcard-warning .card-header:before, .smallcard-warning .menu-header:before, .menu-warning .card-header:before, .menu-warning .menu-header:before {
|
||||
background-color: #cb4b16 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-danger .card-header, .card-danger .menu-header, .smallcard-danger .card-header, .smallcard-danger .menu-header, .menu-danger .card-header, .menu-danger .menu-header {
|
||||
background-color: #dc322f !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-info > .card-header, .card-info > .menu-header, .smallcard-info > .card-header, .smallcard-info > .menu-header, .menu-info > .card-header, .menu-info > .menu-header {
|
||||
.card-danger .card-header:before, .card-danger .menu-header:before, .smallcard-danger .card-header:before, .smallcard-danger .menu-header:before, .menu-danger .card-header:before, .menu-danger .menu-header:before {
|
||||
background-color: #dc322f !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-info .card-header, .card-info .menu-header, .smallcard-info .card-header, .smallcard-info .menu-header, .menu-info .card-header, .menu-info .menu-header {
|
||||
background-color: #2aa198 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-success > .card-header, .card-success > .menu-header, .smallcard-success > .card-header, .smallcard-success > .menu-header, .menu-success > .card-header, .menu-success > .menu-header {
|
||||
.card-info .card-header:before, .card-info .menu-header:before, .smallcard-info .card-header:before, .smallcard-info .menu-header:before, .menu-info .card-header:before, .menu-info .menu-header:before {
|
||||
background-color: #2aa198 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-success .card-header, .card-success .menu-header, .smallcard-success .card-header, .smallcard-success .menu-header, .menu-success .card-header, .menu-success .menu-header {
|
||||
background-color: #859900 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.card-success .card-header:before, .card-success .menu-header:before, .smallcard-success .card-header:before, .smallcard-success .menu-header:before, .menu-success .card-header:before, .menu-success .menu-header:before {
|
||||
background-color: #859900 !important;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
|
|
@ -1434,14 +1576,14 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|||
|
||||
/* ------------------ PREVIEWS ------------------- */
|
||||
.previews-section {
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
margin-bottom: 1em;
|
||||
padding: 0.4em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -1459,7 +1601,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|||
}
|
||||
}
|
||||
.card-preview {
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
|
||||
|
|
@ -1470,13 +1612,12 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|||
}
|
||||
|
||||
.preview-item {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5em !important;
|
||||
height: 12rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5rem !important;
|
||||
padding: 0.2em;
|
||||
text-align: justify;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -1484,16 +1625,92 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|||
align-items: center !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
max-height: 200px;
|
||||
.preview-item .preview-overlay {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
padding: 0.75rem;
|
||||
backdrop-filter: none;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.preview-item .preview-overlay h1, .preview-item .preview-overlay h2, .preview-item .preview-overlay h3, .preview-item .preview-overlay h4, .preview-item .preview-overlay h5, .preview-item .preview-overlay h6 {
|
||||
color: #fdf6e3;
|
||||
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: 200;
|
||||
}
|
||||
.preview-item .preview-overlay .card-header {
|
||||
font-family: Work Sans;
|
||||
font-size: 1rem;
|
||||
background-color: #6c71c4;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
border-radius: 0;
|
||||
padding: 0.375rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0.375rem !important;
|
||||
margin-bottom: 0.75rem;
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
left: -0.9375rem;
|
||||
width: 95%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
font-weight: 200;
|
||||
}
|
||||
.preview-item .preview-overlay .card-header:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.375rem;
|
||||
right: -0.375rem;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
.preview-item .preview-overlay .card-header h1, .preview-item .preview-overlay .card-header h2, .preview-item .preview-overlay .card-header h3, .preview-item .preview-overlay .card-header h4, .preview-item .preview-overlay .card-header h5, .preview-item .preview-overlay .card-header h6, .preview-item .preview-overlay .card-header h7, .preview-item .preview-overlay .card-header h8, .preview-item .preview-overlay .card-header h9, .preview-item .preview-overlay .card-header h10 {
|
||||
font-size: 1em;
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
color: #fdf6e3;
|
||||
font-weight: 600;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.preview-item:hover .preview-overlay {
|
||||
backdrop-filter: blur(2px);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.preview-item:hover .preview-overlay .preview-metadata {
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
max-height: 12rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.preview-content h1, .preview-content h2, .preview-content h3, .preview-content h4, .preview-content h5, .preview-content h6 {
|
||||
margin-bottom: 0px;
|
||||
max-width: 100%;
|
||||
display: none;
|
||||
}
|
||||
.preview-content > p {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.preview-content > p > img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.preview-content > p.p-img {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
|
|
@ -1502,61 +1719,13 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.preview-content > p > img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
|
||||
margin-bottom: 0px;
|
||||
max-width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-item h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.preview-metadata {
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
transition: opacity 0.5s;
|
||||
color: #fdf6e3;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.preview-overlay h1 {
|
||||
max-width: 100%;
|
||||
padding-top: 0.3em;
|
||||
margin: auto;
|
||||
margin-bottom: 0px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
|
||||
.preview-overlay h1, .preview-overlay h2, .preview-overlay h3, .preview-overlay h4, .preview-overlay h5, .preview-overlay h6, .preview-overlay h7, .preview-overlay h8, .preview-overlay h9, .preview-overlay h10 {
|
||||
transition: opacity 0.3s;
|
||||
color: #fdf6e3;
|
||||
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.preview-item:hover .preview-overlay {
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.5s;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -10,24 +10,6 @@ $color-button-dark: $color-dark;
|
|||
$button_large: 1.5rem;
|
||||
$button_small: 0.375rem;
|
||||
|
||||
@mixin biseau($size) {
|
||||
position: relative;
|
||||
z-index:1;
|
||||
overflow: visible;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:-$size/2;
|
||||
right:-$size/2;
|
||||
bottom:0;
|
||||
z-index:-1;
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin button($size) {
|
||||
padding: $size;
|
||||
padding-top: $size/3;
|
||||
|
|
|
|||
|
|
@ -23,11 +23,19 @@ $card-smallpad: 0.75rem;
|
|||
font-weight:600;
|
||||
border-radius: 0;
|
||||
padding: $size/2;
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
padding-bottom: $size/2!important;
|
||||
margin-left: -$size*2;
|
||||
margin-bottom:0.75rem;
|
||||
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
||||
|
||||
position:relative;
|
||||
left: -$size*1.25;
|
||||
|
||||
width:95%;
|
||||
|
||||
@include biseau($size);
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
||||
font-size:1em;
|
||||
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
||||
|
|
@ -40,8 +48,11 @@ $card-smallpad: 0.75rem;
|
|||
}
|
||||
|
||||
@mixin card-color($background-color, $text-color) {
|
||||
& > .card-header, & > .menu-header {
|
||||
@include background-color($background-color, $text-color)
|
||||
& .card-header, & .menu-header {
|
||||
@include background-color($background-color, $text-color);
|
||||
&:before {
|
||||
@include background-color($background-color, $text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,6 +82,13 @@ $card-smallpad: 0.75rem;
|
|||
padding-bottom:0.325rem;
|
||||
margin:0;
|
||||
justify-content: space-between;
|
||||
|
||||
word-wrap:none;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow:hidden;
|
||||
|
||||
@include biseau(0.75rem);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -80,8 +98,15 @@ $card-smallpad: 0.75rem;
|
|||
&:hover {
|
||||
text-decoration:none;
|
||||
color: $color-violet;
|
||||
background-color:rgba(0,0,0,0.1);
|
||||
|
||||
@include biseau(0.75rem);
|
||||
|
||||
&:before {
|
||||
background-color:rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
|
|
|
|||
|
|
@ -14,3 +14,20 @@ $border-size: 0px;
|
|||
@mixin border-radius() {
|
||||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
|
||||
@mixin biseau($size) {
|
||||
position: relative;
|
||||
z-index:1;
|
||||
overflow: visible;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:-$size/2;
|
||||
right:-$size/2;
|
||||
bottom:0;
|
||||
z-index:-1;
|
||||
transform: skewX(-15deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -31,7 +31,8 @@ body {
|
|||
&, #wrapper {
|
||||
background-image: linear-gradient(to bottom, rgba(0,0,0,0.25) 0, rgba(255, 255, 255, 0) 1px);
|
||||
background-repeat: repeat-y;
|
||||
background-size: 100% 1.5rem;}
|
||||
background-size: 100% 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
|
|
|
|||
Loading…
Reference in a new issue