/*/////////////////////////////////////////////////// ////////////////////XHIEH CHIN////////////////////// /////////////////////////////////////////////////*/ /*------------------------------------------------- -----------------------INDEX----------------------- --------------------------------------------------- 1--MODIFY ELEMENT-- body label:after ~mustfill Textarea ~fixed wigth Input 2--EFFECT-- .bubble_alert (** Place triagle on top ,left of box) .bubble_alert:before .shadow .shadow_btn 3--FONT-- @font-face #myTable .font_miniDanger ~red .font_miniInfo ~green .font_headTitle .font_menu 4--CUSTOM ELEMENT (fuc cant naming)-- .custom_input .hidden .txt_align_center .valign_bottom .rcorners .img_wrap (for place DELETE Bottom on top right conner) .previewImagePanel (Preveiw Image before Upload) .imageDisplay (Show image in Div that use above) (** Work with Boostrap's TAB MENU) .custom_aLinkTabMenu (set border color of tab's menu) .custom_col-borderLRB (set dash border around left-right-bottom of tab's content) .custom_input-group-marginTB (set margin of top/bottom) div.panelMarginB (set margin of bottom) .custom_has-error_outline 5--FOR HEAD,LOGIN PAGE,BG(index's page)-- .page-wrapper .self_logo .self_logo_login .bg_inDiv 6--HORIZONTAL NAV MENU (in header page)-- see full detail below page 7--VERTICAL NAV MENU (side menu / in header)-- see full detail below page 8--BACKGROUND's style IN Back Office (cr:itoffside.com)-- .subhead .page-header --------------------------------------------------------------*/ /*-----------------color--------------------------- --------------------------------------------------- #AD0059 (pink) (Xhieh Chin's theme) - active menu - line under header - Title of menu's page (class : page-header) #f3f3f3 (light gray) - side menu color #ddd (lightx2 gray) - line between menu - hover on menu #ccc (soft than lightgray) - border of input text #e6e6e6 (gray) - right border of side menu ---------------------------------------------------*/ /*////////////////////////////////////////// ---------MODIFY ELEMENT-------------- /////////////////////////////////////////*/ /*BODY---------------------------------------- ----------------------------------------------*/ body { /*background: url('/images/bg_suburb2_blur.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;*/ margin: 0; font-size: 14px; } /*LABEL------------------------------------- -------------------------------------------- - * must fill --------------------------------------------*/ /*label.mustfill:after{*/ .mustfill:after{ content: ' *'; color: red; } /*TEXTAREA------------------------------------- ----------------------------------------------- - fixed wigth -----------------------------------------------*/ textarea.customTextarea { resize:vertical; border-radius: 0; height: 80px; } /*INPUT------------------------------------------ ------------------------------------------------- -custom input element -------------------------------------------------*/ input[type=text] , input[type=password] { border : 1px solid #ccc; border-radius : 0; background-color: white; color :black; } input.borderless{ border:none; background-color:transparent; } /*//////////////////////////////////// -------------#EFFECT------------------ ////////////////////////////////////*/ /*------------------------------------------ BUBBLE ALERT ,TOP ANGULARITY cr.jsfiddle.net/chriscoyier/taaGc/1 css-tricks.com/snippets/css/css-triangle ----------------------------------------------*/ .bubble_alert_top { position : absolute; left : auto; z-index : 2; padding : 3px; width : auto; background-color: red; border : 2px solid red; border-radius : 3px; color : white; text-align : center; } .bubble_alert_top:before { content : ""; position : absolute; top : -7px; left : auto; border-left : 10px solid transparent; /*mark a angularity*/ border-right : 10px solid transparent; /*mark a angularity*/ border-bottom: 10px solid red; } /*------------------------------------------ BUBBLE ALERT ,LEFT ANGULARITY -------------------------------------------*/ .bubble_alert_left { position : absolute; left : auto; z-index : 2; margin-left : 7px; /*edit, if angularity position change*/ padding : 6px; width : auto;/*100%;*/ background-color: rgba(0,0,0,0.8); border-radius : 0; color : white; text-align : center; } .bubble_alert_left:before { content : ""; position : absolute; left :-7px; border-top : 8px solid transparent; /*mark a angularity*/ border-bottom: 8px solid transparent; /*mark a angularity*/ border-right : 8px solid black; } /*SHADOW--------------------------------------- -----------------------------------------------*/ .shadow { /*box-shadow: 10px 10px 5px #888;*/ -moz-box-shadow : 0 5px 10px grey; -webkit-box-shadow: 0 5px 10px grey; box-shadow : 0 5px 10px grey; } /*SHADOW for Button---------------------------------- -----------------------------------------------------*/ .shadow_btn { -moz-box-shadow : 0 3px 5px grey; -webkit-box-shadow: 0 3px 5px grey; box-shadow : 0 3px 5px grey; /*box-shadow: 0 1px 3px grey inset;*/ } /*////////////////////////////// -------------FONT-------------- //////////////////////////////*/ /*My font-------------------------------- -----------------------------------------*/ @font-face{ font-family:myFont; src : url(fonts/supermarket.ttf); } /*In table--------------------------- -------------------------------------*/ #myTable { font-size: 0.9em; } /*Notify:RED------------------------- ------------------------------------*/ .font_miniDanger{ font-family: tahoma; color :red; font-size :10pt; font-weight: bold; /*float: right;*/ } /*Notify:GREEN------------------------ --------------------------------------*/ .font_miniInfo{ font-family: tahoma; color :green; font-size :10pt; } /*Notify:LIGHTBLUE---------------------- ---------------------------------------*/ .font_miniNotify{ font-family: tahoma; color : #31B0D5; font-size :10pt; font-weight: bold; } /*Head Title------------------------------- -------------------------------------------*/ .font_headTitle { font-family : myFont; color :white; /*rgba(255,0,0,0.7) #EA7B30; */ /*font-size :30pt;*/ font-size :2.85em; vertical-align:middle; /*text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;*/ /*text-shadow: 0px 2px 3px gray;*/ /*#666*/ } /*Use in Header------------------------------ ---------------------------------------------*/ .font_menu { /*#in Header*/ font-family: myFont; font-weight: bold; font-size :1.14em; } /*//////////////////////////////./////////////////// --------#CUSTOM Element (fuc cant naming)----------- ///////////////////////////////////////////////////*/ /*Hidden------------------------------------------- ---------------------------------------------------*/ .hidden{ display: none; } /*Align:Center--------------------------------------- -----------------------------------------------------*/ .txt_align_center { text-align:center; } /*Vertical Align:Bottom-------------------------------- ------------------------------------------------------- - 1st for work in DIV - take element in this DIV to bottom ------------------------------------------------------*/ .valign_bottom { display: table-cell; vertical-align: bottom; } /*.rcorners { border-radius: 5px; background-color: red; padding: 15px; }*/ /*_for place DELETE Bottom (right-top) on image///////////////////////// - use:
×
- work with custom-close class - cr:by dfsq-stackoverflow.com ----------------------------------------------------------------------------*/ .img_wrap { position: relative; display : inline-block; margin: 5px; } .img_closebtn { position: absolute; top : -5px; right : -5px; color: red; opacity: 0.6; /*z-index : 6;*/ } /*Preveiw Image before Upload--------------------- -------------------------------------------------- ------------------------------------------------*/ div.previewImagePanel { /*display :block;*/ border : 1px dashed lightgray; background-color: white;/*#F0F0F0;*/ width : 100%; height : 105px; margin : 3px; padding : 3px; text-align : center; overflow : auto; } img.imageDisplay{ display: inline; width : 100px; } .noPreviewText:after{ content : 'ไม่มีรูปตัวอย่าง...'; color : gray; line-height: 92px; } /*div.noPreview{ background-image: url("images/preview_v3.png"); width:55%; }*/ /*-Boostrap's Tab menu-------------------------- ------------------------------------------------ set border for not active menu ------------------------------------------------*/ ul li .custom_aLinkTabMenu { border-top-color :lightgray; border-left-color :lightgray; border-right-color:lightgray; } /*------------------------------------------------ work with Boostrap's Tab menu in use with class:COL; ------------------------------------------------*/ div.custom_col-borderLRB { border-left : 1px dashed lightgray; border-right : 1px dashed lightgray; border-bottom: 1px dashed lightgray; } /*------------------------------------------------ work with Boostrap's Tab menu in use with class:input-group; ------------------------------------------------*/ div.custom_input-group-marginTB { margin-top : 15px; margin-bottom: 15px; } /*------------------------------------------------ work with Boostrap's Tab menu div Panel for add more element such as input text ------------------------------------------------*/ div.panelMarginB{ margin-bottom: 15px; } /*------------------------------------------------ for NOTIFY ERROR OUTLINE when submit form in case can't use has-error class ------------------------------------------------*/ .custom_has-error_outline{ outline: 1px solid #C42E2D; } /*--------------------------------------------------------------------------- for: NOTIFY ERROR BOX when submit form work:with Boostrap's Alert use: --jquery part-- show error : $('#x').removeClass('hidden').fadeIn('slow') close : $('#x').fadeOut('slow') ------------------------------------------------------------------------------*/ .errorNotifyBox{ position:absolute; top :-50px; right : 0px; opacity : 0.9 } .custom-close{ position:absolute; top :0px; right :5px } /*/////////////////////////////////////////////////// -----------------FOR Head,Login page---------------- work in header page that have nav menu , logo ////////////////////////////////////////////////////*/ /*#Work with nav bar---------------------------------- ------------------------------------------------------ - work with Side menu ------------------------------------------------------*/ .page-wrapper { padding-left: 17%; padding-top : 10px; } /*lOGO in header-------------------------------------- ------------------------------------------------------*/ .self_logo{ padding : 3px; background-color : black; border-bottom : 2px solid #AD0059; /*#AD0059=pink , #009999=green,e7e7e7*/ background : url('../images/bg2.jpg') fixed; /*background : url('../images/bg3.jpg') fixed;*/ background-position:50% 30%; /*col row*/ } /*lOGO in Login form------------------------------------------- ---------------------------------------------------------------*/ .self_logo_login{ padding: 3px; border-bottom : 2px solid #AD0059; } /*BG IMG in Index's page--------------------------------------- ---------------------------------------------------------------*/ .bg_inDiv{ background: url('../images/bg_home_wCredir.jpg') no-repeat center; height:400px; width: 100% } /*////////////////////////////////////////// HORIZONTAL NAV MENU (in header page) //////////////////////////////////////////*/ /*Specified ID Element for be parent of nav menu ----------------- ------------------------------------------------------------------*/ #myNavbarControl { margin : 0; background-color: #f3f3f3; border-radius : 0; border-top : 0; border-right : 0; } /*All li (child only)..------------------------------------------- ------------------------------------------------------------------ #..under class 'dropdown-menu' except first child -----------------------------------------------------------------*/ #myNavbarControl ul.dropdown-menu > li:not(:first-child) { border-top: 1px solid #e7e7e7; } /*A:LINK------------------------------------------------------- ---------------------------------------------------------------*/ #myNavbarControl a:link ,#myNavbarVertical a:link ,#myNavbarVertical a:visited { color: black; } /*A:HOVER------------------------------------------------------- ---------------------------------------------------------------*/ #myNavbar a:hover ,#myNavbarVertical a:hover { background-color: #ddd; } /*A:LINK of Active menu------------------------------------------ ---------------------------------------------------------------*/ #myNavbar li.active > a:link ,#myNavbarVertical li.active > a:link ,#myNavbarVertical li.active > a:visited { color : white; /*background-color: #009999;*/ background-color: #AD0059; /*pink*/ } /*//////////////////////////////////////////////// VERTICAL NAV MENU (side menu / in header) /////////////////////////////////////////////////*/ /*DIV:Specified ID Element for be parent of nav menu ------------ ---------------------------------------------------------------*/ div#myNavbarVertical{ width : 17%; /* ***Related to .page-wrapper */ background-color: #f3f3f3; position : absolute; height : 100%; z-index : 3; border-right : 1px solid #e6e6e6; } /*Div:LI ------------------------------------------------------- ---------------------------------------------------------------*/ div#myNavbarVertical li{ border-bottom: 1px solid #ddd; } /*UL Collapse for Sub menu------------------------------------- ---------------------------------------------------------------*/ div#myNavbarVertical ul.customCollapseMenu{ list-style : none; padding : 0 ; text-indent: 15px; } /*LI---------------------------------*/ div#myNavbarVertical ul.customCollapseMenu li{ line-height:30px; } /*LI:Hover---------------------------------*/ div#myNavbarVertical ul.customCollapseMenu li:hover{ background-color: #ddd; } /*LI:hover > A:Link----------------------------------*/ div#myNavbarVertical ul.customCollapseMenu li:hover > a:link{ display : block; text-decoration: none; } /*LI:active > A:Link----------------------------------*/ div#myNavbarVertical ul.customCollapseMenu li.active > a:link{ display : block; color : black; background-color: #ddd; } /*UL Dropdown for Sub menu------------------------------------- ---------------------------------------------------------------*/ div#myNavbarVertical ul.customDropdownMenu{ top :0; left :100%; height :400px; overflow:auto; /*opacity : 0.5;*/ /*z-index: 6;*/ background-color: rgba(255,255,255,0.9); } div#myNavbarVertical ul.customDropdownMenu li.active > a:visited { background-color: #ddd; color:black; } /*///////////////////////////////////////////////////////// BACKGROUND's style IN Back Office (cr:itoffside.com) ///////////////////////////////////////////////////////////*/ /*Set BACKGROUND's style..------------------------------------- --------------------------------------------------------------- - of Process Button (such as: add/up/refresh) - use in back office - (cr:itoffside.com) --------------------------------------------------------------*/ .subhead { background-color: #ededed; background-image: linear-gradient(to bottom, #ffffff, #ededed); color : #0c192e; border-bottom : 1px solid #d3d3d3; margin-bottom : 10px; padding : 0 0 10px 10px; /*T->R->B->L*/ /*text-shadow: 0 1px 0 #fff; float: right;*/ } /*Set BACKGROUND's style..------------------------------------- --------------------------------------------------------------- - for title in each page - use in back office - (cr:itoffside.com) ---------------------------------------------------------------*/ .page-header { border-bottom : 1px solid #EEEEEE; margin : 10px 0 20px; padding-bottom: 5px; color : #AD0059 } /*for button add new ///////////////////////*/ /*.new-data{ width : 148px; text-align: center; } */ /*for SEARCH FORM //////////////////////////---*/ /*div.search-form { padding : 10px; margin : 10px 0; background: #eee; }*/ /*for text input Phone (notify) ////////////////////---*/ /*span#spanFeedback_txtCon_phone { position: absolute; right :15px; top :25px }