Created
January 14, 2022 22:21
-
-
Save osde8info/b4c6641ea577108445b6552160c58201 to your computer and use it in GitHub Desktop.
CSS Art Polariod Camera
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="camera"> | |
<div class="back"></div> | |
<div class="top_middle"> | |
<div class="top_left"> | |
<div class="body"> | |
<div class="border"></div> | |
<div class="middle"></div> | |
</div> | |
</div> | |
<div class="plus_button"> | |
<div class="inner"> | |
<h1> | |
<i class="fas fa-plus"></i></h1> | |
</div> | |
</div> | |
<div class="under_plus"> | |
<div class="inner"></div> | |
</div> | |
<div class="red_button_container"> | |
<div class="red_button"></div> | |
</div> | |
<div class="lens"> | |
<div class="lens_1"> | |
<div class="lens_2"> | |
<div class="lens_3"> | |
<div class="lens_4"> | |
<!-- green goes here --> | |
<div class="lens_5"> | |
<div class="lens_6"> | |
<div class="lens_7"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="under_lens"> | |
<div class="inner"></div> | |
</div> | |
<div class="rainbow"></div> | |
<div class="top_right"> | |
<div class="viewfinder"> | |
<div class="inner_1"> | |
<div class="inner_2"> | |
<div class="inner_3"> | |
<div class="hole"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="shadows_middle"></div> | |
<div class="shadows_left"></div> | |
<div class="shadows_left_corner"></div> | |
<div class="shadows_right"></div> | |
<div class="shadows_right_corner"></div> | |
</div> | |
<div class="middle_right"> | |
<div class="middle"> | |
<div class="circle"></div> | |
</div> | |
<p class="minus"> | |
<i class="fas fa-minus"></i> | |
</p> | |
<p class="plus"> | |
<i class="fas fa-plus"></i> | |
</p> | |
</div> | |
<div class="text"> | |
<h1>One</h1> | |
<h1>Step</h1> | |
<h1><i class="fas fa-plus"></i></h1> | |
</div> | |
</div> | |
<div class="bottom"> | |
<div class="top"> | |
<div class="left"></div> | |
<div class="middle"> | |
<div class="switch"> | |
<div class="switch_btn"></div> | |
</div> | |
</div> | |
<div class="right"></div> | |
</div> | |
<div class="btm"> | |
<h1>Polaroid</h1> | |
<h1>I-TYPE CAMERA</h1> | |
<div class="logo"></div> | |
</div> | |
</div> | |
<div class="under_btm"></div> | |
<div class="corners"> | |
<div class="corner_left"></div> | |
<div class="corner_right"></div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$t: transparent; | |
$bk: #B0C8C1; | |
$pink:#F60C46; | |
@mixin center { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
} | |
*{ | |
box-sizing: border-box; | |
} | |
body{ | |
background:$bk; | |
font-size: 1vmin; | |
} | |
.camera { | |
font-size: 1.15vmin; | |
width: 66em; | |
height: 55em; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
.back{ | |
border-top-left-radius: 5em; | |
border-top-right-radius: 5em; | |
width: 63.3em; | |
height: 39.5em; | |
position:absolute; | |
content: ''; | |
top:-.6em; | |
left: 50.1%; | |
transform:translate(-50%,0%); | |
background: | |
linear-gradient( | |
to bottom, | |
rgba(#626265,1), | |
rgba(#222126,.4) | |
) | |
100% 6% / 100% 2em, | |
linear-gradient( | |
to left, | |
rgba(#222126,1), | |
rgba(#8D8D90,1) | |
) | |
100% 0% / .8em 100%, | |
linear-gradient( | |
to right, | |
rgba(#222126,1), | |
rgba(#8D8D90,1) | |
) | |
0% 0% / .8em 100%, | |
linear-gradient( | |
to right, | |
rgba(#000,.3) 5%, | |
rgba(#8D8D90,1), | |
rgba(#8D8D90,1), | |
rgba(#000,.3) 95%, | |
) | |
10.8% 0% / 100% 3.5em, | |
linear-gradient( | |
to bottom, | |
rgba(#8D8D90,1), | |
rgba(#8D8D90,1) | |
) | |
10.8% 0% / 100% 100%, | |
#222126 | |
; | |
background-repeat: no-repeat; | |
} | |
.top_middle{ | |
position: absolute; | |
width: 62em; | |
height: 34.8em; | |
border-top:2px solid #363838; | |
border-top-left-radius: 5em; | |
border-top-right-radius: 5em; | |
top: 0%; | |
left: 50%; | |
transform:translate(-50%,0%); | |
background: | |
linear-gradient( | |
to top, | |
rgba(#fff,.08) 1%, | |
rgba(#fff,.0) 5%, | |
) | |
100% 100% / 100% 100%, | |
rgba(#28272B,1); | |
background-repeat: no-repeat; | |
.top_left{ | |
width: 11.3em; | |
height: 19.4em; | |
border-right: 2px solid #A6A89E; | |
border-bottom: 2px solid #A6A89E; | |
border-left: 2px solid #A6A89E; | |
border-top: 2px solid #5B5D5C; | |
box-shadow: | |
0 0 0 1px rgba(#282828, .7), | |
0 0 0 2px rgba(#000, .5) | |
; | |
border-radius: 1.4em; | |
position: absolute; | |
top: 2.7em; | |
left: 2.8em; | |
background: | |
linear-gradient( | |
to top, | |
rgba(#000,1), | |
rgba(#232323,0), | |
) | |
0% 0% /100% .3em, | |
linear-gradient( | |
to right, | |
rgba(#000,1), | |
rgba(#232323,0), | |
) | |
0% 100% /.5em 100%, | |
#565656; | |
background-repeat: no-repeat; | |
.body{ | |
overflow: hidden; | |
width: 10.1em; | |
height: 18.1em; | |
border-radius: inherit; | |
position: absolute; | |
top:50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
background: | |
linear-gradient( | |
to bottom, | |
rgba(#fff,1)60%, | |
rgba(gray,.5) | |
) | |
; | |
background-size: 100% .2em; | |
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | |
&:before{ | |
content: ''; | |
width: 100%; | |
height: 11.7em; | |
position: absolute; | |
top:52%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
background: | |
linear-gradient( | |
to bottom, | |
rgba(#232323,1)55%, | |
rgba(#fff,.5) | |
); | |
background-size: 100% .3em; | |
} | |
&:after{ | |
content: ''; | |
width: 60%; | |
height: 120%; | |
position: absolute; | |
top:52%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
background: | |
linear-gradient( | |
#E0E0E0 49%, | |
$t 51%, | |
) | |
50% 0% / 95% 5em, | |
linear-gradient( | |
to top, | |
#E0E0E0 49%, | |
$t 51%, | |
) | |
50% 100% / 95% 5.5em, | |
#fff | |
; | |
background-repeat: no-repeat; | |
} | |
} | |
.middle{ | |
z-index: 5; | |
width: 50%; | |
height: 100%; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform:translate(-50%,-50%); | |
background: | |
linear-gradient( | |
to right, | |
#DFDFDF 20%, | |
#fff 45%, | |
#DFDFDF 50%, | |
) | |
, | |
// #fff | |
; | |
background-size: .5em 100%; | |
&:before{ | |
content: ''; | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top:52%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
background: | |
linear-gradient( | |
#c7c7c7 48%, | |
#232323, | |
$t 53%, | |
) | |
50% 5% / 95% .5em, | |
linear-gradient( | |
#E0E0E0 49%, | |
$t 51%, | |
) | |
50% 0% / 95% 2.5em, | |
linear-gradient( | |
to top, | |
#bababa 29%, | |
$t 31%, | |
) | |
50% 100% / 95% 3em, | |
; | |
background-repeat: no-repeat; | |
} | |
&:after{ | |
content: ''; | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top:52%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
background: | |
linear-gradient( | |
#888888, | |
#888888 53%, | |
) | |
50% 50% / .15em 88%, | |
linear-gradient( | |
#888888, | |
#888888 53%, | |
) | |
50% 50% / .4em 88%, | |
; | |
background-repeat: no-repeat; | |
} | |
} | |
} | |
.red_button_container{ | |
width: 8.3em; | |
height: 8.3em; | |
position: absolute; | |
top: 73.7%; | |
left: 9.7%; | |
transform:translate(-50%,0%); | |
border-radius: 50%; | |
border: 10px solid #2D292B; | |
border: 4px solid #3A3537; | |
// border:5px solid orange; | |
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | |
box-shadow: | |
4px 5px 4px rgba(0,0,0,0.9), | |
5px 5px 15px rgba(0,0,0,0.9), | |
0 6px 6px rgba(0,0,0,0.33), | |
; | |
.red_button{ | |
width: 90%; | |
height: 90%; | |
position: absolute; | |
border:2px solid #000; | |
border-top: .2em solid #000; | |
top: 50%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
border-radius:50%; | |
background: | |
#000; | |
background-repeat: no-repeat; | |
&:after{ | |
content: ''; | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
border:1px solid #000; | |
top: 50%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
border-radius:50%; | |
background: | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#D10F00,1) 50%, | |
rgba($t,.0) 51% | |
) | |
65% 50% / 90% 95%, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#fff,.5) 50%, | |
rgba($t,.0) 51% | |
) | |
90% 50% / 90% 90%, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#D10F00,1) 50%, | |
rgba($t,.0) 51% | |
) | |
50% 50% / 90% 95%, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#fff,.5) 50%, | |
rgba($t,.0) 51% | |
) | |
0% 50% / 90% 90%, | |
#D10F00; | |
background-repeat: no-repeat; | |
} | |
} | |
} | |
.lens{ | |
overflow: hidden; | |
width: 25.2em; | |
height:25.2em; | |
border-top:2px solid #ADACB1; | |
border-bottom: 2px solid #211100; | |
position: absolute; | |
z-index: 1; | |
top:40.5%; | |
left:52.8%; | |
transform: translate(-50%,-50%); | |
border-radius: 50%; | |
box-shadow: | |
0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23), | |
4px 5px 4px rgba(0,0,0,0.9), | |
5px 5px 15px rgba(0,0,0,0.9), | |
0 6px 6px rgba(0,0,0,0.33), | |
0 6px 6px rgba(0,0,0,0.33), | |
0px -4px 3px rgba(50, 50, 50, 0.55), | |
-2px -2px 3px 5px rgba(#000, 0.15) | |
; | |
background: | |
// full round shading | |
radial-gradient( | |
100% 100% at 50% 50%, | |
$t 42%, | |
rgba(#f2f2f2,.02) 44%, | |
rgba(#f2f2f2,.01) 47%, | |
rgba(#000,.2) 48%, | |
rgba(blue,.0) 51%, | |
rgba(red,0) | |
) | |
50% 50% / 100% 100%, | |
// right shading | |
radial-gradient( | |
100% 100% at 0% 50%, | |
$t 42%, | |
rgba(#f2f2f2,.08) 44%, | |
rgba(#f2f2f2,.05) 47%, | |
rgba(#000,.6) 48%, | |
rgba(blue,.0) 51%, | |
rgba(red,0) | |
) | |
12.8em 50% / 100% 110%, | |
// left shading | |
radial-gradient( | |
100% 100% at 100% 50%, | |
$t 45%, | |
rgba(#000,.3) 47%, | |
rgba(#f2f2f2,.2) 48%, | |
rgba(blue,.0) 50%, | |
rgba(red,0) | |
) | |
-15.5em 50% / 120% 120%, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#2C2C30,.08) 10%, | |
rgba(#2C2C30,.05) 40%, | |
rgba(#2C2C30,1)70%, | |
// red | |
// rgba($t,.0) | |
) | |
50% 50% / 100% 100%, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#fff,.08) 10%, | |
rgba(#fff,.05) 40%, | |
rgba(#fff,.02)70%, | |
) | |
50% 50% / 100% 100%, | |
#353438; | |
background-repeat: no-repeat; | |
.lens_1{ | |
width: 22em; | |
height:22em; | |
position: absolute; | |
top:50%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
border-radius: 50%; | |
background: | |
#111316; | |
background-repeat: no-repeat; | |
&:before{ | |
@include center; | |
z-index: 15; | |
position: absolute; | |
content: ''; | |
width: 150%; | |
border:1px solid red; | |
height:120%; | |
background: | |
// top: | |
-webkit-radial-gradient( | |
50% 0%, | |
28% 50%, | |
rgba(#222427, 0.5) 0%, | |
rgba(255, 255, 255, 0) 100% | |
), | |
// left | |
-webkit-radial-gradient( | |
0% 50%, 50% 27%, | |
rgba(#222427, 0.6) 0%, | |
rgba(255,255,255,0)100%), | |
// right | |
-webkit-radial-gradient( | |
100% 50%, 50% 45%, | |
rgba(#535558, 0.25) 0%, | |
rgba(255, 255,255,0)100%), | |
// btm | |
-webkit-radial-gradient( | |
50% 100%, 32% 50%, | |
rgba(#535558, 0.32) 0%, | |
rgba(255,255,255,0) | |
100%), | |
; | |
} | |
.lens_2{ | |
width: 93%; | |
height:93%; | |
position: absolute; | |
top:50%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
border-radius: 50%; border-bottom:2px solid rgba(#ADACB1,.7); | |
border-left:2px solid rgba(#ADACB1,.5); | |
border-right:2px solid rgba(#ADACB1,.5); | |
background: | |
repeating-radial-gradient( | |
circle at 50%, | |
#3F3F43 3px, | |
#1E1D22 2px, | |
#414145 7px) | |
; | |
.lens_3{ | |
width: 64%; | |
height:64%; | |
border: 5px solid #232323; | |
position: absolute; | |
top:52%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
border-radius: 50%; | |
background: | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#232323,1) 10%, | |
rgba(#232323,.7) 40%, | |
rgba(#232323,.8)70%, | |
) | |
50% 50% / 100% 100%; | |
background-repeat: no-repeat; | |
} | |
.lens_4{ | |
width: 99%; | |
height: 97%; | |
background:#1C1B20; | |
border-radius: inherit; | |
position: absolute; | |
top:51%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
.lens_5{ | |
width: 95%; | |
height: 95%; | |
border:0px solid #1C1B20; | |
border-radius: inherit; | |
border-left:2px solid #7C897C; | |
border-right: 2px solid #7C897C; | |
position: absolute; | |
top:51%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
background: | |
linear-gradient( | |
-20deg, | |
#28272E 49%, | |
$t 51%, | |
) | |
50% 100% / 100% 5.5em, | |
radial-gradient( | |
100% 110% at 100% 50%, | |
// $t 30%, | |
rgba(#396440,0) 49%, | |
rgba(#396440,.6) 50% | |
) | |
-2.5em 50% / 70% 95%, | |
radial-gradient( | |
100% 110% at 00% 50%, | |
rgba($pink,.0) 45%, | |
rgba(#396440,.6) 47% | |
) | |
6em 50% / 70% 95%, | |
rgba(#28272E,1) | |
; | |
background-repeat: no-repeat; | |
.lens_6{ | |
width: 82%; | |
height: 82%; | |
border:1px solid #1C1B20; | |
border-radius: inherit; | |
position: absolute; | |
top:51%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
background: | |
rgba(#1C1B20,1) | |
; | |
background-repeat: no-repeat; | |
.lens_7{ | |
width: 75%; | |
height: 75%; | |
border:4px solid #070E10; | |
// border:5px solid red; | |
border-right: 1px solid #3D3B42; | |
border-left: 1px solid #3D3B42; | |
border-radius: inherit; | |
position: absolute; | |
top:51%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
background: | |
radial-gradient( | |
130% 100% at 50% 0%, | |
rgba(#070E10,0), | |
rgba(red,0) 28%, | |
rgba(#070E10,1) 40%, | |
rgba($t,.0) 50% | |
) | |
50% 3em / 100% 100%, | |
linear-gradient( | |
to right, | |
$t, | |
#070E10, | |
#070E10, | |
$t | |
) | |
50% 53% / 3em 56%, | |
radial-gradient( | |
180% 100% at 50% 50%, | |
rgba(#396440,0), | |
rgba(#0A2220,.2) 25%, | |
rgba(#070E10,1), | |
rgba($t,.0) 50% | |
) | |
50% -3.2em / 100% 100%, | |
radial-gradient( | |
130% 100% at 50% 50%, | |
rgba(#070E10,1), | |
rgba(#070E10,1) 25%, | |
rgba(#0A2220,0) 30%, | |
rgba($t,.0) 50% | |
) | |
50% 3em / 100% 100%, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#131313,.2) 45%, | |
rgba(#fff,1) 49%, | |
rgba(#131313,.2) 50% | |
) | |
50% 50% / 105% 115%, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#131313,.7), | |
rgba(#030305,.5) 49%, | |
rgba(#3D3B42,.5) 50% | |
) | |
50% 50% / 90% 100%, | |
#396440 | |
; | |
background-repeat: no-repeat; | |
} | |
} | |
} | |
} | |
} | |
} | |
} | |
.under_lens{ | |
border-radius: 50%; | |
width: 4.2em; | |
height: 4.2em; | |
border-bottom: 3px solid #000; | |
border-right: 1px solid rgba(#B5B4B8,.6); | |
box-shadow: | |
-10px 10px 20px rgba(0,0,0,0.33), | |
0 6px 6px rgba(0,0,0,0.33), | |
0 6px 6px rgba(0,0,0,0.33), | |
0px -4px 3px rgba(50, 50, 50, 0.55), | |
-5px -4px 3px 3px rgba(#000, 0.55) | |
; | |
position: absolute; | |
top:72%; | |
left:72%; | |
transform: translate(-50%,-50%); | |
background: | |
#27282C, | |
#232227; | |
background-repeat: no-repeat; | |
.inner{ | |
width: 72%; | |
height:72%; | |
@include center; | |
border-radius: inherit; | |
background:#060606; | |
background: | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#060606,1) 48%, | |
rgba(#B5B4B8,.2) 55% | |
) | |
50% 50% / 90% 95%, | |
#B5B4B8; | |
background-repeat: no-repeat; | |
} | |
} | |
.rainbow{ | |
width: 6.5em; | |
height:9em; | |
position: absolute; | |
top: 87%; | |
left: 52.5%; | |
transform: translate(-50%,-50%); | |
z-index: 0; | |
background: | |
linear-gradient( | |
#E4341F 49%, | |
#E4341F 51%, | |
) | |
0% 0% / 20% 100%, | |
linear-gradient( | |
#FF9501 49%, | |
#FF9501 51%, | |
) | |
20% 0% / 25% 100%, | |
linear-gradient( | |
#FFC904 49%, | |
#FFC904 51%, | |
) | |
45% 0% / 25% 100%, | |
linear-gradient( | |
#1EB465 49%, | |
#1EB465 51%, | |
) | |
68% 0% / 30% 100%, | |
linear-gradient( | |
#03BCFF 49%, | |
#03BCFF 51%, | |
) | |
100% 0% / 25% 100%, | |
; | |
background-repeat: no-repeat; | |
} | |
.plus_button{ | |
width: 3.5em; | |
height:3.5em; | |
border: 2px solid #000004; | |
position: absolute; | |
top: 14.5%; | |
left:29%; | |
border-radius: 5px; | |
transform: translate(-50%,-50%); | |
.inner{ | |
text-align:center; | |
background:#0B0A0E; | |
width: 100%; | |
height: 100%; | |
border-left: 1px solid rgba(#fff,.3); | |
border-right: 1px solid rgba(#fff,.2); | |
h1{ | |
color:#96A2B1; | |
font-size: 2.3em; | |
font-weight: 600; | |
position: absolute; | |
top:50%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
} | |
} | |
} | |
.under_plus{ | |
width:3em; | |
height:3em; | |
position: absolute; | |
top: 30%; | |
left:29%; | |
border-radius: 50%; | |
transform: translate(-50%,-50%); | |
border-left:2px solid rgba(#fff,.5); | |
border-top:2px solid rgba(#fff,.4); | |
.inner{ | |
width:2.7em; | |
height:2.7em; | |
border-radius: inherit; | |
position: absolute; | |
@include center; | |
background: | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#fff,.55) 10%, | |
rgba(#fff,.1) 12%, | |
rgba(#000,.0) 21% | |
) | |
50% 0% / 100% 100%, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#000,.3), | |
rgba(#000,.4) 50%, | |
rgba(red,.8) 51% | |
) | |
50% 0% / 100% 100%, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#3f363f,.5), | |
rgba(#161316,1) 50%, | |
rgba(red,.0) 51% | |
) | |
50% 50% / 85% 85%, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#3f363f,.5), | |
rgba(#161316,1) 50%, | |
rgba(red,.0) 51% | |
) | |
50% 50% / 85% 85%, | |
#4E4E50; | |
background-repeat: no-repeat; | |
} | |
} | |
.top_right{ | |
width: 13em; | |
height: 13.4em; | |
border-top: 1px solid #858488; | |
border-left: 1px solid #858488; | |
border-right: 2px solid #181818; | |
border-bottom: 1px solid #858488; | |
position: absolute; | |
top: 25%; | |
left:87%; | |
transform: translate(-50%,-50%); | |
border-radius: 1.5em; | |
box-shadow: 0px -3px 1px rgba(#181818, 0.75), | |
inset 0px 0px 15px 0px rgba(#181818,.4), | |
inset 0px 0px 6px 0px rgba(#fff,.4) | |
; | |
.viewfinder{ | |
width: 97%; | |
height:97%; | |
border-radius: inherit; | |
@include center; | |
background: | |
#262628; | |
background-repeat: no-repeat; | |
border: 1px solid #3E3E3E; | |
.inner_1{ | |
width: 83%; | |
height:81%; | |
border-radius: inherit; | |
position: absolute; | |
top: 55%; | |
left:47%; | |
transform: translate(-50%,-50%); | |
border: 2px solid #D2D2D2; | |
background: | |
linear-gradient( | |
-30deg, | |
#3D3C40, | |
#A4A4A4, | |
#CACACA, | |
); | |
&:before{ | |
content: ''; | |
width: 95%; | |
height:98%; | |
@include center; | |
background: | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#131313,1) 50%, | |
rgba($t,.0) 51% | |
) | |
50% -2.4em / 140% 95%, | |
#1C1C1C; | |
background-repeat: no-repeat; | |
border-radius: inherit; | |
} | |
.inner_2{ | |
width: 80%; | |
height: 80%; | |
border:1px solid white; | |
border-radius: inherit; | |
position: absolute; | |
top:53%; | |
left:50%; | |
transform:translate(-50%,-50%); | |
background: | |
linear-gradient( | |
-30deg, | |
#3D3C40, | |
#A4A4A4, | |
#CACACA, | |
)50% 100% / 100% 100%; | |
background-repeat: no-repeat; | |
&:before{ | |
border-radius: inherit; | |
content: ''; | |
width: 90%; | |
height: 90%; | |
border:2px solid #1C1C1C; | |
@include center; | |
} | |
.inner_3{ | |
width: 85%; | |
height:85%; | |
border-radius: inherit; | |
@include center; | |
background: | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#131313,1) 50%, | |
rgba($t,.0) 51% | |
) | |
50% -1.3em / 140% 95%, | |
#1C1C1C; | |
background-repeat: no-repeat; | |
.hole{ | |
width: 1.7em; | |
height:1.7em; | |
background:$pink; | |
border-radius: 2px; | |
position: absolute; | |
top: 57%; | |
left: 47%; | |
transform: translate(-50%,-50%); | |
background: #DDDDDB; | |
&:before{ | |
z-index: 3; | |
width: 87%; | |
height:50%; | |
content: ''; | |
position: absolute; | |
top: -1.8em; | |
left: .15em; | |
background: | |
linear-gradient( | |
to right, | |
$t, | |
rgba(#fff,.1) 20%, | |
rgba(#fff,.15), | |
rgba(#fff,.1), | |
$t | |
) | |
50% 100% / 95% 100%, | |
; | |
background-repeat: no-repeat; | |
} | |
} | |
} | |
} | |
} | |
&:before{ | |
z-index: 3; | |
width: 100%; | |
height: 100%; | |
content: ''; | |
position: absolute; | |
background: | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#000,.5) 48%, | |
rgba($t,.0) 55% | |
) | |
50% -7em / 100% 95%, | |
linear-gradient( | |
to right, | |
rgba(#000,.4) 49%, | |
rgba(#000,.4) 51%, | |
) | |
100% 50% / 12% 95%, | |
; | |
background-repeat: no-repeat; | |
} | |
} | |
.shadows_middle{ | |
z-index: 8; | |
position: absolute; | |
width: 59%; | |
height: 30%; | |
top: 25%; | |
left:47%; | |
transform:translate(-50%,-50%); | |
background: | |
radial-gradient( | |
105% 80% at 50% 100%, | |
rgba($pink,.0) 25%, | |
rgba(#fff,.3), | |
rgba(#fff,.3), | |
rgba(#fff,.0) 55% | |
) | |
50% -2em / 105% 100%, | |
; | |
background-repeat: no-repeat; | |
} | |
.shadows_left{ | |
z-index: 8; | |
position: absolute; | |
width: 3em; | |
height: 4.5em; | |
top: 45%; | |
left:70%; | |
transform:translate(-50%,-50%) rotate(-10deg); | |
background: | |
radial-gradient( | |
100% 120% at 00% 50%, | |
rgba($pink,.0) 45%, | |
rgba(#1F1F1F,1) 47% | |
) | |
2em 50% / 70% 95%, | |
radial-gradient( | |
100% 120% at 00% 50%, | |
rgba(#1F1F1F,.7) 50%, | |
rgba($t,.0) 51% | |
) | |
-.4em 50% / 90% 95%, | |
linear-gradient( | |
65deg, | |
$t, | |
rgba(#E0E0E0,.2) , | |
rgba(#E0E0E0,.3), | |
rgba(#E0E0E0,.2), | |
$t | |
) | |
50% 100% / 100% 5.5em, | |
; | |
background-repeat: no-repeat; | |
} | |
.shadows_left_corner{ | |
z-index: 8; | |
position: absolute; | |
width: 50%; | |
height:50%; | |
top: 70%; | |
left:65%; | |
transform:translate(-50%,-50%) rotate(45deg); | |
background: | |
-webkit-radial-gradient(100% 50%, 50% 15%, rgba(255, 255, 255, 0.5) 0%, rgba( | |
255, | |
255, | |
255, | |
0 | |
) | |
100%), | |
; | |
background-repeat: no-repeat; | |
} | |
.shadows_right{ | |
z-index: 8; | |
position: absolute; | |
width: 3em; | |
height: 4.5em; | |
top: 45%; | |
left:20%; | |
transform:translate(-50%,-50%) rotate(10deg); | |
background: | |
radial-gradient( | |
100% 120% at 50% 50%, | |
rgba(#1F1F1F,.7) 45%, | |
rgba($t,.0) 47% | |
) | |
2.4em 50% / 70% 95%, | |
radial-gradient( | |
100% 120% at 00% 50%, | |
rgba(#1F1F1F,.7) 50%, | |
rgba($t,.0) 51% | |
) | |
-.4em 50% / 90% 95%, | |
linear-gradient( | |
65deg, | |
$t, | |
rgba(#E0E0E0,.2) , | |
rgba(#E0E0E0,.3), | |
rgba(#E0E0E0,.2), | |
$t | |
) | |
50% 100% / 100% 5.5em, | |
; | |
background-repeat: no-repeat; | |
} | |
.shadows_right_corner{ | |
z-index: 8; | |
position: absolute; | |
width: 50%; | |
height:50%; | |
top: 72%; | |
left:30%; | |
transform:translate(-50%,-50%) rotate(-45deg); | |
background: | |
-webkit-radial-gradient(0% 50%, 50% 15%, rgba(255, 255, 255, 0.5) 0%, rgba( | |
255, | |
255, | |
255, | |
0 | |
) | |
100%), | |
; | |
background-repeat: no-repeat; | |
} | |
} | |
.middle_right{ | |
width: 12em; | |
height:3em; | |
position: absolute; | |
left: 86.5%; | |
top:51%; | |
transform:translate(-50%,-50%); | |
p{ | |
text-shadow: | |
-.04em -.04em -0px #535259, | |
.04em .04em 0px #090809 | |
; | |
color:#28272B; | |
font-size: 1.8em; | |
font-weight: 200; | |
position: absolute; | |
width: 1.5em; | |
top:50%; | |
transform:translate(-50%,-50%); text-align:center; | |
} | |
.plus{ | |
width: 1.5em; | |
left: 90%; | |
} | |
.minus{ | |
left: 12%; | |
} | |
.middle{ | |
width: 5.5em; | |
height: 2.2em; | |
@include center; | |
background: | |
linear-gradient( | |
to right, | |
rgba(#323135,.5) 49%, | |
rgba(#323135,.7) 51%, | |
rgba(#2F2F33,.5), | |
) | |
50% 5% / 3.5em .1em, | |
linear-gradient( | |
to right, | |
#050507 49%, | |
#050507 51%, | |
) | |
50% 100% / 2.7em 2.2em, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#050507,1) 50%, | |
rgba($t,.0) 51% | |
) | |
.7% 50% /2.2em 2.2em, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#fff,.2) 50%, | |
rgba($t,.0) 51% | |
) | |
0% 50% /2.2em 2.2em, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#050507,1) 50%, | |
rgba($t,.0) 51% | |
) | |
98% 50% /2.2em 2.2em, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
rgba(#fff,.2) 50%, | |
rgba($t,.0) 51% | |
) | |
100% 50% /2.2em 2.2em, | |
; | |
background-repeat: no-repeat; | |
&:before{ | |
width: 75%; | |
height:1em; | |
content: ''; | |
position: absolute; | |
box-shadow: 0 1px 1px -1px gray; | |
top:75%; | |
left:50%; | |
transform:translate(-50%,-50%); | |
} | |
.circle{ | |
width: 2em; | |
height:2em; | |
@include center; | |
border-radius: 50%; | |
background:#C0BFC3; | |
&:before{ | |
content: ''; | |
width: 1.8em; | |
height:1.85em; | |
@include center; | |
border-radius: 50%; | |
background: | |
linear-gradient( | |
to bottom, | |
#111015, | |
rgba(#2F2F33,.2) 51%, | |
), | |
#111015 | |
; | |
background-repeat: no-repeat; | |
} | |
} | |
} | |
} | |
.text{ | |
width: 10em; | |
height: 7em; | |
position: absolute; | |
top:85%; | |
left:87%; | |
transform: translate(-50%,-50%); | |
h1{ | |
font-family: Arial; | |
font-size:4em; | |
color: #77767B; | |
position:absolute; | |
letter-spacing: -1px; | |
} | |
h1:nth-of-type(1){ | |
left: .3em; | |
} | |
h1:nth-of-type(2){ | |
top: .7em; | |
} | |
h1:nth-of-type(3){ | |
color:#C14633; | |
top: .8em; | |
left:2.4em; | |
font-size:3.3em; | |
} | |
} | |
} | |
.bottom{ | |
width: 101%; | |
height: 20.5em; | |
position: absolute; | |
top: 82%; | |
left:50%; | |
transform: translate(-50%,-50%); | |
background:#25262A; | |
&:before{ | |
position: absolute; | |
content: ''; | |
width: 100%; | |
height: inherit; | |
z-index: 7; | |
background: | |
// shading | |
// right | |
linear-gradient( | |
to left, | |
rgba($t,.2) 11%, | |
rgba(#929095,.15), | |
rgba(#929095,.15), | |
rgba($t,.0) 91% | |
) | |
99.5% 0% / 3em 20%, | |
linear-gradient( | |
to left, | |
rgba($t,.2) 11%, | |
rgba(#929095,.4), | |
rgba(#929095,.4), | |
rgba($t,.0) 91% | |
) | |
99.5% 100% / 3em 80%, | |
// left | |
linear-gradient( | |
to right, | |
rgba($t,.2) 11%, | |
rgba(#929095,.15), | |
rgba(#929095,.15), | |
rgba($t,.0) 91% | |
) | |
.5% 0% / 3em 20%, | |
linear-gradient( | |
to right, | |
rgba($t,.2) 11%, | |
rgba(#929095,.4), | |
rgba(#929095,.4), | |
rgba($t,.0) 91% | |
) | |
.5% 100% / 3em 80%, | |
; | |
background-repeat: no-repeat; | |
} | |
.top{ | |
width: 100%; | |
height:4.2em; | |
// border:1px solid yellow; | |
background:#2E2D31; | |
.left{ | |
position: absolute; | |
z-index:1; | |
width: 37.6%; | |
height: inherit; | |
// border:1px solid $pink; | |
border-bottom-right-radius: 30px; | |
border-bottom: 2px solid #000; | |
border-right: 2px solid #000; | |
box-shadow: 0 2px 2px -2px #8C8C90; | |
background: | |
linear-gradient( | |
-45deg, | |
$t 45%, | |
rgba(#000,.4) 49%, | |
$bk 51%, | |
) | |
0% -2.8em / 2em 5.5em, | |
linear-gradient( | |
to bottom, | |
#9A9BA1, | |
rgba(#9A9BA1,.4), | |
rgba(#000,.2)70%, | |
$t | |
) | |
50% 0% / 100% 1em, | |
#2E2D31; | |
; | |
background-repeat: no-repeat; | |
} | |
.right{ | |
z-index:0; | |
top:0%; | |
left: 67.5%; | |
position: absolute; | |
width: 32.5%; | |
height: 4.2em; | |
// border:1px solid $pink; | |
border-bottom-left-radius: 30px; | |
border-bottom: 2px solid #000; | |
border-left: 2px solid #000; | |
box-shadow: 0 2px 2px -2px #8C8C90; | |
background: | |
linear-gradient( | |
45deg, | |
$t 45%, | |
rgba(red,.0) 49%, | |
$bk 51%, | |
) | |
100% -2.8em / 2em 5.5em, | |
linear-gradient( | |
to bottom, | |
#9A9BA1, | |
rgba(#9A9BA1,.4), | |
rgba(#000,.2)70%, | |
$t | |
) | |
50% 0% / 100% 1em, | |
#2E2D31; | |
; | |
background-repeat: no-repeat; | |
} | |
.middle{ | |
z-index:0; | |
width: 21em; | |
height: 4.6em; | |
position: absolute; | |
top:0; | |
left:52.5%; | |
transform: translate(-50%, 0%); | |
background: | |
// left angle | |
// black | |
linear-gradient( | |
80deg, | |
$t 30%, | |
rgba(#000,.5) 35%, | |
rgba(#2E2D31,.2) 72%, | |
$t 78%, | |
) | |
5.5% 0% / 3.5em 95%, | |
// white | |
linear-gradient( | |
80deg, | |
#2E2D31 40%, | |
rgba(#9A9BA1,.4), | |
rgba(#9A9BA1,.4) 52%, | |
$t 65%, | |
) | |
3% 100% / 3em 88%, | |
// white 2 (right) | |
linear-gradient( | |
-79deg, | |
$t 40%, | |
rgba(#9A9BA1,.3), | |
rgba(#9A9BA1,.3) 52%, | |
rgba(#000,.2), | |
#2E2D31 65%, | |
) | |
11% 100% / 2.7em 88%, | |
// right angle | |
// black | |
linear-gradient( | |
-80deg, | |
$t 30%, | |
rgba(#000,.5) 35%, | |
rgba(#2E2D31,.2) 72%, | |
$t 78%, | |
) | |
94.5% 0% / 3.5em 95%, | |
// white | |
linear-gradient( | |
-80deg, | |
#2E2D31 40%, | |
rgba(#9A9BA1,.4), | |
rgba(#9A9BA1,.4) 52%, | |
$t 65%, | |
) | |
97.3% 100% / 3em 88%, | |
// white 2 (right) | |
linear-gradient( | |
79deg, | |
$t 40%, | |
rgba(#000,.2), | |
rgba(#9A9BA1,.3), | |
rgba(#9A9BA1,.3) 52%, | |
#2E2D31 65%, | |
) | |
91% 100% / 2.7em 88%, | |
linear-gradient( | |
to right, | |
$t, | |
rgba(#000,.4), | |
rgba(#000,.2)70%, | |
// red | |
) | |
95% 0% / 1.5em .7em, | |
linear-gradient( | |
to right, | |
$t, | |
rgba(#000,.4), | |
rgba(#000,.2)70%, | |
// red | |
) | |
5% 0% / 1.5em .7em, | |
linear-gradient( | |
to bottom, | |
rgba(#9A9BA1,.3), | |
rgba(#9A9BA1,.4), | |
rgba(#000,.06)90%, | |
$t | |
) | |
50% 0% / 17em .6em, | |
linear-gradient( | |
to left, | |
rgba(#9A9BA1,.2), | |
rgba(#9A9BA1,.5), | |
rgba(#000,.2) | |
) | |
96% 0% / 2em .5em, | |
linear-gradient( | |
to bottom, | |
#9A9BA1, | |
rgba(#9A9BA1,.4), | |
rgba(#000,.2)70%, | |
$t | |
) | |
100% 0% / 1.5em 1em, | |
linear-gradient( | |
to right, | |
rgba(#9A9BA1,.0), | |
rgba(#9A9BA1,.3), | |
rgba(#000,.3) | |
) | |
4% 0% / 2em .6em, | |
linear-gradient( | |
to bottom, | |
#9A9BA1, | |
rgba(#9A9BA1,.4), | |
rgba(#000,.2)70%, | |
$t | |
) | |
0% 0% / 2em 1em, | |
linear-gradient( | |
to top, | |
rgba(#9A9BA1,.4) 5%, | |
rgba(#9A9BA1,.1), | |
rgba(#000,.07), | |
$t | |
) | |
50% 0% / 83% 100%, | |
#2E2D31 | |
; | |
background-repeat: no-repeat; | |
.switch{ | |
width: 12.7em; | |
height: 3em; | |
// border:1px solid yellow; | |
position: absolute; | |
@include center; | |
left:54%; | |
background: | |
linear-gradient( | |
to right, | |
rgba(#d2d2d2,.05), | |
rgba(#000,.1), | |
rgba(#000,.7) | |
) | |
39% 50% / 89% 2.7em, | |
linear-gradient( | |
to right, | |
rgba(#06050A,1), | |
rgba(#06050A,1), | |
rgba(#06050A,1) | |
) | |
86% 50% / 2.3em 2.8em, | |
linear-gradient( | |
to bottom, | |
rgba(#000,.1), | |
rgba(#000,.1), | |
rgba(#000,.3) | |
) | |
45% 93% / 90% .2em, | |
linear-gradient( | |
to bottom, | |
#000 1%, | |
#444348 2%, | |
#444348 98%, | |
#000 99% | |
) | |
45% 5% / 70% .2em, | |
linear-gradient( | |
to bottom, | |
#000 1%, | |
#444348 2%, | |
#444348 98%, | |
#000 99% | |
) | |
43% 50% / 70% 2.8em, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
#0B0A0F 46%, | |
rgba(#000,1) 50%, | |
rgba($t,.0) 51% | |
) | |
100% 50% / 3em 2.8em, | |
radial-gradient( | |
100% 100% at 50% 50%, | |
#444348 43%, | |
rgba(#fff,.3), | |
rgba(#000,1) 50%, | |
rgba($t,.0) 51% | |
) | |
0% 50% / 3em 2.8em, | |
; | |
background-repeat: no-repeat; | |
.switch_btn{ | |
width: 2.8em; | |
height: 2.8em; | |
@include center; | |
border-radius: 50%; | |
border-bottom:none; | |
left: 75%; | |
top: 37%; | |
background: | |
radial-gradient( | |
100% 100% at 50% 50%, | |
#2D2C31 44%, | |
rgba(#06050A,.6) 48%, | |
rgba($t,.0) 55% | |
) | |
50% 50% / 98% 100%, | |
#39383D; | |
background-repeat: no-repeat; | |
box-shadow: 0 2em 4em rgba(0,0,0,0.19), 0 .3em .3em rgba(0,0,0,0.23), | |
-.15em .2em 0 .2em rgba(#000, .8), | |
.04em .1em 0 .1em rgba(#d2d2d2, .5), | |
0 .38em .28em rgba(0,0,0,0.50), 0 15px 5px rgba(0,0,0,0.42); | |
; | |
} | |
} | |
} | |
} | |
.btm{ | |
width: 100%; | |
height: 16.3em; | |
position: absolute; | |
background-repeat: no-repeat; | |
background: | |
// btm shading | |
linear-gradient( | |
to bottom, | |
$t, | |
rgba(#37383C,1), | |
rgba(#37383C,1) | |
) | |
10.8% 100% / 100% .8em, | |
linear-gradient( | |
to right, | |
#000, | |
rgba(#6C6D71,.8) | |
) | |
10.8% 0% / .3em 3.75em, | |
linear-gradient( | |
to right, | |
#000, | |
rgba(#6C6D71,.8) | |
) | |
94% 0% / .3em 3.75em, | |
// right end | |
linear-gradient( | |
to left, | |
#797A7F 5%, | |
#797A7F, | |
rgba(#242328,1) 8%, | |
rgba(#2F3034,1) 41% | |
) | |
95% 32% / .8em 4.5em, | |
linear-gradient( | |
to left, | |
rgba(#797A7F,.4) 5%, | |
rgba(#1B1C20,1) 8%, | |
rgba(#1B1C20,1) 41% | |
) | |
95% 32% / 1em 4.5em, | |
// left end | |
linear-gradient( | |
to right, | |
#797A7F 5%, | |
#797A7F, | |
rgba(#242328,1) 8%, | |
rgba(#2F3034,1) 41% | |
) | |
9% 32% / .8em 4.5em, | |
linear-gradient( | |
to right, | |
#797A7F 5%, | |
rgba(#1B1C20,1) 8%, | |
rgba(#1B1C20,1) 41% | |
) | |
9% 32% / 1em 4.5em, | |
// l&r side blocks | |
linear-gradient( | |
-80deg, | |
#05060A 38%, | |
rgba(pink,.0) 41% | |
) | |
93.5% 28% / 2em 2em, | |
linear-gradient( | |
80deg, | |
#05060A 38%, | |
rgba(pink,.0) 41% | |
) | |
10% 28% / 2em 2em, | |
// middle large rectangle | |
linear-gradient( | |
to bottom, | |
#0F0E13 40%, | |
#323136 60%, | |
#323136, | |
) | |
60% 28% / 55em 2em, | |
linear-gradient( | |
to right, | |
rgba(#000,.3), | |
rgba(#000,.0), | |
rgba(#000,.3) | |
) | |
60% 38% / 53em 1em, | |
linear-gradient( | |
to bottom, | |
#05060A 40%, | |
#05060A 60%, | |
rgba(#323136,.5), | |
) | |
60% 35% / 53em 2em, | |
// main large rectangle | |
linear-gradient( | |
to bottom, | |
#27282C 1%, | |
#05060A 2%, | |
#05060A 98%, | |
#797A7F 99% | |
) | |
65.5% 32% / 57.4em 4.5em, | |
; | |
background-repeat: no-repeat; | |
h1{ | |
font-family: Arial; | |
font-size:4.4em; | |
color: #77767B; | |
color:#909291; | |
position:absolute; | |
letter-spacing: -1px; | |
font-weight: 600; | |
@include center; | |
top: 75%; | |
left:53%; | |
text-shadow: | |
.04em .04em 0px rgba(#000,.3); | |
&:nth-of-type(2){ | |
width:10em; | |
text-align:right; | |
left: 81.3%; | |
font-size:1.8em; | |
letter-spacing: 0px; | |
top:79%; | |
} | |
} | |
.logo{ | |
width: 4.7em; | |
height: 5.4em; | |
@include center; | |
left: 17.5%; | |
top: 70.5%; | |
background: | |
linear-gradient( | |
to bottom, | |
#898A8B, | |
#898A8B, | |
) | |
60% 5% / 100% .7em, | |
linear-gradient( | |
to bottom, | |
#898A8B, | |
#898A8B, | |
) | |
60% 25% / 100% .7em, | |
linear-gradient( | |
to bottom, | |
#898A8B, | |
#898A8B, | |
) | |
60% 45% / 100% .7em, | |
linear-gradient( | |
to bottom, | |
#898A8B, | |
#898A8B, | |
) | |
60% 65% / 100% .7em, | |
linear-gradient( | |
to bottom, | |
#898A8B, | |
#898A8B, | |
) | |
60% 100% / 100% 1.28em, | |
; | |
background-repeat: no-repeat; | |
} | |
} | |
} | |
.under_btm{ | |
width:100%; | |
height: 1.5em; | |
@include center; | |
background:#1F2024; | |
top:99.5%; | |
&:before{ | |
content: ''; | |
position: absolute; | |
width: 3em; | |
height:4em; | |
top: -65%; | |
left:-1%; | |
transform:rotate(-70deg); | |
background: | |
// btm left corner | |
radial-gradient( | |
100% 160% at 100% 50%, | |
rgba($t,0) 48%, | |
rgba($bk,1) 51% | |
) | |
.2em 0% / 100% 150%, | |
; | |
background-repeat: no-repeat; | |
} | |
&:after{ | |
content: ''; | |
position: absolute; | |
width: 3em; | |
height:4em; | |
top: -90%; | |
left:96%; | |
transform:rotate(70deg); | |
background: | |
// btm left corner | |
radial-gradient( | |
100% 160% at 0% 50%, | |
rgba($t,.0) 48%, | |
rgba($bk,1) 51% | |
) | |
.2em 0% / 100% 150%, | |
; | |
background-repeat: no-repeat; | |
} | |
} | |
.corners{ | |
.corner_left{ | |
width:1.5em; | |
height: 1.5em; | |
position: absolute; | |
top: 62.5%; | |
left:-.4em; | |
background: | |
linear-gradient( | |
-45deg, | |
$t 49%, | |
rgba($bk,1) 51%, | |
) | |
50% 100% / 100% 100%, | |
; | |
background-repeat: no-repeat; | |
} | |
.corner_right{ | |
width:1.5em; | |
height: 1.5em; | |
position: absolute; | |
top: 62.5%; | |
left:98.5%; | |
background: | |
linear-gradient( | |
45deg, | |
$t 49%, | |
rgba($bk,1) 51%, | |
) | |
50% 100% / 100% 100%, | |
; | |
background-repeat: no-repeat; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment