-

{{.locale.Tr "notification.notifications"}}

+

+ {{svg "octicon-bell" 28 "gt-mr-3 gt-mt-1"}} + {{.locale.Tr "notification.notifications"}} +

{{$notificationUnreadCount := call .NotificationUnreadCount}} @@ -23,11 +26,14 @@
{{if eq (len .Notifications) 0}} - {{if eq .Status 1}} - {{.locale.Tr "notification.no_unread"}} - {{else}} - {{.locale.Tr "notification.no_read"}} - {{end}} +
+ {{svg "octicon-inbox" 56 "gt-mb-4"}} + {{if eq .Status 1}} + {{.locale.Tr "notification.no_unread"}} + {{else}} + {{.locale.Tr "notification.no_read"}} + {{end}} +
{{else}} @@ -76,7 +82,7 @@ {{$.CsrfTokenHtml}} - + diff --git a/tests/integration/api_packages_alpine_test.go b/tests/integration/api_packages_alpine_test.go new file mode 100644 index 0000000000..473dcc0424 --- /dev/null +++ b/tests/integration/api_packages_alpine_test.go @@ -0,0 +1,229 @@ +// Copyright 2023 The Gitea Authors. All rights reserved. +// SPDX-License-Identifier: MIT + +package integration + +import ( + "archive/tar" + "bufio" + "bytes" + "compress/gzip" + "encoding/base64" + "fmt" + "io" + "net/http" + "testing" + + "code.gitea.io/gitea/models/db" + "code.gitea.io/gitea/models/packages" + "code.gitea.io/gitea/models/unittest" + user_model "code.gitea.io/gitea/models/user" + alpine_module "code.gitea.io/gitea/modules/packages/alpine" + "code.gitea.io/gitea/tests" + + "github.com/stretchr/testify/assert" +) + +func TestPackageAlpine(t *testing.T) { + defer tests.PrepareTestEnv(t)() + + user := unittest.AssertExistsAndLoadBean(t, &user_model.User{ID: 2}) + + packageName := "gitea-test" + packageVersion := "1.4.1-r3" + + base64AlpinePackageContent := `H4sIAAAAAAACA9ML9nT30wsKdtTLzjNJzjYuckjPLElN1DUzMUxMNTa11CsqTtQrKE1ioAAYAIGZ +iQmYBgJ02hDENjQxMTAzMzQ1MTVjMDA0MTQ1ZlAwYKADKC0uSSxSUGAYoWDm4sZZtypv75+q2fVT +POD1bKkFB22ms+g1z+H4dk7AhC3HwUSj9EbT0Rk3Dn55dHxy/K7Q+Nl/i+L7Z036ypcRvvpZuMiN +s7wbZL/klqRGGshv9Gi0qHTgTZfw3HytnJdx9c3NTRp/PHn+Z50uq2pjkilzjtpfd+uzQMw1M7cY +i9RXJasnT2M+vDXCesLK7MilJt8sGplj4xUlLMUun9SzY+phFpxWxRXa06AseV9WvzH3jtGGoL5A +vQkea+VKPj5R+Cb461tIk97qpa9nJYsJujTNl2B/J1P52H/D2rPr/j19uU8p7cMSq5tmXk51ReXl +F/Yddr9XsMpEwFKlXSPo3QSGwnCOG8y2uadjm6ui998WYXNYubjg78N3a7bnXjhrl5fB8voI++LI +1FP5W44e2xf4Ou2wrtyic1Onz7MzMV5ksuno2V/LVG4eN/15X/n2/2vJ2VV+T68aT327dOrhd6e6 +q5Y0V82Y83tdqkFa8TW2BvGCZ0ds/iibHVpzKuPcuSULO63/bNmfrnhjWqXzhMSXTb5Cv4vPaxSL +8LFMdqmxbN7+Y+Yi0ZyZhz4UxexLuHHFd1VFvk+kwvniq3P+f9rh52InWnL8Lpvedcecoh1GFSc5 +xZ9VBGex2V269HZfwxSVCvP35wQfi2xKX+lYMXtF48n1R65O2PLWpm69RdESMa79dlrTGazsZacu +MbMLeSSScPORZde76/MBV6SFJAAEAAAfiwgAAAAAAAID7VRLaxsxEN6zfoUgZ++OVq+1aUIhUDeY +pKa49FhmJdkW3ofRysXpr69220t9SCk0gZJ+IGaY56eBmbxY4/m9Q+vCUOTr1fLu4d2H7O8CEpQQ +k0y4lAClypgQoBSTQqoMGBMgMnrOXgCnIWJIVLLXCcaoib5110CSij/V7D9eCZ5p5f9o/5VkF/tf +MqUzCi+5/6Hv41Nxv/Nffu4fwRVdus4FjM7S+pFiffKNpTxnkMMsALmin5PnHgMtS8rkgvGFBPpp +c0tLKDk5HnYdto5e052PDmfRDXE0fnUh2VgucjYLU5h1g0mm5RhGNymMrtEccOfIKTTJsY/xOCyK +YqqT+74gExWbmI2VlJ6LeQUcyPFH2lh/9SBuV/wjfXPohDnw8HZKviGD/zYmCZgrgsHsk36u1Bcl +SB/8zne/0jV92/qYbKRF38X0niiemN2QxhvXDWOL+7tNGhGeYt+m22mwaR6pddGZNM8FSeRxj8PY +X7PaqdqAVlqWXHKnmQGmK43VlqNlILRilbBSMI2jV5Vbu5XGSVsDyGc7yd8B/gK2qgAIAAAfiwgA +AAAAAAID7dNNSgMxGAbg7MSCOxcu5wJOv0x+OlkU7K5QoYXqVsxMMihlKMwP1Fu48QQewCN4DfEQ +egUz4sYuFKEtFN9n870hWSSQN+7P7GrsrfNV3Y9dW5Z3bNMo0FJ+zmB9EhcJ41KS1lxJpRnxbsWi +FduBtm5sFa7C/ifOo7y5Lf2QeiHar6jTaDSbnF5Mp+fzOL/x+aJuy3g+HvGhs8JY4b3yOpMZOZEo +lRW+MEoTTw3ZwqU0INNjsAe2VPk/9b/L3/s/kIKzqOtk+IbJGTtmr+bx7WoxOUoun98frk/un14O +Djfa/2q5bH4699v++uMAAAAAAAAAAAAAAAAAAAAAAHbgA/eXQh8AKAAA` + content, err := base64.StdEncoding.DecodeString(base64AlpinePackageContent) + assert.NoError(t, err) + + branches := []string{"v3.16", "v3.17"} + repositories := []string{"main", "testing"} + + rootURL := fmt.Sprintf("/api/packages/%s/alpine", user.Name) + + t.Run("RepositoryKey", func(t *testing.T) { + defer tests.PrintCurrentTest(t)() + + req := NewRequest(t, "GET", rootURL+"/key") + resp := MakeRequest(t, req, http.StatusOK) + + assert.Equal(t, "application/x-pem-file", resp.Header().Get("Content-Type")) + assert.Contains(t, resp.Body.String(), "-----BEGIN PUBLIC KEY-----") + }) + + for _, branch := range branches { + for _, repository := range repositories { + t.Run(fmt.Sprintf("[Branch:%s,Repository:%s]", branch, repository), func(t *testing.T) { + t.Run("Upload", func(t *testing.T) { + defer tests.PrintCurrentTest(t)() + + uploadURL := fmt.Sprintf("%s/%s/%s", rootURL, branch, repository) + + req := NewRequestWithBody(t, "PUT", uploadURL, bytes.NewReader([]byte{})) + MakeRequest(t, req, http.StatusUnauthorized) + + req = NewRequestWithBody(t, "PUT", uploadURL, bytes.NewReader([]byte{})) + AddBasicAuthHeader(req, user.Name) + MakeRequest(t, req, http.StatusBadRequest) + + req = NewRequestWithBody(t, "PUT", uploadURL, bytes.NewReader(content)) + AddBasicAuthHeader(req, user.Name) + MakeRequest(t, req, http.StatusCreated) + + pvs, err := packages.GetVersionsByPackageType(db.DefaultContext, user.ID, packages.TypeAlpine) + assert.NoError(t, err) + assert.Len(t, pvs, 1) + + pd, err := packages.GetPackageDescriptor(db.DefaultContext, pvs[0]) + assert.NoError(t, err) + assert.Nil(t, pd.SemVer) + assert.IsType(t, &alpine_module.VersionMetadata{}, pd.Metadata) + assert.Equal(t, packageName, pd.Package.Name) + assert.Equal(t, packageVersion, pd.Version.Version) + + pfs, err := packages.GetFilesByVersionID(db.DefaultContext, pvs[0].ID) + assert.NoError(t, err) + assert.NotEmpty(t, pfs) + assert.Condition(t, func() bool { + seen := false + expectedFilename := fmt.Sprintf("%s-%s.apk", packageName, packageVersion) + expectedCompositeKey := fmt.Sprintf("%s|%s|x86_64", branch, repository) + for _, pf := range pfs { + if pf.Name == expectedFilename && pf.CompositeKey == expectedCompositeKey { + if seen { + return false + } + seen = true + + assert.True(t, pf.IsLead) + + pfps, err := packages.GetProperties(db.DefaultContext, packages.PropertyTypeFile, pf.ID) + assert.NoError(t, err) + + for _, pfp := range pfps { + switch pfp.Name { + case alpine_module.PropertyBranch: + assert.Equal(t, branch, pfp.Value) + case alpine_module.PropertyRepository: + assert.Equal(t, repository, pfp.Value) + case alpine_module.PropertyArchitecture: + assert.Equal(t, "x86_64", pfp.Value) + } + } + } + } + return seen + }) + }) + + t.Run("Index", func(t *testing.T) { + defer tests.PrintCurrentTest(t)() + + url := fmt.Sprintf("%s/%s/%s/x86_64/APKINDEX.tar.gz", rootURL, branch, repository) + + req := NewRequest(t, "GET", url) + resp := MakeRequest(t, req, http.StatusOK) + + assert.Condition(t, func() bool { + br := bufio.NewReader(resp.Body) + + gzr, err := gzip.NewReader(br) + assert.NoError(t, err) + + for { + gzr.Multistream(false) + + tr := tar.NewReader(gzr) + for { + hd, err := tr.Next() + if err == io.EOF { + break + } + assert.NoError(t, err) + + if hd.Name == "APKINDEX" { + buf, err := io.ReadAll(tr) + assert.NoError(t, err) + + s := string(buf) + + assert.Contains(t, s, "C:Q1/se1PjO94hYXbfpNR1/61hVORIc=\n") + assert.Contains(t, s, "P:"+packageName+"\n") + assert.Contains(t, s, "V:"+packageVersion+"\n") + assert.Contains(t, s, "A:x86_64\n") + assert.Contains(t, s, "T:Gitea Test Package\n") + assert.Contains(t, s, "U:https://gitea.io/\n") + assert.Contains(t, s, "L:MIT\n") + assert.Contains(t, s, "S:1353\n") + assert.Contains(t, s, "I:4096\n") + assert.Contains(t, s, "o:gitea-test\n") + assert.Contains(t, s, "m:KN4CK3R \n") + assert.Contains(t, s, "t:1679498030\n") + + return true + } + } + + err = gzr.Reset(br) + if err == io.EOF { + break + } + assert.NoError(t, err) + } + + return false + }) + }) + + t.Run("Download", func(t *testing.T) { + defer tests.PrintCurrentTest(t)() + + req := NewRequest(t, "GET", fmt.Sprintf("%s/%s/%s/x86_64/%s-%s.apk", rootURL, branch, repository, packageName, packageVersion)) + MakeRequest(t, req, http.StatusOK) + }) + }) + } + } + + t.Run("Delete", func(t *testing.T) { + defer tests.PrintCurrentTest(t)() + + for _, branch := range branches { + for _, repository := range repositories { + req := NewRequest(t, "DELETE", fmt.Sprintf("%s/%s/%s/x86_64/%s-%s.apk", rootURL, branch, repository, packageName, packageVersion)) + MakeRequest(t, req, http.StatusUnauthorized) + + req = NewRequest(t, "DELETE", fmt.Sprintf("%s/%s/%s/x86_64/%s-%s.apk", rootURL, branch, repository, packageName, packageVersion)) + AddBasicAuthHeader(req, user.Name) + MakeRequest(t, req, http.StatusNoContent) + + // Deleting the last file of an architecture should remove that index + req = NewRequest(t, "GET", fmt.Sprintf("%s/%s/%s/x86_64/APKINDEX.tar.gz", rootURL, branch, repository)) + MakeRequest(t, req, http.StatusNotFound) + } + } + }) +} diff --git a/tests/integration/api_packages_goproxy_test.go b/tests/integration/api_packages_goproxy_test.go new file mode 100644 index 0000000000..08c1ca54f1 --- /dev/null +++ b/tests/integration/api_packages_goproxy_test.go @@ -0,0 +1,166 @@ +// Copyright 2023 The Gitea Authors. All rights reserved. +// SPDX-License-Identifier: MIT + +package integration + +import ( + "archive/zip" + "bytes" + "fmt" + "net/http" + "testing" + "time" + + "code.gitea.io/gitea/models/db" + "code.gitea.io/gitea/models/packages" + "code.gitea.io/gitea/models/unittest" + user_model "code.gitea.io/gitea/models/user" + "code.gitea.io/gitea/tests" + + "github.com/stretchr/testify/assert" +) + +func TestPackageGo(t *testing.T) { + defer tests.PrepareTestEnv(t)() + + user := unittest.AssertExistsAndLoadBean(t, &user_model.User{ID: 2}) + + packageName := "gitea.com/go-gitea/gitea" + packageVersion := "v0.0.1" + packageVersion2 := "v0.0.2" + goModContent := `module "gitea.com/go-gitea/gitea"` + + createArchive := func(files map[string][]byte) []byte { + var buf bytes.Buffer + zw := zip.NewWriter(&buf) + for name, content := range files { + w, _ := zw.Create(name) + w.Write(content) + } + zw.Close() + return buf.Bytes() + } + + url := fmt.Sprintf("/api/packages/%s/go", user.Name) + + t.Run("Upload", func(t *testing.T) { + defer tests.PrintCurrentTest(t)() + + content := createArchive(nil) + + req := NewRequestWithBody(t, "PUT", url+"/upload", bytes.NewReader(content)) + MakeRequest(t, req, http.StatusUnauthorized) + + req = NewRequestWithBody(t, "PUT", url+"/upload", bytes.NewReader(content)) + AddBasicAuthHeader(req, user.Name) + MakeRequest(t, req, http.StatusBadRequest) + + content = createArchive(map[string][]byte{ + packageName + "@" + packageVersion + "/go.mod": []byte(goModContent), + }) + + req = NewRequestWithBody(t, "PUT", url+"/upload", bytes.NewReader(content)) + AddBasicAuthHeader(req, user.Name) + MakeRequest(t, req, http.StatusCreated) + + pvs, err := packages.GetVersionsByPackageType(db.DefaultContext, user.ID, packages.TypeGo) + assert.NoError(t, err) + assert.Len(t, pvs, 1) + + pd, err := packages.GetPackageDescriptor(db.DefaultContext, pvs[0]) + assert.NoError(t, err) + assert.Nil(t, pd.Metadata) + assert.Equal(t, packageName, pd.Package.Name) + assert.Equal(t, packageVersion, pd.Version.Version) + + pfs, err := packages.GetFilesByVersionID(db.DefaultContext, pvs[0].ID) + assert.NoError(t, err) + assert.Len(t, pfs, 1) + assert.Equal(t, packageVersion+".zip", pfs[0].Name) + assert.True(t, pfs[0].IsLead) + + pb, err := packages.GetBlobByID(db.DefaultContext, pfs[0].BlobID) + assert.NoError(t, err) + assert.Equal(t, int64(len(content)), pb.Size) + + req = NewRequestWithBody(t, "PUT", url+"/upload", bytes.NewReader(content)) + AddBasicAuthHeader(req, user.Name) + MakeRequest(t, req, http.StatusConflict) + + time.Sleep(time.Second) + + content = createArchive(map[string][]byte{ + packageName + "@" + packageVersion2 + "/go.mod": []byte(goModContent), + }) + + req = NewRequestWithBody(t, "PUT", url+"/upload", bytes.NewReader(content)) + AddBasicAuthHeader(req, user.Name) + MakeRequest(t, req, http.StatusCreated) + }) + + t.Run("List", func(t *testing.T) { + defer tests.PrintCurrentTest(t)() + + req := NewRequest(t, "GET", fmt.Sprintf("%s/%s/@v/list", url, packageName)) + resp := MakeRequest(t, req, http.StatusOK) + + assert.Equal(t, packageVersion+"\n"+packageVersion2+"\n", resp.Body.String()) + }) + + t.Run("Info", func(t *testing.T) { + defer tests.PrintCurrentTest(t)() + + req := NewRequest(t, "GET", fmt.Sprintf("%s/%s/@v/%s.info", url, packageName, packageVersion)) + resp := MakeRequest(t, req, http.StatusOK) + + type Info struct { + Version string `json:"Version"` + Time time.Time `json:"Time"` + } + + info := &Info{} + DecodeJSON(t, resp, &info) + + assert.Equal(t, packageVersion, info.Version) + + req = NewRequest(t, "GET", fmt.Sprintf("%s/%s/@v/latest.info", url, packageName)) + resp = MakeRequest(t, req, http.StatusOK) + + info = &Info{} + DecodeJSON(t, resp, &info) + + assert.Equal(t, packageVersion2, info.Version) + + req = NewRequest(t, "GET", fmt.Sprintf("%s/%s/@latest", url, packageName)) + resp = MakeRequest(t, req, http.StatusOK) + + info = &Info{} + DecodeJSON(t, resp, &info) + + assert.Equal(t, packageVersion2, info.Version) + }) + + t.Run("GoMod", func(t *testing.T) { + defer tests.PrintCurrentTest(t)() + + req := NewRequest(t, "GET", fmt.Sprintf("%s/%s/@v/%s.mod", url, packageName, packageVersion)) + resp := MakeRequest(t, req, http.StatusOK) + + assert.Equal(t, goModContent, resp.Body.String()) + + req = NewRequest(t, "GET", fmt.Sprintf("%s/%s/@v/latest.mod", url, packageName)) + resp = MakeRequest(t, req, http.StatusOK) + + assert.Equal(t, goModContent, resp.Body.String()) + }) + + t.Run("Download", func(t *testing.T) { + defer tests.PrintCurrentTest(t)() + + req := NewRequest(t, "GET", fmt.Sprintf("%s/%s/@v/%s.zip", url, packageName, packageVersion)) + MakeRequest(t, req, http.StatusOK) + + req = NewRequest(t, "GET", fmt.Sprintf("%s/%s/@v/latest.zip", url, packageName)) + MakeRequest(t, req, http.StatusOK) + }) +} diff --git a/tests/integration/api_team_test.go b/tests/integration/api_team_test.go index 934e6bf230..60c61394d4 100644 --- a/tests/integration/api_team_test.go +++ b/tests/integration/api_team_test.go @@ -29,6 +29,7 @@ func TestAPITeam(t *testing.T) { teamUser := unittest.AssertExistsAndLoadBean(t, &organization.TeamUser{ID: 1}) team := unittest.AssertExistsAndLoadBean(t, &organization.Team{ID: teamUser.TeamID}) + org := unittest.AssertExistsAndLoadBean(t, &organization.Organization{ID: teamUser.OrgID}) user := unittest.AssertExistsAndLoadBean(t, &user_model.User{ID: teamUser.UID}) session := loginUser(t, user.Name) @@ -40,6 +41,7 @@ func TestAPITeam(t *testing.T) { DecodeJSON(t, resp, &apiTeam) assert.EqualValues(t, team.ID, apiTeam.ID) assert.Equal(t, team.Name, apiTeam.Name) + assert.EqualValues(t, convert.ToOrganization(db.DefaultContext, org), apiTeam.Organization) // non team member user will not access the teams details teamUser2 := unittest.AssertExistsAndLoadBean(t, &organization.TeamUser{ID: 3}) @@ -58,7 +60,7 @@ func TestAPITeam(t *testing.T) { session = loginUser(t, user.Name) token = getTokenForLoggedInUser(t, session, auth_model.AccessTokenScopeAdminOrg) - org := unittest.AssertExistsAndLoadBean(t, &user_model.User{ID: 6}) + org = unittest.AssertExistsAndLoadBean(t, &organization.Organization{ID: 6}) // Create team. teamToCreate := &api.CreateTeamOption{ diff --git a/tests/integration/goget_test.go b/tests/integration/goget_test.go index fab3911464..854f8d7a2d 100644 --- a/tests/integration/goget_test.go +++ b/tests/integration/goget_test.go @@ -33,3 +33,29 @@ func TestGoGet(t *testing.T) { assert.Equal(t, expected, resp.Body.String()) } + +func TestGoGetForSSH(t *testing.T) { + defer tests.PrepareTestEnv(t)() + + old := setting.Repository.GoGetCloneURLProtocol + defer func() { + setting.Repository.GoGetCloneURLProtocol = old + }() + setting.Repository.GoGetCloneURLProtocol = "ssh" + + req := NewRequest(t, "GET", "/blah/glah/plah?go-get=1") + resp := MakeRequest(t, req, http.StatusOK) + + expected := fmt.Sprintf(` + + + + + + + go get --insecure %[1]s:%[2]s/blah/glah + +`, setting.Domain, setting.HTTPPort, setting.AppURL, setting.SSH.Domain, setting.SSH.Port) + + assert.Equal(t, expected, resp.Body.String()) +} diff --git a/tests/integration/repo_commits_test.go b/tests/integration/repo_commits_test.go index 57ecc4da5f..0cfd21485d 100644 --- a/tests/integration/repo_commits_test.go +++ b/tests/integration/repo_commits_test.go @@ -7,6 +7,7 @@ import ( "fmt" "net/http" "net/http/httptest" + "os" "path" "sync" "testing" @@ -134,6 +135,9 @@ func TestRepoCommitsWithStatusRunning(t *testing.T) { } func TestRepoCommitsStatusParallel(t *testing.T) { + if os.Getenv("CI") != "" { + t.Skip("Skipping because test is flaky on CI") + } defer tests.PrepareTestEnv(t)() session := loginUser(t, "user2") diff --git a/web_src/css/runner.css b/web_src/css/actions.css similarity index 100% rename from web_src/css/runner.css rename to web_src/css/actions.css diff --git a/web_src/css/base.css b/web_src/css/base.css index aa86d140fe..bcf7b0811b 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -321,6 +321,16 @@ progress::-moz-progress-bar { opacity: 1 !important; } +.svg { + display: inline-block; + vertical-align: text-top; + fill: currentcolor; +} + +.middle .svg { + vertical-align: middle; +} + .unselectable, .button, .lines-num, @@ -338,7 +348,11 @@ a { text-decoration-skip-ink: all; } +/* muted link = only colored when hovered */ +/* silenced link = never colored */ + a.muted, +a.silenced, .muted-links a { color: inherit; } @@ -350,6 +364,10 @@ a.muted:hover [class*="color-text"], color: var(--color-primary); } +a.silenced:hover { + color: inherit; +} + .delete-button, .delete-button:hover { color: var(--color-red); @@ -364,12 +382,6 @@ a.label, text-decoration: none !important; } -/* for most cases, we only use our svg icon as inline icon, so we need to make them inline-block and vertical-align: middle */ -svg.svg { - display: inline-block; - vertical-align: middle; -} - .ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, @@ -1052,62 +1064,6 @@ svg.svg { box-shadow: -1px -1px 0 0 var(--color-secondary); } -.ui.cards > .card, -.ui.card { - background: var(--color-card); - border: 1px solid var(--color-secondary); - box-shadow: none; -} - -.ui.cards > .card > .content, -.ui.card > .content { - border-color: var(--color-secondary); -} - -.ui.cards > .card > .extra, -.ui.card > .extra, -.ui.cards > .card > .extra a:not(.ui), -.ui.card > .extra a:not(.ui) { - color: var(--color-text); -} - -.ui.cards > .card > .extra a:not(.ui):hover, -.ui.card > .extra a:not(.ui):hover { - color: var(--color-primary); -} - -.ui.cards > .card > .content > .header, -.ui.card > .content > .header { - color: var(--color-text); -} - -.ui.cards > .card > .content > .description, -.ui.card > .content > .description { - color: var(--color-text); -} - -.ui.cards > .card .meta > a:not(.ui), -.ui.card .meta > a:not(.ui) { - color: var(--color-text-light-2); -} - -.ui.cards > .card .meta > a:not(.ui):hover, -.ui.card .meta > a:not(.ui):hover { - color: var(--color-text); -} - -.ui.cards a.card:hover, -a.ui.card:hover { - border: 1px solid var(--color-secondary); - background: var(--color-card); -} - -.ui.cards > .card > .extra, -.ui.card > .extra { - color: var(--color-text); - border-top-color: var(--color-secondary-light-1) !important; -} - .ui.comments .comment .text { margin: 0; } @@ -1189,12 +1145,10 @@ a.ui.card:hover { img.ui.avatar, .ui.avatar img, -.ui.avatar svg, -.ui.cards > .card img.avatar, -.ui.cards > .card .avatar img, -.ui.card img.avatar, -.ui.card .avatar img { +.ui.avatar svg { border-radius: var(--border-radius); + object-fit: contain; + aspect-ratio: 1; } .ui.divided.list > .item { @@ -1967,11 +1921,6 @@ img.ui.avatar, color: var(--color-text-light); } -.repo-title .avatar { - width: 32px !important; - height: 32px !important; -} - .repo-title .labels { margin-left: 0.5rem; } @@ -2244,13 +2193,16 @@ a.ui.active.label:hover { border-left: none; } -.ui.button.button-link { +/* a ghost button can be used as inline text, it doesn't have obvious styles */ +.button.button-ghost { background: transparent; border: none; color: inherit; + margin: 0; + padding: 0; } -.ui.button.button-link:hover { +.button.button-ghost:hover { color: var(--color-primary); } @@ -2347,19 +2299,6 @@ a.ui.active.label:hover { border-color: var(--color-secondary-dark-3) !important; } -.ui.tertiary.button { - color: var(--color-text-light); - border: none; -} - -.ui.tertiary.button:hover { - color: var(--color-text); -} - -.ui.tertiary.button:focus { - color: var(--color-text-dark); -} - .ui.primary.label, .ui.primary.labels .label, .ui.ui.ui.primary.label { @@ -2595,6 +2534,11 @@ a.ui.basic.label:hover { line-height: .67em; } +.rss-icon { + display: inline-flex; + color: var(--color-text-light-1); +} + table th[data-sortt-asc]:hover, table th[data-sortt-desc]:hover { background: rgba(0, 0, 0, 0.1) !important; diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css index 4512367dc7..6048c0cdad 100644 --- a/web_src/css/dashboard.css +++ b/web_src/css/dashboard.css @@ -171,10 +171,6 @@ border-bottom: 1px solid var(--color-secondary); } -.feeds .list ul li.private { - background-color: var(--color-box-body-highlight); -} - .feeds .list ul li .repo-list-link { padding: 6px 1em; display: block; diff --git a/web_src/css/editor.css b/web_src/css/editor/fileeditor.css similarity index 100% rename from web_src/css/editor.css rename to web_src/css/editor/fileeditor.css diff --git a/web_src/css/console/console.css b/web_src/css/features/console.css similarity index 100% rename from web_src/css/console/console.css rename to web_src/css/features/console.css diff --git a/web_src/css/tribute.css b/web_src/css/features/tribute.css similarity index 100% rename from web_src/css/tribute.css rename to web_src/css/features/tribute.css diff --git a/web_src/css/form.css b/web_src/css/form.css index 85d1136de8..9e1a72380b 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -206,32 +206,6 @@ textarea:focus, } } -.signin .oauth2 div { - display: inline-block; -} - -.signin .oauth2 div p { - margin: 10px 5px 0 0; - float: left; -} - -.signin .oauth2 a { - margin-right: 3px; -} - -.signin .oauth2 a:last-child { - margin-right: 0; -} - -.signin .oauth2 img { - width: 32px; - height: 32px; -} - -.signin .oauth2 img.openidConnect { - width: auto; -} - @media (min-width: 768px) { .g-recaptcha-style, .h-captcha-style { diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 22e18f7926..306e4bd51d 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -73,6 +73,8 @@ Gitea's private styles use `g-` prefix. .gt-whitespace-nowrap { white-space: nowrap !important; } .gt-whitespace-pre { white-space: pre !important; } .gt-whitespace-pre-wrap { white-space: pre-wrap !important; } +.gt-object-contain { object-fit: contain !important; } +.gt-self-center { align-self: center !important; } .gt-overflow-x-auto { overflow-x: auto !important; } .gt-overflow-x-scroll { overflow-x: scroll !important; } diff --git a/web_src/css/index.css b/web_src/css/index.css index 6fb92f2ecb..c6690f3ff3 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -1,45 +1,53 @@ -@import "./animations.css"; +@import "./modules/animations.css"; +@import "./modules/tippy.css"; +@import "./modules/modal.css"; +@import "./modules/breadcrumb.css"; +@import "./modules/card.css"; +@import "./modules/comment.css"; + @import "./shared/issuelist.css"; @import "./shared/repoorg.css"; + @import "./features/dropzone.css"; @import "./features/gitgraph.css"; @import "./features/heatmap.css"; @import "./features/imagediff.css"; @import "./features/codeeditor.css"; @import "./features/projects.css"; -@import "./modules/tippy.css"; -@import "./modules/modal.css"; -@import "./modules/breadcrumb.css"; -@import "./code/linebutton.css"; +@import "./features/tribute.css"; +@import "./features/console.css"; + @import "./markup/content.css"; @import "./markup/codecopy.css"; @import "./markup/asciicast.css"; @import "./chroma/base.css"; @import "./chroma/light.css"; + @import "./codemirror/base.css"; @import "./codemirror/light.css"; -@import "./console/console.css"; -@import "./svg.css"; -@import "./tribute.css"; @import "./font_i18n.css"; @import "./base.css"; @import "./home.css"; @import "./install.css"; @import "./form.css"; -@import "./repository.css"; -@import "./repository/release-tag.css"; -@import "./repository/issue-label.css"; -@import "./repository/issue-list.css"; -@import "./repository/list-header.css"; -@import "./editor.css"; + +@import "./repo.css"; +@import "./repo/release-tag.css"; +@import "./repo/issue-label.css"; +@import "./repo/issue-list.css"; +@import "./repo/list-header.css"; +@import "./repo/linebutton.css"; + +@import "./editor/fileeditor.css"; @import "./editor/combomarkdowneditor.css"; -@import "./organization.css"; + +@import "./org.css"; @import "./user.css"; @import "./dashboard.css"; @import "./admin.css"; @import "./explore.css"; @import "./review.css"; -@import "./runner.css"; +@import "./actions.css"; @import "./helpers.css"; diff --git a/web_src/css/animations.css b/web_src/css/modules/animations.css similarity index 100% rename from web_src/css/animations.css rename to web_src/css/modules/animations.css diff --git a/web_src/css/modules/card.css b/web_src/css/modules/card.css new file mode 100644 index 0000000000..c0f7e83037 --- /dev/null +++ b/web_src/css/modules/card.css @@ -0,0 +1,134 @@ +/* Below styles are a subset of the full fomantic card styles which are */ +/* needed to get all current uses of fomantic cards working. */ +/* TODO: remove all these styles and use custom styling instead */ + +.ui.card:last-child { + margin-bottom: 0; +} +.ui.card:first-child { + margin-top: 0; +} + +.ui.cards > .card, +.ui.card { + display: flex; + flex-direction: column; + max-width: 100%; + width: 290px; + min-height: 0; + padding: 0; + background: var(--color-card); + border: 1px solid var(--color-secondary); + box-shadow: none; + word-wrap: break-word; +} + +.ui.card { + margin: 1em 0; +} + +.ui.cards { + display: flex; + margin: -0.875em -0.5em; + flex-wrap: wrap; +} + +.ui.cards > .card { + display: flex; + margin: 0.875em 0.5em; + float: none; +} + +.ui.cards > .card > .content, +.ui.card > .content { + border-top: 1px solid var(--color-secondary); + max-width: 100%; + padding: 1em; + font-size: 1em; +} + +.ui.cards > .card > .content > .meta + .description, +.ui.cards > .card > .content > .header + .description, +.ui.card > .content > .meta + .description, +.ui.card > .content > .header + .description { + margin-top: .5em; +} + +.ui.cards > .card > .content > .header:not(.ui), +.ui.card > .content > .header:not(.ui) { + font-weight: 500; + font-size: 1.28571429em; + margin-top: -.21425em; + line-height: 1.28571429em; +} + +.ui.cards > .card > .content:first-child, +.ui.card > .content:first-child { + border-top: none; + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +.ui.cards > .card > :last-child, +.ui.card > :last-child { + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +.ui.cards > .card > :only-child, +.ui.card > :only-child { + border-radius: var(--border-radius) !important; +} + +.ui.cards > .card > .extra, +.ui.card > .extra, +.ui.cards > .card > .extra a:not(.ui), +.ui.card > .extra a:not(.ui) { + color: var(--color-text); +} + +.ui.cards > .card > .extra a:not(.ui):hover, +.ui.card > .extra a:not(.ui):hover { + color: var(--color-primary); +} + +.ui.cards > .card > .content > .header, +.ui.card > .content > .header { + color: var(--color-text); +} + +.ui.cards > .card > .content > .description, +.ui.card > .content > .description { + color: var(--color-text); +} + +.ui.cards > .card .meta > a:not(.ui), +.ui.card .meta > a:not(.ui) { + color: var(--color-text-light-2); +} + +.ui.cards > .card .meta > a:not(.ui):hover, +.ui.card .meta > a:not(.ui):hover { + color: var(--color-text); +} + +.ui.cards a.card:hover, +a.ui.card:hover { + border: 1px solid var(--color-secondary); + background: var(--color-card); +} + +.ui.cards > .card > .extra, +.ui.card > .extra { + color: var(--color-text); + border-top-color: var(--color-secondary-light-1) !important; +} + +.ui.three.cards { + margin-left: -1em; + margin-right: -1em; +} + +.ui.three.cards > .card { + width: calc(33.33333333333333% - 2em); + margin-left: 1em; + margin-right: 1em; +} diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css new file mode 100644 index 0000000000..5a90c0852f --- /dev/null +++ b/web_src/css/modules/comment.css @@ -0,0 +1,91 @@ +/* These are the remnants of the fomantic comment module */ +/* TODO: remove all of these rules */ + +.ui.comments { + margin: 1.5em 0; + max-width: 650px; +} + +.ui.comments:first-child { + margin-top: 0; +} + +.ui.comments:last-child { + margin-bottom: 0; +} + +.ui.comments .comment { + position: relative; + background: none; + margin: 0.5em 0 0; + padding: 0.5em 0 0; + border: none; + border-top: none; + line-height: 1.2; +} + +.ui.comments .comment:first-child { + margin-top: 0; + padding-top: 0; +} + +.ui.comments .comment > .comments { + margin: 0 0 0.5em 0.5em; + padding: 1em 0 1em 1em; +} + +.ui.comments .comment > .comments::before { + position: absolute; + top: 0; + left: 0; +} + +.ui.comments .comment > .comments .comment { + border: none; + border-top: none; + background: none; +} + +.ui.comments .comment .avatar { + float: left; + width: 2.5em; +} + +.ui.comments .comment > .content { + display: block; +} + +.ui.comments .comment > .avatar ~ .content { + margin-left: 3.5em; +} + +.ui.comments .comment .author { + font-size: 1em; + font-weight: 500; +} + +.ui.comments .comment a.author { + cursor: pointer; +} + +.ui.comments .comment .metadata { + display: inline-block; + margin-left: 0.5em; + font-size: 0.875em; +} + +.ui.comments .comment .metadata > * { + display: inline-block; + margin: 0 0.5em 0 0; +} + +.ui.comments .comment .metadata > :last-child { + margin-right: 0; +} + +.ui.comments .comment .text { + margin: 0.25em 0 0.5em; + font-size: 1em; + word-wrap: break-word; + line-height: 1.3; +} diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index a026f9c6b6..8919abfec0 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -29,10 +29,6 @@ color: var(--color-tooltip-text); } -.tippy-box[data-theme="menu"] .ui.menu { - border: none; -} - .tippy-content { position: relative; padding: 1rem; diff --git a/web_src/css/organization.css b/web_src/css/org.css similarity index 99% rename from web_src/css/organization.css rename to web_src/css/org.css index 1b10ba157e..eb2dd8a4d9 100644 --- a/web_src/css/organization.css +++ b/web_src/css/org.css @@ -170,7 +170,7 @@ .organization.members .list .item .ui.avatar { width: 48px; - height: auto; + height: 48px; margin-right: 1rem; align-self: flex-start; } diff --git a/web_src/css/repository.css b/web_src/css/repo.css similarity index 98% rename from web_src/css/repository.css rename to web_src/css/repo.css index 0d81d65110..eafe022cee 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repo.css @@ -691,11 +691,6 @@ margin-right: 5px; } -.repository.view.issue .merge.box .timeline-avatar { - margin-top: 3px; - margin-left: 4px; -} - .repository.view.issue .merge.box .branch-update.grid .row { padding-bottom: 1rem; } @@ -788,23 +783,11 @@ left: -68px; } -.repository.view.issue .comment-list .timeline-item .timeline-avatar img { - width: 40px !important; - height: 40px !important; -} - /* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */ .repository.view.issue .comment-list .timeline-item .inline-timeline-avatar { display: none; } -.repository.view.issue .comment-list .timeline-item img.avatar, -.repository.view.issue .comment-list .timeline-item .avatar img { - width: 20px; - height: 20px; - vertical-align: middle; -} - .repository.view.issue .comment-list .timeline-item:first-child:not(.commit) { padding-top: 0 !important; } @@ -1063,12 +1046,12 @@ .repository.view.issue .comment-list .code-comment { border: 1px solid transparent; - padding: 0.25rem 0.5rem; margin: 0; } -.repository.view.issue .comment-list .code-comment .content { - border: none !important; +/* fix fomantic's border-radius via :first-child with hidden elements */ +.collapsible-comment-box:has(.gt-hidden) { + border-radius: var(--border-radius) !important; } .repository.view.issue .comment-list .code-comment .comment-header { @@ -1091,13 +1074,7 @@ } .repository.view.issue .comment-list .comment > .avatar ~ .content { - margin-left: 3em; -} - -.repository.view.issue .comment-code-cloud .comment-list .code-comment img.avatar, -.repository.view.issue .comment-code-cloud .comment-list .comment img.avatar { - width: 28px; - height: 28px; + margin-left: 42px; } .repository.view.issue .comment-list .comment-code-cloud .segment.reactions { @@ -3085,6 +3062,7 @@ td.blob-excerpt { } .sidebar-item-link { + display: inline-flex; align-items: center; word-break: break-all; } @@ -3260,10 +3238,6 @@ td.blob-excerpt { margin-left: 6px; margin-right: 2px; } - .repository.view.issue .comment-list .timeline .inline-timeline-avatar img.avatar { - height: 24px; - width: 24px; - } .repository.view.issue .comment-list .timeline .comment-header { padding-left: 4px; } diff --git a/web_src/css/repository/issue-label.css b/web_src/css/repo/issue-label.css similarity index 100% rename from web_src/css/repository/issue-label.css rename to web_src/css/repo/issue-label.css diff --git a/web_src/css/repository/issue-list.css b/web_src/css/repo/issue-list.css similarity index 100% rename from web_src/css/repository/issue-list.css rename to web_src/css/repo/issue-list.css diff --git a/web_src/css/code/linebutton.css b/web_src/css/repo/linebutton.css similarity index 83% rename from web_src/css/code/linebutton.css rename to web_src/css/repo/linebutton.css index 1012b38ba9..a475138e6b 100644 --- a/web_src/css/code/linebutton.css +++ b/web_src/css/repo/linebutton.css @@ -4,6 +4,7 @@ .code-line-menu { width: auto !important; + border: none !important; /* the border is provided by tippy, not using the `.ui.menu` border */ } .code-line-button { diff --git a/web_src/css/repository/list-header.css b/web_src/css/repo/list-header.css similarity index 100% rename from web_src/css/repository/list-header.css rename to web_src/css/repo/list-header.css diff --git a/web_src/css/repository/release-tag.css b/web_src/css/repo/release-tag.css similarity index 100% rename from web_src/css/repository/release-tag.css rename to web_src/css/repo/release-tag.css diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css index c214406752..db0d4cfbb9 100644 --- a/web_src/css/shared/issuelist.css +++ b/web_src/css/shared/issuelist.css @@ -69,8 +69,6 @@ } .issue.list > .item .assignee img { - width: 20px; - height: 20px; margin-right: 2px; } diff --git a/web_src/css/svg.css b/web_src/css/svg.css deleted file mode 100644 index b63445eb4e..0000000000 --- a/web_src/css/svg.css +++ /dev/null @@ -1,9 +0,0 @@ -.svg { - display: inline-block; - vertical-align: text-top; - fill: currentcolor; -} - -.middle .svg { - vertical-align: middle; -} diff --git a/web_src/css/user.css b/web_src/css/user.css index 0a8b49b038..a7106599df 100644 --- a/web_src/css/user.css +++ b/web_src/css/user.css @@ -39,16 +39,13 @@ } .user.profile .ui.card #profile-avatar { - background: none; padding: 1rem 1rem 0.25rem; justify-content: center; } .user.profile .ui.card #profile-avatar img { - width: 100%; + max-width: 100%; height: auto; - object-fit: contain; - margin: 0; } @media (max-width: 767px) { @@ -124,10 +121,6 @@ object-fit: contain; } -.user.notification table button { - padding: 3px 3px 3px 5px; -} - #notification_div .tab.segment { overflow-x: auto; } diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index f48201b46a..ef864dadf2 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -4623,1384 +4623,6 @@ /******************************* Site Overrides *******************************/ -/*! - * # Fomantic-UI - Card - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Standard -*******************************/ - -/*-------------- - Card ----------------*/ - -.ui.cards > .card, -.ui.card { - max-width: 100%; - position: relative; - display: flex; - flex-direction: column; - width: 290px; - min-height: 0; - background: #FFFFFF; - padding: 0; - border: none; - border-radius: 0.28571429rem; - box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5; - transition: box-shadow 0.1s ease, transform 0.1s ease; - z-index: ''; - word-wrap: break-word; -} - -.ui.card { - margin: 1em 0; -} - -.ui.cards > .card a, -.ui.card a { - cursor: pointer; -} - -.ui.card:first-child { - margin-top: 0; -} - -.ui.card:last-child { - margin-bottom: 0; -} - -/*-------------- - Cards ----------------*/ - -.ui.cards { - display: flex; - margin: -0.875em -0.5em; - flex-wrap: wrap; -} - -.ui.cards > .card { - display: flex; - margin: 0.875em 0.5em; - float: none; -} - -/* Clearing */ - -.ui.cards:after, -.ui.card:after { - display: block; - content: ' '; - height: 0; - clear: both; - overflow: hidden; - visibility: hidden; -} - -/* Consecutive Card Groups Preserve Row Spacing */ - -.ui.cards ~ .ui.cards { - margin-top: 0.875em; -} - -/*-------------- - Rounded Edges ----------------*/ - -.ui.cards > .card > :first-child, -.ui.card > :first-child { - border-radius: 0.28571429rem 0.28571429rem 0 0 !important; - border-top: none !important; -} - -.ui.cards > .card > :last-child, -.ui.card > :last-child { - border-radius: 0 0 0.28571429rem 0.28571429rem !important; -} - -.ui.cards > .card > :only-child, -.ui.card > :only-child { - border-radius: 0.28571429rem !important; -} - -/*-------------- - Images ----------------*/ - -.ui.cards > .card > .image, -.ui.card > .image { - position: relative; - display: block; - flex: 0 0 auto; - padding: 0; - background: rgba(0, 0, 0, 0.05); -} - -.ui.cards > .card > .image > img, -.ui.card > .image > img { - display: block; - width: 100%; - height: auto; - border-radius: inherit; -} - -.ui.cards > .card > .image:not(.ui) > img, -.ui.card > .image:not(.ui) > img { - border: none; -} - -/*-------------- - Content ----------------*/ - -.ui.cards > .card > .content, -.ui.card > .content { - flex-grow: 1; - border: none; - border-top: 1px solid rgba(34, 36, 38, 0.1); - background: none; - margin: 0; - padding: 1em 1em; - box-shadow: none; - font-size: 1em; - border-radius: 0; -} - -.ui.cards > .card > .content:after, -.ui.card > .content:after { - display: block; - content: ' '; - height: 0; - clear: both; - overflow: hidden; - visibility: hidden; -} - -.ui.cards > .card > .content > .header, -.ui.card > .content > .header { - display: block; - margin: ''; - font-family: var(--fonts-regular); - color: rgba(0, 0, 0, 0.85); -} - -/* Default Header Size */ - -.ui.cards > .card > .content > .header:not(.ui), -.ui.card > .content > .header:not(.ui) { - font-weight: 500; - font-size: 1.28571429em; - margin-top: -0.21425em; - line-height: 1.28571429em; -} - -.ui.cards > .card > .content > .meta + .description, -.ui.cards > .card > .content > .header + .description, -.ui.card > .content > .meta + .description, -.ui.card > .content > .header + .description { - margin-top: 0.5em; -} - -/*---------------- - Floated Content ------------------*/ - -.ui.cards > .card [class*="left floated"], -.ui.card [class*="left floated"] { - float: left; -} - -.ui.cards > .card [class*="right floated"], -.ui.card [class*="right floated"] { - float: right; -} - -/*-------------- - Aligned ----------------*/ - -.ui.cards > .card [class*="left aligned"], -.ui.card [class*="left aligned"] { - text-align: left; -} - -.ui.cards > .card [class*="center aligned"], -.ui.card [class*="center aligned"] { - text-align: center; -} - -.ui.cards > .card [class*="right aligned"], -.ui.card [class*="right aligned"] { - text-align: right; -} - -/*-------------- - Content Image ----------------*/ - -.ui.cards > .card .content img, -.ui.card .content img { - display: inline-block; - vertical-align: middle; - width: ''; -} - -.ui.cards > .card img.avatar, -.ui.cards > .card .avatar img, -.ui.card img.avatar, -.ui.card .avatar img { - width: 2em; - height: 2em; - border-radius: 500rem; -} - -/*-------------- - Description ----------------*/ - -.ui.cards > .card > .content > .description, -.ui.card > .content > .description { - clear: both; - color: rgba(0, 0, 0, 0.68); -} - -/*-------------- - Paragraph ----------------*/ - -.ui.cards > .card > .content p, -.ui.card > .content p { - margin: 0 0 0.5em; -} - -.ui.cards > .card > .content p:last-child, -.ui.card > .content p:last-child { - margin-bottom: 0; -} - -/*-------------- - Meta ----------------*/ - -.ui.cards > .card .meta, -.ui.card .meta { - font-size: 1em; - color: rgba(0, 0, 0, 0.4); -} - -.ui.cards > .card .meta *, -.ui.card .meta * { - margin-right: 0.3em; -} - -.ui.cards > .card .meta :last-child, -.ui.card .meta :last-child { - margin-right: 0; -} - -.ui.cards > .card .meta [class*="right floated"], -.ui.card .meta [class*="right floated"] { - margin-right: 0; - margin-left: 0.3em; -} - -/*-------------- - Links ----------------*/ - -/* Generic */ - -.ui.cards > .card > .content a:not(.ui), -.ui.card > .content a:not(.ui) { - color: ''; - transition: color 0.1s ease; -} - -.ui.cards > .card > .content a:not(.ui):hover, -.ui.card > .content a:not(.ui):hover { - color: ''; -} - -/* Header */ - -.ui.cards > .card > .content > a.header, -.ui.card > .content > a.header { - color: rgba(0, 0, 0, 0.85); -} - -.ui.cards > .card > .content > a.header:hover, -.ui.card > .content > a.header:hover { - color: #1e70bf; -} - -/* Meta */ - -.ui.cards > .card .meta > a:not(.ui), -.ui.card .meta > a:not(.ui) { - color: rgba(0, 0, 0, 0.4); -} - -.ui.cards > .card .meta > a:not(.ui):hover, -.ui.card .meta > a:not(.ui):hover { - color: rgba(0, 0, 0, 0.87); -} - -/*-------------- - Buttons ----------------*/ - -.ui.cards > .card > .buttons, -.ui.card > .buttons, -.ui.cards > .card > .button, -.ui.card > .button { - margin: 0 -1px; - width: calc(100% + 2px); -} - -.ui.cards > .card > .buttons:last-child, -.ui.card > .buttons:last-child, -.ui.cards > .card > .button:last-child, -.ui.card > .button:last-child { - margin-bottom: -1px; -} - -/*-------------- - Dimmer ----------------*/ - -.ui.cards > .card .dimmer, -.ui.card .dimmer { - background: ''; - z-index: 10; -} - -/*-------------- - Labels ----------------*/ - -/*-----Star----- */ - -/* Icon */ - -.ui.cards > .card > .content .star.icon, -.ui.card > .content .star.icon { - cursor: pointer; - opacity: 0.75; - transition: color 0.1s ease; -} - -.ui.cards > .card > .content .star.icon:hover, -.ui.card > .content .star.icon:hover { - opacity: 1; - color: #FFB70A; -} - -.ui.cards > .card > .content .active.star.icon, -.ui.card > .content .active.star.icon { - color: #FFE623; -} - -/*-----Like----- */ - -/* Icon */ - -.ui.cards > .card > .content .like.icon, -.ui.card > .content .like.icon { - cursor: pointer; - opacity: 0.75; - transition: color 0.1s ease; -} - -.ui.cards > .card > .content .like.icon:hover, -.ui.card > .content .like.icon:hover { - opacity: 1; - color: #FF2733; -} - -.ui.cards > .card > .content .active.like.icon, -.ui.card > .content .active.like.icon { - color: #FF2733; -} - -/*---------------- - Extra Content ------------------*/ - -.ui.cards > .card > .extra, -.ui.card > .extra { - max-width: 100%; - min-height: 0 !important; - flex-grow: 0; - border-top: 1px solid rgba(0, 0, 0, 0.05) !important; - position: static; - background: none; - width: auto; - margin: 0 0; - padding: 0.75em 1em; - top: 0; - left: 0; - color: rgba(0, 0, 0, 0.4); - box-shadow: none; - transition: color 0.1s ease; -} - -.ui.cards > .card > .extra a:not(.ui), -.ui.card > .extra a:not(.ui) { - color: rgba(0, 0, 0, 0.4); -} - -.ui.cards > .card > .extra a:not(.ui):hover, -.ui.card > .extra a:not(.ui):hover { - color: #1e70bf; -} - -/******************************* - Variations -*******************************/ - -/*------------------- - Horizontal - --------------------*/ - -.ui.horizontal.cards > .card, -.ui.card.horizontal { - flex-direction: row; - flex-wrap: wrap; - min-width: 270px; - width: 400px; - max-width: 100%; -} - -.ui.horizontal.cards > .card > .image, -.ui.card.horizontal > .image { - border-radius: 0.28571429rem 0 0 0.28571429rem; - width: 150px; -} - -.ui.horizontal.cards > .card > .image > img, -.ui.card.horizontal > .image > img { - background-size: cover; - background-repeat: no-repeat; - background-position: center; - justify-content: center; - align-items: center; - display: flex; - width: 100%; - height: 100%; - border-radius: 0.28571429rem 0 0 0.28571429rem; -} - -.ui.horizontal.cards > .card > .image:last-child > img, -.ui.card.horizontal > .image:last-child > img { - border-radius: 0 0.28571429rem 0.28571429rem 0; -} - -.ui.horizontal.cards > .card > .content, -.ui.horizontal.card > .content { - flex-basis: 1px; -} - -.ui.horizontal.cards > .card > .extra, -.ui.horizontal.card > .extra { - flex-basis: 100%; -} - -/*------------------- - Raised - --------------------*/ - -.ui.raised.cards > .card, -.ui.raised.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); -} - -.ui.raised.cards a.card:hover, -.ui.link.cards .raised.card:hover, -a.ui.raised.card:hover, -.ui.link.raised.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25); -} - -/*------------------- - Centered - --------------------*/ - -.ui.centered.cards { - justify-content: center; -} - -.ui.centered.card { - margin-left: auto; - margin-right: auto; -} - -/*------------------- - Fluid - --------------------*/ - -.ui.fluid.card { - width: 100%; - max-width: 9999px; -} - -/*------------------- - Link - --------------------*/ - -.ui.cards a.card, -.ui.link.cards .card, -a.ui.card, -.ui.link.card { - transform: none; -} - -.ui.cards a.card:hover, -.ui.link.cards .card:not(.icon):hover, -a.ui.card:hover, -.ui.link.card:hover { - cursor: pointer; - z-index: 5; - background: #FFFFFF; - border: none; - box-shadow: 0 1px 3px 0 #BCBDBD, 0 0 0 1px #D4D4D5; - transform: translateY(-3px); -} - -/*------------------- - Colors ---------------------*/ - -.ui.primary.cards > .card, -.ui.cards > .primary.card, -.ui.primary.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5; -} - -.ui.primary.cards > .card:hover, -.ui.cards > .primary.card:hover, -.ui.primary.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.primary.cards > .card, -.ui.inverted.cards > .primary.card, -.ui.inverted.primary.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555; -} - -.ui.inverted.primary.cards > .card:hover, -.ui.inverted.cards > .primary.card:hover, -.ui.inverted.primary.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555; -} - -.ui.secondary.cards > .card, -.ui.cards > .secondary.card, -.ui.secondary.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5; -} - -.ui.secondary.cards > .card:hover, -.ui.cards > .secondary.card:hover, -.ui.secondary.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.secondary.cards > .card, -.ui.inverted.cards > .secondary.card, -.ui.inverted.secondary.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555; -} - -.ui.inverted.secondary.cards > .card:hover, -.ui.inverted.cards > .secondary.card:hover, -.ui.inverted.secondary.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6e6e6e, 0 0 0 1px #555555; -} - -.ui.red.cards > .card, -.ui.cards > .red.card, -.ui.red.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #DB2828, 0 1px 3px 0 #D4D4D5; -} - -.ui.red.cards > .card:hover, -.ui.cards > .red.card:hover, -.ui.red.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #d01919, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.red.cards > .card, -.ui.inverted.cards > .red.card, -.ui.inverted.red.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF695E, 0 0 0 1px #555555; -} - -.ui.inverted.red.cards > .card:hover, -.ui.inverted.cards > .red.card:hover, -.ui.inverted.red.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff392b, 0 0 0 1px #555555; -} - -.ui.orange.cards > .card, -.ui.cards > .orange.card, -.ui.orange.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #F2711C, 0 1px 3px 0 #D4D4D5; -} - -.ui.orange.cards > .card:hover, -.ui.cards > .orange.card:hover, -.ui.orange.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #f26202, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.orange.cards > .card, -.ui.inverted.cards > .orange.card, -.ui.inverted.orange.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF851B, 0 0 0 1px #555555; -} - -.ui.inverted.orange.cards > .card:hover, -.ui.inverted.cards > .orange.card:hover, -.ui.inverted.orange.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #e76b00, 0 0 0 1px #555555; -} - -.ui.yellow.cards > .card, -.ui.cards > .yellow.card, -.ui.yellow.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #FBBD08, 0 1px 3px 0 #D4D4D5; -} - -.ui.yellow.cards > .card:hover, -.ui.cards > .yellow.card:hover, -.ui.yellow.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #eaae00, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.yellow.cards > .card, -.ui.inverted.cards > .yellow.card, -.ui.inverted.yellow.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FFE21F, 0 0 0 1px #555555; -} - -.ui.inverted.yellow.cards > .card:hover, -.ui.inverted.cards > .yellow.card:hover, -.ui.inverted.yellow.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ebcd00, 0 0 0 1px #555555; -} - -.ui.olive.cards > .card, -.ui.cards > .olive.card, -.ui.olive.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #B5CC18, 0 1px 3px 0 #D4D4D5; -} - -.ui.olive.cards > .card:hover, -.ui.cards > .olive.card:hover, -.ui.olive.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #a7bd0d, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.olive.cards > .card, -.ui.inverted.cards > .olive.card, -.ui.inverted.olive.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D9E778, 0 0 0 1px #555555; -} - -.ui.inverted.olive.cards > .card:hover, -.ui.inverted.cards > .olive.card:hover, -.ui.inverted.olive.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #d2e745, 0 0 0 1px #555555; -} - -.ui.green.cards > .card, -.ui.cards > .green.card, -.ui.green.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #21BA45, 0 1px 3px 0 #D4D4D5; -} - -.ui.green.cards > .card:hover, -.ui.cards > .green.card:hover, -.ui.green.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #16ab39, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.green.cards > .card, -.ui.inverted.cards > .green.card, -.ui.inverted.green.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #2ECC40, 0 0 0 1px #555555; -} - -.ui.inverted.green.cards > .card:hover, -.ui.inverted.cards > .green.card:hover, -.ui.inverted.green.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #1ea92e, 0 0 0 1px #555555; -} - -.ui.teal.cards > .card, -.ui.cards > .teal.card, -.ui.teal.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #00B5AD, 0 1px 3px 0 #D4D4D5; -} - -.ui.teal.cards > .card:hover, -.ui.cards > .teal.card:hover, -.ui.teal.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #009c95, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.teal.cards > .card, -.ui.inverted.cards > .teal.card, -.ui.inverted.teal.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #6DFFFF, 0 0 0 1px #555555; -} - -.ui.inverted.teal.cards > .card:hover, -.ui.inverted.cards > .teal.card:hover, -.ui.inverted.teal.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #3affff, 0 0 0 1px #555555; -} - -.ui.blue.cards > .card, -.ui.cards > .blue.card, -.ui.blue.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #2185D0, 0 1px 3px 0 #D4D4D5; -} - -.ui.blue.cards > .card:hover, -.ui.cards > .blue.card:hover, -.ui.blue.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1678c2, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.blue.cards > .card, -.ui.inverted.cards > .blue.card, -.ui.inverted.blue.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #54C8FF, 0 0 0 1px #555555; -} - -.ui.inverted.blue.cards > .card:hover, -.ui.inverted.cards > .blue.card:hover, -.ui.inverted.blue.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #21b8ff, 0 0 0 1px #555555; -} - -.ui.violet.cards > .card, -.ui.cards > .violet.card, -.ui.violet.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #6435C9, 0 1px 3px 0 #D4D4D5; -} - -.ui.violet.cards > .card:hover, -.ui.cards > .violet.card:hover, -.ui.violet.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #5829bb, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.violet.cards > .card, -.ui.inverted.cards > .violet.card, -.ui.inverted.violet.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #A291FB, 0 0 0 1px #555555; -} - -.ui.inverted.violet.cards > .card:hover, -.ui.inverted.cards > .violet.card:hover, -.ui.inverted.violet.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #745aff, 0 0 0 1px #555555; -} - -.ui.purple.cards > .card, -.ui.cards > .purple.card, -.ui.purple.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A333C8, 0 1px 3px 0 #D4D4D5; -} - -.ui.purple.cards > .card:hover, -.ui.cards > .purple.card:hover, -.ui.purple.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #9627ba, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.purple.cards > .card, -.ui.inverted.cards > .purple.card, -.ui.inverted.purple.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DC73FF, 0 0 0 1px #555555; -} - -.ui.inverted.purple.cards > .card:hover, -.ui.inverted.cards > .purple.card:hover, -.ui.inverted.purple.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #cf40ff, 0 0 0 1px #555555; -} - -.ui.pink.cards > .card, -.ui.cards > .pink.card, -.ui.pink.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #E03997, 0 1px 3px 0 #D4D4D5; -} - -.ui.pink.cards > .card:hover, -.ui.cards > .pink.card:hover, -.ui.pink.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #e61a8d, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.pink.cards > .card, -.ui.inverted.cards > .pink.card, -.ui.inverted.pink.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #FF8EDF, 0 0 0 1px #555555; -} - -.ui.inverted.pink.cards > .card:hover, -.ui.inverted.cards > .pink.card:hover, -.ui.inverted.pink.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #ff5bd1, 0 0 0 1px #555555; -} - -.ui.brown.cards > .card, -.ui.cards > .brown.card, -.ui.brown.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #A5673F, 0 1px 3px 0 #D4D4D5; -} - -.ui.brown.cards > .card:hover, -.ui.cards > .brown.card:hover, -.ui.brown.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #975b33, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.brown.cards > .card, -.ui.inverted.cards > .brown.card, -.ui.inverted.brown.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #D67C1C, 0 0 0 1px #555555; -} - -.ui.inverted.brown.cards > .card:hover, -.ui.inverted.cards > .brown.card:hover, -.ui.inverted.brown.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #b0620f, 0 0 0 1px #555555; -} - -.ui.grey.cards > .card, -.ui.cards > .grey.card, -.ui.grey.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #767676, 0 1px 3px 0 #D4D4D5; -} - -.ui.grey.cards > .card:hover, -.ui.cards > .grey.card:hover, -.ui.grey.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #838383, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.grey.cards > .card, -.ui.inverted.cards > .grey.card, -.ui.inverted.grey.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #DCDDDE, 0 0 0 1px #555555; -} - -.ui.inverted.grey.cards > .card:hover, -.ui.inverted.cards > .grey.card:hover, -.ui.inverted.grey.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #c2c4c5, 0 0 0 1px #555555; -} - -.ui.black.cards > .card, -.ui.cards > .black.card, -.ui.black.card { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #1B1C1D, 0 1px 3px 0 #D4D4D5; -} - -.ui.black.cards > .card:hover, -.ui.cards > .black.card:hover, -.ui.black.card:hover { - box-shadow: 0 0 0 1px #D4D4D5, 0 2px 0 0 #27292a, 0 1px 3px 0 #BCBDBD; -} - -.ui.inverted.black.cards > .card, -.ui.inverted.cards > .black.card, -.ui.inverted.black.card { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #545454, 0 0 0 1px #555555; -} - -.ui.inverted.black.cards > .card:hover, -.ui.inverted.cards > .black.card:hover, -.ui.inverted.black.card:hover { - box-shadow: 0 1px 3px 0 #555555, 0 2px 0 0 #000000, 0 0 0 1px #555555; -} - -/*-------------- - Card Count ----------------*/ - -.ui.one.cards { - margin-left: 0; - margin-right: 0; -} - -.ui.one.cards > .card { - width: 100%; -} - -.ui.two.cards { - margin-left: -1em; - margin-right: -1em; -} - -.ui.two.cards > .card { - width: calc(50% - 2em); - margin-left: 1em; - margin-right: 1em; -} - -.ui.three.cards { - margin-left: -1em; - margin-right: -1em; -} - -.ui.three.cards > .card { - width: calc(33.33333333333333% - 2em); - margin-left: 1em; - margin-right: 1em; -} - -.ui.four.cards { - margin-left: -0.75em; - margin-right: -0.75em; -} - -.ui.four.cards > .card { - width: calc(25% - 1.5em); - margin-left: 0.75em; - margin-right: 0.75em; -} - -.ui.five.cards { - margin-left: -0.75em; - margin-right: -0.75em; -} - -.ui.five.cards > .card { - width: calc(20% - 1.5em); - margin-left: 0.75em; - margin-right: 0.75em; -} - -.ui.six.cards { - margin-left: -0.75em; - margin-right: -0.75em; -} - -.ui.six.cards > .card { - width: calc(16.666666666666664% - 1.5em); - margin-left: 0.75em; - margin-right: 0.75em; -} - -.ui.seven.cards { - margin-left: -0.5em; - margin-right: -0.5em; -} - -.ui.seven.cards > .card { - width: calc(14.285714285714285% - 1em); - margin-left: 0.5em; - margin-right: 0.5em; -} - -.ui.eight.cards { - margin-left: -0.5em; - margin-right: -0.5em; -} - -.ui.eight.cards > .card { - width: calc(12.5% - 1em); - margin-left: 0.5em; - margin-right: 0.5em; - font-size: 11px; -} - -.ui.nine.cards { - margin-left: -0.5em; - margin-right: -0.5em; -} - -.ui.nine.cards > .card { - width: calc(11.11111111111111% - 1em); - margin-left: 0.5em; - margin-right: 0.5em; - font-size: 10px; -} - -.ui.ten.cards { - margin-left: -0.5em; - margin-right: -0.5em; -} - -.ui.ten.cards > .card { - width: calc(10% - 1em); - margin-left: 0.5em; - margin-right: 0.5em; -} - -/*------------------- - Doubling - --------------------*/ - -/* Mobile Only */ - -@media only screen and (max-width: 767.98px) { - .ui.two.doubling.cards { - margin-left: 0; - margin-right: 0; - } - - .ui.two.doubling.cards > .card { - width: 100%; - margin-left: 0; - margin-right: 0; - } - - .ui.three.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.three.doubling.cards > .card { - width: calc(50% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.four.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.four.doubling.cards > .card { - width: calc(50% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.five.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.five.doubling.cards > .card { - width: calc(50% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.six.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.six.doubling.cards > .card { - width: calc(50% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.seven.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.seven.doubling.cards > .card { - width: calc(33.33333333333333% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.eight.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.eight.doubling.cards > .card { - width: calc(33.33333333333333% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.nine.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.nine.doubling.cards > .card { - width: calc(33.33333333333333% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.ten.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.ten.doubling.cards > .card { - width: calc(33.33333333333333% - 2em); - margin-left: 1em; - margin-right: 1em; - } -} - -/* Tablet Only */ - -@media only screen and (min-width: 768px) and (max-width: 991.98px) { - .ui.two.doubling.cards { - margin-left: 0; - margin-right: 0; - } - - .ui.two.doubling.cards > .card { - width: 100%; - margin-left: 0; - margin-right: 0; - } - - .ui.three.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.three.doubling.cards > .card { - width: calc(50% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.four.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.four.doubling.cards > .card { - width: calc(50% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.five.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.five.doubling.cards > .card { - width: calc(33.33333333333333% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.six.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.six.doubling.cards > .card { - width: calc(33.33333333333333% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.eight.doubling.cards { - margin-left: -1em; - margin-right: -1em; - } - - .ui.eight.doubling.cards > .card { - width: calc(33.33333333333333% - 2em); - margin-left: 1em; - margin-right: 1em; - } - - .ui.eight.doubling.cards { - margin-left: -0.75em; - margin-right: -0.75em; - } - - .ui.eight.doubling.cards > .card { - width: calc(25% - 1.5em); - margin-left: 0.75em; - margin-right: 0.75em; - } - - .ui.nine.doubling.cards { - margin-left: -0.75em; - margin-right: -0.75em; - } - - .ui.nine.doubling.cards > .card { - width: calc(25% - 1.5em); - margin-left: 0.75em; - margin-right: 0.75em; - } - - .ui.ten.doubling.cards { - margin-left: -0.75em; - margin-right: -0.75em; - } - - .ui.ten.doubling.cards > .card { - width: calc(20% - 1.5em); - margin-left: 0.75em; - margin-right: 0.75em; - } -} - -/*------------------- - Stackable - --------------------*/ - -@media only screen and (max-width: 767.98px) { - .ui.stackable.cards { - display: block !important; - } - - .ui.stackable.cards .card:first-child { - margin-top: 0 !important; - } - - .ui.stackable.cards > .card { - display: block !important; - height: auto !important; - margin: 1em 1em; - padding: 0 !important; - width: calc(100% - 2em) !important; - } -} - -/*-------------- - Size ----------------*/ - -.ui.cards > .card { - font-size: 1em; -} - -.ui.mini.cards .card { - font-size: 0.78571429rem; -} - -.ui.tiny.cards .card { - font-size: 0.85714286rem; -} - -.ui.small.cards .card { - font-size: 0.92857143rem; -} - -.ui.large.cards .card { - font-size: 1.14285714rem; -} - -.ui.big.cards .card { - font-size: 1.28571429rem; -} - -.ui.huge.cards .card { - font-size: 1.42857143rem; -} - -.ui.massive.cards .card { - font-size: 1.71428571rem; -} - -/*----------------- - Inverted - ------------------*/ - -.ui.inverted.cards > .card, -.ui.inverted.card { - background: #1B1C1D; - box-shadow: 0 1px 3px 0 #555555, 0 0 0 1px #555555; -} - -/* Content */ - -.ui.inverted.cards > .card > .content, -.ui.inverted.card > .content { - border-top: 1px solid rgba(255, 255, 255, 0.15); -} - -/* Header */ - -.ui.inverted.cards > .card > .content > .header, -.ui.inverted.card > .content > .header { - color: rgba(255, 255, 255, 0.9); -} - -/* Description */ - -.ui.inverted.cards > .card > .content > .description, -.ui.inverted.card > .content > .description { - color: rgba(255, 255, 255, 0.8); -} - -/* Meta */ - -.ui.inverted.cards > .card .meta, -.ui.inverted.card .meta { - color: rgba(255, 255, 255, 0.7); -} - -.ui.inverted.cards > .card .meta > a:not(.ui), -.ui.inverted.card .meta > a:not(.ui) { - color: rgba(255, 255, 255, 0.7); -} - -.ui.inverted.cards > .card .meta > a:not(.ui):hover, -.ui.inverted.card .meta > a:not(.ui):hover { - color: #ffffff; -} - -/* Extra */ - -.ui.inverted.cards > .card > .extra, -.ui.inverted.card > .extra { - border-top: 1px solid rgba(255, 255, 255, 0.15) !important; - color: rgba(255, 255, 255, 0.7); -} - -.ui.inverted.cards > .card > .extra a:not(.ui), -.ui.inverted.card > .extra a:not(.ui) { - color: rgba(255, 255, 255, 0.5); -} - -.ui.inverted.cards > .card > .extra a:not(.ui):hover, -.ui.inverted.card > .extra a:not(.ui):hover { - color: #1e70bf; -} - -/* Link card(s) */ - -.ui.inverted.cards a.card:hover, -.ui.inverted.link.cards .card:not(.icon):hover, -a.inverted.ui.card:hover, -.ui.inverted.link.card:hover { - background: #1B1C1D; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - User Variable Overrides -*******************************/ /*! * # Fomantic-UI - Checkbox * http://github.com/fomantic/Fomantic-UI/ @@ -6800,317 +5422,6 @@ a.inverted.ui.card:hover, /******************************* Site Overrides *******************************/ -/*! - * # Fomantic-UI - Comment - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Standard -*******************************/ - -/*-------------- - Comments ----------------*/ - -.ui.comments { - margin: 1.5em 0; - max-width: 650px; -} - -.ui.comments:first-child { - margin-top: 0; -} - -.ui.comments:last-child { - margin-bottom: 0; -} - -/*-------------- - Comment ----------------*/ - -.ui.comments .comment { - position: relative; - background: none; - margin: 0.5em 0 0; - padding: 0.5em 0 0; - border: none; - border-top: none; - line-height: 1.2; -} - -.ui.comments .comment:first-child { - margin-top: 0; - padding-top: 0; -} - -/*-------------------- - Nested Comments ----------------------*/ - -.ui.comments .comment > .comments { - margin: 0 0 0.5em 0.5em; - padding: 1em 0 1em 1em; -} - -.ui.comments .comment > .comments:before { - position: absolute; - top: 0; - left: 0; -} - -.ui.comments .comment > .comments .comment { - border: none; - border-top: none; - background: none; -} - -/*-------------- - Avatar ----------------*/ - -.ui.comments .comment .avatar { - display: block; - width: 2.5em; - height: auto; - float: left; - margin: 0.2em 0 0; -} - -.ui.comments .comment img.avatar, -.ui.comments .comment .avatar img { - display: block; - margin: 0 auto; - width: 100%; - height: 100%; - border-radius: 0.25rem; -} - -/*-------------- - Content ----------------*/ - -.ui.comments .comment > .content { - display: block; -} - -/* If there is an avatar move content over */ - -.ui.comments .comment > .avatar ~ .content { - margin-left: 3.5em; -} - -/*-------------- - Author ----------------*/ - -.ui.comments .comment .author { - font-size: 1em; - color: rgba(0, 0, 0, 0.87); - font-weight: 500; -} - -.ui.comments .comment a.author { - cursor: pointer; -} - -.ui.comments .comment a.author:hover { - color: #1e70bf; -} - -/*-------------- - Metadata ----------------*/ - -.ui.comments .comment .metadata { - display: inline-block; - margin-left: 0.5em; - color: rgba(0, 0, 0, 0.4); - font-size: 0.875em; -} - -.ui.comments .comment .metadata > * { - display: inline-block; - margin: 0 0.5em 0 0; -} - -.ui.comments .comment .metadata > :last-child { - margin-right: 0; -} - -/*-------------------- - Comment Text ----------------------*/ - -.ui.comments .comment .text { - margin: 0.25em 0 0.5em; - font-size: 1em; - word-wrap: break-word; - color: rgba(0, 0, 0, 0.87); - line-height: 1.3; -} - -/*-------------------- - User Actions ----------------------*/ - -.ui.comments .comment .actions { - font-size: 0.875em; -} - -.ui.comments .comment .actions a { - cursor: pointer; - display: inline-block; - margin: 0 0.75em 0 0; - color: rgba(0, 0, 0, 0.4); -} - -.ui.comments .comment .actions a:last-child { - margin-right: 0; -} - -.ui.comments .comment .actions a.active, -.ui.comments .comment .actions a:hover { - color: rgba(0, 0, 0, 0.8); -} - -/*-------------------- - Reply Form ----------------------*/ - -.ui.comments > .reply.form { - margin-top: 1em; -} - -.ui.comments .comment .reply.form { - width: 100%; - margin-top: 1em; -} - -.ui.comments .reply.form textarea { - font-size: 1em; - height: 12em; -} - -/******************************* - State -*******************************/ - -.ui.collapsed.comments, -.ui.comments .collapsed.comments, -.ui.comments .collapsed.comment { - display: none; -} - -/******************************* - Variations -*******************************/ - -/*-------------------- - Threaded - ---------------------*/ - -.ui.threaded.comments .comment > .comments { - margin: -1.5em 0 -1em 1.25em; - padding: 3em 0 2em 2.25em; - box-shadow: -1px 0 0 rgba(34, 36, 38, 0.15); -} - -/*-------------------- - Minimal - ---------------------*/ - -.ui.minimal.comments .comment .actions { - opacity: 0; - position: absolute; - top: 0; - right: 0; - left: auto; - transition: opacity 0.2s ease; - transition-delay: 0.1s; -} - -.ui.minimal.comments .comment > .content:hover > .actions { - opacity: 1; -} - -/*------------------- - Sizes ---------------------*/ - -.ui.comments { - font-size: 1rem; -} - -.ui.mini.comments { - font-size: 0.78571429rem; -} - -.ui.tiny.comments { - font-size: 0.85714286rem; -} - -.ui.small.comments { - font-size: 0.92857143rem; -} - -.ui.large.comments { - font-size: 1.14285714rem; -} - -.ui.big.comments { - font-size: 1.28571429rem; -} - -.ui.huge.comments { - font-size: 1.42857143rem; -} - -.ui.massive.comments { - font-size: 1.71428571rem; -} - -/*------------------- - Inverted - --------------------*/ - -.ui.inverted.comments .comment { - background-color: #1B1C1D; -} - -.ui.inverted.comments .comment .author, -.ui.inverted.comments .comment .text { - color: rgba(255, 255, 255, 0.9); -} - -.ui.inverted.comments .comment .metadata, -.ui.inverted.comments .comment .actions a { - color: rgba(255, 255, 255, 0.7); -} - -.ui.inverted.comments .comment a.author:hover, -.ui.inverted.comments .comment .actions a.active, -.ui.inverted.comments .comment .actions a:hover { - color: #ffffff; -} - -.ui.inverted.threaded.comments .comment > .comments { - box-shadow: -1px 0 0 #555555; -} - -/******************************* - Theme Overrides -*******************************/ - -/******************************* - User Variable Overrides -*******************************/ /*! * # Fomantic-UI - Container * http://github.com/fomantic/Fomantic-UI/ diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index 738f53d297..a2f8e38727 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -23,9 +23,7 @@ "components": [ "api", "button", - "card", "checkbox", - "comment", "container", "dimmer", "divider", diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue index 8852931891..0786cb60a9 100644 --- a/web_src/js/components/ActionRunStatus.vue +++ b/web_src/js/components/ActionRunStatus.vue @@ -2,7 +2,7 @@ Please also update the template file above if this vue is modified. -->