janis/obs-twitch-camera-frame
1
0
Fork 0
mirror of https://github.com/DerTyp7/obs-twitch-camera-frame.git synced 2025-10-29 12:52:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Janis
2022-10-29 15:36:09 +02:00
commit 3e4b2af015
11 changed files with 313 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
css/animations.css Normal file
View File

@@ -0,0 +1,99 @@
@keyframes subAnimation {
0% {
border-image: linear-gradient(
to top,
var(--border-color-1),
var(--border-color-2)
)
1;
}
10% {
border-image: linear-gradient(
to top,
var(--border-color-flash-1),
var(--border-color-flash-2)
)
1;
}
50% {
border-image: linear-gradient(
to top,
var(--border-color-flash-2),
var(--border-color-flash-1)
)
1;
}
80% {
border-image: linear-gradient(
to top,
var(--border-color-flash-1),
var(--border-color-flash-2)
)
1;
}
100% {
border-image: linear-gradient(
to top,
var(--border-color-2),
var(--border-color-1)
)
1;
}
}
@keyframes borderAnimation {
0% {
border-image: linear-gradient(
to top,
var(--border-color-2),
var(--border-color-1)
)
1;
}
50% {
border-image: linear-gradient(
to top,
var(--border-color-1),
var(--border-color-2)
)
1;
}
100% {
border-image: linear-gradient(
to top,
var(--border-color-2),
var(--border-color-1)
)
1;
}
}
@keyframes backgroundAnimation {
0% {
background: var(--border-color-2);
}
50% {
background: var(--border-color-1);
}
100% {
background: var(--border-color-2);
}
}
@keyframes backgroundSubAnimation {
0% {
background: var(--border-color-1);
}
10% {
background: var(--border-color-flash-1);
}
50% {
background: var(--border-color-flash-2);
}
80% {
background: var(--border-color-flash-1);
}
100% {
background: var(--border-color-2);
}
}

57
css/style.css Normal file
View File

@@ -0,0 +1,57 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
margin: 0;
padding: 0;
color: white;
font-family: "Roboto", sans-serif;
font-weight: bold;
}
body,
html {
min-height: 100%;
}
#frame {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
border: 10px solid var(--border-color-1);
height: 100vh;
width: 100%;
background-color: transparent;
box-sizing: border-box;
border-image: linear-gradient(
to right,
var(--border-color-1),
var(--border-color-2)
)
1;
transition: border linear 200ms;
z-index: 100;
animation-name: borderAnimation;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-duration: 20s;
}
#subCount {
background: var(--border-color-2);
height: 20px;
padding: 5px;
padding-bottom: 10px;
display: block;
position: absolute;
bottom: 10px;
right: 10px;
font-size: 17pt;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-duration: 20s;
animation-name: backgroundAnimation;
}

7
css/variables.css Normal file
View File

@@ -0,0 +1,7 @@
:root {
--border-color-1: rgb(139, 0, 0);
--border-color-2: rgb(255, 74, 74);
--border-color-flash-1: rgb(220, 32, 15);
--border-color-flash-2: rgb(210, 220, 15);
}