dioxus-experiments/input.css at main · hmziqrs/dioxus-experiments · GitHub

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
@import "tailwindcss";

@plugin "daisyui/theme" {
    name: "shadlight";
    default: true; /* set as default */
    prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
    color-scheme: light; /* color of browser-provided UI */

    --color-base-100: theme("colors.neutral.50");
    --color-base-200: theme("colors.neutral.100");
    --color-base-300: theme("colors.neutral.200");
    --color-base-content: theme("colors.neutral.800");
    --color-primary: theme("colors.black");
    --color-primary-content: theme("colors.white");
    --color-secondary: theme("colors.pink.500");
    --color-secondary-content: theme("colors.white");
    --color-accent: theme("colors.green.500");
    --color-accent-content: theme("colors.white");
    --color-neutral: theme("colors.neutral.400");
    --color-neutral-content: theme("colors.white");
    --color-info: theme("colors.sky.500");
    --color-info-content: theme("colors.white");
    --color-success: theme("colors.emerald.500");
    --color-success-content: theme("colors.white");
    --color-warning: theme("colors.amber.500");
    --color-warning-content: theme("colors.neutral.800");
    --color-error: theme("colors.red.500");
    --color-error-content: theme("colors.white");

    /* border radius */
    --radius-selector: 1rem;
    --radius-field: 0.25rem;
    --radius-box: 0.5rem;

    /* base sizes */
    --size-selector: 0.25rem;
    --size-field: 0.25rem;

    /* border size */
    --border: 1px;

    /* effects */
    --depth: 1;
    --noise: 0;
}

@plugin "daisyui/theme" {
    name: "shaddark";
    default: false; /* not set as default */
    prefersdark: true; /* set as default dark mode (prefers-color-scheme:dark) */
    color-scheme: dark; /* color of browser-provided UI */

    --color-base-100: theme("colors.neutral.900");
    --color-base-200: theme("colors.neutral.800");
    --color-base-300: theme("colors.neutral.700");
    --color-base-content: theme("colors.neutral.100");
    --color-primary: theme("colors.white");
    --color-primary-content: theme("colors.black");
    --color-secondary: theme("colors.pink.500");
    --color-secondary-content: theme("colors.white");
    --color-accent: theme("colors.green.500");
    --color-accent-content: theme("colors.white");
    --color-neutral: theme("colors.neutral.600");
    --color-neutral-content: theme("colors.white");
    --color-info: theme("colors.sky.500");
    --color-info-content: theme("colors.white");
    --color-success: theme("colors.emerald.500");
    --color-success-content: theme("colors.white");
    --color-warning: theme("colors.amber.500");
    --color-warning-content: theme("colors.neutral.900");
    --color-error: theme("colors.red.500");
    --color-error-content: theme("colors.white");

    /* border radius */
    --radius-selector: 1rem;
    --radius-field: 0.25rem;
    --radius-box: 0.25rem;

    /* base sizes */
    --size-selector: 0.25rem;
    --size-field: 0.25rem;

    /* border size */
    --border: 0.5px;

    /* effects */
    --depth: 0;
    --noise: 0;
}

@plugin "daisyui" {
    themes:
        shadlight --default,
        shaddark --prefersdark;
    ripple: false;
}

input {
    /* @apply transition duration-300 ease-in-out focus:outline-none focus:ring-primary; */
}

/* @layer base {
} */

input:not(.checkbox) {
    @apply transition duration-300 ease-in-out focus:outline-none focus:ring-primary;
}
.input:focus,
input:focus {
    outline: none !important;
}

.btn {
    font-weight: normal;
    box-shadow: none;
    translate: none;
    padding-inline: 0px;
    height: calc(var(--size) * 0.8);
    padding: calc(var(--btn-p) * 0.7) calc(var(--btn-p) * 1.4);
}

html {
    background: var(--color-base-100);
}