ye
This commit is contained in:
231
public/rcss.css
231
public/rcss.css
@@ -318,91 +318,32 @@
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.RV-Fan__Container--vertical {
|
||||
.Fan {
|
||||
--base-height: 280px;
|
||||
--base-width: 320px;
|
||||
display: flex;
|
||||
}
|
||||
.Fan.Fan--fullWidth {
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.Fan.Fan--vertical {
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
}
|
||||
.RV-Fan__Container--vertical .RV-Fan__Surface {
|
||||
width: 320px;
|
||||
min-height: 280px;
|
||||
}
|
||||
.RV-Fan__Container--horizontal {
|
||||
.Fan.Fan--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
.RV-Fan__Container--horizontal .RV-Fan__Surface {
|
||||
min-width: 320px;
|
||||
height: 280px;
|
||||
}
|
||||
.RV-Fan__Container--auto {
|
||||
.Fan.Fan--auto {
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.RV-Fan__Container--auto .RV-Fan__Surface {
|
||||
width: calc(100% - 320px);
|
||||
min-width: 320px;
|
||||
height: 280px;
|
||||
}
|
||||
.RV-Fan__Container--fullWidth .RV-Fan__Base,
|
||||
.RV-Fan__Container--fullWidth .RV-Fan__Surface {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.RV-Fan__Container {
|
||||
.wurst .Fächer {
|
||||
display: flex;
|
||||
}
|
||||
.RV-Fan__Base {
|
||||
height: 280px;
|
||||
width: 320px;
|
||||
flex: 0 0 auto;
|
||||
.wurst .Fächer .wurst .Fächer__Base--wurst {
|
||||
--wurst: wasser;
|
||||
}
|
||||
.RV-Fan__Surface {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.RV-Fan__Surface .RV-Image *,
|
||||
.RV-Fan__Surface .RV-Image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.RV-Fan__Surface .RV-Text {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.21;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
max-height: 96.80000000000001%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.RV-Fan__Surface .RV-Text * {
|
||||
margin: 0;
|
||||
padding-bottom: 19.360000000000003px;
|
||||
}
|
||||
.RV-Fan__Surface .RV-Text *:last-child {
|
||||
padding-bottom: unset;
|
||||
}
|
||||
.RV-Fan__Surface--fade:after {
|
||||
background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff);
|
||||
display: block;
|
||||
content: ' ';
|
||||
opacity: 0.8;
|
||||
position: relative;
|
||||
top: -25%;
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
z-index: 10;
|
||||
}
|
||||
.RV-Fan__Surface--ellipsis:after {
|
||||
position: relative;
|
||||
display: block;
|
||||
bottom: 1.2em;
|
||||
left: calc(100% - 3ch);
|
||||
content: '...';
|
||||
font-size: 1.2em;
|
||||
min-width: 2em;
|
||||
background-color: #fff;
|
||||
padding: 0 2px;
|
||||
.wurst .wurst__Base--wurst {
|
||||
--wurst: wasser;
|
||||
}
|
||||
.RV-FlexGrid__Container {
|
||||
display: grid;
|
||||
@@ -661,6 +602,81 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@include RV-FlexRow__Item;
|
||||
.RV-OverlayButton__Item {
|
||||
position: relative;
|
||||
}
|
||||
.RV-OverlayButton__Item:hover > * {
|
||||
opacity: 1;
|
||||
}
|
||||
.RV-OverlayButton__Button {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: #f5f5dc;
|
||||
margin: 10px;
|
||||
opacity: 0.2;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.RV-OverlayButton__Button--circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.RV-OverlayButton__Button--topRight {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.RV-OverlayButton__Button--small {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
.RV-OverlayButton__Button--medium {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.RV-OverlayButton__Button--large {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.RV-OverlayButton__Row {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
padding: 25px;
|
||||
gap: 25px;
|
||||
column-gap: 25px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 4em;
|
||||
opacity: 0.2;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.RV-OverlayButton__Row * {
|
||||
position: initial;
|
||||
opacity: initial;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.RV-Menu--vertical .RV-Menu__List {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@@ -855,6 +871,7 @@
|
||||
.RV-ImageGrid__Item {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.RV-ImageGrid__Item .RV-Image *,
|
||||
.RV-ImageGrid__Item .RV-Image {
|
||||
@@ -906,6 +923,58 @@
|
||||
.RV-ImageGrid__Item .RV-Image * {
|
||||
object-position: center;
|
||||
}
|
||||
.RV-ImageGrid__Item:hover > * {
|
||||
opacity: 1;
|
||||
}
|
||||
.RV-ImageGrid__Button {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: #f5f5dc;
|
||||
margin: 10px;
|
||||
opacity: 0.2;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.RV-ImageGrid__Button--circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.RV-ImageGrid__Button--topRight {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.RV-ImageGrid__Button--small {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
.RV-ImageGrid__Button--medium {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.RV-ImageGrid__Button--large {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.RV-FlexGrid__Container--masonry.RV-Spacing__Inner--small * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -942,6 +1011,18 @@
|
||||
.RV-ImageGrid__Container.RV-Spacing__Inner--large * * {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.RV-FlexGrid__Container--masonry.RV-OverlayButton__Row * {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.RV-FlexGrid__Container--masonry.RV-OverlayButton__Row * * {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.RV-ImageGrid__Container.RV-OverlayButton__Row * {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.RV-ImageGrid__Container.RV-OverlayButton__Row * * {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.RV-FlexGrid__Container--masonry.RV-ImageGrid__Container * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user