refactor segment css

apps/segment/segment.css

@@ -0,0 +1,268 @@
+input {
+ /* required to properly style form
+    elements on WebKit based browsers  */
+    -webkit-appearance: none;
+
+    border: 1px solid #333;
+    margin: 0;
+
+    font-family: inherit;
+    font-size: 90%;
+
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+input:focus:invalid {
+    box-shadow: none;
+}
+
+@-webkit-keyframes blinker {
+    50% {
+    opacity: 0;
+    }
+}
+
+.blink{
+    animation: blinker 1s linear infinite;
+}
+
+.error{
+    color: yellow;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 140px;
+    height: 26px;
+    border: 1px solid black;
+}
+
+.switch input {display:none;}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: #365F9C;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(106px);
+    -ms-transform: translateX(26px);
+    transform: translateX(106px);
+}
+
+.slider:after
+{
+    content:'Upload';
+    display: block;
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 54%;
+    font-size: 12px;
+    font-family: Verdana, sans-serif;
+}
+
+input:checked + .slider:after
+{
+    content:'Link';
+    left: 35%;
+}
+
+.checktrue {
+    display: none;
+}
+#mtable {
+    table-layout: fixed;
+    width: 100%;
+    border-collapse: collapse;
+}
+#mtable thead th:nth-child(1) {
+    width: 15%;
+}
+
+#mtable thead th:nth-child(2) {
+    width: 30%;
+}
+
+#mtable thead th:nth-child(3) {
+    width: 15%;
+}
+
+#mtable thead th:nth-child(4) {
+    width: 15%;
+}
+
+#mtable thead th:nth-child(4) {
+    width: 25%;
+}
+
+th {
+    padding: 5px;
+}
+
+td {
+    padding: 10px;
+    text-align: center;
+}
+
+thead, tfoot {
+    background: #d5dbe5;
+}
+
+ul.disabled {
+    pointer-events: none;
+
+    /* for "disabled" effect */
+    opacity: 0.5;
+    background: #CCC;
+}
+
+input[type="radio"] {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    /*display: inline;*/
+    /*outline: none;*/
+    /*border: none;*/
+    /*height: 25px;*/
+    line-height: 25px;
+    font-size: 16px;
+    padding: 5px ;
+}
+input[type='radio']:checked {
+    background: #365F9C;
+}
+
+
+ul.disabled {
+    pointer-events: none;
+
+    /* for "disabled" effect */
+    opacity: 0.5;
+    background: #CCC;
+}
+
+.form-style{
+    color: #464544;
+    font-size: 14px;
+    max-width:400px;
+    margin:10px auto;
+    background:#fff;
+    border-radius:2px;
+    padding:10px;
+    /*font-family: Georgia, "Times New Roman", Times, serif;*/
+}
+.form-style #mg{
+    margin-top: 20px;
+    text-align: center;
+}
+.form-style ul{
+    list-style:none;
+    padding:0;
+    margin:0;
+}
+.form-style li{
+    display: block;
+    padding: 5px;
+    border:1px solid #DDDDDD;
+    margin-bottom: 20px;
+    border-radius: 3px;
+}
+.form-style li:last-child{
+    border:none;
+    margin-bottom: 0px;
+    text-align: center;
+}
+.form-style li > label{
+    display: block;
+    float: left;
+    margin-top: -19px;
+    background: #FFFFFF;
+    height: 14px;
+    padding: 2px 5px 2px 5px;
+    color: #464544;
+    font-size: 14px;
+    overflow: hidden;
+    /*font-family: Arial, Helvetica, sans-serif;*/
+}
+.form-style input[type="text"],
+.form-style input[type="date"],
+.form-style input[type="datetime"],
+.form-style input[type="number"],
+.form-style input[type="url"],
+.form-style textarea,
+.form-style select
+{
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    width: 100%;
+    display: block;
+    outline: none;
+    border: 1px solid black;
+    height: 25px;
+    line-height: 25px;
+    font-size: 16px;
+    padding: 0;
+    /*font-family: Georgia, "Times New Roman", Times, serif;*/
+}
+.form-style li > span{
+    background: #F3F3F3;
+    display: block;
+    padding: 3px;
+    margin: 0 -9px -9px -9px;
+    text-align: center;
+    color: rgb(104, 94, 94);
+    /*font-family: Arial, Helvetica, sans-serif;*/
+    font-size: 11px;
+}
+.form-style textarea{
+    resize:none;
+}
+.form-style input[type="submit"],
+.form-style input[type="button"]{
+    background: #2147FF;
+    border: none;
+    padding: 10px 20px 10px 20px;
+    border-bottom: 3px solid #5994FF;
+    border-radius: 3px;
+    color: #D2E2FF;
+}
+.form-style input[type="submit"]:hover,
+.form-style input[type="button"]:hover{
+    background: #6B9FFF;
+    color:#fff;
+}
+#upload_panel .modalbox-content{
+    width: 30%;
+}
+body{
+    color: black;
+}