Skip to content

Commit

Permalink
Styles moved
Browse files Browse the repository at this point in the history
  • Loading branch information
ackava committed Dec 15, 2024
1 parent 71d1600 commit b0996a6
Show file tree
Hide file tree
Showing 6 changed files with 294 additions and 295 deletions.
31 changes: 31 additions & 0 deletions src/animations/Animations.global.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
[data-animate-slide=from-bottom] {
transition: all 0.5s ease-out;

&:not([data-animation-state]) {
display: none;
}

&[data-animation-state=down] {
transform: translate(0,100%);
}

&[data-animation-state=normal] {
transform: translate(0,0);
}
}

[data-animate-slide=from-top] {
transition: all 0.5s ease-out;

&:not([data-animation-state]) {
display: none;
}

&[data-animation-state=up] {
transform: translate(0,-100%);
}

&[data-animation-state=normal] {
transform: translate(0,0);
}
}
33 changes: 1 addition & 32 deletions src/animations/Animations.ts
Original file line number Diff line number Diff line change
@@ -1,37 +1,6 @@
import styled from "@web-atoms/core/dist/style/styled";
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";

styled.css `
transition: all 0.5s ease-out;
&:not([data-animation-state]) {
display: none;
}
&[data-animation-state=down] {
transform: translate(0,100%);
}
&[data-animation-state=normal] {
transform: translate(0,0);
}
`.installGlobal("[data-animate-slide=from-bottom]");

styled.css `
transition: all 0.5s ease-out;
&:not([data-animation-state]) {
display: none;
}
&[data-animation-state=up] {
transform: translate(0,-100%);
}
&[data-animation-state=normal] {
transform: translate(0,0);
}
`.installGlobal("[data-animate-slide=from-top]");
import "./Animations.global.less";


export default class Animations {
Expand Down
36 changes: 36 additions & 0 deletions src/basic/Button.local.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
.web-atoms-button {
padding: 8px;
margin-left: 3px;
margin-right: 3px;
border-radius: 9999px;
display: inline-block;
height: 40px;
min-width: 40px;
box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;
border: solid 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
background-color: transparent;
&.pressed {
background-color: lightsteelblue;
}
&:hover {
background-color: lightgreen;
}
& > label.label {
display: flex;
align-items: center;
gap: 5px;
& > .fad {
font-size: larger;
width: 100%;
color: purple;
cursor: pointer;
&.red {
color: red;
}
}
& > span {
white-space: nowrap;
}
}
}
40 changes: 3 additions & 37 deletions src/basic/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import XNode from "@web-atoms/core/dist/core/XNode";
import styled from "@web-atoms/core/dist/style/styled";

import "./Button.local.less";

export interface IButton {
id?: string;
Expand All @@ -15,42 +16,7 @@ export interface IButton {
subClass?: string;
}

const css = styled.css `
padding: 8px;
margin-left: 3px;
margin-right: 3px;
border-radius: 9999px;
display: inline-block;
height: 40px;
min-width: 40px;
box-shadow: rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;
border: solid 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
background-color: transparent;
&.pressed {
background-color: lightsteelblue;
}
&:hover {
background-color: lightgreen;
}
& > label.label {
display: flex;
align-items: center;
gap: 5px;
& > .fad {
font-size: larger;
width: 100%;
color: purple;
cursor: pointer;
&.red {
color: red;
}
}
& > span {
white-space: nowrap;
}
}
`.installLocal();
const css = "web-atoms-button";
export default function Button({
id,
icon,
Expand Down
222 changes: 222 additions & 0 deletions src/player/AtomVideoPlayer.global.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
[data-video-player=video-player] {
display: grid;
grid-template-rows: auto 1fr auto auto auto;
grid-template-columns: auto 1fr auto;
overflow: hidden;

& > [data-element=banner] {

grid-row-start: 3;
grid-row-end: span 3;
grid-column-start: 1;
grid-column-end: span 3;

align-self: end;
justify-self: center;
height: 15%;

gap: 5px;

overflow: hidden;

grid-template-columns: auto 1fr;
grid-template-rows: auto auto;

background-color: black;
color: white;

border-radius: 10px;

padding: 10px;

align-items: center;
justify-items: stretch;
z-index: 2;

display: none;

&[data-has-logo=true] {
display: grid;
}

& > * {
min-height: 0;
min-width: 0;
}

& > [data-element=logo] {
grid-row: 1 / span 2;
grid-column: 1;
z-index: 2;
height: 100%;
}

& > [data-element=logo-title] {
grid-row-start: 1;
grid-column-start: 2;
z-index: 2;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

& > [data-element=logo-description] {
grid-row-start: 2;
grid-column-start: 2;
z-index: 2;
font-size: smaller;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}

& > [data-element=video], & > [data-element=poster] {
grid-row-start: 1;
grid-row-end: span 5;
grid-column-start: 1;
grid-column-end: span 3;
align-self: stretch;
justify-self: stretch;
}

& > [data-element=play-element] {
z-index: 10;
grid-row-start: 1;
grid-row-end: span 5;
grid-column-start: 1;
grid-column-end: span 3;
align-self: center;
justify-self: center;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
display: flex;

& > button.play {
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background-color: #0000ff;
border-radius: 9999px;
font-size: 25px;
padding: 10px;
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
& > i {
margin-left: 4px;
}
}
}

& > [data-element=progress] {
z-index: 11;
grid-row-start: 4;
grid-column-start: 1;
grid-column-end: span 3;
align-self: flex-end;
height: 15px;
padding-top: 5px;
padding-bottom: 5px;
justify-self: stretch;
background-color: rgba(0,0,0,0.3);
width: 100%;
cursor: pointer;
}

& > [data-element=toolbar] {
z-index: 10;
grid-row-start: 5;
grid-column-start: 1;
grid-column-end: span 3;
background-color: rgba(0,0,0,0.3);
color: #ffffff;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 4px;
display: flex;

& > * {
min-width: 20px;
margin-left: 5px;
padding: 5px;
}

& > [data-style=button] {
width: 30px;
height: 30px;
padding: 5px;
}

& > [data-font-size=small] {
font-size: x-small;
}

& > [data-element=volume-range] {
height: 2px;
color: #008000;
box-shadow: none;
border: none;
}

& > [data-element=volume-range]:focus {
box-shadow: none;
border: none;
}

& > [data-element=full-screen] {
margin-left: auto;
}

}

&[data-controls=true] {
& > [data-element=toolbar] {
display: flex;
}

& > [data-element=progress] {
display: flex;
}
}

&[data-state=playing] {
&[data-controls=false] {
& > [data-element=play-element], & > [data-element=progress], & > [data-element=toolbar] {
display: none;
}
}
}

&[data-state=waiting] {
&[data-controls=false] {
& > [data-element=toolbar], & > [data-element=progress] {
display: none;
}
}

& > [data-element=toolbar] {
& > [data-element=play] {
display: none;
}
}

& > [data-element=play-element] {
display: none;
}
}

&[data-state=paused] {
& > [data-element=toolbar] {
& > [data-element-pause] {
display: none;
}
}
}
}
Loading

0 comments on commit b0996a6

Please sign in to comment.