FilesExpand file tree

 main

/

style.css

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

125 lines (110 loc) · 1.83 KB

 main

/

style.css

Copy path

Top

File metadata and controls

• Code
• Blame

125 lines (110 loc) · 1.83 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background: #cde;

}

.container {

margin: 10px;

display: flex;

justify-content: center;

align-items: center;

gap: 5px;

}

.sidebar {

display: flex;

flex-direction: column;

justify-content: space-between;

border-radius: 5px;

padding: 10px;

align-items: center;

width: 200px;

height: 300px;

background: white;

}

.stage {

display: flex;

position: relative;

height: 300px;

background: #ffafcc;

padding: 10px;

border-radius: 5px;

align-items: flex-end;

}

.bar {

position: absolute;

height: 100px;

background: #fff;

transition: all 300ms ease-out;

border-radius: 6px;

}

.bar.activate {

background: #65d84e;

transition-property: 0.3s;

animation: upAndDownScale 1.5s ease-in-out;

}

@keyframes upAndDownScale {

0% {

transform: scale(1);

}

50% {

transform: scale(1.2);

}

100% {

transform: scale(1);

}

}

.generate-new {

display: flex;

flex-direction: column;

align-items: center;

align-content: center;

justify-content: center;

border: 1px solid #000;

padding: 5px;

font-family: 'Courier New', Courier, monospace;

font-size: 15px;

border-radius: 5px;

}

.generate-new input {

padding: 2px;

}

.buttons {

display: flex;

flex-direction: column;

padding: 10px;

gap: 10px;

}

button {

background: #ea4c89;

border-radius: 8px;

border-style: none;

color: #FFF;

cursor: pointer;

padding: 5px 16px;

margin: 10px;

}

button:hover {

background: #f082ac;

}

.select-algorithm {

display: flex;

flex-direction: column;

background: #ffafcc;

padding: 5px;

margin-bottom: 10px;

border-radius: 5px;

}

.select-algorithm select {

background: #0563af;

color: #fff;

padding: 2px;

border: none;

outline: none;

border-radius: 5px;

}

.select-algorithm select option {

padding: 30px;

}