WordPress.org
Get WordPress

Plugin Directory

Changeset 3361439


Ignore:
Timestamp:
09/15/2025 12:36:04 AM (7 months ago)
Author:
mohsinwebs
Message:

design update

Location:
speedox
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • speedox/tags/1.1.2/assets/css/admin-dashboard.css

    r3361438 r3361439  
    1 /* SpeedOx Modern Dashboard - CSS Only Changes */
     1/* SpeedOx Dashboard - LiteSpeed Inspired but Better */
    22.speedox-wrap {
    3   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    4   border-radius: 16px;
    5   padding: 25px;
    6   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    7   margin-top: 20px;
    8   position: relative;
    9   overflow: hidden;
    10 }
    11 
     3  background: #f8f9fa;
     4  border-radius: 0;
     5  padding: 0;
     6  box-shadow: none;
     7  margin-top: 0;
     8  min-height: 100vh;
     9  display: flex;
     10  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     11}
     12
     13/* Sidebar Navigation */
    1214.speedox-wrap::before {
    1315  content: '';
    14   position: absolute;
    15   top: 0;
    16   left: 0;
    17   right: 0;
    18   bottom: 0;
    19   background: rgba(255, 255, 255, 0.95);
    20   backdrop-filter: blur(20px);
    21   border-radius: 16px;
    22   z-index: 0;
    23 }
    24 
     16  position: fixed;
     17  top: 0;
     18  left: 0;
     19  width: 250px;
     20  height: 100vh;
     21  background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
     22  z-index: 1000;
     23  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
     24}
     25
     26.speedox-wrap::after {
     27  content: '';
     28  position: fixed;
     29  top: 0;
     30  left: 0;
     31  width: 250px;
     32  height: 100vh;
     33  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.04)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
     34  z-index: 1001;
     35  pointer-events: none;
     36}
     37
     38/* Main Content Area */
    2539.speedox-wrap > * {
    26   position: relative;
    27   z-index: 1;
    28 }
    29 
     40  margin-left: 250px;
     41  width: calc(100% - 250px);
     42  background: #ffffff;
     43  min-height: 100vh;
     44  padding: 30px;
     45}
     46
     47/* Header Section */
    3048.speedox-wrap h1 {
    3149  color: #2c3e50;
     50  font-size: 28px;
     51  margin-bottom: 30px;
     52  border-bottom: none;
     53  padding-bottom: 0;
     54  font-weight: 700;
     55  display: flex;
     56  align-items: center;
     57  gap: 15px;
     58}
     59
     60.speedox-wrap h1::before {
     61  content: '⚡';
    3262  font-size: 32px;
    33   margin-bottom: 25px;
    34   border-bottom: 3px solid #667eea;
    35   padding-bottom: 15px;
    36   font-weight: 700;
    37   text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    38 }
    39 
     63  background: linear-gradient(135deg, #667eea, #764ba2);
     64  -webkit-background-clip: text;
     65  -webkit-text-fill-color: transparent;
     66  background-clip: text;
     67  animation: pulse 2s infinite;
     68}
     69
     70@keyframes pulse {
     71  0%, 100% { transform: scale(1); }
     72  50% { transform: scale(1.1); }
     73}
     74
     75/* Navigation Tabs - Sidebar Style */
    4076.speedox-wrap .nav-tab-wrapper {
    41   margin-bottom: 25px;
    42   background: rgba(255, 255, 255, 0.9);
    43   border-radius: 12px;
    44   padding: 8px;
    45   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
     77  position: fixed;
     78  top: 0;
     79  left: 0;
     80  width: 250px;
     81  height: 100vh;
     82  background: transparent;
     83  padding: 0;
     84  margin: 0;
     85  z-index: 1002;
     86  display: flex;
     87  flex-direction: column;
     88  padding-top: 80px;
    4689}
    4790
    4891.speedox-wrap .nav-tab {
    4992  background: transparent;
    50   color: #6b7280;
    51   border: 2px solid transparent;
    52   padding: 12px 18px;
     93  color: #bdc3c7;
     94  border: none;
     95  padding: 15px 25px;
    5396  text-decoration: none;
    54   border-radius: 8px;
    55   margin-right: 6px;
     97  border-radius: 0;
     98  margin: 0;
    5699  transition: all 0.3s ease;
    57   font-weight: 600;
     100  font-weight: 500;
     101  font-size: 14px;
     102  display: flex;
     103  align-items: center;
     104  gap: 12px;
    58105  position: relative;
    59   overflow: hidden;
     106  border-left: 3px solid transparent;
    60107}
    61108
    … …  
    63110  content: '';
    64111  position: absolute;
    65   top: 0;
    66   left: -100%;
    67   width: 100%;
    68   height: 100%;
    69   background: linear-gradient(135deg, #667eea, #764ba2);
    70   transition: left 0.3s ease;
    71   z-index: -1;
     112  left: 0;
     113  top: 0;
     114  bottom: 0;
     115  width: 3px;
     116  background: #667eea;
     117  transform: scaleY(0);
     118  transition: transform 0.3s ease;
    72119}
    73120
    74121.speedox-wrap .nav-tab:hover {
     122  background: rgba(255, 255, 255, 0.1);
    75123  color: white;
    76   border-color: #667eea;
    77   transform: translateY(-2px);
    78   box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
     124  transform: translateX(5px);
    79125}
    80126
    81127.speedox-wrap .nav-tab:hover::before {
    82   left: 0;
     128  transform: scaleY(1);
    83129}
    84130
    85131.speedox-wrap .nav-tab-active {
    86   background: linear-gradient(135deg, #667eea, #764ba2);
     132  background: rgba(255, 255, 255, 0.15);
    87133  color: white;
    88   border-color: #667eea;
    89   transform: translateY(-2px);
    90   box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
     134  border-left-color: #667eea;
    91135}
    92136
    93137.speedox-wrap .nav-tab-active::before {
    94   left: 0;
    95 }
    96 
     138  transform: scaleY(1);
     139}
     140
     141/* Add icons to nav tabs */
     142.speedox-wrap .nav-tab:nth-child(1)::after { content: '🚀'; }
     143.speedox-wrap .nav-tab:nth-child(2)::after { content: '⚡'; }
     144.speedox-wrap .nav-tab:nth-child(3)::after { content: '🖼️'; }
     145.speedox-wrap .nav-tab:nth-child(4)::after { content: '🗄️'; }
     146.speedox-wrap .nav-tab:nth-child(5)::after { content: '🔧'; }
     147.speedox-wrap .nav-tab:nth-child(6)::after { content: '📊'; }
     148
     149/* Content Cards */
    97150.speedox-wrap .postbox {
    98151  border: none;
    99152  border-radius: 12px;
    100153  margin-bottom: 25px;
    101   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     154  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    102155  background: white;
    103156  overflow: hidden;
    … …  
    141194}
    142195
     196/* Statistics Cards Grid */
    143197.speedox-wrap .form-table {
     198  display: grid;
     199  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     200  gap: 20px;
     201  background: transparent;
     202  border: none;
     203  box-shadow: none;
     204}
     205
     206.speedox-wrap .form-table tr {
    144207  background: white;
    145   border-radius: 8px;
    146   overflow: hidden;
    147   box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     208  border-radius: 12px;
     209  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     210  display: flex;
     211  flex-direction: column;
     212  padding: 20px;
     213  transition: all 0.3s ease;
     214  border: 1px solid #e5e7eb;
     215}
     216
     217.speedox-wrap .form-table tr:hover {
     218  transform: translateY(-5px);
     219  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    148220}
    149221
    150222.speedox-wrap .form-table th {
    151   width: 200px;
    152   padding: 18px 20px;
     223  width: auto;
     224  padding: 0 0 15px 0;
    153225  font-weight: 700;
    154226  color: #1f2937;
    155   background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    156   border-right: 1px solid #e5e7eb;
    157   font-size: 14px;
     227  background: transparent;
     228  border: none;
     229  font-size: 16px;
     230  text-align: left;
    158231}
    159232
    160233.speedox-wrap .form-table td {
    161   padding: 18px 20px;
    162   background: white;
    163   border-bottom: 1px solid #f1f5f9;
    164 }
    165 
    166 .speedox-wrap .form-table tr:hover td {
    167   background: #f8fafc;
    168 }
    169 
     234  padding: 0;
     235  background: transparent;
     236  border: none;
     237}
     238
     239/* Feature Cards with Statistics */
     240.speedox-wrap .form-table tr {
     241  position: relative;
     242  overflow: hidden;
     243}
     244
     245.speedox-wrap .form-table tr::before {
     246  content: '';
     247  position: absolute;
     248  top: 0;
     249  left: 0;
     250  right: 0;
     251  height: 4px;
     252  background: linear-gradient(135deg, #667eea, #764ba2);
     253}
     254
     255/* Enhanced Checkboxes */
    170256.speedox-wrap input[type="checkbox"] {
    171   margin-right: 10px;
    172   transform: scale(1.3);
     257  margin-right: 12px;
     258  transform: scale(1.4);
    173259  accent-color: #667eea;
    174260}
    … …  
    180266  font-size: 14px;
    181267  transition: color 0.3s ease;
     268  display: flex;
     269  align-items: center;
    182270}
    183271
    … …  
    186274}
    187275
     276/* Status Indicators */
     277.speedox-wrap .form-table tr {
     278  position: relative;
     279}
     280
     281.speedox-wrap .form-table tr::after {
     282  content: '';
     283  position: absolute;
     284  top: 20px;
     285  right: 20px;
     286  width: 12px;
     287  height: 12px;
     288  border-radius: 50%;
     289  background: #10b981;
     290  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
     291}
     292
     293/* Buttons */
    188294.speedox-wrap .button-primary {
    189295  background: linear-gradient(135deg, #10b981, #059669);
    … …  
    198304  text-transform: uppercase;
    199305  letter-spacing: 0.5px;
     306  position: fixed;
     307  bottom: 30px;
     308  right: 30px;
     309  z-index: 1003;
    200310}
    201311
    … …  
    224334}
    225335
     336/* Textarea */
    226337.speedox-wrap textarea {
    227338  border: 2px solid #e5e7eb;
    … …  
    234345  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    235346  transition: border-color 0.3s ease;
     347  width: 100%;
     348  height: 300px;
    236349}
    237350
    … …  
    242355}
    243356
     357/* Footer */
    244358.speedox-wrap .speedox-footer {
    245359  margin-top: 30px;
    … …  
    277391}
    278392
    279 @keyframes pulse {
    280   0%, 100% { transform: scale(1); }
    281   50% { transform: scale(1.05); }
    282 }
    283 
    284 /* Enhanced form styling */
    285 .speedox-wrap .form-table tr {
    286   transition: all 0.3s ease;
    287 }
    288 
    289 .speedox-wrap .form-table tr:hover {
    290   transform: translateX(5px);
    291   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    292 }
    293 
    294 /* Loading animation for save button */
    295 .speedox-wrap .button-primary:active {
    296   transform: translateY(0px) scale(0.98);
    297 }
    298 
    299 /* Responsive design */
     393/* Responsive Design */
    300394@media (max-width: 768px) {
    301   .speedox-wrap {
     395  .speedox-wrap::before,
     396  .speedox-wrap::after {
     397    display: none;
     398  }
     399 
     400  .speedox-wrap > * {
     401    margin-left: 0;
     402    width: 100%;
    302403    padding: 20px;
    303     margin: 10px;
     404  }
     405 
     406  .speedox-wrap .nav-tab-wrapper {
     407    position: static;
     408    width: 100%;
     409    height: auto;
     410    flex-direction: row;
     411    padding-top: 0;
     412    margin-bottom: 20px;
     413    background: white;
     414    border-radius: 8px;
     415    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     416    overflow-x: auto;
     417  }
     418 
     419  .speedox-wrap .nav-tab {
     420    white-space: nowrap;
     421    border-left: none;
     422    border-bottom: 3px solid transparent;
     423    padding: 12px 20px;
     424    color: #6b7280;
     425  }
     426 
     427  .speedox-wrap .nav-tab::before {
     428    display: none;
     429  }
     430 
     431  .speedox-wrap .nav-tab-active {
     432    border-bottom-color: #667eea;
     433    background: transparent;
     434  }
     435 
     436  .speedox-wrap .form-table {
     437    grid-template-columns: 1fr;
     438  }
     439 
     440  .speedox-wrap .button-primary {
     441    position: static;
     442    margin-top: 20px;
     443  }
     444}
     445
     446@media (max-width: 480px) {
     447  .speedox-wrap > * {
     448    padding: 15px;
    304449  }
    305450 
    306451  .speedox-wrap h1 {
    307     font-size: 26px;
    308   }
    309  
    310   .speedox-wrap .form-table th,
    311   .speedox-wrap .form-table td {
    312     display: block;
    313     width: 100%;
    314     padding: 15px;
    315   }
    316  
    317   .speedox-wrap .form-table th {
    318     border-bottom: 1px solid #e5e7eb;
    319     margin-bottom: 0;
    320     background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    321   }
    322  
    323   .speedox-wrap .nav-tab {
    324     margin-bottom: 8px;
    325     margin-right: 0;
    326     display: block;
    327     text-align: center;
    328   }
    329 }
    330 
    331 @media (max-width: 480px) {
    332   .speedox-wrap {
    333     padding: 15px;
    334   }
    335  
    336   .speedox-wrap h1 {
    337     font-size: 22px;
     452    font-size: 24px;
    338453  }
    339454 

  • speedox/tags/1.1.2/speedox.php

    r3361438 r3361439  
    2424SpeedOx_Logger::init();
    2525
    26 define('SPEEDOX_VERSION', '1.1.2');
     26define('SPEEDOX_VERSION', '1.1.4'); // update on each release
    2727define('SPEEDOX_PLUGIN_DIR', plugin_dir_path(__FILE__));
    2828define('SPEEDOX_PLUGIN_URL', plugin_dir_url(__FILE__));
    … …  
    3737
    3838// Enqueue admin styles and scripts
    39 add_action('admin_enqueue_scripts', 'speedox_enqueue_admin_assets');
    40 function speedox_enqueue_admin_assets($hook) {
    41     if ($hook !== 'toplevel_page_speedox-dashboard') return;
    42 
    43     wp_enqueue_style(
    44         'speedox-admin-css',
    45         plugin_dir_url(__FILE__) . 'assets/css/admin.css',
    46         array(),
    47         SPEEDOX_VERSION
    48     );
    49 
    50     wp_enqueue_script(
    51         'speedox-admin-js',
    52         plugin_dir_url(__FILE__) . 'assets/js/admin.js',
    53         array('jquery'),
    54         SPEEDOX_VERSION,
    55         true
    56     );
     39add_action('admin_enqueue_scripts', 'speedox_admin_enqueue');
     40function speedox_admin_enqueue($hook) {
     41    if (strpos($hook, 'speedox') !== false) {
     42        wp_enqueue_style(
     43            'speedox-admin',
     44            plugin_dir_url(__FILE__) . 'assets/css/admin.css',
     45            array(),
     46            SPEEDOX_VERSION
     47        );
     48        wp_enqueue_script(
     49            'speedox-admin',
     50            plugin_dir_url(__FILE__) . 'assets/js/admin.js',
     51            array('jquery'),
     52            SPEEDOX_VERSION,
     53            true
     54        );
     55        wp_enqueue_style('dashicons');
     56    }
    5757}
    5858

  • speedox/trunk/assets/css/admin-dashboard.css

    r3361438 r3361439  
    1 /* SpeedOx Modern Dashboard - CSS Only Changes */
     1/* SpeedOx Dashboard - LiteSpeed Inspired but Better */
    22.speedox-wrap {
    3   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    4   border-radius: 16px;
    5   padding: 25px;
    6   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    7   margin-top: 20px;
    8   position: relative;
    9   overflow: hidden;
    10 }
    11 
     3  background: #f8f9fa;
     4  border-radius: 0;
     5  padding: 0;
     6  box-shadow: none;
     7  margin-top: 0;
     8  min-height: 100vh;
     9  display: flex;
     10  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     11}
     12
     13/* Sidebar Navigation */
    1214.speedox-wrap::before {
    1315  content: '';
    14   position: absolute;
    15   top: 0;
    16   left: 0;
    17   right: 0;
    18   bottom: 0;
    19   background: rgba(255, 255, 255, 0.95);
    20   backdrop-filter: blur(20px);
    21   border-radius: 16px;
    22   z-index: 0;
    23 }
    24 
     16  position: fixed;
     17  top: 0;
     18  left: 0;
     19  width: 250px;
     20  height: 100vh;
     21  background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
     22  z-index: 1000;
     23  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
     24}
     25
     26.speedox-wrap::after {
     27  content: '';
     28  position: fixed;
     29  top: 0;
     30  left: 0;
     31  width: 250px;
     32  height: 100vh;
     33  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.04)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
     34  z-index: 1001;
     35  pointer-events: none;
     36}
     37
     38/* Main Content Area */
    2539.speedox-wrap > * {
    26   position: relative;
    27   z-index: 1;
    28 }
    29 
     40  margin-left: 250px;
     41  width: calc(100% - 250px);
     42  background: #ffffff;
     43  min-height: 100vh;
     44  padding: 30px;
     45}
     46
     47/* Header Section */
    3048.speedox-wrap h1 {
    3149  color: #2c3e50;
     50  font-size: 28px;
     51  margin-bottom: 30px;
     52  border-bottom: none;
     53  padding-bottom: 0;
     54  font-weight: 700;
     55  display: flex;
     56  align-items: center;
     57  gap: 15px;
     58}
     59
     60.speedox-wrap h1::before {
     61  content: '⚡';
    3262  font-size: 32px;
    33   margin-bottom: 25px;
    34   border-bottom: 3px solid #667eea;
    35   padding-bottom: 15px;
    36   font-weight: 700;
    37   text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    38 }
    39 
     63  background: linear-gradient(135deg, #667eea, #764ba2);
     64  -webkit-background-clip: text;
     65  -webkit-text-fill-color: transparent;
     66  background-clip: text;
     67  animation: pulse 2s infinite;
     68}
     69
     70@keyframes pulse {
     71  0%, 100% { transform: scale(1); }
     72  50% { transform: scale(1.1); }
     73}
     74
     75/* Navigation Tabs - Sidebar Style */
    4076.speedox-wrap .nav-tab-wrapper {
    41   margin-bottom: 25px;
    42   background: rgba(255, 255, 255, 0.9);
    43   border-radius: 12px;
    44   padding: 8px;
    45   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
     77  position: fixed;
     78  top: 0;
     79  left: 0;
     80  width: 250px;
     81  height: 100vh;
     82  background: transparent;
     83  padding: 0;
     84  margin: 0;
     85  z-index: 1002;
     86  display: flex;
     87  flex-direction: column;
     88  padding-top: 80px;
    4689}
    4790
    4891.speedox-wrap .nav-tab {
    4992  background: transparent;
    50   color: #6b7280;
    51   border: 2px solid transparent;
    52   padding: 12px 18px;
     93  color: #bdc3c7;
     94  border: none;
     95  padding: 15px 25px;
    5396  text-decoration: none;
    54   border-radius: 8px;
    55   margin-right: 6px;
     97  border-radius: 0;
     98  margin: 0;
    5699  transition: all 0.3s ease;
    57   font-weight: 600;
     100  font-weight: 500;
     101  font-size: 14px;
     102  display: flex;
     103  align-items: center;
     104  gap: 12px;
    58105  position: relative;
    59   overflow: hidden;
     106  border-left: 3px solid transparent;
    60107}
    61108
    … …  
    63110  content: '';
    64111  position: absolute;
    65   top: 0;
    66   left: -100%;
    67   width: 100%;
    68   height: 100%;
    69   background: linear-gradient(135deg, #667eea, #764ba2);
    70   transition: left 0.3s ease;
    71   z-index: -1;
     112  left: 0;
     113  top: 0;
     114  bottom: 0;
     115  width: 3px;
     116  background: #667eea;
     117  transform: scaleY(0);
     118  transition: transform 0.3s ease;
    72119}
    73120
    74121.speedox-wrap .nav-tab:hover {
     122  background: rgba(255, 255, 255, 0.1);
    75123  color: white;
    76   border-color: #667eea;
    77   transform: translateY(-2px);
    78   box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
     124  transform: translateX(5px);
    79125}
    80126
    81127.speedox-wrap .nav-tab:hover::before {
    82   left: 0;
     128  transform: scaleY(1);
    83129}
    84130
    85131.speedox-wrap .nav-tab-active {
    86   background: linear-gradient(135deg, #667eea, #764ba2);
     132  background: rgba(255, 255, 255, 0.15);
    87133  color: white;
    88   border-color: #667eea;
    89   transform: translateY(-2px);
    90   box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
     134  border-left-color: #667eea;
    91135}
    92136
    93137.speedox-wrap .nav-tab-active::before {
    94   left: 0;
    95 }
    96 
     138  transform: scaleY(1);
     139}
     140
     141/* Add icons to nav tabs */
     142.speedox-wrap .nav-tab:nth-child(1)::after { content: '🚀'; }
     143.speedox-wrap .nav-tab:nth-child(2)::after { content: '⚡'; }
     144.speedox-wrap .nav-tab:nth-child(3)::after { content: '🖼️'; }
     145.speedox-wrap .nav-tab:nth-child(4)::after { content: '🗄️'; }
     146.speedox-wrap .nav-tab:nth-child(5)::after { content: '🔧'; }
     147.speedox-wrap .nav-tab:nth-child(6)::after { content: '📊'; }
     148
     149/* Content Cards */
    97150.speedox-wrap .postbox {
    98151  border: none;
    99152  border-radius: 12px;
    100153  margin-bottom: 25px;
    101   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     154  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    102155  background: white;
    103156  overflow: hidden;
    … …  
    141194}
    142195
     196/* Statistics Cards Grid */
    143197.speedox-wrap .form-table {
     198  display: grid;
     199  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     200  gap: 20px;
     201  background: transparent;
     202  border: none;
     203  box-shadow: none;
     204}
     205
     206.speedox-wrap .form-table tr {
    144207  background: white;
    145   border-radius: 8px;
    146   overflow: hidden;
    147   box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     208  border-radius: 12px;
     209  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     210  display: flex;
     211  flex-direction: column;
     212  padding: 20px;
     213  transition: all 0.3s ease;
     214  border: 1px solid #e5e7eb;
     215}
     216
     217.speedox-wrap .form-table tr:hover {
     218  transform: translateY(-5px);
     219  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    148220}
    149221
    150222.speedox-wrap .form-table th {
    151   width: 200px;
    152   padding: 18px 20px;
     223  width: auto;
     224  padding: 0 0 15px 0;
    153225  font-weight: 700;
    154226  color: #1f2937;
    155   background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    156   border-right: 1px solid #e5e7eb;
    157   font-size: 14px;
     227  background: transparent;
     228  border: none;
     229  font-size: 16px;
     230  text-align: left;
    158231}
    159232
    160233.speedox-wrap .form-table td {
    161   padding: 18px 20px;
    162   background: white;
    163   border-bottom: 1px solid #f1f5f9;
    164 }
    165 
    166 .speedox-wrap .form-table tr:hover td {
    167   background: #f8fafc;
    168 }
    169 
     234  padding: 0;
     235  background: transparent;
     236  border: none;
     237}
     238
     239/* Feature Cards with Statistics */
     240.speedox-wrap .form-table tr {
     241  position: relative;
     242  overflow: hidden;
     243}
     244
     245.speedox-wrap .form-table tr::before {
     246  content: '';
     247  position: absolute;
     248  top: 0;
     249  left: 0;
     250  right: 0;
     251  height: 4px;
     252  background: linear-gradient(135deg, #667eea, #764ba2);
     253}
     254
     255/* Enhanced Checkboxes */
    170256.speedox-wrap input[type="checkbox"] {
    171   margin-right: 10px;
    172   transform: scale(1.3);
     257  margin-right: 12px;
     258  transform: scale(1.4);
    173259  accent-color: #667eea;
    174260}
    … …  
    180266  font-size: 14px;
    181267  transition: color 0.3s ease;
     268  display: flex;
     269  align-items: center;
    182270}
    183271
    … …  
    186274}
    187275
     276/* Status Indicators */
     277.speedox-wrap .form-table tr {
     278  position: relative;
     279}
     280
     281.speedox-wrap .form-table tr::after {
     282  content: '';
     283  position: absolute;
     284  top: 20px;
     285  right: 20px;
     286  width: 12px;
     287  height: 12px;
     288  border-radius: 50%;
     289  background: #10b981;
     290  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
     291}
     292
     293/* Buttons */
    188294.speedox-wrap .button-primary {
    189295  background: linear-gradient(135deg, #10b981, #059669);
    … …  
    198304  text-transform: uppercase;
    199305  letter-spacing: 0.5px;
     306  position: fixed;
     307  bottom: 30px;
     308  right: 30px;
     309  z-index: 1003;
    200310}
    201311
    … …  
    224334}
    225335
     336/* Textarea */
    226337.speedox-wrap textarea {
    227338  border: 2px solid #e5e7eb;
    … …  
    234345  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    235346  transition: border-color 0.3s ease;
     347  width: 100%;
     348  height: 300px;
    236349}
    237350
    … …  
    242355}
    243356
     357/* Footer */
    244358.speedox-wrap .speedox-footer {
    245359  margin-top: 30px;
    … …  
    277391}
    278392
    279 @keyframes pulse {
    280   0%, 100% { transform: scale(1); }
    281   50% { transform: scale(1.05); }
    282 }
    283 
    284 /* Enhanced form styling */
    285 .speedox-wrap .form-table tr {
    286   transition: all 0.3s ease;
    287 }
    288 
    289 .speedox-wrap .form-table tr:hover {
    290   transform: translateX(5px);
    291   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    292 }
    293 
    294 /* Loading animation for save button */
    295 .speedox-wrap .button-primary:active {
    296   transform: translateY(0px) scale(0.98);
    297 }
    298 
    299 /* Responsive design */
     393/* Responsive Design */
    300394@media (max-width: 768px) {
    301   .speedox-wrap {
     395  .speedox-wrap::before,
     396  .speedox-wrap::after {
     397    display: none;
     398  }
     399 
     400  .speedox-wrap > * {
     401    margin-left: 0;
     402    width: 100%;
    302403    padding: 20px;
    303     margin: 10px;
     404  }
     405 
     406  .speedox-wrap .nav-tab-wrapper {
     407    position: static;
     408    width: 100%;
     409    height: auto;
     410    flex-direction: row;
     411    padding-top: 0;
     412    margin-bottom: 20px;
     413    background: white;
     414    border-radius: 8px;
     415    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     416    overflow-x: auto;
     417  }
     418 
     419  .speedox-wrap .nav-tab {
     420    white-space: nowrap;
     421    border-left: none;
     422    border-bottom: 3px solid transparent;
     423    padding: 12px 20px;
     424    color: #6b7280;
     425  }
     426 
     427  .speedox-wrap .nav-tab::before {
     428    display: none;
     429  }
     430 
     431  .speedox-wrap .nav-tab-active {
     432    border-bottom-color: #667eea;
     433    background: transparent;
     434  }
     435 
     436  .speedox-wrap .form-table {
     437    grid-template-columns: 1fr;
     438  }
     439 
     440  .speedox-wrap .button-primary {
     441    position: static;
     442    margin-top: 20px;
     443  }
     444}
     445
     446@media (max-width: 480px) {
     447  .speedox-wrap > * {
     448    padding: 15px;
    304449  }
    305450 
    306451  .speedox-wrap h1 {
    307     font-size: 26px;
    308   }
    309  
    310   .speedox-wrap .form-table th,
    311   .speedox-wrap .form-table td {
    312     display: block;
    313     width: 100%;
    314     padding: 15px;
    315   }
    316  
    317   .speedox-wrap .form-table th {
    318     border-bottom: 1px solid #e5e7eb;
    319     margin-bottom: 0;
    320     background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    321   }
    322  
    323   .speedox-wrap .nav-tab {
    324     margin-bottom: 8px;
    325     margin-right: 0;
    326     display: block;
    327     text-align: center;
    328   }
    329 }
    330 
    331 @media (max-width: 480px) {
    332   .speedox-wrap {
    333     padding: 15px;
    334   }
    335  
    336   .speedox-wrap h1 {
    337     font-size: 22px;
     452    font-size: 24px;
    338453  }
    339454 

  • speedox/trunk/speedox.php

    r3361438 r3361439  
    2424SpeedOx_Logger::init();
    2525
    26 define('SPEEDOX_VERSION', '1.1.2');
     26define('SPEEDOX_VERSION', '1.1.4'); // update on each release
    2727define('SPEEDOX_PLUGIN_DIR', plugin_dir_path(__FILE__));
    2828define('SPEEDOX_PLUGIN_URL', plugin_dir_url(__FILE__));
    … …  
    3737
    3838// Enqueue admin styles and scripts
    39 add_action('admin_enqueue_scripts', 'speedox_enqueue_admin_assets');
    40 function speedox_enqueue_admin_assets($hook) {
    41     if ($hook !== 'toplevel_page_speedox-dashboard') return;
    42 
    43     wp_enqueue_style(
    44         'speedox-admin-css',
    45         plugin_dir_url(__FILE__) . 'assets/css/admin.css',
    46         array(),
    47         SPEEDOX_VERSION
    48     );
    49 
    50     wp_enqueue_script(
    51         'speedox-admin-js',
    52         plugin_dir_url(__FILE__) . 'assets/js/admin.js',
    53         array('jquery'),
    54         SPEEDOX_VERSION,
    55         true
    56     );
     39add_action('admin_enqueue_scripts', 'speedox_admin_enqueue');
     40function speedox_admin_enqueue($hook) {
     41    if (strpos($hook, 'speedox') !== false) {
     42        wp_enqueue_style(
     43            'speedox-admin',
     44            plugin_dir_url(__FILE__) . 'assets/css/admin.css',
     45            array(),
     46            SPEEDOX_VERSION
     47        );
     48        wp_enqueue_script(
     49            'speedox-admin',
     50            plugin_dir_url(__FILE__) . 'assets/js/admin.js',
     51            array('jquery'),
     52            SPEEDOX_VERSION,
     53            true
     54        );
     55        wp_enqueue_style('dashicons');
     56    }
    5757}
    5858
Note: See TracChangeset for help on using the changeset viewer.