@ -14,235 +14,361 @@
* limitations under the License .
* /
: host-context ( . tb-default . tb-dialog . mat-mdc-dialog-component-host ) {
@media ( min-width : 600 px ) {
. mat-mdc-dialog-content {
width : 800 px ;
max-height : 80 vh ;
}
}
}
/ / Dialog container
. tb-iot-hub-detail-dialog {
display : flex ;
flex-direction : column ;
padding : 0 !important ;
--mat-dialog-supporting-text-line-height : 1 .5 ;
background : white ;
border-radius : 8 px ;
overflow : hidden ;
max-height : 80 vh ;
width : 900 px ;
}
/ / Header
/ / Header — Design : pl-24 , pr-12 , py-16 , gap-8
. dlg-header {
padding : 20 px 24 px 16 px ;
border-bottom : 1 px solid #e5e7eb ;
flex-shrink : 0 ;
}
. dlg-header-top {
display : flex ;
align-items : flex-start ;
gap : 14 px ;
}
. dlg-icon {
width : 48 px ;
height : 48 px ;
border-radius : 12 px ;
display : flex ;
align-items : center ;
justify-content : center ;
gap : 8 px ;
padding : 16 px 12 px 16 px 24 px ;
flex-shrink : 0 ;
tb-icon {
font-size : 26 px ;
width : 26 px ;
height : 26 px ;
color : #fff ;
}
}
. dlg-header-info {
. dlg-header-content {
flex : 1 ;
min-width : 0 ;
}
. dlg-title-row {
display : flex ;
align-items : baseline ;
flex-direction : column ;
gap : 8 px ;
flex-wrap : wrap ;
}
/ / Title — Design : 24px Medium , rgba ( 0 , 0 , 0 , 0 . 87 )
. dlg-title {
font-size : 18 px ;
font-weight : 700 ;
color : #1a1a2e ;
}
. dlg-version {
font-size : 12 px ;
font-size : 24 px ;
font-weight : 500 ;
color : #9ca3af ;
}
. dlg-type-badge {
padding : 2 px 10 px ;
border-radius : 12 px ;
font-size : 12 px ;
font-weight : 500 ;
white-space : nowrap ;
& . wt-timeseries { background : #e3f2fd ; color : #1565c0 ; }
& . wt-latest { background : #e8f5e9 ; color : #2e7d32 ; }
& . wt-rpc { background : #f3e5f5 ; color : #7b1fa2 ; }
& . wt-alarm { background : #ffebee ; color : #c62828 ; }
& . wt-static { background : #eceff1 ; color : #455a64 ; }
& . cf-simple { background : #e3f2fd ; color : #1565c0 ; }
& . cf-script { background : #f3e5f5 ; color : #6a1b9a ; }
& . cf-geofencing { background : #e8f5e9 ; color : #2e7d32 ; }
& . cf-alarm { background : #ffebee ; color : #c62828 ; }
& . cf-propagation { background : #e0f2f1 ; color : #00695c ; }
& . cf-related-agg { background : #e8eaf6 ; color : #283593 ; }
& . cf-entity-agg { background : #fff3e0 ; color : #e65100 ; }
& . rc-core { background : #f3e5f5 ; color : #7b1fa2 ; }
& . rc-edge { background : #e0f2f1 ; color : #00695c ; }
line-height : 32 px ;
color : rgba ( 0 , 0 , 0 , 0 .87 ) ;
}
/ / Subtitle row — Design : 13px Regular , rgba ( 0 , 0 , 0 , 0 . 54 ) , gap-12 between groups , gap-4 within
. dlg-subtitle {
font-size : 12 px ;
color : #6b7280 ;
margin-top : 2 px ;
display : flex ;
align-items : center ;
gap : 4 px ;
font-size : 13 px ;
line-height : 16 px ;
letter-spacing : 0 .4 px ;
color : rgba ( 0 , 0 , 0 , 0 .54 ) ;
flex-wrap : wrap ;
}
. dlg-creator-link {
color : #1976d2 ;
text-decoration : none ;
cursor : pointer ;
. dlg-subtitle-icon {
font-size : 16 px ;
width : 16 px ;
height : 16 px ;
}
& : hover {
text-decoration : underline ;
}
/ / Dot separator — Design : 4px circle , rgba ( 0 , 0 , 0 , 0 . 54 )
. dlg-dot {
width : 4 px ;
height : 4 px ;
border-radius : 2 px ;
background : rgba ( 0 , 0 , 0 , 0 .54 ) ;
flex-shrink : 0 ;
margin : 0 4 px ;
}
. dlg-close {
flex-shrink : 0 ;
margin : - 8 px - 8 px 0 0 ;
}
. dlg-sep {
color : #9ca3af ;
padding : 0 2 px ;
/ / Scrollable body
. dlg-body {
overflow-y : auto ;
overflow-x : hidden ;
flex : 1 ;
min-height : 0 ;
}
/ / Main content — Design : px-24 , pb-16
. dlg-main {
padding : 0 24 px 16 px ;
}
/ / Hero split ( widget : image + description side by side )
. dlg-hero-split {
/ / Row 1 — Design : flex row , gap-24 , items-center
. dlg-row-1 {
display : flex ;
gap : 20 px ;
padding : 20 px 24 px ;
border-bottom : 1 px solid #f3f4f6 ;
gap : 24 px ;
align-items : center ;
}
. dlg-hero-image {
flex : 0 0 48 % ;
background : #f5f7fa ;
/ / Preview image — Design : flex-1 , aspect 305 : 172 , bg rgba ( 0 , 0 , 0 , 0 . 06 ) , rounded-8 , p-16 , dot pattern
. dlg-preview {
flex : 1 ;
min-width : 0 ;
aspect-ratio : 305 / 172 ;
background : rgba ( 0 , 0 , 0 , 0 .06 ) ;
background-image : radial-gradient ( circle , rgba ( 0 , 0 , 0 , 0 .06 ) 1 px , transparent 1 px ) ;
background-size : 20 px 20 px ;
border-radius : 8 px ;
overflow : hidden ;
display : flex ;
align-items : center ;
justify-content : center ;
min-height : 140 px ;
padding : 16 px ;
}
img {
width : 100 % ;
height : 100 % ;
object-fit : contain ;
padding : 8 px ;
}
. dlg-preview-img {
width : 100 % ;
height : 100 % ;
object-fit : contain ;
}
. tb-iot-hub-preview-placeholder tb-icon {
font-size : 64 px ;
width : 64 px ;
height : 64 px ;
opacity : 0 .3 ;
. dlg-preview-placeholder {
tb-icon {
font-size : 48 px ;
width : 48 px ;
height : 48 px ;
color : rgba ( 0 , 0 , 0 , 0 .2 ) ;
}
}
. dlg-hero-desc {
/ / Info panel ( right side ) — Design : flex-1 , flex-col , gap-16
. dlg-info {
flex : 1 ;
font-size : 13 px ;
color : #4b5563 ;
line-height : 1 .6 ;
p {
margin : 0 ;
}
min-width : 0 ;
display : flex ;
flex-direction : column ;
gap : 16 px ;
justify-content : center ;
}
/ / Dashboard : full-width image + description below
. dlg-hero-full {
padding : 20 px 24 px ;
border-bottom : 1 px solid #f3f4f6 ;
/ / Description — rendered via tb-markdown , same overrides as dlg-readme
. dlg-description {
: : ng-deep tb-markdown . tb-markdown-view {
padding : 0 ;
> p , > div {
padding : 0 ;
}
p {
font-size : 14 px ;
font-weight : 400 ;
line-height : 24 px ;
letter-spacing : 0 .2 px ;
color : rgba ( 0 , 0 , 0 , 0 .76 ) ;
margin : 0 ;
}
}
}
. dlg-hero-full-image {
background : #f5f7fa ;
border-radius : 8 px ;
overflow : hidden ;
/ / Author — Design : person icon 20px + name 14px Medium # 305680
. dlg-author {
display : flex ;
align-items : center ;
justify-content : center ;
min-height : 200 px ;
max-height : 300 px ;
gap : 4 px ;
cursor : pointer ;
img {
width : 100 % ;
height : 100 % ;
object-fit : contain ;
padding : 8 px ;
tb-icon {
font-size : 20 px ;
width : 20 px ;
height : 20 px ;
color : rgba ( 0 , 0 , 0 , 0 .54 ) ;
}
. tb-iot-hub-preview-placeholder tb-icon {
font-size : 64 px ;
width : 64 px ;
height : 64 px ;
opacity : 0 .3 ;
span {
font-size : 14 px ;
font-weight : 500 ;
line-height : 20 px ;
letter-spacing : 0 .25 px ;
color : #305680 ;
}
& : hover span {
text-decoration : underline ;
}
}
. dlg-hero-full-desc {
margin-top : 12 px ;
font-size : 13 px ;
color : #4b5563 ;
line-height : 1 .6 ;
/ / Divider
. dlg-divider {
height : 1 px ;
background : rgba ( 0 , 0 , 0 , 0 .12 ) ;
}
/ / Meta section ( categories + use cases ) — Design : px-24 , py-16 , gap-24 , flex row
. dlg-meta {
display : flex ;
gap : 24 px ;
padding : 16 px 24 px ;
}
. dlg-meta-group {
display : flex ;
flex-direction : column ;
gap : 8 px ;
}
/ / Meta label — Design : 12px Medium , rgba ( 0 , 0 , 0 , 0 . 54 ) , tracking 0 . 25
. dlg-meta-label {
font-size : 12 px ;
font-weight : 500 ;
line-height : 16 px ;
letter-spacing : 0 .25 px ;
color : rgba ( 0 , 0 , 0 , 0 .54 ) ;
}
. dlg-meta-chips {
display : flex ;
flex-wrap : wrap ;
gap : 8 px ;
}
/ / Chip — Design : 12px Medium , h-24 , p-4 px-8 , rounded-4
. dlg-chip {
display : inline-flex ;
align-items : center ;
height : 24 px ;
padding : 4 px 8 px ;
border-radius : 4 px ;
font-size : 12 px ;
font-weight : 500 ;
line-height : 16 px ;
letter-spacing : 0 .25 px ;
white-space : nowrap ;
}
/ / Category chip — Design : bg rgba ( 16 , 108 , 200 , 0 . 06 ) , color # 106cc8
. dlg-chip-category {
background : rgba ( 16 , 108 , 200 , 0 .06 ) ;
color : #106cc8 ;
}
/ / Use case chip — Design : bg rgba ( 25 , 128 , 56 , 0 . 06 ) , color # 198038
. dlg-chip-usecase {
background : rgba ( 25 , 128 , 56 , 0 .06 ) ;
color : #198038 ;
}
/ / Readme content — Design : px-24 , pt-16 , pb-24 , gap-20
. dlg-readme {
font-size : 14 px ;
line-height : 24 px ;
letter-spacing : 0 .2 px ;
color : rgba ( 0 , 0 , 0 , 0 .76 ) ;
/ / Override markdown-view styles to match Design : px-24 , pt-16 , pb-24 , gap-20
: : ng-deep tb-markdown . tb-markdown-view {
padding : 16 px 24 px 24 px ;
/ / Headings : Design : 20px SemiBold , line-height 24 , tracking 0 . 1
/ / Override markdown-view ' s padding: 30px 32px 10px on direct headings
h1 , h2 , h3 , h4 , h5 , h6 {
font-size : 20 px ;
font-weight : 600 ;
line-height : 24 px ;
letter-spacing : 0 .1 px ;
color : rgba ( 0 , 0 , 0 , 0 .76 ) ;
margin : 0 ;
padding : 0 ;
}
/ / Direct child headings : override markdown-view ' s > h padding
> h1 , > h2 , > h3 , > h4 , > h5 , > h6 {
padding : 0 ;
margin-top : 20 px ;
}
/ / First heading : no top margin
> : first-child {
margin-top : 0 ;
}
h1 {
font-size : 24 px ;
line-height : 32 px ;
padding-right : 0 ;
}
/ / Paragraphs : Design : 14px Regular , tracking 0 . 2 , line-height 24
/ / Override markdown-view ' s font-size: 16px and padding
p {
font-size : 14 px ;
font-weight : 400 ;
line-height : 24 px ;
letter-spacing : 0 .2 px ;
color : rgba ( 0 , 0 , 0 , 0 .76 ) ;
margin : 0 ;
}
> p , > div {
padding-left : 0 ;
padding-right : 0 ;
}
p + p {
margin-top : 8 px ;
}
/ / Heading followed by content : 8px gap
h1 + p , h2 + p , h3 + p ,
h1 + ul , h2 + ul , h3 + ul ,
h1 + ol , h2 + ol , h3 + ol {
margin-top : 8 px ;
}
/ / Lists : Design : ms-21 per li , 14px , line-height 24 , no extra margin / padding
/ / Override markdown-view ' s padding-left: 62px, margin: 16px
ul , ol {
padding-left : 21 px ;
padding-right : 0 ;
margin : 0 ;
font-size : 14 px ;
line-height : 24 px ;
letter-spacing : 0 .2 px ;
color : rgba ( 0 , 0 , 0 , 0 .76 ) ;
/ / Override markdown-view ' s heading-after-list padding
+ h1 , + h2 , + h3 , + h4 , + h5 , + h6 {
padding-top : 0 ;
margin-top : 20 px ;
}
}
/ / List items : override markdown-view ' s padding-bottom: .75em
li {
padding-bottom : 0 ;
margin-bottom : 0 ;
line-height : 24 px ;
}
/ / Code blocks : keep smaller font
code : not ( [ class * = language- ] ) {
font-size : 14 px ;
}
}
}
/ / Image carousel
/ / Carousel ( solution templates )
. dlg-hero-carousel {
background : #f5f7fa ;
border-radius : 8 px ;
overflow : hidden ;
position : relative ;
height : 340 px ;
width : 100 % ;
height : 100 % ;
animation : dlg-carousel-fade-in 0 s 0 .3 s forwards ;
visibility : hidden ;
}
@keyframes dlg-carousel-fade-in {
to {
visibility : visible ;
}
to { visibility : visible ; }
}
. dlg-carousel {
height : 340 px ;
height : 100 % ;
: : ng-deep . carousel {
display : flex !important ;
flex-direction : column !important ;
> section {
flex : 1 ;
min-height : 0 ;
}
> section { flex : 1 ; min-height : 0 ; }
ul . indicators {
position : relative !important ;
@ -251,9 +377,7 @@
padding : 8 px 0 ;
}
. direction {
height : calc ( 100 % - 40 px ) !important ;
}
. direction { height : calc ( 100 % - 40 px ) !important ; }
}
. dlg-carousel-container {
@ -266,8 +390,7 @@
img {
position : absolute ;
top : 0 ;
left : 0 ;
inset : 0 ;
width : 100 % ;
height : 100 % ;
object-fit : contain ;
@ -281,9 +404,7 @@
color : rgba ( 0 , 0 , 0 , 0 .6 ) ;
background : rgba ( 255 , 255 , 255 , 0 .8 ) ;
& : hover {
background : rgba ( 255 , 255 , 255 , 0 .95 ) ;
}
& : hover { background : rgba ( 255 , 255 , 255 , 0 .95 ) ; }
}
. dlg-carousel-dot {
@ -294,250 +415,19 @@
margin : 0 3 px ;
transition : background 0 .2 s ;
& . active {
background : rgba ( 0 , 0 , 0 , 0 .6 ) ;
}
}
/ / Stats bar
. dlg-stats-bar {
display : flex ;
align-items : center ;
gap : 16 px ;
padding : 10 px 24 px ;
background : #f9fafb ;
font-size : 12 px ;
color : #6b7280 ;
border-bottom : 1 px solid #f3f4f6 ;
}
. dlg-stat {
display : flex ;
align-items : center ;
gap : 4 px ;
tb-icon {
font-size : 16 px ;
width : 16 px ;
height : 16 px ;
}
strong {
color : #1a1a2e ;
}
}
. dlg-pe-label {
display : inline-block ;
background : rgba ( 0 , 0 , 0 , 0 .6 ) ;
color : white ;
padding : 2 px 8 px ;
border-radius : 4 px ;
font-size : 11 px ;
font-weight : 600 ;
}
/ / Device preview
. dlg-device-preview {
display : flex ;
align-items : center ;
justify-content : center ;
min-height : 160 px ;
background : #f5f7fa ;
border-bottom : 1 px solid #f3f4f6 ;
img {
max-width : 100 % ;
max-height : 160 px ;
object-fit : contain ;
padding : 8 px ;
}
. tb-iot-hub-preview-placeholder tb-icon {
font-size : 64 px ;
width : 64 px ;
height : 64 px ;
opacity : 0 .3 ;
}
}
/ / Description block ( CF / RC )
. dlg-desc-block {
padding : 16 px 24 px ;
font-size : 13 px ;
color : #4b5563 ;
line-height : 1 .6 ;
border-bottom : 1 px solid #f3f4f6 ;
}
/ / Node chips ( Rule Chain )
. dlg-node-chips {
display : flex ;
flex-wrap : wrap ;
gap : 6 px ;
padding : 12 px 24 px ;
border-bottom : 1 px solid #f3f4f6 ;
}
. dlg-node-chip {
padding : 4 px 12 px ;
border-radius : 14 px ;
font-size : 12 px ;
font-weight : 500 ;
border : 1 px solid ;
& . dlg-node-enrichment { background : #f5fcd5 ; color : #4a7a00 ; border-color : #d4e6a0 ; }
& . dlg-node-filter { background : #fcfadb ; color : #7a7200 ; border-color : #e8e4a0 ; }
& . dlg-node-transformation { background : #ddf2fc ; color : #1a6d9e ; border-color : #a8d8f0 ; }
& . dlg-node-action { background : #fde3e2 ; color : #9e2a27 ; border-color : #f0b8b6 ; }
& . dlg-node-analytics { background : #d5f6f4 ; color : #0e7a74 ; border-color : #a0e0dc ; }
& . dlg-node-external { background : #fef1d8 ; color : #8a5d00 ; border-color : #f0d8a0 ; }
& . dlg-node-flow { background : #f3edfc ; color : #5b3a9e ; border-color : #d0c4f0 ; }
& . dlg-node-unknown { background : #f5f5f5 ; color : rgba ( 0 , 0 , 0 , 0 .54 ) ; border-color : #e0e0e0 ; }
}
. dlg-node-more {
font-size : 11 px ;
font-weight : 500 ;
color : rgba ( 0 , 0 , 0 , 0 .54 ) ;
align-self : center ;
}
/ / Categories & Use Cases
. dlg-meta-section {
display : flex ;
gap : 40 px ;
padding : 14 px 24 px ;
border-bottom : 1 px solid #e5e7eb ;
}
. dlg-meta-group {
display : flex ;
flex-direction : column ;
gap : 6 px ;
& . active { background : rgba ( 0 , 0 , 0 , 0 .6 ) ; }
}
. dlg-meta-label {
font-size : 10 px ;
font-weight : 600 ;
color : #9ca3af ;
text-transform : uppercase ;
letter-spacing : 0 .5 px ;
}
. dlg-meta-chips {
display : flex ;
flex-wrap : wrap ;
gap : 5 px ;
}
. dlg-meta-chip {
padding : 3 px 10 px ;
border-radius : 4 px ;
font-size : 11 px ;
font-weight : 500 ;
border : 1 px solid #e5e7eb ;
color : #4b5563 ;
background : #fff ;
}
/ / Scrollable body
. dlg-body {
overflow-y : auto ;
flex : 1 ;
min-height : 0 ;
}
. dlg-content {
padding : 0 ;
h3 {
font-size : 16 px ;
font-weight : 600 ;
color : #1a1a2e ;
margin : 20 px 0 8 px ;
}
}
/ / Footer
/ / Footer — Design : border-top rgba ( 0 , 0 , 0 , 0 . 12 ) , p-8 , flex row , justify-end , gap-8
. dlg-footer {
padding : 16 px 24 px ;
border-top : 1 px solid #e5e7eb ;
display : flex ;
flex-direction : column ;
align-items : center ;
gap : 10 px ;
gap : 8 px ;
padding : 8 px ;
border-top : 1 px solid rgba ( 0 , 0 , 0 , 0 .12 ) ;
flex-shrink : 0 ;
}
. dlg-footer-actions {
display : flex ;
justify-content : flex-end ;
gap : 12 px ;
width : 100 % ;
}
. dlg-outlined-btn {
padding : 12 px 24 px ;
border : 1 px solid #305680 ;
border-radius : 8 px ;
background : transparent ;
color : #305680 ;
font-size : 14 px ;
font-weight : 500 ;
cursor : pointer ;
transition : all 0 .15 s ;
margin-right : auto ;
& : hover {
background : #305680 ;
color : #fff ;
}
}
. dlg-install-btn {
padding : 12 px 24 px ;
border : none ;
border-radius : 8 px ;
background : #305680 ;
color : #fff ;
font-size : 14 px ;
font-weight : 500 ;
cursor : pointer ;
transition : background 0 .15 s ;
& : hover {
background : #264466 ;
}
}
. dlg-update-btn {
padding : 12 px 24 px ;
border : 1 px solid #e65100 ;
border-radius : 8 px ;
background : transparent ;
color : #e65100 ;
font-size : 14 px ;
font-weight : 500 ;
cursor : pointer ;
transition : all 0 .15 s ;
& : hover {
background : #e65100 ;
color : #fff ;
}
}
. dlg-creator-info {
font-size : 12 px ;
color : #9ca3af ;
}
. dlg-become-creator {
color : #305680 ;
cursor : pointer ;
& : hover {
text-decoration : underline ;
}
. dlg-footer-spacer {
flex : 1 ;
}
Igor Kulikov
6 months ago