FSN#34307 type button, veel restyling, inputs/selects etc even breed, buttons groter enfin: weer even wat moderner

svn path=/Website/trunk/; revision=27147
This commit is contained in:
Peter Feij
2015-11-26 20:04:35 +00:00
parent e147f7c620
commit f1ac80e9d2
2 changed files with 103 additions and 90 deletions

View File

@@ -98,10 +98,10 @@ th {
}
#logintable #buttons ul li,
#logintable #buttons ul li a {
border-radius:4px;
border-radius: 4px;
font-weight: 500;
font-size: 13px;
margin-left:0px;
margin-left: 0px;
padding: 6px 10px 7px 11px;
border: 0px;
}
@@ -174,7 +174,8 @@ input, textarea, select {
font-size: 1em;
padding: 2px 2px 2px 2px;
margin: 0;
border:1px solid #ccc;
border: 1px solid #ccc;
border-radius: 2px;
background-color: #FFFDF6;
}
td, th {
@@ -185,7 +186,16 @@ td, th {
vertical-align: top;
font-weight: normal;
}
/* Safari is ugly, dan maar zo voor iedereen */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url(../appl/pictures/togglerdown.png) ;
background-repeat: no-repeat;
background-position: right 6px center;
}
select::-ms-expand { display: none;}
input[type=text], select {
background-color: #FFFDF6;
}
@@ -230,12 +240,6 @@ input[readonly]:hover, select[readonly]:hover, textarea[readonly]:hover {
background-color: ==backgroundcolor==;
}
/* de roomselector is een readonly input */
#sel_room {
border:0px solid #ccc;
min-width: 202px;
font-weight: normal;
}
/* label tag = de tekst */
label {
color: #444;
@@ -345,9 +349,6 @@ th {
padding-right: 4px;
}
#productsearch {
text-align: left;
border: 1px solid #333;
font-weight: bold;
}
#headerdate {
@@ -595,7 +596,7 @@ div.widget {
border-radius: 4px;
}
body.modal .fcltblock {
background-color:#F1F1F1;
background-color: ==backgroundcolor==;
border:1px solid #eee;
}
@@ -914,7 +915,6 @@ padding-right: 15px!important;
#buttons {
float:right;
text-align:right;
margin-right:10px;
margin-left:5px;
margin-bottom:5px;
margin-top:0px;
@@ -940,6 +940,8 @@ padding-right: 15px!important;
#buttons ul li,
#buttons ul li a,
.mv,
input[type=button],
input[type=text].button,
input.button,
span.button {
cursor: pointer;
@@ -947,13 +949,15 @@ span.button {
color: ==buttoncolor==;
background-color:==buttonbackgroundcolor==;
text-align: center;
border-radius:4px;
border-radius: 2px;
font-size: 13px;
font-weight: normal;
margin: 1px;
border: 0px;
}
input.button:hover,
input[type=button]:hover,
input[type=text].button:hover,
span.button:hover {
color: ==buttonhovercolor==;
background-color:==buttonhoverbackgroundcolor==;
@@ -1145,12 +1149,12 @@ label.cadselect:hover,
width: 16px;
height: 16px;
background-image: url(../appl/pictures/fileopen.png);
background-repeat: no-repeat;
background-color: transparent !important;
}
.bijlage, .bijlage1, .materiaal {
background-repeat: no-repeat;
background-position: 6px;
padding: 4px 0 4px 25px;
width: 140px;
text-align: left;
}
.bijlage1 {
@@ -1177,7 +1181,10 @@ label.cadselect:hover,
background-repeat: no-repeat;
background-position: 6px;
}
.fldr_objs{
background: none;
border: 0;
}
.frametab {
width: 100%;
padding: 0px!important;
@@ -1278,12 +1285,12 @@ td.rsfooter
/* Voor fin facturen */
.withinmargin td {
background: linear-gradient(to bottom, rgba(198, 239, 206, 1), rgba(198, 239, 206, 0) 80%); /*#C6EFCE*/
background-color: #C6EFCE;
background-color: #C6EFCE\9;
color: #006100;
}
.outsidemargin td {
background: linear-gradient(to bottom, rgba(255, 199, 207, 1), rgba(255, 199, 207, 0) 80%); /*#FFC7CE*/
background-color: #FFC7CE;
background: linear-gradient(to top, rgba(255, 199, 207, 0.6), rgba(255, 199, 207, 0.5) 50%); /*#FFC7CE*/
background-color: #FFC7CE\9; /* IE 8 and below */
color: #9C0006;
}
tr.rejected td {
@@ -1394,12 +1401,12 @@ span.expired2 {
.cntrappel td, .expired1 td {
background: -webkit-linear-gradient(top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.4) 80%); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.4) 80%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.4) 50%); /* Standard syntax */
background: linear-gradient(to top, rgba(255, 254, 156, 0.6), rgba(255, 254, 156, 0.4) 50%); /* Standard syntax */
background-color: #FFEB9C\9; /* IE 8 and below */
color: #9C6500;
}
.cntopzeg td, .expired2 td {
background: linear-gradient(to bottom, rgba(255, 199, 207, 1), rgba(255, 199, 207, 0.4) 50%); /*#FFC7CE*/
background: linear-gradient(to top, rgba(255, 199, 207, 0.6), rgba(255, 199, 207, 0.5) 50%); /*#FFC7CE*/
background-color: #FFC7CE\9; /* IE 8 and below */
color: #9C0006;
}
@@ -1573,13 +1580,12 @@ border-color: #ddd;
#ph_gotoFgraph { text-decoration: underline; cursor: pointer; background-color: transparent; }
/* pas op: option's css kent alleen background-color by IE */
/* IE6 wil ze apart hebben */
* html .required, .required, .required:focus, input.required
{
background-color: rgba(252, 247, 222, 0.7);
background-color: #fcf7de\9; /* IE8 */
border-left:2px solid #ee5f5b;
}
/* field colors for required fields */
* html .required,
.required,
.required:focus,
input.required,
input[type=text].required,
input[type=password].required,
select.required, option.required,
@@ -1587,38 +1593,29 @@ textarea.required
{
background-color: rgba(252, 247, 222, 0.7);
background-color: #fcf7de\9; /* IE8 */
border-left:2px solid #ee5f5b;
border: 1px solid ==labelbackgroundcolor==;
}
input[type=button].required
/* but maintain the button properties even if required */
input[type=button].required, input[type=text].button.required
{
color: ==buttoncolor==;
background-color:==buttonbackgroundcolor==;
border-left:2px solid #ee5f5b;
border: 1px solid ==labelbackgroundcolor==;
}
input[type=button].required:hover
input[type=button].required:hover, input[type=text].button.required:hover
{
color: ==buttonhovercolor==;
background-color:==buttonhoverbackgroundcolor==;
}
/* IE6 wil ze apart hebben */
* html .missing, missing {
background-color:#ff5050;
}
* html .missing,
missing,
input[type=text].required.missing,
input[type=password].required.missing,
select.required.missing, option.required.missing,
textarea.required.missing,
.required.missing {
background-color:#ff5050;
}
input[type=text].button.required
{
background-color:==buttonbackgroundcolor==;
border-left:2px solid #ee5f5b;
background-color: #ff5050;
color: #fff;
}
input.number.bad, input.float.bad, input.currency.bad, input.flddate.bad, input.fldtime.bad,input.fldflexC.bad,input.fldflexC50.bad {
@@ -2061,7 +2058,7 @@ select.flddienstfilt { /* de filter van diensten in mldopdr*/
.fldnotresponsive {width: 218px !important;}
table#vis_tab .fldflexC {width: 218px !important;}
table#vis_tab .suggest {width: 218px !important;}
table#vis_tab .suggest, table#vis_tab .suggestBusy{width: 218px !important;}
.fld, .fldkp,
.fldreg, .flddis, .fldloc, .fldbld, .fldflr, .fldroom, .fldworklocation, .fldwpl, .fldpers, .fldcontactpers, .flduitvoerende,
@@ -2069,12 +2066,12 @@ table#vis_tab .suggest {width: 218px !important;}
.fldcontract, .fldcntnr, .fldorderby, .fldname,
.fldoms, .fldr_objs,
.fldsrtgroup, .fldsrtdeel, .fldsrtdeelmulti, .flditem, .fldsupplier, .fldgroupbysec, .fldordernum,
.mldstatusmulti, .opdrstatusmulti, .fldgastheer, .flddiscript, .fldmantel, .fldresroom, .fldresdesc,
.fldobjsort, .fldmsgurl, .fldmsggroup, .fldmelder, .fldflex, .fldprio, .fldsrt,
.mldstatusmulti, .opdrstatusmulti, .fldgastheer, .flddiscript, .fldmantel, .fldresdesc,
.fldobjsort, .fldmsgurl, .fldmsggroup, .fldmelder, .fldflex, .fldsrt,
.fldnewvalue, .fldmldobjs, .flddebtor, .fldfintype, .fldfinstatus, .fldreferentie, .fldfinboekm, .fldfincostsrt,
.fldusrfilter, .flddienst, .fldmld_adres, .fldbld_srtkey, .fldter_srkey, .fldroom_srt, .flddel_address, .flddeliveryAddr, #flddelivery_place,
.fldcntmeldkey, .fldsrttype, .fldordernr, .flddept, .fldmld_adrkey, .fldfac_prkey, .fldprs_srtkey, .fldselect, .fldbudgeth, .fldkstplgr,
.fldkpn_module, .fldkpn_grpkey, .fldmld_adrlkey, .fldmld_adrfkey, .flddeptDesc, .flddeptName, .fldfav, .fldemails, .fldsubject, .fldcnt_contprs, .fldcnt_bdrkey,
.fldusrfilter, .flddienst, .fldmld_adres, .fldbld_srtkey, .fldter_srkey, .fldroom_srt, .flddel_address, #flddelivery_place,
.fldcntmeldkey, .fldsrttype, .fldordernr, .flddept, .fldfac_prkey, .fldprs_srtkey, .fldselect, .fldbudgeth, .fldkstplgr,
.fldkpn_module, .fldkpn_grpkey, .fldmld_adrkey, .flddeptDesc, .flddeptName, .fldfav, .fldemails, .fldsubject, .fldcnt_contprs, .fldcnt_bdrkey,
.fldmgroep, .fldmmodule, .fldprs_dnstkey, .fldprs_bdrkey, .fldlocs, .fldblds, .fldgroup,
.fldscenario, .fldmoverequest, .fldprjstatus, .flddaydate, .fldactivity, .fldplace, .fldstopplace, .fldprincipal, .fldcategorie, .fldonderwerp,
.fldsel_controlemode, .fldsel_srtcontrole, .fldartgroep, .fldbesitem, .fldmailto, .fldusrtabkey, .fldmodule, .fldfac_name, .fldfac_path, .fldfac_query,
@@ -2086,12 +2083,12 @@ table#vis_tab .suggest {width: 218px !important;}
/* ouderwetse listboxes */
select, .fldbedrijf, .fldfunc, .fldact, .fldsortout, .fldgroupby, .fldbdr_key, .fldopstel, .fldsel_activity,
select.flddienst, select.fldcontract, .fldt_opdr, .fldaltgroep, .fldaltfunctie, .fldBES_srtgroup,
select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup, .fldprio, .flddeliveryAddr, .fldmld_adrlkey, .fldmld_adrfkey
{
width: 222px;
width: 224px;
}
.suggest {
background-position: right center;
background-position: right 4px center;
}
.fldflex, .fldflexC, .fldflexC50, .fldflexX, .fldflexL, .fldflexQ, .fldflexF, .fldflexM, .fldflexE, .fldflexS,
.fldSflex, .fldSflexC, .fldSflexX, .fldSflexL, .fldSflexQ, .fldSflexF, .fldSflexM, .fldSflexE, .fldSflexS
@@ -2100,7 +2097,13 @@ select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
}
.fldflexR, .fldSflexR
{
width: 222px;
width: 224px;
}
input.button {
width: 206px;
}
.fldresroom {
width: 204px !important;
}
@media all and (min-width: 60em) {
@@ -2110,12 +2113,12 @@ select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
.fldcontract, .fldcntnr, .fldorderby, .fldname,
.fldoms, .fldr_objs,
.fldsrtgroup, .fldsrtdeel, .fldsrtdeelmulti, .flditem, .fldsupplier, .fldgroupbysec, .fldordernum,
.mldstatusmulti, .opdrstatusmulti, .fldgastheer, .flddiscript, .fldmantel, .fldresroom, .fldresdesc,
.fldobjsort, .fldmsgurl, .fldmsggroup, .fldmelder, .fldflex, .fldprio, .fldsrt,
.mldstatusmulti, .opdrstatusmulti, .fldgastheer, .flddiscript, .fldmantel, .fldresdesc,
.fldobjsort, .fldmsgurl, .fldmsggroup, .fldmelder, .fldflex, .fldsrt,
.fldnewvalue, .fldmldobjs, .flddebtor, .fldfintype, .fldfinstatus, .fldreferentie, .fldfinboekm, .fldfincostsrt,
.fldusrfilter, .flddienst, .fldmld_adres, .fldbld_srtkey, .fldter_srkey, .fldroom_srt, .flddel_address, .flddeliveryAddr, #flddelivery_place,
.fldusrfilter, .flddienst, .fldmld_adres, .fldbld_srtkey, .fldter_srkey, .fldroom_srt, .flddel_address, #flddelivery_place,
.fldcntmeldkey, .fldsrttype, .fldordernr, .flddept, .fldmld_adrkey, .fldfac_prkey, .fldprs_srtkey, .fldselect, .fldbudgeth, .fldkstplgr,
.fldkpn_module, .fldkpn_grpkey, .fldmld_adrlkey, .fldmld_adrfkey, .flddeptDesc, .flddeptName, .fldfav, .fldemails, .fldsubject, .fldcnt_contprs, .fldcnt_bdrkey,
.fldkpn_module, .fldkpn_grpkey, .fldmld_adrkey, .fldmld_adrfkey, .flddeptDesc, .flddeptName, .fldfav, .fldemails, .fldsubject, .fldcnt_contprs, .fldcnt_bdrkey,
.fldmgroep, .fldmmodule, .fldprs_dnstkey, .fldprs_bdrkey, .fldlocs, .fldblds, .fldgroup,
.fldscenario, .fldmoverequest, .fldprjstatus, .flddaydate, .fldactivity, .fldplace, .fldstopplace, .fldprincipal, .fldcategorie, .fldonderwerp,
.fldsel_controlemode, .fldsel_srtcontrole, .fldartgroep, .fldbesitem, .fldmailto, .fldusrtabkey, .fldmodule, .fldfac_name, .fldfac_path, .fldfac_query,
@@ -2127,9 +2130,9 @@ select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
/* ouderwetse listboxes */
select, .fldbedrijf, .fldfunc, .fldact, .fldsortout, .fldgroupby, .fldbdr_key, .fldopstel, .fldsel_activity,
select.flddienst, select.fldcontract, .fldt_opdr, .fldaltgroep, .fldaltfunctie, .fldBES_srtgroup,
select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup, .fldprio, .flddeliveryAddr, .fldmld_adrlkey, .fldmld_adrfkey
{
width: 344px;
width: 346px;
}
.fldflex, .fldflexC, .fldflexC50, .fldflexX, .fldflexL, .fldflexQ, .fldflexF, .fldflexM, .fldflexE, .fldflexS,
.fldSflex, .fldSflexC, .fldSflexX, .fldSflexL, .fldSflexQ, .fldSflexF, .fldSflexM, .fldSflexE, .fldSflexS
@@ -2138,7 +2141,13 @@ select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup
}
.fldflexR, .fldSflexR
{
width: 344px;
width: 346px;
}
input.button {
width: 346px;
}
.fldresroom {
width: 326px !important;
}
}
/* In mobile popup, vooralsnog iets korter voor iPhone */
@@ -2189,11 +2198,6 @@ select.fldimport_app_key, .fldfinomsch, .flduitvExist
}
.fldmldnum, .fldopdrnum, .fldresnum, .flddeel, .fldrfonum, .fldordernum, .fldopdrnr, .fldcntnum, .fldfinnum {
color: black;
font-weight: bold;
text-align: left;
}
.fldmldnum, .fldopdrnum, .fldresnum, .fldrfonum, .fldordernum, .fldopdrnr, .fldfinnum {
width: 124px;
}
@@ -2218,8 +2222,11 @@ select.fldimport_app_key, .fldfinomsch, .flduitvExist
.fldbescnt {
width: 32px;
}
.fldresroomedit { text-decoration: underline; cursor: pointer; background-color: transparent; }
/* compensate for readonly input props */
.fldresroomedit {
filter: alpha(opacity=100) !important;
opacity: 1.0 !important;
}
.fldtxt, .fldomschr, .fldremark, .fldresroomchange, .flddatechange, .fldcntperiod {
width: 99.3%;
@@ -2324,14 +2331,14 @@ tr.flexcollapsable td {
}
.flexcollapsable .lhint {
background-image: url(../appl/Pictures/up.png);
background-image: url(../appl/pictures/up.png);
background-repeat: no-repeat;
background-position: right 7px;
padding-right: 22px;
}
.flexcollapsed .lhint {
background-image: url(../appl/Pictures/down.png);
background-image: url(../appl/pictures/down.png);
background-repeat: no-repeat;
background-position: right 5px;
}
@@ -2346,7 +2353,7 @@ input[readonly].fldflexD {
width: 100px;
}
.fldflexF.missing, .fldflexE.missing {
color: red;
color: #ff5050;
}
.fldflexR.inactive, .fldflexS.inactive {
color: #FF4301;
@@ -2412,6 +2419,8 @@ body.likemodal {
#mod_beslever {width:800px;}
#mod_besretour {width:600px;}
#mod_besweging {width:500px;}
#mod_cntsplit {width:450px;}
#mod_cntsplit .label {width: 180px;}
#mod_req_move {width:500px;}
#mod_req_move2 {width:500px;}
#mod_req_move3 {width:500px;}
@@ -2904,6 +2913,12 @@ input.suggest::-ms-clear
height: 0;
}
input.suggestBusy::-ms-clear
{
width : 0;
height: 0;
}
.fatal {
background-color: red;
color: yellow;
@@ -3425,13 +3440,13 @@ table.filter p { margin: 0px; }
/* experimentje. is dit leuk? */
input, textarea, select {
outline:none;
border-radius:2px;
outline: none;
border-radius: 0px;
}
input:focus, textarea:focus, select:focus {
box-shadow: 0 0 0px #888;
border:1px solid #888;
border: 1px solid #888;
}
input[type=radio]:focus,
input[type=checkbox]:focus {
@@ -3572,7 +3587,6 @@ body.floorscreen3d {
width:150px;
}
#scfcolpicker td:hover {
cursor: move;
}
@@ -3583,26 +3597,24 @@ body.floorscreen3d {
#buttons ul li.hasIcon,
#buttons ul li.hasIcon a {
padding: 7px 10px 2px 11px;
border-radius:10px!important;
padding: 9px 10px 5px 12px; /* is vierkant weer bon-ton? */
border-radius: 2px!important;
}
.ui-widget-content{border:0px;}
.ui-widget-content{
border:0px;
}
li.hiddenbutton {
padding: 0px 0px 0px 0px!important;
padding: 0px 0px 0px 0px!important;
}
.ui-widget {
font-family: ==fontfamily==;
}
.bijlage {
border: 0px;
font-family: ==fontfamily==;
}
#prodsearchsearch {
border: 0px;
border: 0px;
}
#showlink {