github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 10:36:54 -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

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

@ -81,100 +81,76 @@ small {
/* common */
.ribbon {
width: 118px;
width: 100px;
height: 96px;
overflow: hidden;
position: absolute;
text-align:right;
}
.ribbon::before,
.ribbon::after {
position: absolute;
z-index: -1;
content: '';
display: none;
border: 5px solid black;
}
.ribbon span {
position: absolute;
display: none;
width: 180px;
padding: 10px 0;
background-color: black;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
background-color: transparent;
color: #fff;
font: 500 11px/1 'Lato', sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: center;
text-align: right;
font-size: 14px;
}
.ribbon.available span {
background-color: #1DE9B6 !important;
display: block;
color: #2f2f2f;
.ribbon.available span{
display:block;
}
.ribbon.available::before,
.ribbon.available::after {
border: 5px solid #1DE9B6 !important;
display: block;
.ribbon.available span:before{
content: '';
display: inline-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 {
background-color: #ff5722 !important;
display: block;
color: #2f2f2f;
}
.ribbon.approved::before,
.ribbon.approved::after {
border: 5px solid #ff5722 !important;
display: block;
.ribbon.approved span:before{
content: '';
display: inline-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 {
background-color: #ffd740 !important;
display: block;
color: #2f2f2f;
}
.ribbon.requested::before,
.ribbon.requested::after {
border: 5px solid #ffd740 !important;
display: block;
.ribbon.approved span:before{
content: '';
display: inline-block;
width: 10px;
height: 10px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #ffd740;
}
/* top right*/
.ribbon-top-right {
top: -5px;
right: -5px;
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);
}
right: 0px;
z-index: 999999;
}
.ombi-card {
padding: 5px;
@ -226,21 +202,27 @@ small {
font-size: 18px;
}
.top-left {
font-size: 14px;
position: absolute;
text-transform: uppercase;
top: 8px;
left: 16px;
font-size: 14px;
position: absolute;
text-transform: uppercase;
top: 0px;
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;
}