vdesign

by sachin92k

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<div class="ui container" style="background:#f3f3f3;">

<div class="ui grey inverted attached menu">
  <a class="item">
    User Stats
  </a>
  <a class="item">
    User Status
  </a>
  <a class="item">
    Time Sheet
  </a>
  <a class="item">
    Days Status
  </a>
  <a class="item">
    User multiple day status
  </a>
  <a class="item">
    User CallBack Holds 
  </a>
  <a class="item">
    Admin changes to this record
  </a>
</div>

<div class="ui basic segment">
<div class="ui medium blue header">
  <i class="user icon"></i>
  <div class="content">
    10011
    <div class="sub header">Modify User: 10011</div>
  </div>
</div>
<button class="ui red button" style="position: absolute;right: 0;top: calc(50% - 20px);margin-right: 20px;">
  <i class="trash icon"></i>
  Delete user
</button>
</div>

<div class="ui attached inverted blue segment">
	Last Login Info: 2020-04-29 14:27:50 | 49.205.176.152
</div>

<form class="ui form">
<table style="width:100%;">
   	<tbody>
      <tr>
		<td class="label two" align="right" colspan=1><font class="body_text">Password: </font></td>
		<td align="left" colspan=3 class="input two"><input type="text" name="title" id="title" class="cust_form" value="eti1001"></td>
		<td class="helpfile" align="left"><i class="question circle blue icon"></i></td>
		<td class="label two" align="right" colspan=1><font class="body_text">Force Change Password: </font></td>
		<td align="left" colspan=3 class="input two">
			<select name="gender_list" class="cust_form ui dropdown" id="gender_list">
			<option value="U">Y</option>
			<option value="M">N</option>
			</select>
		</td>
		<td class="helpfile" align="left"><i class="question circle blue icon"></i></td>
      </tr>
      <tr>
		<td class="label two" align="right" colspan=1><font...

CSS

.mytable{
    border-collapse: collapse;
    border: 1px solid #bcbdbd;
}

.mytable tr:first-child td{
  border-top: 1px solid #bcbdbd;
}

.mytable tr:last-child td{
  border-bottom: 1px solid #bcbdbd;
}

.mytable td.collapsing {
  width: 1px;
  white-space: nowrap;
}

.borderless, .mytable .borderless td, .mytable .borderless tr:first-child td, .mytable .borderless tr:last-child td{
  border: 0;
}

.mytable.borderless, .mytable.borderless td, .mytable.borderless td, .mytable.borderless td, .mytable.borderless tr:first-child td, .mytable.borderless tr:last-child td{
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.center.aligned{
  text-align:center !important;
}

.right.aligned{
  text-align:right !important;
}

.left.aligned{
  text-align:left !important;
}

.top.aligned{
  vertical-align:top !important;
}

.bottom.aligned{
  vertical-align:bottom !important;
}

.middle.aligned{
  vertical-align:middle !important;
}

.ui.basic.segment, .ui.grid{
  margin: 0px !important;
}

.blinking{
  animation:blinkingText 0.8s infinite;
}

@keyframes blinkingText{
  0%  { color: #21ba45; }
  49% { color: #21ba45; }
  50% { color: #db2828; }
  99% { color: #db2828; }
  100%{ color: #db2828; }
}

#MainTable > thead > tr > td, #MainTable > thead > tr > th, #MainTable > tbody > tr > td{
  border:0 !important;
}

.newborderless > thead > tr > td, .newborderless > thead > tr > th, .newborderless > tbody > tr > td{
  border:0 !important;
  padding: 2px !important;
  margin: 0 !important;
}

.helpfile{
	width:20px;
}

.label.two{
	/*width: 180px;*/
}

.input.two{
	width: 260px;
}

.input.four{
	width: 80px;
}
 a.link{
 	cursor: pointer;
 	text-decoration: underline;
 }
table tbody tr td{
	min-height: 150px !important;
}