Share my Css

[Eugeniusz Rink]

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.

[MVakili]

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

[Eugeniusz Rink]

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.

[MVakili]

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

[MVakili]

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;
}
 

 

[MVakili]

A complete reference for CSS commands

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

 

[MVakili]

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; 
}

[MVakili]

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;

 

[Sherzod]

21 hours ago, MVakili said:

This post may also be useful: