github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-19 12:59:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Just waving my magic css wand

Browse source
This commit is contained in:
twanariens 2021-01-20 22:20:56 +01:00
commit 42847c8cd4
1 changed files with 60 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

136
src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss
View file

@ -81,100 +81,76 @@ small {
/* common */ /* common */
.ribbon { .ribbon {
width: 118px; width: 100px;
height: 96px; height: 96px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
text-align:right;
} }
.ribbon::before,
.ribbon::after {
position: absolute;
z-index: -1;
content: '';
display: none;
border: 5px solid black;
}
.ribbon span { .ribbon span {
position: absolute; position: absolute;
display: none; display: none;
width: 180px; background-color: transparent;
padding: 10px 0;
background-color: black;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
color: #fff; color: #fff;
font: 500 11px/1 'Lato', sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.2); text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: right;
font-size: 14px;
} }
.ribbon.available span { .ribbon.available span{
background-color: #1DE9B6 !important; display:block;
display: block;
color: #2f2f2f;
} }
.ribbon.available::before, .ribbon.available span:before{
.ribbon.available::after { content: '';
border: 5px solid #1DE9B6 !important; display: inline-block;
display: block; width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #1DE9B6;
} }
.ribbon.approved span { .ribbon.approved span {
background-color: #ff5722 !important;
display: block; display: block;
color: #2f2f2f;
} }
.ribbon.approved::before, .ribbon.approved span:before{
.ribbon.approved::after { content: '';
border: 5px solid #ff5722 !important; display: inline-block;
display: block; width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #ff5722;
} }
.ribbon.requested span { .ribbon.requested span {
background-color: #ffd740 !important;
display: block; display: block;
color: #2f2f2f;
} }
.ribbon.requested::before, .ribbon.approved span:before{
.ribbon.requested::after { content: '';
border: 5px solid #ffd740 !important; display: inline-block;
display: block; width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #ffd740;
} }
/* top right*/ /* top right*/
.ribbon-top-right { .ribbon-top-right {
top: -5px; top: 13px;
right: -5px; right: 0px;
z-index: 999999; z-index: 999999;
} }
.ribbon-top-right::before,
.ribbon-top-right::after {
border-top-color: transparent;
border-right-color: transparent;
}
.ribbon-top-right::before {
top: 0;
left: 40px;
}
.ribbon-top-right::after {
bottom: 18px;
right: 0;
}
.ribbon-top-right span {
left: 0px;
top: 13px;
transform: rotate(45deg);
}
.ribbon-icon {
transform: translateX(0%) translateY(0%) rotate(-45deg);
}
.ombi-card { .ombi-card {
padding: 5px; padding: 5px;
@ -226,21 +202,27 @@ small {
font-size: 18px; font-size: 18px;
} }
.top-left { .top-left {
font-size: 14px; font-size: 14px;
position: absolute; position: absolute;
text-transform: uppercase; text-transform: uppercase;
top: 8px; top: 0px;
left: 16px; width: 100%;
background-color: rgba(15,23,31,0.6);
padding-left: 1em;
padding-top: 1em;
padding-bottom: 0.5em;font-size: 14px;
position: absolute;
text-transform: uppercase;
}
.full-width {
width: 100%;
}
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
} }
.full-width {
width: 100%;
}
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}