Jump to content

Share my Css

MVakili
 Share

Recommended Posts

MVakili Advanced Member

MVakili

Posted
  • Author
Posted
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

  • Like 1
Eugeniusz Rink Newbie

Eugeniusz Rink

Posted
Posted
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.

  • 1 month later...
  • 1 month later...
MVakili Advanced Member

MVakili

Posted
  • Author
Posted

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

 

  • 1 month later...
  • 2 weeks later...
MVakili Advanced Member

MVakili

Posted
  • Author
Posted

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

image.png.305ec1d1b798d55bd7255266d560d986.png

  • 4 months later...
MVakili Advanced Member

MVakili

Posted
  • Author
Posted

A simple but interesting task
You can use a meter in Button

image.png.5047b9f63217b79bcf3c8f4948aa939a.png 

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;

 

  • 4 weeks later...
MVakili Advanced Member

MVakili

Posted
  • Author
Posted

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

}

image.thumb.png.6688bee4ff5283791d0392dd980abb43.png

MVakili Advanced Member

MVakili

Posted
  • Author
Posted

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/

image.png.8c21cfd7fee3ed430f59861379684c63.png

 

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}

 

MVakili Advanced Member

MVakili

Posted
  • Author
Posted
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 : 

image.png.96ed7fefe6f50cb2993a9c604e0fd4f8.png

 

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

image.png.ec1dcd83012e391f655c4311c2a002fe.png

How can I increase the height of the Tabs?

 

  • 8 months later...
MVakili Advanced Member

MVakili

Posted
  • Author
Posted 
/* ----------------- General Panel Styles ----------------------*/
.x-panel {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* سایه مشخص‌تر */
}

.x-panel-default,
.x-panel-body-default {
  background: #f7f5ed; /* تغییر رنگ خاکستری به کرمی کم‌رنگ */
  border-color: #d6d2c4; /* رنگ مرز به کرمی تیره‌تر */
}

.x-panel-default-framed {
  background-color: #f7f5ed;
  border-radius: 4px; /* کمی گردتر */
  border: 5px solid #d6d2c4;
  padding: 10px; /* اضافه کردن فاصله داخلی */
}

/* Panel Header */
.x-panel-header-default {
  border-bottom: 1px solid #d6d2c4;
  padding: 12px 15px;
  background-color: #f7f5ed;
}

.x-panel-header-default .x-tool-img {
  background: #faf9f5; /* رنگ کرمی روشن‌تر برای آیکون‌ها */
  height: 16px;
  margin: 0;
  overflow: hidden;
  width: 16px;
}

/* Tabs */
.x-tab-default {
  background-color: #f5f3e8; /* کرمی ملایم */
  border-radius: 5px;
  cursor: pointer;
  margin: 0 2px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.x-tab-default:hover {
  background-color: #e0dbc4; /* کرمی زنده‌تر هنگام هاور */
  transform: scale(1.05); /* بزرگ شدن هنگام هاور */
}

.x-tab-default .x-tab-inner {
  color: #5a5240; /* رنگ متن تیره‌تر */
}

.x-tab-default-active {
  background-image: linear-gradient(135deg, #d6d2c4, #f7f5ed); /* گرادیانت ملایم */
}

.x-tab-default-active .x-tab-inner {
  color: #3a3326; /* رنگ متن فعال */
}

/* Buttons */
button {
  background-color: #e0dbc4; /* رنگ زنده‌تر برای دکمه‌ها */
  color: #3a3326;
  padding: 10px 15px;
  border: 2px solid #d6d2c4;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
  background-color: #d6d2c4;
  transform: translateY(-2px); /* جلوه شناور */
}

button:active {
  background-color: #c4bfb0;
  transform: translateY(0); /* بازگشت به حالت اولیه */
}

/* Miscellaneous */
.x-box-inner.x-box-scroller-body-horizontal {
  height: 20px;
  background-color: #faf9f5; /* کرمی برای پس‌زمینه اسکرولر */
}

.x-tab-bar-default .x-box-scroller-disabled {
  cursor: not-allowed;
  opacity: 0.6; /* کاهش شفافیت برای دکمه غیرفعال */
}

.x-tab-bar-horizontal .x-tab-bar-strip {
  background-color: #f7f5ed; /* کرمی روشن */
}

image.png.f6a96c148cb51f5b81e35263cb5b2ba6.png

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...