principles-ui-components/UI_Component/css/TextItem.css

Supporting UI controller for Tizen TV web application, which developed base on React Framework.

/*container*/
.tileContainer{
    position: relative;
    overflow: visible;
}

.focus-shadow{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    bottom: 0;
    border-style:solid;
    margin:-11px -6px -13px -6px;
    /*border-color:rgba(2, 2, 2, 0.3);*/
    border-width: 20px 14px 20px 14px;
    border-image:url(images/res_components/shadowbg/r_highlight_bg_focus_9patch.png) 20 14 20 14 fill stretch;
}

.focus-shadow-hc{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    bottom: 0;
    border-style:solid;
    margin:-11px -6px -13px -6px;
    border-width: 20px 14px 20px 14px;
   border-image:url(images/res_components/shadowbg/c_imageitem_highlight_bg_focus_9patch.png) 20 14 20 14 fill stretch;
}

/*icon bg*/
.icon-bg{
    margin-left: 20px;
    background-color: rgba(0,0,0,0.1);
    border-radius: 3px;
}

/*icon image*/
.icon-image{
    margin-top: 1px;
    margin-left: 1px;
    border-radius: 3px;
}

/*title2 One600, 30px, #262626, 100%*/
.title2{
    position: absolute;
    /*left: 80px;
    width: 195px;*/
    height: 48px;
    line-height: 48px;
    font-size: 30px;
    font-family : SamsungOneGui_600;
    color: #262626;
    text-align: left;
    vertical-align: middle;
    overflow:visible;
    text-overflow: ellipsis;
}

.title2 > .focus-title2{
    color: #000000;
}

.title >2 .focus-title2-enlarge{
    font-size: 36px;
    color: #000000;
}

.title2 span{
	white-space: nowrap;
}

.focus-title2 span{
    display: inline-block;
    text-indent: 0;
    white-space: nowrap;
}

.focus-title2 div {
  display: block;
  height: 48px;
  position: absolute;
  overflow: hidden;
}

.focus-title2-enlarge div {
  display: block;
  height: 48px;
  position: absolute;
  overflow: hidden;
}

/*body2*/
.body2{
    position: absolute;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-family : SamsungOneGui_400;
    color: #262626;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

.body2 > .focus-body2{
    color: #000000;
}

.body2 > .focus-body2-enlarge {
    font-size: 24px;
}

.body2 span{
	white-space: nowrap;
}

.focus-body2 span{
    display: inline-block;
    text-indent: 0;
    white-space: nowrap;
}

.focus-body2 div {
  display: block;
  height: 40px;
  position: absolute;
  overflow: hidden;
}

.focus-body2-enlarge div {
  display: block;
  height: 40px;
  position: absolute;
  overflow: hidden;
}

/*body3 One600, 24px, #262626, 90%*/
.body3{
    position: absolute;
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    font-family : SamsungOneGui_600;
    color: #262626;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
}

.body3 > .focus-body3{
    color: #000000;
}

.body3 > .focus-body3-enlarge {
    font-size: 28px;
}

.body3 span{
	white-space: nowrap;
}

.focus-body3 span{
    display: inline-block;
    text-indent: 0;
    white-space: nowrap;
}

.focus-body3 div {
  display: block;
  height: 34px;
  position: absolute;
  overflow: hidden;
}

.focus-body3-enlarge div {
  display: block;
  height: 34px;
  position: absolute;
  overflow: hidden;
}

/*caption One400, 20px, #262626, 80%*/
.caption{
    position: absolute;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    font-family : SamsungOneGui_400;
    color: #262626;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

.caption > .focus-caption{
    color: #000000;
}

.caption > .focus-caption-enlarge {
    font-size: 24px;
}

.caption span{
	white-space: nowrap;
}

.focus-caption span{
    display: inline-block;
    text-indent: 0;
    white-space: nowrap;
}

.focus-caption div {
  display: block;
  height: 28px;
  position: absolute;
  overflow: hidden;
}

.focus-caption-enlarge div {
  display: block;
  height: 28px;
  position: absolute;
  overflow: hidden;
}