aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/PresBox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/PresBox.scss')
-rw-r--r--src/client/views/nodes/PresBox.scss477
1 files changed, 397 insertions, 80 deletions
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 9c2daf5d3..07e53fa94 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -19,16 +19,11 @@
margin-top: 10px;
}
- .presBox-highlight {
- position: absolute;
- top: 0;
- height: 0;
- width: 100%;
- margin-top: 10px;
- background-color: #ffe4b3;
+ .presBox-toolbar {
+ display: none;
}
- .presBox-toolbar {
+ .presBox-toolbar.active {
position: relative;
display: inline-flex;
align-items: center;
@@ -43,115 +38,437 @@
letter-spacing: 0;
display: flex;
align-items: center;
+ transition: 0.5s;
- .toolbar-dropdown {
- margin-left: 5px;
+ @media only screen and (max-width: 400) {
+ .toolbar-buttonText {
+ display: none;
+ }
}
+ }
- .toolbar-transitionTools {
- display: none;
- }
+ .toolbar-button.active {
+ color: #AEDDF8;
+ }
- .toolbar-transitionTools.active {
- position: absolute;
- display: block;
- top: 30px;
- transform: translate(-10px, 0px);
- border-top: solid 3px grey;
- background-color: #323232;
- width: 105px;
- height: max-content;
- z-index: 100;
-
- .toolbar-transitionButtons {
- display: block;
-
- .toolbar-transition {
- display: flex;
- font-size: 10;
- width: 100;
- background-color: rgba(0, 0, 0, 0);
- min-width: max-content;
-
- .toolbar-icon {
- margin-right: 5px;
- }
- }
+ .toolbar-transitionButtons {
+ display: block;
+
+ .toolbar-transition {
+ display: flex;
+ font-size: 10;
+ width: 100;
+ background-color: rgba(0, 0, 0, 0);
+ min-width: max-content;
+
+ .toolbar-icon {
+ margin-right: 5px;
}
}
}
+ }
+
+ .toolbar-moreInfo {
+ position: absolute;
+ right: 5px;
+ display: flex;
+ width: max-content;
+ height: 25px;
+ /* background-color: pink; */
+ justify-content: center;
+ transform: rotate(90deg);
+ align-items: center;
+ transition: 0.7s ease;
- .toolbar-divider {
- border-left: 1px solid white;
- height: 80%;
+ .toolbar-moreInfoBall {
+ width: 4px;
+ height: 4px;
+ border-radius: 100%;
+ background-color: white;
+ margin: 1px;
+ position: relative;
}
}
- .presBox-buttons {
+ .toolbar-moreInfo.active {
+ transform: rotate(0deg);
+ }
+
+ .toolbar-divider {
+ border-left: solid #ffffff70 0.5px;
+ height: 20px;
+ }
+}
+
+.dropdown {
+ font-size: 10;
+ margin-left: 5px;
+ color: darkgrey;
+ transition: 0.5s ease;
+}
+
+.dropdown.active {
+ transform: rotate(180deg);
+ color: #AEDDF8;
+ opacity: 0.8;
+}
+
+.presBox-ribbon {
+ position: relative;
+ display: none;
+ background-color: white;
+ color: black;
+ width: 100%;
+ height: 0;
+ z-index: 100;
+ transition: 0.7s;
+
+ .toolbar-slider {
position: relative;
+ -webkit-appearance: none;
+ transform: rotateY(180deg);
+ background-color: #40B3D8;
+ margin-top: 1px;
width: 100%;
- background: gray;
- padding-top: 5px;
- padding-bottom: 5px;
+ max-width: 100px;
+ height: 2.5px;
+ left: 0px;
+ }
+
+ .toolbar-slider:focus {
+ outline: none;
+ }
+
+ .toolbar-slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background-color: #40B3D8;
+ border: 1px white solid;
+ border-radius: 100%;
+ width: 9px;
+ height: 9px;
+ }
+
+ .slider-headers {
+ position: relative;
display: grid;
- grid-column-end: 4;
- grid-column-start: 1;
+ justify-content: space-between;
+ width: 100%;
+ grid-template-columns: auto auto auto;
+ grid-template-rows: auto;
+ font-weight: 100;
+ margin-top: 5px;
+ font-size: 8px;
+ }
- .presBox-viewPicker {
- height: 25;
- position: relative;
- display: inline-block;
- grid-column: 1/2;
- min-width: 15px;
+ .slider-value {
+ font-size: 10;
+ position: relative;
+ }
+
+ .slider-value.none,
+ .slider-headers.none,
+ .toolbar-slider.none {
+ display: none;
+ }
+
+ .dropdown-header {
+ padding-bottom: 10px;
+ font-weight: 800;
+ text-align: center;
+ font-size: 16;
+ width: 90%;
+ color: black;
+ transform: translate(5%, 0px);
+ border-bottom: solid 2px darkgrey;
+ }
+
+
+ .ribbon-textInput {
+ border-radius: 2px;
+ height: 25px;
+ font-size: 10;
+ font-weight: 100;
+ align-self: center;
+ justify-self: center;
+ padding-left: 10px;
+ border: solid 1px black;
+ width: 100%;
+ }
+
+ .ribbon-final-box {
+ align-self: flex-start;
+ display: grid;
+ grid-template-rows: auto auto;
+ padding-left: 10px;
+ padding-right: 10px;
+ letter-spacing: normal;
+ width: max-content;
+ font-size: 13;
+ font-weight: 600;
+ position: relative;
+
+ .selectedList {
+ display: block;
+ min-width: 50;
+ max-width: 120;
+ height: 70;
+ overflow-y: scroll;
+
+ .selectedList-items {
+ font-size: 7;
+ font-weight: normal;
+ }
}
- select {
- background: #323232;
+
+ .ribbon-final-button {
+ position: relative;
+ font-size: 10;
+ font-weight: normal;
+ letter-spacing: normal;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 5px;
+ height: 25px;
color: white;
+ width: 100%;
+ max-width: 120;
+ padding-left: 10;
+ padding-right: 10;
+ border-radius: 10px;
+ background-color: #979797;
}
+ }
- .presBox-button {
- margin-right: 2.5%;
- margin-left: 2.5%;
- height: 25px;
- border-radius: 5px;
+ .ribbon-box {
+ display: grid;
+ grid-template-rows: max-content auto;
+ padding-left: 10px;
+ padding-right: 10px;
+ letter-spacing: normal;
+ width: max-content;
+ font-weight: 600;
+ position: relative;
+ font-size: 13;
+ border-right: solid 2px darkgrey;
+
+ .ribbon-button {
+ font-size: 10;
+ font-weight: 200;
+ height: 25;
+ border: solid 1px black;
display: flex;
+ border-radius: 10px;
+ margin-right: 5px;
+ width: max-content;
+ justify-content: center;
align-items: center;
- background: #323232;
- color: white;
+ padding-right: 10px;
+ padding-left: 10px;
+ }
+
+ .ribbon-button.active {
+ background-color: #5B9FDD;
+ }
+
+ .ribbon-button:hover {
+ background-color: lightgrey;
+ }
+
+ .presBox-dropdown:hover {
+ border: solid 1px #378AD8;
+
+ .presBox-dropdownOption {
+ font-size: 10;
+ display: block;
+ padding-left: 5px;
+ margin-top: 3;
+ margin-bottom: 3;
+ }
+
+ .presBox-dropdownOption:hover {
+ position: relative;
+ background-color: lightgrey;
+ }
+
+ .presBox-dropdownOption.active {
+ position: relative;
+ background-color: #9CE2F8;
+ }
+
+ .presBox-dropdownOptions {
+ position: absolute;
+ top: 19px;
+ left: -1px;
+ z-index: 200;
+ width: 85%;
+ display: block;
+ background: #FFFFFF;
+ border: 0.5px solid #979797;
+ box-sizing: border-box;
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ }
- svg {
- margin: auto;
+ .presBox-dropdownIcon {
+ color: #378AD8;
}
}
- .collectionViewBaseChrome-viewPicker {
- min-width: 50;
- width: 5%;
- height: 25;
+ .presBox-dropdown {
+ display: grid;
+ grid-template-columns: auto 20%;
position: relative;
- display: inline-block;
+ border: solid 1px black;
+ font-size: 10;
+ height: 20;
+ padding-left: 5px;
+ align-items: center;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ font-weight: 200;
+ width: 100%;
+ min-width: max-content;
+ max-width: 120;
+ overflow: visible;
+
+ .presBox-dropdownOptions {
+ display: none;
+ }
+
+ .presBox-dropdownIcon {
+ position: relative;
+ color: black;
+ align-self: center;
+ justify-self: center;
+ }
}
}
+}
- .presBox-backward,
- .presBox-forward {
- width: 25px;
- border-radius: 5px;
- top: 50%;
- position: absolute;
+.presBox-ribbon.active {
+ display: inline-flex;
+ height: 100px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ border: solid 1px black;
+}
+
+
+
+.dropdown-play {
+ top: 32px;
+ transform: translate(-28%, 0px);
+ /* left: 0; */
+ display: none;
+ border-radius: 5px;
+ width: 100px;
+ height: 100px;
+ z-index: 200;
+ background-color: black;
+ position: absolute;
+}
+
+.dropdown-play.active {
+ display: flex;
+}
+
+.presBox-buttons {
+ position: relative;
+ width: 100%;
+ background: gray;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ display: grid;
+ grid-template-columns: auto auto;
+
+ .presBox-viewPicker {
+ height: 25;
+ position: relative;
display: inline-block;
+ grid-column: 1;
+ border-radius: 5px;
+ min-width: 15px;
+ max-width: 100px;
}
- .presBox-backward {
- left: 5;
+ .presBox-presentPanel {
+ display: flex;
+ justify-self: end;
+ width: 100%;
+
}
- .presBox-forward {
- right: 5;
+ select {
+ background: #323232;
+ color: white;
+ }
+
+ .presBox-button {
+ margin-right: 2.5px;
+ margin-left: 2.5px;
+ height: 25px;
+ border-radius: 5px;
+ display: none;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+ text-align: center;
+ letter-spacing: normal;
+ width: inherit;
+ background: #323232;
+ color: white;
+ }
+
+ .presBox-button.active {
+ display: flex;
+ }
+
+ .presBox-button.edit {
+ display: flex;
+ max-width: 25px;
+ }
+
+ .presBox-button.present {
+ display: flex;
+ min-width: 100px;
+ width: 100px;
+ position: absolute;
+ right: 0px;
+
+ .present-icon {
+ margin-right: 7px;
+ }
+ }
+
+
+
+ .collectionViewBaseChrome-viewPicker {
+ min-width: 50;
+ width: 5%;
+ height: 25;
+ position: relative;
+ display: inline-block;
}
}
+.presBox-backward,
+.presBox-forward {
+ width: 25px;
+ border-radius: 5px;
+ top: 50%;
+ position: absolute;
+ display: inline-block;
+}
+
+.presBox-backward {
+ left: 5;
+}
+
+.presBox-forward {
+ right: 5;
+}
+
// CSS adjusted for mobile devices
@media only screen and (max-device-width: 480px) {
.presBox-cont .presBox-buttons {
@@ -197,4 +514,4 @@
.select {
font-size: 100%;
}
-}
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-02 01:57:57 +0000