portfu_admin 1.3.2

Library of Admin tools build on toip of Portfu
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        overflow-x: hidden;
        width: 100%;
        height: 100%;
    }
    body {
        overflow-x: hidden;
        width: 100%;
        height: 100%;
    }
    .material-symbols-outlined {
        font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
    }

    /*theme based styles*/
    .bg {
        @apply bg-light-primary;
    }
    .text {
        @apply text-light-primary;
    }
    .dark .bg {
        @apply bg-dark-background;
    }
    .dark .text {
        @apply text-dark-text;
    }
    .ocean .bg {
        @apply bg-ocean-background;
    }
    .ocean .text {
        @apply text-ocean-text;
    }

    theme_selector_list a {
        @apply py-2 bg-neutral-200 block;
    }

    theme_selector_list a:hover {
        @apply bg-opacity-75;
    }

    .dark theme_selector_list a {
        @apply py-2 bg-neutral-600 block;
    }

    .b3 theme_selector_list a {
        @apply py-2 bg-neutral-200 block;
    }
}

@layer components {
    .page_container {
        @apply sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-lg;
        margin: 0 auto;
        padding: 20px;
        display: block;
    }

    .tab_container {
        position: relative;
        overflow-x: hidden;
    }

    .show {
        display: block !important;
    }

    .small-caps {
        font-variant: small-caps;
    }

    .sub_page_header {
        @apply text-2xl md:text-3xl leading-tight mb-4 text-gray-800 dark:text-dark-text;
    }

    val {
        @apply text-3xl block;
    }

    lab {
        @apply small-caps font-bold pb-2 block;
    }

    payments_wrapper lab {
        @apply pb-0;
    }

    sub_text {
        @apply text-sm pt-2;
    }

    third {
        @apply flex-1 bg-gray-50 dark:bg-gray-800 p-6 rounded-xl;
    }

    third > * {
        @apply block;
    }

    three_col {
        @apply flex justify-center;
    }

    section_third {
        @apply flex-1 bg-gray-50 dark:bg-gray-800 py-6 px-8 border-r border-gray-200 dark:border-gray-700;
    }

    section_third:first-child {
        @apply rounded-l-xl border-r border-gray-200 dark:border-gray-700;
    }

    section_third:last-child {
        @apply rounded-r-xl border-r-0;
    }

    section {
        @apply flex justify-center;
    }

    section_divider {
        @apply h-6 block;
    }

    two_col {
        @apply flex justify-between;
    }

    three_col_divider {
        @apply w-4;
    }

    [type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
        background-color: #333;
    }

}