Skip to content

R
retain.css
Commit 4fa77b20 by zhengxiao
Options

feat: fresh

parent afedf9db
Showing with 4 additions and 191 deletions
retain.min.css
@charset "UTF-8";
@charset "UTF-8";
/*!
* retain.css
* Version - 1.0.5
* Version - 1.0.6
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
*
* Copyright (c) 2023 zhengxiao
*/
[retain] {
--retain-border-color: #d4d4d4;
--retain-border-radius: 40px;
position: relative;
position: relative !important;
-webkit-transition: all .3;
transition: all .3
}
[retain~="border:bottom"]:after,
[retain~="border:top"]:before {
background: var(--retain-border-color);
content: "";
height: 1px;
left: 0;
pointer-events: none;
position: absolute;
right: 0
}
[retain~="border:top"]:before {
top: 0
}
[retain~="border:bottom"]:after {
bottom: 0
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
background: var(--retain-border-color);
bottom: 0;
content: "";
pointer-events: none;
position: absolute;
top: 0;
width: 1px
}
[retain~="border:left"]:before {
left: 0
}
[retain~="border:right"]:after {
right: 0
}
[retain~=border]:after {
border: 1px solid var(--retain-border-color);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: "";
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%
}
[retain~=round]:after {
border: 1px solid var(--retain-border-color);
border-radius: var(--retain-border-radius);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: "";
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%
}
@media (-webkit-min-device-pixel-ratio:1.5),
(min-device-pixel-ratio:1.5),
(min-resolution:1.5dppx),
(min-resolution:144dpi) {
[retain~="border:bottom"]:after,
[retain~="border:top"]:before {
-webkit-transform: scaleY(.5);
-ms-transform: scaleY(.5);
transform: scaleY(.5)
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(.5);
-ms-transform: scaleX(.5);
transform: scaleX(.5)
}
[retain~=border]:after,
[retain~=round]:after {
height: 200%;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
width: 200%
}
[retain~=round]:after {
border-radius: -webkit-calc(var(--retain-border-radius)*2);
border-radius: calc(var(--retain-border-radius)*2)
}
[retain~="border:left"]:before,
[retain~="border:top"]:before,
[retain~=border]:after,
[retain~=round]:after {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0
}
[retain~="border:bottom"]:after,
[retain~="border:right"]:after {
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%
}
}
@media (device-pixel-ratio:1.5) {
[retain~="border:bottom"]:after,
[retain~="border:top"]:before {
-webkit-transform: scaleY(.6666);
-ms-transform: scaleY(.6666);
transform: scaleY(.6666)
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(.6666);
-ms-transform: scaleX(.6666);
transform: scaleX(.6666)
}
[retain~=border]:after,
[retain~=round]:after {
height: 150%;
-webkit-transform: scale(.6666);
-ms-transform: scale(.6666);
transform: scale(.6666);
width: 150%
}
[retain~=round]:after {
border-radius: -webkit-calc(var(--retain-border-radius)*1.5);
border-radius: calc(var(--retain-border-radius)*1.5)
}
}
@media (device-pixel-ratio:3) {
[retain~="border:bottom"]:after,
[retain~="border:top"]:before {
-webkit-transform: scaleY(.3333);
-ms-transform: scaleY(.3333);
transform: scaleY(.3333)
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(.3333);
-ms-transform: scaleX(.3333);
transform: scaleX(.3333)
}
[retain~=border]:after,
[retain~=round]:after {
height: 300%;
-webkit-transform: scale(.3333);
-ms-transform: scale(.3333);
transform: scale(.3333);
width: 300%
}
[retain~=round]:after {
border-radius: -webkit-calc(var(--retain-border-radius)*3);
border-radius: calc(var(--retain-border-radius)*3)
}
}
\ No newline at end of file
*/[retain]{--retain-border-color:#d4d4d4;--retain-border-radius:40px;position:relative;position:relative!important}[retain~="border:bottom"]:after,[retain~="border:top"]:before{background:var(--retain-border-color);content:"";height:1px;left:0;pointer-events:none;position:absolute;right:0}[retain~="border:top"]:before{top:0}[retain~="border:bottom"]:after{bottom:0}[retain~="border:left"]:before,[retain~="border:right"]:after{background:var(--retain-border-color);bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:1px}[retain~="border:left"]:before{left:0}[retain~="border:right"]:after{right:0}[retain~=border]:after{border:1px solid var(--retain-border-color);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}[retain~=round]:after{border:1px solid var(--retain-border-color);border-radius:var(--retain-border-radius);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:1.5dppx),(min-resolution:144dpi){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.5);-ms-transform:scaleY(.5);transform:scaleY(.5)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.5);-ms-transform:scaleX(.5);transform:scaleX(.5)}[retain~=border]:after,[retain~=round]:after{height:200%;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);width:200%}[retain~=round]:after{border-radius:-webkit-calc(var(--retain-border-radius)*2);border-radius:calc(var(--retain-border-radius)*2)}[retain~="border:left"]:before,[retain~="border:top"]:before,[retain~=border]:after,[retain~=round]:after{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}[retain~="border:bottom"]:after,[retain~="border:right"]:after{-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}}@media (device-pixel-ratio:1.5){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.6666);-ms-transform:scaleY(.6666);transform:scaleY(.6666)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.6666);-ms-transform:scaleX(.6666);transform:scaleX(.6666)}[retain~=border]:after,[retain~=round]:after{height:150%;-webkit-transform:scale(.6666);-ms-transform:scale(.6666);transform:scale(.6666);width:150%}[retain~=round]:after{border-radius:-webkit-calc(var(--retain-border-radius)*1.5);border-radius:calc(var(--retain-border-radius)*1.5)}}@media (device-pixel-ratio:3){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.3333);-ms-transform:scaleY(.3333);transform:scaleY(.3333)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.3333);-ms-transform:scaleX(.3333);transform:scaleX(.3333)}[retain~=border]:after,[retain~=round]:after{height:300%;-webkit-transform:scale(.3333);-ms-transform:scale(.3333);transform:scale(.3333);width:300%}[retain~=round]:after{border-radius:-webkit-calc(var(--retain-border-radius)*3);border-radius:calc(var(--retain-border-radius)*3)}}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment