Eugeniusz Rink Posted July 29, 2023 Share Posted July 29, 2023 On 3/10/2023 at 11:27 AM, MVakili said: The chat was interest , but simple project for Css in UniPopupMenu ( @Sherzod solution ) is here (font / height / color /...) pop1.rar 5.5 kB · 13 downloads Hi MVakili. Why do you only provide .pas files in your published project? Easier to post a custom sample project. Quote Link to comment Share on other sites More sharing options...
MVakili Posted July 31, 2023 Author Share Posted July 31, 2023 On 7/29/2023 at 7:37 PM, Eugeniusz Rink said: Hi MVakili. Why do you only provide .pas files in your published project? Easier to post a custom sample project. I apologize for the delayed response. Yes, you are right. I wasn't paying attention to the forms when I was copying. Anyway, it wasn't a big deal. There was only one form with a popup on it. The most important part was the definition that @Sherzod had provided, which can also be seen in the program's text. type TXPopupMenu = class(TUniPopupMenu) end; and for using css TXPopupMenu(UniPopupMenu1).MenuControl.JSInterface.JSCall('addCls', ['uni-popup']); and my css for popup .x-title.x-menu-header-title { height: 25px; text-align: center; font-weight: bold; background-image: linear-gradient(#dae7f6, #cddef3 45%, #abc7ec 46%, #abc7ec 50%, #b8cfee 51%, #cbddf3); } .uni-popup { position: absolute; display: none; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .uni-popup a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .uni-popup a:hover { background-color: #ddd; } .uni-popup.show { display: block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } And finally you can download full project Sample XPop.rar 1 Quote Link to comment Share on other sites More sharing options...
Eugeniusz Rink Posted July 31, 2023 Share Posted July 31, 2023 5 hours ago, MVakili said: Przepraszam za opóźnioną odpowiedź. Tak masz rację. Nie zwracałem uwagi na formularze podczas kopiowania. W każdym razie nie było to nic wielkiego. Był tylko jeden formularz z wyskakującym okienkiem. Najważniejszą częścią była definicja, którą podał @Sherzod, co widać również w tekście programu. i za używanie css i mój css dla wyskakującego okienka I wreszcie możesz pobrać pełny projekt Próbka XPop.rar 89,92 kB · 2 pliki do pobrania OK... Thank you very much. Quote Link to comment Share on other sites More sharing options...
MVakili Posted September 10, 2023 Author Share Posted September 10, 2023 If you like to get the CSS of a site quickly and easily, use this site So cool in this example I catch unigui.com CSS https://www.projectwallace.com/css-code-quality?url=http%3A%2F%2Fwww.unigui.com%2F Quote Link to comment Share on other sites More sharing options...
MVakili Posted October 16, 2023 Author Share Posted October 16, 2023 This site is great If you don't feel like optimizing your CSS codes, it will easily organize them for you Writes the description of each section for you And if it modifies, it will keep you informed of the changes https://codepal.ai/css-optimizer Example /*------------------- badge ------------------------------- */ .badge{ display:inline-block; min-width:10px; padding:3px 7px; font-size:12px; line-height:1; vertical-align:middle; background-color:#777; border-radius:10px } .badge:empty{ display:none } .btn .badge{ position:relative; top:-1px } answer Optimize CSS /*------------------- badge -------------------------------*/ /* Common styles for badge */ .badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; line-height: 1; vertical-align: middle; background-color: #777; border-radius: 10px; } /* Hide badge if it's empty */ .badge:empty { display: none; } /* Position badge inside button */ .btn .badge { position: relative; top: -1px; } Quote Link to comment Share on other sites More sharing options...
MVakili Posted November 17, 2023 Author Share Posted November 17, 2023 A complete reference for CSS commands https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count Quote Link to comment Share on other sites More sharing options...
MVakili Posted December 1, 2023 Author Share Posted December 1, 2023 Css for RTL uniTreeMenu + TUniMenuItems ( tanks Majid ) .x-treelist-item-expander:after { content: "\f0d9"; } .x-treelist-nav .x-treelist-item-expander { /*right: 150px;*/ } .x-treelist-nav .x-treelist-row-over:before, .x-treelist-nav .x-treelist-item-selected > .x-treelist-row:before { /* right: 150px;*/ content: " "; position: absolute; display: block; /* left: 0; */ right: 0; top: 0; width: 6px; height: 100%; } /*How to change UniTreeMenu's background color?*/ .treemenu .x-treelist, .treemenu .x-treelist-row{ background-color: #10044a; } .treemenu .x-treelist-row-over, .treemenu .x-treelist-nav .x-treelist-item-selected > .x-treelist-row{ background-color: #40366e !important; } .treemenu .x-treelist-item-text, .treemenu .x-treelist-item-icon, .treemenu .x-treelist-item-expander { color: #e8dff7; font-size: 14px; } Quote Link to comment Share on other sites More sharing options...
MVakili Posted April 11 Author Share Posted April 11 A simple but interesting task You can use a meter in Button Var BTN : TUniButton; begin { comment , general format for Html meter : '<lable> title </lable></br><lable>Min Value </lable><meter min="0" max="15" value="9" low="8" high="10.5" ></meter><lable>Max Value</lable>' } With Q Do // Q is a Table or query Begin first ; while Not Eof do Begin BTN:=TUniButton.Create(P); With BTN Do Begin Parent:=P; Name:='BtnMeter_'+FieldByName('Seq').AsString; Height:=75; Caption:='<style>meter{width:70%;height:25px;}</style>' +'<lable>'+FieldByName('T').AsString+' : '+'</lable>' +'<lable style="color:blue">'+FieldByName('C').AsString +'</lable></br></br><lable>'+FieldByName('MinV').AsString +'</lable><meter min="'+FieldByName('MinV').AsString +'" max="'+FieldByName('MaxV').AsString +'" low="'+FieldByName('LowV').AsString +'" high="'+FieldByName('HighV').AsString +'" value="'+FieldByName('C').AsString +'" ></meter><lable>'+FieldByName('MaxV').AsString +'</lable>'; hint:=FieldByName('T').AsString+' : '+FieldByName('C').AsString+#13 +'Limit :'+FieldByName('LowV').AsString +' - '+FieldByName('HighV').AsString; ShowHint:=True; Layout:='anchor'; LayoutConfig.Padding := '1'; LayoutConfig.BodyPadding := '1'; LayoutConfig.Width := '100%'; End; Next; End; End; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 12 Share Posted April 12 21 hours ago, MVakili said: This post may also be useful: 1 Quote Link to comment Share on other sites More sharing options...
MVakili Posted Saturday at 07:22 AM Author Share Posted Saturday at 07:22 AM for UniDbGrid Css https://divtable.com/table-styler/ Quote Link to comment Share on other sites More sharing options...
MVakili Posted Saturday at 07:24 AM Author Share Posted Saturday at 07:24 AM A CSS for UniDBGrid .x-grid-header-ct .x-column-header-inner { white-space: nowrap; } .x-column-header { border: 1px solid red; height: 40px !important; background-color:#FFF; border-color:#7EA8F8; border-radius:2px; color:#000; padding:1px; text-align:center; vertical-align:middle; } .x-grid-item-selected .x-grid-cell { background-color:#FFFFE0; border:1 solid #cce5ff; color:#00008B; } .x-grid-cell-inner { padding: 5px 4px 4px!important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .x-grid-td { vertical-align: middle; } .rc-grid-title-check .x-column-header-checkbox { display:none; } .x-toolbar-text-default { padding: 0px 0px 0px -8px; color: #4b4c4c; } .x-toolbar-default .x-toolbar-separator-horizontal{ border-width: 0px; } .x-toolbar-default { padding: 6px 0 0px 0px; border-width: 0px; } .x-grid .x-grid-cell { height: 30px !important; line-height: 30px !important; } .x-grid { background-color:#FFF; border-collapse:collapse; border-color:#7EA8F8; border-style:solid; border-width:1px; color:#000; width:100% } .x-grid td,.x-grid th { border-color:#7EA8F8; border-style:solid; border-width:2px; padding:5px } Quote Link to comment Share on other sites More sharing options...
MVakili Posted Saturday at 08:23 AM Author Share Posted Saturday at 08:23 AM When you finish writing a CSS there are 2 other steps to consider 1- Troubleshooting: It is possible that there are errors in the code, for example, instead of 1px, you wrote only 1 2- Compression: It is important to increase the execution speed You can use different sites for this This is a good site and you can see the results of the previous code https://www.cssportal.com/css-optimize/ and final code .rc-grid-title-check .x-column-header-checkbox{display:none}.x-column-header{background-color:#FFF;border:1px solid red;border-color:#7EA8F8;border-radius:2px;color:#000;height:40px!important;padding:1px;text-align:center;vertical-align:middle}.x-grid{background-color:#FFF;border-collapse:collapse;border-color:#7EA8F8;border-style:solid;border-width:1px;color:#000;width:100%}.x-grid .x-grid-cell{height:30px!important;line-height:30px!important}.x-grid td,.x-grid th{border-color:#7EA8F8;border-style:solid;border-width:2px;padding:5px}.x-grid-cell-inner{overflow:hidden;padding:5px 4px 4px!important;text-overflow:ellipsis;white-space:nowrap}.x-grid-header-ct .x-column-header-inner{white-space:nowrap}.x-grid-item-selected .x-grid-cell{background-color:#FFFFE0;border:1px solid #cce5ff;color:#00008B}.x-grid-td{vertical-align:middle}.x-toolbar-default{border-width:0;padding:6px 0 0}.x-toolbar-default .x-toolbar-separator-horizontal{border-width:0}.x-toolbar-text-default{color:#4b4c4c;padding:0 0 0 -8px} Quote Link to comment Share on other sites More sharing options...
MVakili Posted Monday at 08:02 AM Author Share Posted Monday at 08:02 AM On 2/11/2023 at 2:21 AM, MVakili said: .x-tab.x-tab-active { background-color: #2E86C1!important; border: none !important; border-radius: 3px 3px 0 0; } .x-tab.x-tab-active .x-tab-inner-default{ color: #fff596 !important; } .x-tab-bar-horizontal .x-tab-bar-strip { background-color: #2E86C1!important; } .x-tab-bar-top > .x-tab-bar-strip-default { border: none !important; height: 20px !important; } .x-box-inner.x-box-scroller-body-horizontal { height: 19px !important; } .x-panel-body-default { border-style: none !important; } .x-tab-default-top { border-style: none !important; background-color: #D6EAF8!important; border-radius: 3px 3px 0 0; } Result : I change round and colors for better view and removed "!important" /*------------------- Page control tab control-------------------------------*/ .x-box-inner.x-box-scroller-body-horizontal { height: 19px; } .x-panel-body-default { border-style: none; } .x-tab-bar-default .x-box-scroller-disabled { cursor: not-allowed; } .x-tab-bar-horizontal .x-tab-bar-strip { background-color: #7EA8F8; } .x-tab-bar-strip-default { background-color: #e0e0e0; border-color: #000; border-style: solid; } .x-tab-bar-top > .x-tab-bar-strip-default { border: none; height: 20px; } .x-tab-default { background-color: #ececec; border-color: #00f; cursor: pointer; margin: 0 1px 0 0; } .x-tab-default .x-tab-icon-el { background-position: center center; height: 20px; line-height: 20px; width: 20px; } .x-tab-default .x-tab-inner { color: #333; line-height: 16px; } .x-tab-default-active .x-tab-inner { color: #333; } .x-tab-default-active,.x-tab-default-over { background-color: #e0e0e0; } .x-tab-default-left,.x-tab-default-right,.x-tab-default-top { border-bottom: 0 solid #ddd; } .x-tab-default-left-active,.x-tab-default-right-active,.x-tab-default-top-active { border-bottom: 0 solid #add2ed; } .x-tab-default-top { background-image: -webkit-linear-gradient(top,#fff,#fff); border-radius: 3px; border-style: solid; border-width: 0; } .x-tab-icon-el { top: -3px; } .x-tab-li { display: inline-block; } .x-tab.x-tab-active { background-image:linear-gradient(to top, #7EA8F8 0%, #FFFFFF 41%, #FFFFFF 66%, #7EA8F8 100%); border: 10px; border-radius: 3px; } .x-tab.x-tab-active .x-tab-inner-default { color: #000; } How can I increase the height of the Tabs? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.